Chrome/Safari problem?

[Jake_Carter]

Hi everyone,
I'm having trouble with one of my sites that I am designing.

[url]http://www.example.com[/url]

The main menu at the top works fine in Firefox and IE, but in chrome and safari it is broken. Anyone have a suggestion on how to make a fix for chrome and safari?[url][/url]

[edited by: alt131 at 1:07 pm (utc) on Nov 27, 2011]
[edit reason] Thread Tidy [/edit]

[rocknbil]

Welcome aboard Jake, start by eliminating these [validator.w3.org]. I didn't look closely, but the nature of the errors tend to indicate something incorrectly nested.

[Fotiman]

Yeah, as rocknbil said, you need to clean up your markup. You have div elements as children of ul, which is not valid.

[Jake_Carter]

Thanks for the responses guys. So I can't have a div inside a <ul>. I want the location/properties from the menu to be applied to these images though. What can I make them instead of divs? Currently it looks like this:

<ul class="menu">
<div class="menu_right"></div>
<div class="menu_left"></div>

Should i make it a <li>?

[Jake_Carter]

Ok, i was able to get it to work, but now i have two more validation errors. I dont know if that is a big deal, but its working now.

I added <li></li> and now it loads in chrome and safari.

Now it looks like this:

<ul class="menu"><li></li>
<div class="menu_right"></div>
<div class="menu_left"></div>

[Fotiman]

That's still invalid. A <ul> element can ONLY contain <li> elements (see the DTD or the HTML 4 spec [w3.org]). You would need to do something like this:

<ul class="menu">
<li class="menu_right"></li>
<li class="menu_left"></li>
</ul>

or this:

<ul class="menu">
<li><div class="menu_right"></div></li>
<li><div class="menu_left"></div></li>
</ul>

or this:
<div class="menu_right"></div>
<div class="menu_left"></div>
<ul class="menu">
</ul>

It's worth noting that none of these are very good accessible solutions, as you've added empty markup to account for presentation. In addition, the use of class names that represent presentation (like "right" and "left") should generally be avoided. However, the fact that you seem to need these extra elements within your markup for presentation only would seem to indicate that you don't have a good separation of content and presentation. There are underlying lessons that should be learned first regarding why this is not a good development practice.

[alt131]

Hi Jake_Carter and welcome to WebmasterWorld :)

As the other posters have said, divs aren't allowed inside lists. The recommendations have more about Lists [w3.org]

You could make each of those divs a <li> and give those list items the class menu_right and menu_left, but an easier solution for the issue is to reduce the html elements rather than add more. From your code it looks like the divs are being used to create a "hook" on which you can "hang" an image to create a rounded corner on the bottom-left and bottom-right of the menu.

If you are only supporting modern browsers it is possible to use css3 for rounded corners or use multiple images and multiple backgrounds, or use them and accept older browsers will only see a menu with square bottom corners.

If you must support older browsers, another way is to set the bottom-left corner image on the ul.
Currently you have:

<ul class="menu">
<li></li>< --- redundant
<div class="menu_right"></div> <--not valid and can be avoided
<div class="menu_left"></div> <--not valid and can be avoided
<li class="active"><a href="/" title="Home">Home</a></li>
<li><a href="#" class="#" title="Login">Login</a></li>
<li><a href="#" class="#" title="Signup">Signup</a></li>
</ul>

In your css change
ul.menu {
background-color: #006699;
...}
to
ul.menu {
background: #006699 url("../img/menu_left.png") no-repeat left bottom;
...}
That avoids the need to have an element and class "menu_left" just to create a round corner on left bottom.

Then set menu_right.png on the right-most <li> to create the round corner on the right bottom of the menu. (You may have to adjust the widths of you <ul> and the <li>'s to get it to lay out in the correct visual place.)

That would reduce your html to

<ul class="menu">
<li class="active"><a href="/" title="Home">Home</a></li>
<li><a href="#" class="#" title="Login">Login</a></li>
<li><a href="#" class="#" title="Signup">Signup</a></li>
</ul>

which is much cleaner and also valid.

[edited by: alt131 at 11:33 pm (utc) on Apr 15, 2011]

[alt131]

@Fotiman, Ooops! Didn't see your post before hitting submit <note to self> There is a refresh button!</note>

@Jake_Carter Fotiman's explanation is the reason behind the approach I've suggested.

[Jake_Carter]

Thanks so much guys, i'm going to give this a shot. Thanks for the tips!