|
| |
|
|
MCD
Posts: 650
Joined: 3/19/2002
From: Al USA
Status: offline
 |
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
Posts: 6050
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
MCD
Posts: 650
Joined: 3/19/2002
From: Al USA
Status: offline
|
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.
_____________________________
Author of " How To Build A Website With Duct Tape"
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
