I'm using a 15px high div which contains some css rollovers, using the hidden overflow/background position rollover method. My problem is that I can't seem to vertically align them into their container div without resorting to absolute positioning. I've played with the margins & padding of both the rollover buttons div, and their container but I can't get anything to work properly in both IE & firefox. I want the navcontainer div to be 47 pixels high, ~900px wide, and sitting inside a main container div. I want the navigation buttons to be positioned around the vertical middle of the navcontainer. with no margin settings, here's how it display in firefox: and in ie: the relevant part of the html is: <div id="navcontainer"><!-- begin navigation container --> <div id="main-nav"><!-- begin main-nav --> <dl> <dt id="ApplyNow"><a href="2.html">Apply Now</a></dt> <dt id="Connections"><a href="#">Connections</a></dt> <dt id="EmployerServices"><a href="#">Employer Services</a></dt> </dl> </div><!-- end main-nav--> </div><!-- end navcontainer --> and the css: #navcontainer { height: 47px; background: #000000; } #main-nav { /*position: absolute; /* try and get this working without using absolute positioning */ top:115px; margin-top:10px; height: 15px; } #main-nav dl { margin: 0; padding: 0; } /* IE5 Mac Hack \*/ #main-nav { padding-left: 11px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ #main-nav dt { float: left; background-repeat: no-repeat; padding-right: 11px; margin-right:11px; border-right: 1px solid #DDDDDD; } #main-nav dt a { display: block; height: 0px !important; height /**/:15px; /* IE 5/Win hack */ padding: 15px 0 0 0; overflow: hidden; background-repeat: no-repeat; } #main-nav dt a:hover { background-position: 0 -15px; } If I just absolutely position the main-nav div, it looks fine but I'd prefer not to do that if possible. Thanks for any help!
Are you aware of the difference in the way MSIE and Firefox (and other standards compliant graphical Browsers) render the CSS Box Model? For a good explanation see: http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ James
Thanks for the link, I wasn't aware of that. I should have mentioned, I'm looking at this on ie6, and the article suggested that it should be compliant with the w3c box model?
If your page is rendered in the standards compliant mode and not in the quirks mode. What Doctype are you using? Actually, you should post the URL. James
I'm seeing the same in ie7 as well after testing. With a bit more poking the problem seems to be with the margin-top value here. Ie renders a 10px margin between the navigation & the parent div, but firefox does not. Adding the bold part below and commenting out the margin-top rule seems to make it all look identical in both browsers. Is what I've changed (adding the positioning) regarded as a valid fix? I appreciate the help, thanks again. #main-nav { position: relative; top:16px; /*margin-top:10px;*/ height: 15px; background: black; }
URL? Full code? With CSS? I have the nasty feeling your only real problem is a missing doctype - Though using position:relative and top like that instead of negative margins could also be your cause. Oh, you may also want to lose the excess unneeded container, use a UL instead of a DL (especially since those lack DD's) since that's completely inappropriate, etc, etc, etc. Hang on, lemme toss it together as working code and see what I can see.
Ok, I THINK this is what you are trying to do <!DOCTYPE html PUBLIC "-//W3C//liD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/liD/xhtml1-strict.lid"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } #navigation { margin-top:125px; padding-bottom:32px; height:15px; background:#000; } #navigation ul { list-style:none; } #navigation li { display:inline; /* work around IE7 error */ } #navigation li a { float:left; /* sets display:block automagically */ height:15px; padding:0 11px; /* setting line-height equal to height works around most height errors */ font:normal 12px/15px arial,helvetica,sans-serif; background-position:0 0; background-repeat:no-repeat; border-right:1px solid #DDD; text-decoration:none; color:#FFF; } #navigation li.last a { border-right:none; } #navigation li a:active, #navigation li a:focus, #navigation li a:hover { color:#FFC; background-position: 0 -15px; } </style> </head><body> <ul id="navigation"> <li id="ApplyNow"><a href="2.html">Apply Now</a></li> <li id="Connections"><a href="#">Connections</a></li> <li id="EmployerServices" class="last"><a href="#">Employer Services</a></li> </ul> </body></html> Code (markup): But I'd really need to see the whole thing to be sure. I restored the moving it down the page 115px PLUS the 10 px margin-top (which is what should be used in the first place), got rid of ALL those excess/unneccessary containers, tossed the IE 5.x hacks which shouldn't be needed since I set line-height equal to height, etc, etc.
Thank you, using the code you put together there gives me almost the same effect but seems to be a lot more concise. I added the background image for the navigation li elements, and that displays & works fine. The text stays in front of the image now though, is there a way to hide the text without adversely affecting accessibility or search engines? Here's a link to what I currently have: http:// two.xthost.info/temp/testcss.html (delete the space, it won't let me post links yet) but it's essentially the same code you posted with a background image added to one of the li's.
I would suggest using the glider-levin technique on those buttons - assuming the images for the buttons are not transparant. That technique can be found on this page: http://www.mezzoblue.com/tests/revised-image-replacement In this case, I would combine all your buttons down to be side-by side and one atop the other as a single image, add an empty span inside each anchor, position the spans over the buttons, then use background-position to slide the image part around as needed. The code would look something like this: #navigation li a { float:left; /* sets display:block automagically */ height:15px; padding:0 11px; font:normal 12px/15px arial,helvetica,sans-serif; border-right:1px solid #DDD; text-decoration:none; color:#FFF; position:relative; } #navigation span { position:absolute; /* also sets display:block automagically */ top:0; left:0; width:100%; height:15px; background:url(images/navigation.png) 0 0 no-repeat; } #ApplyNow a { width:49px; } #ApplyNow a span { background-position:0 0; } #ApplyNow a:active span, #ApplyNow a:focus span, #ApplyNow a:hover span { background-position:0 -15px; } #Connections a { width:53px; } #Connections a span { background-position:-49px 0; } #Connections a:active span, #Connections a:focus span, #Connections a:hover span { background-position:-49px -15px; } #AreasOfStudy a { width:67px; } #AreasOfStudy a span { background-position:-102px 0; } #AreasOfStudy a:active span, #AreasOfStudy a:focus span, #AreasOfStudy a:hover span { background-position:-102px -15px; } etc, etc, etc. Code (markup): You can see an example of what I mean in this sample I did for Pixelcommander on this very site. http://battletech.hopto.org/for_others/pixelcommander specifically how it only relies on one image to function: http://battletech.hopto.org/for_others/pixelcommander/images/navigation.jpg You just slide that one background around inside the spans. Means one file and therin one file request instead of... well, however many menu items you are going to have. Less files = less handshaking with the server. Less handshaking equals faster page loads.
Thanks for the links, that's a really neat technique of having just one image for the navigation. Hopefully I can add that and get it all lined up. I really appreciate the help with this, thanks again.
I've messed with it a bit more and got this far: http://two.xthost.info/csstest/test.html using a .gif of all the buttons lined up together (http://two.xthost.info/csstest/nav/allbuttons20pxspace.gif) The problem I am getting now is that ie6 isn't changing the cursor to the hand when rolling over a link, it remains as a pointer. Adding a rule for cursor: pointer; into #navigation li seemsto solve this in ie, but is it a valid fix or bad practice? Also, when I'm looking at this page in dreamweaver it doesn't display as it does in a browser. it's beginning each button at the end of the (hidden) text for the previous one, not the end of the specified width. This gives the appearance that they're overlapping. Should I be concerned about this? Any more suggestions would be great, it's pretty close now.
It's as good a fix as you're going to get - and since cursorointer; validates, I'd not worry about using it. I think swapping the spans back to AFTER the text would help that, but I'm not sure - FRANKLY it's part of why I don't trust that steaming pile of crap known as Dreamweaver, because it's hard enough coding for the browsers engines people are actually going to be using - much less throwing a FIFTH engine atop that. Up above my example had a broken doctype because my base template got 'polluted' by someone else's code... The following is how your example should read - and this DOES validate. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <style type="text/css"> * { margin:0; padding:0; } #navigation { margin-top:125px; padding-bottom:16px; padding-top: 16px; height:15px; background:#000; } #navigation ul { list-style:none; } #navigation li { display:inline; /* work around IE7 error */ } #navigation span { position:absolute; /* also sets display:block automagically */ top:0; left:0; width:100%; height:15px; background:url(http://two.xthost.info/csstest/nav/allbuttons20pxspace.gif) 0 0 no-repeat; } #navigation li a { float:left; /* sets display:block automagically */ height:15px; text-align:center; position:relative; /* setting line-height equal to height works around most height errors */ font:normal 9px/15px arial,helvetica,sans-serif; background-position:0 0; background-repeat:no-repeat; border-right:1px solid #DDD; text-decoration:none; color:#FFF; cursor: pointer; } #navigation li.last a { border-right:none; } #navigation li a:active, #navigation li a:focus, #navigation li a:hover { color:#FFC; background-position: 0 -15px; } #ApplyNow a { width:69px; } #ApplyNow a span { background-position:0 0; } #ApplyNow a:active span, #ApplyNow a:focus span, #ApplyNow a:hover span { background-position:0 -15px; } #Connections a { width:73px; } #Connections a span { background-position:-69px 0; } #Connections a:active span, #Connections a:focus span, #Connections a:hover span { background-position:-69px -15px; } #EmployerServices a { width:102px; } #EmployerServices a span { background-position:-142px 0; } #EmployerServices a:active span, #EmployerServices a:focus span, #EmployerServices a:hover span { background-position:-142px -15px; } </style> </head><body> <ul id="navigation"> <li id="ApplyNow"><a href="#l">Apply Now<span></span></a></li> <li id="Connections"><a href="#">Connections<span></span></a></li> <li id="EmployerServices" class="last"><a href="#">Employer Services<span></span></a></li> </ul> </body></html> Code (markup): You'll notice I also set text-align:center, put the line-height of 15px back in since IE6 was screwing it up here, and bumped the fonts up to something legible so they DON'T look like alt text anymore.
Thanks a ton! I think I set the font size smaller because a couple of them were longer than the graphics which were covering them, doing some weird stuff to the spacing. If this ends up being the case, is it safe to just set them to a reduced size again?
Yes... and no. It ends up removing one of the entire points of doing it this way - having something nearly identical when you turn images off. Which is why I personally would just axe the images there and just use the text.