Steven Posted November 3, 2008 Share Posted November 3, 2008 Hi there,It goes like this:<div id="header">blah</div><div id="navbar">blah</div>In #navbar I placed a simple horizontal navbar. The problem is, it appears as though it is bumping the #header upward a number of pixels. I threw a bright green border around the list elements to see if it was reaching outside of the #navbar, but it is not. So I checked it out in IE and it is working just fine there!Any ideas? I really don't want to use some import ff stylesheet hack.links:XHTMLrelevant css: (FROM STRUCTURE.CSS)#navlist li { border: 1px solid #00CC33; display: inline; list-style-type: none; padding-right: 20px; } Link to comment Share on other sites More sharing options...
Synook Posted November 4, 2008 Share Posted November 4, 2008 The default FF line-height as inherited by #navlist li a is too tall. Give it a small value. Link to comment Share on other sites More sharing options...
Steven Posted November 4, 2008 Author Share Posted November 4, 2008 I tried a few line-heights for #navlist li, but all it does is move the text up or down, and the gap doesn't change at all. I also tried making margins and paddings 0, but nothing happens. Link to comment Share on other sites More sharing options...
Synook Posted November 5, 2008 Share Posted November 5, 2008 Try applying a small line-height on #navlist li a Link to comment Share on other sites More sharing options...
Steven Posted November 6, 2008 Author Share Posted November 6, 2008 Nothing :)I tried 39px and 1px. I can't see what it is that is pushing the divs apart... it doesn't look like anything is, from looking at the code at least. But something has to be doing it. Link to comment Share on other sites More sharing options...
jlhaslip Posted November 6, 2008 Share Posted November 6, 2008 #navlist ul has a default 16 px margin on it. Set it to something you like. Link to comment Share on other sites More sharing options...
Steven Posted November 6, 2008 Author Share Posted November 6, 2008 I've tried more than once to edit the margin of #navlist ul, but it doesn't change anything :)How does that help explain the fact that IE doesn't create a gap between the divs? (that was not in a conceited tone)The only thing I can think of is merging these two divs into one, and just merge the backgrounds of each together and then bump the navlist ul down towards the bottom, but I don't want to! Link to comment Share on other sites More sharing options...
rzea Posted November 6, 2008 Share Posted November 6, 2008 Add this rule:#navlist { margin:0; } Link to comment Share on other sites More sharing options...
Steven Posted November 6, 2008 Author Share Posted November 6, 2008 It already has that property #navbar { width: 1007px; height: 39px; background: url(../images/bg_navbar.gif); text-align: left; margin: 0;} Link to comment Share on other sites More sharing options...
rzea Posted November 6, 2008 Share Posted November 6, 2008 Is #navlist not #navbar. Link to comment Share on other sites More sharing options...
Steven Posted November 6, 2008 Author Share Posted November 6, 2008 Aah, temporary dyslexia kicking in.It worked!Thanks a bunch Link to comment Share on other sites More sharing options...
rzea Posted November 6, 2008 Share Posted November 6, 2008 Awesome Steven , glad to help. Link to comment Share on other sites More sharing options...
jlhaslip Posted November 7, 2008 Share Posted November 7, 2008 #navlist ul has a default 16 px margin on it. Set it to something you like.My suggestion didn't work??? Link to comment Share on other sites More sharing options...
Steven Posted November 9, 2008 Author Share Posted November 9, 2008 Nope *shrug* Link to comment Share on other sites More sharing options...
jlhaslip Posted November 10, 2008 Share Posted November 10, 2008 Worked in firebug Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.