homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Chrome/Safari problem?
Jake_Carter



 
Msg#: 4304896 posted 4:13 pm on Apr 15, 2011 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4304896 posted 5:23 pm on Apr 15, 2011 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4304896 posted 5:39 pm on Apr 15, 2011 (gmt 0)

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



 
Msg#: 4304896 posted 9:28 pm on Apr 15, 2011 (gmt 0)

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



 
Msg#: 4304896 posted 9:38 pm on Apr 15, 2011 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4304896 posted 11:11 pm on Apr 15, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4304896 posted 11:21 pm on Apr 15, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4304896 posted 11:29 pm on Apr 15, 2011 (gmt 0)

@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



 
Msg#: 4304896 posted 9:44 pm on Apr 22, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved