Firefox Problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

MCD -> Firefox Problem (5/13/2008 8:21:02)

I am trying to create a horizontal navigation list inside a navigation div but the navigation div collapses in Firefox. It works fine in IE 7. If I put text or normal links inside the navigation divs (a strip across the site) they work fine in FF. Can anyone tell me what must be done to keep the strip from collapsing in Firefox?

Here is the CSS

#outerWrapper #top_Navigation {
background-color: #eaeff5;
height: 101%;
padding: 0px 5px 0px 5px;
border-bottom: solid 1px #9bb6d2;
}

#outerWrapper #top_Navigation ul {
list-style-type: none;
width: 101%;
padding: 0px;
margin: 0px;
}

#outerWrapper #top_Navigation li {
float: left;
}

#outerWrapper #top_Navigation li a:link {
color: #eaeff5;
text-decoration: none;
display: block;
border: 1px solid #9bb6d2;
padding: 0px 0px 0px 0px;
background-color: #828ea6;
margin: 0px 2px 0px 0px;
}
#outerWrapper #top_Navigation li a:hover {
color: #eaeff5;
text-decoration: none;
border: 1px solid #9bb6d2;
background-color: #2d2e2e;
}


Here is the HTML

<div id="top_Navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

This is my first table free website and I'm going bald over one little problem.



Tailslide -> RE: Firefox Problem (5/13/2008 9:22:40)

Hi

It's not just Firefox (I know I'm being picky - but it's worth checking in Opera too just to see if it's really a FF problem or if it's an IE problem - if you see what I mean!).

The problem is that IE incorrectly expands divs to surround floats. Firefox, Opera etc don't. So when you get what looks like a collapsing div - it's usually because that div only contains floats and therefore, as far as the browser is concerned, has no height (or just has the height of the non-floated contents).

To get around this you've got a few choices. Either have some content after the floats clearing them - this will force the containing div to see the floats or, and probably easier is to add "overflow:hidden" to the containing div (your top_Navigation rule) that sorts it.

Do make sure you check that this doesn't have any nasty side effects in older browsers - sometimes IE5 misbehaves with overflow:hidden.



MCD -> RE: Firefox Problem (5/13/2008 9:34:22)

Thanks Tailside, I understand exactly what you are saying and what my options are. I must make a note of this for future reference.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.617188E-02