CSS site has things overlapping in FireFox or Safari
Article ID: KB101643
Question: My web site with CSS-based layout looks fine in IE,
but in FireFox or Safari there are portions of the text or content overlapping over others.
Answer: The problem is probably with a height
definition in the stylesheet. FireFox and Safari are more picky with heights - if
a height is defined, they will force the area to stay to that height so the content
spills out and overlaps over other content. IE is less picky and will resize everything
to fit your content and text.
Look for the offending area in your code and try to find the class or ID selector
that contains that content. It may look something like:
<div id="idname">
...
</div>
or:
<div class="classname">
...
</div>
Then, open the stylesheet (.css file) and look for the idname or classname.
ID selectors will start with a hash symbol (#idname) while
classes start with a period (.classname).
When you find the class or ID, you will most likely find that it has a
specific height applied - for example:
#top {
...
height: 100px;
}
Change the height to match the height of your new content and save the
stylesheet. You may also try height: auto; if you have variable content
in that area, but be sure to test thoroughly to make sure that doesn't
mess up anything else.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101643.htm
permalink to this article:
http://www.pixelmill.com/support/kb101643.htm
Back to top