I am at the beginning stages of scripting a new site and have got things working basically the way I would like. When viewed in most the browsers the page renders well, however under any version of Opera I have tested it is broken in that:
the sprite rollovers don’t work, and what is worse is that the <a> tags are not being honored.
The mega menu, which is currently being shown in a ‘hovering’ state for the ‘Services Menu’ - no javascript yet to add/remove the ‘hovering’ class - does not honor the margins, padding, or floats.
Is my CSS fundamentally flawed? Have I missed something obvious? Can you make any recommendation on how I can get Opera to honor the layout and <a> tags (I could live without support for image hovers)?
I have been trying for several hours to get Opera to respond your ideas are most appreciated.
You shouldn’t really use text-indent to hide the text because if images are missing then you get nothing. Place the image over the text instead like this:
<!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>
<title>AARO home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
color: #333;
margin: 0;
padding: 0;
text-align: center;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}
h1#header {
background: #fff url("http://www.aaro.ca/2010_new_site/images/aaro_01.png") no-repeat left top;
text-indent: -10000em;
margin: 0px auto;
width: 1044px;
height: 136px;
}
#content {
width: 1044px;
text-align: left;
margin: 0 auto;
z-index: 10;
position:relative;
}
ul#main_menu {
border: none;
width: 1044px;
height: 52px;
background: url(http://www.aaro.ca/2010_new_site/images/main_menu.png) no-repeat;
padding: 0;
position: relative;
}
ul#main_menu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
ul#main_menu li a {position:relative;color:#000;}
ul#main_menu li, ul#main_menu a, ul#main_menu em {
height: 52px;
display: block;
text-decoration: none;
}
ul#main_menu a{position:relative;}
ul#main_menu a:hover{visibility:visible}
ul#main_menu a em{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url(http://www.aaro.ca/2010_new_site/images/main_menu.png);
background-repeat:no-repeat;
}
#mm_home {
left: 28px;
width: 70px;
}
#mm_services {
left: 98px;
width: 90px;
}
#mm_training {
left: 188px;
width: 91px;
}
#mm_health_safety {
left: 279px;
width: 155px;
}
#mm_marketplace {
left: 434px;
width: 132px;
}
#mm_home a em{background-position: -28px 0}
#mm_services a em{background-position:-98px 0}
#mm_training a em{background-position:-188px 0}
#mm_health_safety a em {background-position:-279px 0}
#mm_marketplace a em{background-position:-434px 0}
#mm_home a:hover em{background-position: -28px -53px}
#mm_services a:hover em{background-position:-98px -53px}
#mm_training a:hover em{background-position:-188px -53px}
#mm_health_safety a:hover em {background-position:-279px -53px}
#mm_marketplace a:hover em{background-position:-434px -53px}
.shout {
display:block;
font-weight: 600;
font-size: 1.1em;
text-align: left;
color: #f97907;
border-bottom: 1px dotted #274ab0;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
margin-bottom: 5px;
}
ul#main_menu li div.mega_menu, ul#main_menu li.hovering div.mega_menu {
float: left;
background: #fff;
text-indent:0;
display: block;
width: 460px;
border: 3px solid #0d2a7e;
/*background: url(http://www.aaro.ca/2010_new_site/images/bg_services.png);*/
padding: 10px;
margin-top: 1px;
}
ul#main_menu li div.left_sub_col {
float: left;
width: 220px;
padding-right: 5px;
border-right: 1px solid #c4c4c4;
}
ul#main_menu li div.right_sub_col {
float: right;
padding-left: 5px;
width: 220px;
}
ul#main_menu li.hovering div a {
height: auto; /*needed to stop inheritance from the upper menu*/
}
ul#main_menu li.hovering div h3 {
font-size: 1.3em;
margin-bottom: 5px;
}
ul#main_menu li.hovering div ul li {
font-size: 1.1em
}
.bottom {
margin-bottom: 5px;
}
ul#main_menu li div h3 a, ul#main_menu li div ul li a {
background: none;
color: #6c4a55;
}
ul#main_menu li.hovering div ul li a {
color: #6c4a55;
}
ul#main_menu li.hovering div h3 a:link, ul#main_menu li.hovering div ul li a:link {
color: #6c4a55;
}
ul#main_menu li.hovering div h3 a:visited, ul#main_menu li.hovering div ul li a:visited {
color: #6c4a55;
}
ul#main_menu li.hovering div h3 a:hover, ul#main_menu li.hovering div ul li a:hover {
background: #c8b4be;
color: #632127;
}
ul#main_menu li.hovering div ul li {
text-indent: 15px;
position: relative;
height: auto;
}
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
border-radius: 10px;
behavior:url(./scripts/border-radius.htc);
}
.stretchbg,.stretchbg img{
width:100%;
position:absolute;
top:0;
left:0;
height:188px;
z-index:1;
}
</style>
</head>
<body>
<div class="stretchbg"><img src="http://www.aaro.ca/2010_new_site/images/bg_right_left_stretch.png" height="188"></div>
<div id='content'>
<h1 id='header'>AARO - Professionals In The Automotive Service Industry</h1>
<ul id='main_menu'>
<li id='mm_home'>
<h2><a href='http://www.aaro.ca/2010_new_site/index.php' title='home button'>Home<em></em></a></h2>
</li>
<li id='mm_services' class="mega hovering current">
<h2><a href='#services' title='A wide range of value added services helping you'>Services<em></em></a></h2>
<div class='mega_menu curved'>
<div class='left_sub_col'>
<h3><a href="#services_overview">Services Overview</a></h3>
<h3><a href="#membership">Membership</a></h3>
<p class='shout'>The power of a group!</p>
<ul>
<li><a href='#become_a_member'>Become a Member</a></li>
<li><a href='#member_features'>Membership Features</a></li>
<li><a class='bottom' href='#member_savings'>Membership Savings</a></li>
</ul>
<h3><a href="#membership">Group Insurance</a></h3>
<p class='shout'>Finally, group insurance <br />
for your small business!</p>
<ul>
<li><a href='#insurance'>Insurance Overview</a></li>
<li><a href='#health_benefits'>Health Benefits</a></li>
<li><a href='#dental_benefits'>Dental Benefits</a></li>
<li><a class='bottom' href='#insurance_faqs'>Insurance FAQ's</a></li>
</ul>
</div>
<div class='right_sub_col'>
<h3><a href="#POS">Payment Processing Rates</a></h3>
<p class='shout'>Save Money On Your <br />
Payment Processing Rates!</p>
<ul>
<li><a href='#insurance'>Payment Processing Overview</a></li>
<li><a href='#health_benefits'>Download PDF Application</a></li>
</ul>
</div>
</div>
</li>
<li id='mm_training' class='mega hovering'>
<h2><a href='#training' title='All about training to help you become the best autoshop'>Training<em></em></a></h2>
<div> </div>
</li>
<li id='mm_health_safety' class='mm'>
<h2><a href='#health_safety' title='health and safety in your shop'>Health & Safety<em></em></a></h2>
<div> </div>
</li >
<li id='mm_marketplace' class='mm'>
<h2><a href='#marketplace' title='classifieds and advertising'>Marketplace<em></em></a></h2>
<div> </div>
</li>
</ul>
</div>
<!-- End Wrapper -->
</body>
</html>
That works in Opera ok now. I’m not sure why you used that stretched image instead of using a repeating background image and keeping the html tidy.
(Jason posted another method in a thread the other day and instead of moving the background-position he moved the element around for a similar effect but less code.)
I just tested locally and can confirm as Stevie said above that the many missing closing anchors are causing the problem in Opera. Make sure as already mentioned above that you validate the page and add a full doctype.
Sorry, Jason is deathshadow and if you do a search of his posts you should find a similar menu thread with a neat little trick for manipulating a background image using less code. I’ll try and find the thread later as I’m in a rush at the moment :).
I haven’t had a chance to implement this yet, but I understand what you have shown; thanks for the example css!
re
I’m not sure why you used that stretched image instead of using a repeating background image and keeping the html tidy.
Based on reading your and other more sophisticated CSS’ers, believe it or not I have become much more cognizant about clean a semantic code. Hopefully it shows a little ? I mention this, as the stretched image has a distinct code smell to it that flies in the face of proper semantics
However I did the stretchy image because the menu - which is comprised of the sprite menu graphic is made from a gradient which is not uniform. When I first laid out the menu I thought that I would only use the width of the sprite graphic and align it to the left of the page only. However it seemed to cramped, so I spaced it to the right and liked it better, but now was stuck with code/sprite layout that positioned all the hovers and I didn’t want to re-cut the graphics and go through re-scripting it. So, instead, I took 1px wide and 52px high segments from both ends of the sprite menu graphic, put them on an image side by side (2px X 52px) and then make it 100% the size of the which means that most screens will match each side of the gradient and keep the continuity of the menu when a page is resized on higher screen resolutions.
By the way, I not sure who Jason is but I would also like to look over the technique he used.
As always thank you for you wonderful forum support!
The hovers work, but obviously the text shows which is undesirable. It seems that Opera does not recognize the <a> tag once the text is shifted out of focus, so the question is "How do we get Opera to still see the <a> with the <a>'s text indented?
After the page successfully validated the floats in Opera where honoured; however two issues still exist that I am in the dark about:
(In All browsers) With the <html> tag modified to validate as <html xmlns=“http://www.w3.org/1999/xhtml”> the <div class=“mega_menu curved”> <ul> <li> <a> disappear - the hover change still works. The css shows that this <a> tags colour is shown. If I remove the xmlns=“http://www.w3.org/1999/xhtml” from the <html> tags these <a> tags reappear but don’t validate.
I got this working, before in quirks mode browsers were ignoring on of my css entries, but in standards mode it honoured it and was indenting text to 10000px;
However Opera still does not recognize the <h2><a href> nor the hovers?
I did as you suggested, which by the way as Stevie suggested I should have done before I posted - been away from web dev for a while and missing my brain, so sorry
So I added the XHTML Strict doc type and got the page validating. The validator made me wrap the <img /> tag in a <div> as it said that input was not allowed in the context of the <img /> tag floating solo - if I remember correctly, Paul you mentioned to me a long while ago that <img /> tags not wrapped in some kind of container can cause problems so I don’t like the extra script (the <div></div>) but did it to validate.
After the page successfully validated the floats in Opera where honoured; however two issues still exist that I am in the dark about:
(In All browsers) With the <html> tag modified to validate as <html xmlns=“http://www.w3.org/1999/xhtml”> the <div class=“mega_menu curved”> <ul> <li> <a> disappear - the hover change still works. The css shows that this <a> tags colour is shown. If I remove the xmlns=“http://www.w3.org/1999/xhtml” from the <html> tags these <a> tags reappear but don’t validate.
(in Opera only) The <h2><a> tag for home is not hounored any ideas why?
I am of the belief that I should get this working for Opera as even though it is a small audience it is still important for a public site that has a wide breadth of users. Now with rendering non-quirks mode I lose the sub-menu <a>'s so irregardless of supporting Opera I need to get these to re-display.
Again thanks for your earlier help, if you have any more suggestions to deal with these two issues it would be very helpful. The link again is AARO
It won’t help either that some of your <a> elements are missing the </a> at the end.
When in doubt, the first thing to do is to run your site through validator.w3.org, and try to fix any errors that it highlights. If you can’t understand the error messages, or fixing them doesn’t solve the problem, then come here and ask for help!
You may want to add a DOCTYPE to your HTML code. Without a DOCTYPE, you are forcing the browsers into quirks mode. Each browser has its own way of handling quirks mode.
? I mention this, as the stretched image has a distinct code smell to it that flies in the face of proper semantics
