5 replies [Last post]
booz11
Offline
newbie
Last seen: 12 years 24 weeks ago
Timezone: GMT-5
Joined: 2009-12-01
Posts: 2
Points: 3

Hey all, I have created a navigation bar and seem to be seeing an issue with IE7. The nav menu works fine in IE6 and IE8, as well as firefox 3 and safari 4. In IE7, the background images are pretty prematurely cutoff at the bottom. Any help on what I should change in the CSS to fix this issue would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background:#111; font-size:100%; color:#ccc; font-family:"Trebuchet MS", Geneva, Arial, Helvetica, sans-serif; text-align:center; line-height:1.15em;}
 
.menu {width:683px; text-align:center; margin-top:15px;}
.menu ul {list-style:none;}
.menu ul li {height:56px; display:block; float:left; margin:0px; padding:42px 19px 0 19px; text-align:center;}
.menu a {color:#fff; height:56px; voice-family:"\"}\""; voice-family:inherit; height:56px; text-decoration:none;}
.link_1 a:link, .link_1 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_home.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_home.png</a>) 50% 15px no-repeat; padding:46px 3px 10px 3px; color:#fff; text-decoration:none;}
.link_2 a:link, .link_2 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_about.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_about.png</a>) 50% 15px no-repeat; padding:46px 3px 10px 3px; color:#fff; text-decoration:none;}
.link_3 a:link, .link_3 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_pricing.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_pricing.png</a>) 50% 15px no-repeat; padding:46px 3px 10px 3px; color:#fff; text-decoration:none;}
.link_4 a:link, .link_4 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_galleries.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_galleries.png</a>) 50% 15px no-repeat; padding:46px 3px 10px 3px; color:#fff; text-decoration:none;}
.link_5 a:link, .link_5 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_faq.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_faq.png</a>) 50% 15px no-repeat; padding:46px 6px 10px 6px; color:#fff; text-decoration:none;}
.link_6 a:link, .link_6 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_contact.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_contact.png</a>) 50% 15px no-repeat; padding:46px 3px 10px 3px; color:#fff; text-decoration:none;}
.menu a:hover {color:#ed1c24; background-position:50% -58px; text-decoration:none;}
</style>
</head>
<body>
<div class="site_center">
 
<div class="menu">
<ul>
<li class="link_1"><a href="#" title="Photo Booth Rentals by St. Louis Photobooth LLC">HOME</a></li>
<li class="link_2"><a href="#" title="About St. Louis Photobooth Rentals - Our Booth Customization Options and Mission" >ABOUT</a></li>
<li class="link_3"><a href="#" title="St Louis Photobooth Pricing and Packages" >PRICING</a></li>
<li class="link_4"><a href="#" title="St. Louis Photobooth Event Photo Galleries" >GALLERIES</a></li>
<li class="link_5"><a href="#" title="Photo Booth Event Rental Frequently Asked Questions" >FAQ</a></li>
<li class="link_6"><a href="#" title="Contact St. Louis Photobooth for Booth Rental Pricing and Availability" >CONTACT</a></li>	
</ul>
</div>
 
</div>
</body>
</html>

A working example can be seen at: http://www.stlouisphotobooth.com/sandbox/menu-test.html

Thanks in advance for any help!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I see a serious error in the

I see a serious error in the CSS you've posted:

.link_5 a:link, .link_5 a:visited {background:url(<a href="http://www.stlouisphotobooth.com/sandbox/images/m_faq.png" rel="nofollow">http://www.stlouisphotobooth.com/sandbox/images/m_faq.png</a>) 50% 15px no-repeat; padding:46px 6px 10px 6px; color:#fff; text-decoration:none;}

You seem to have HTML inside the CSS! Background url isn't referring to an actual anchor; instead, it refers to the url pointing to the image (url=Uniform Resource Locator and your bg image is your resource).

background: url(path-to-image.png) 50% 15px no-repeat;

paths can be relative (sandbox/images/m_faq.png) or absolute (starting with "http"). If you choose relative urls (which as I understand it are faster?) they must be relative to where the CSS is.

While we generally say things like "there's no point in validating CSS", it is actually a good thing to do when checking for syntax errors. Those are show-stoppers.

I'm no expert, but I fake one on teh Internets

booz11
Offline
newbie
Last seen: 12 years 24 weeks ago
Timezone: GMT-5
Joined: 2009-12-01
Posts: 2
Points: 3

thanks for that Stomme Poes,

thanks for that Stomme Poes, but I think that had to do with when I put that code in the code tags for posting...if you take a look at the source for the link I provided, the anchor tags are not there. Also, I didn't use relative links because of the guidelines for pasting code (didn't want people to have to go get original images on their own). So, the CSS and the HTML are validated successfully for that link (once again, the pasted code added the a href tags, as they are not in the original source code).

Any other suggestions?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

look now

Quote:

Any other suggestions?

Yes.

I took your original code and copied your images and made some changes I usually make when I'm trying to see what's happening.

First, I look in other browsers. You either never checked a non-IE browser or, possibly, you don't mind that other browsers look completely different (but I don't believe that).

You were apparently relying on an IE bug: even though you have a doctype and are not in Quirks Mode, IE does still incorrectly treat text-align: center as a centerer of block elements, when it should only center inline children such as text.
So in any non-IE browser, your menu was on the left. See your current page in FF or Opera or Safari or Chrome or Konqueror or whatever.

Second, I start trying to *see* what's happening, and with the images being black and the background being black, I couldn't see edges and things.
So I changed the body's background to white, and started adding ugly borders to various elements: the menu gets a red border, the li's a yellow one, the anchors a blue one.

Page temporarily here.

Even then, I could not see what exactly IE7's problem was, however I suspected that it had to do with the fact that even though you say height: 56px on the anchors, nobody (no browser) is actually picking that up, because you left the anchors inline (inlines can't haz heights, widths, or vertical margins). So all the browsers were relying on your padding.

BTW your use of the anchor text and padding and the background images is rather brilliant and avoids the need for extra elements like spans or the non-accessible negative text-ident trick like most image-replacement techniques do. Awesome.

So I decided to try writing your menu a bit more like I would write such a menu (not entirely, I also tried to leave many things the same to help you see what all I've done) so you can see one way of possibly doing it.

Usually when I make horizontal menus who are not dropdowns, I ignore the li's and make the anchors do all the work. For IE only, I state something on the li's (display: inline) because otherwise IE, esp IE7, gets staircasing and it seems to get confused about what the li is if you don't explicitly state a display state.

NEW page temporarily here.

So I removed the text-align: center from the body (in case you didn't really want the entire page's content centered in the future) and removed the div around the menu. It didn't seem to be doing anything so it's just bloat.

*if you want to center the menu for IE5.5 and below, leave text-align: center on the body but then move everything back to text-align: left on your major containers*

The menu gets centered in all modern browsers with margin: 0 auto and I made it not so wide for better centering. Notice how saying a width on the menu triggers Haslayout so if you look in IE the red menu border encloses the anchors, while in modern browsers + IE8 it doesn't. Looking at your current site, it doesn't matter either way, but if menu is going to hold a background image or border in the final design you can get away with adding overflow: hidden to it and make ALL browsers enclose the anchors.

The li's are display: inline for IE and otherwise ignored. I do not have the yellow borders here as adding that little 1px of height with border does affect the true layout. Know that being inlines with floated children, they are collapsed and have no height and therefore are invisible.

The anchors are floated left. This means they are now a type of block and can have heights, widths, and vertical margins.

The heights of the anchors are not the same as you had them: this because the neat-o padding trick is added to the total height so they are actually a height + top padding = total visible height. This is always true and you didn't see it like that on your current page because height wasn't actually getting invoked there.

The anchors are spaced with right margins (removed from the last anchor cause it's not needed and would make them all too wide for the menu's new width anyway).

A added :focus to your :hover statements to make the menu more keyboard accessible. Always do this (think of focus), and if you don't like the dotted outline appearing, you can safely do outline: 0 in that statement, because your colour change is :focus feedback (though I'm not sure how readable small red text on black is in the first place... I have trouble reading your image text!).

In the plain anchor statement, I only have li.class a, not :link and :visited. Anything you state for "a" will be inherited by :visited so no need to worry anymore about text-decoration or a change in colour to purple anymore. Less code.

All anchors have the same height, but different widths. I set the width of "home" in the default "a" statement and since everyone else has their own individual class anyway I know I can just override those widths there. So I also do this for the background positions...
...because I took your CSS sprites a step further and made one big one. So all the background positions do need to be written again for each focus/hover instance but a bit more text in the css will load a lot quicker than multiple images (remember, IE can only ask for two files at once, and FF will only ask for two files at once unless you make some changes in the headers you send to the server... so users can at the fastest make two GET requests for images at a time, and must wait until those are loaded before asking for more... here, we just have one GET request so even if total file size is the same, you'll get faster loading overall.
Not that you'd see any difference unless you were on a really slow connection... still : ).

Anyway, that's one way to do it. I guess if you didn't want to do SO much modification of your code you could just add
display: block
to your anchors so the height actually kicks in, then adjust all your padding (and the height) to make it imitate your current site, and I *think* that would solve whatever it is IE7 is doing. I'm not absolutely sure, it's just a nagging suspicion that maybe a forum guru can explain better that IE7 has some issue with the anchors being inlines.

If IE6 does not like the display: block on the anchors in the floated li's, you can either float: left the anchors too OR give the li's a set width, so IE6 can't let the anchors become 100% wide (another bug).

I'm no expert, but I fake one on teh Internets

dirteedave
Offline
Regular
Last seen: 11 years 4 weeks ago
Timezone: GMT+1
Joined: 2007-03-28
Posts: 12
Points: 15

I think you need to move the

I think you need to move the display:block; and margins/padding from the (.menu ul li) and put them in the (.menu ul li a). there should only be float:left; in (.menu ul li)

.menu ul li {float:left;}
.menu a {color:#fff; height:56px; display:block; float:left; margin:0px; padding:42px 19px 0px 19px; text-align:center; text-decoration:none;}

horizontal navigation

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yes

Just, display: block can be removed and the height/padding would need to be adjusted.

I'm no expert, but I fake one on teh Internets