On 11 Jan 2011, at 10:46, olivia antonin wrote:
> I have a real problem with my web pages, basically They don't render the same
> in Safari and firefox. The padding-bottom of the div information in the
> "home" page doesn't render the same in firefox as in Safari, and the same
> problem occur for the "about us" page too: the padding bottom of the div
> bonus has a white space. What do you think may be the issue. Please help
> me...I'm pretty new in using CSS and need some help.
>
> here are the link for the home page:
> http://www.expressionofmind.com/home.html about us
> page:http://www.expressionofmind.com/about.html and the link for the css
> files: http://www.expressionofmind.com/css.html
[supplied links fixed]
I'm afraid the problem lies in your expectations. Consistent alignment of the
bottom of elements whose content is variable, in this case text in two columns,
by use of padding or margins is not attainable. Not only do different browsers
render fonts at different heights and widths, but you have no control over the
base size. Zooming Safari in Zoom Text Only mode will show that the columns do
not survive resizing even in that browser.
A simple way to provide a background on the right column that continues to the
footerwould be the "Faux Column" method. This involves creating a background
image and applying it to vertically repeat on the element containing both main
content and sidebar, in this case #wrappercolum .
The image would need to be 800px wide and, because repeating, only 10px or so
high, coloured white for the first 510px and #0D2557 for the remaining 290px.
The css would be
#wrappercolum { background: #fff url(path/to/image.png) repeat-y; }
To maintain a 10px white space between the divs in the sidebar you could use a
border on the upper div. e.g.
#team {
background-color: #558D96;
border-bottom: 10px solid #FFFFFF; /* added */
line-height: 18px;
padding-top: 10px;
}
Hope this helps.
Jonny
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
