Anyone know what is going on? I have some optimization issues I am working on with the site, but other than that, it is looking the way I want it to…in any browser other than IE6. In IE6 the menu at the top spaces the menu out, off the screen. In IE8 and FF it looks correct. Any ideas? I have been banging my head against a wall on this for the last few weeks!
Wow, almost zero content on this page. Almost 100% pictures. Not even the links in the table (why a table???) have any text. Nothing works at all.
I’m not sure if you realise how frustrating this is for some people.
First rule of web design: if something looks horribly broken somewhere, validate. Things can look horribly broken in valid code, but there’s never any point to digging around trying to find the source of bugs if the code is invalid.
<div id=“logoa”><a href=“http://www.mountaincovebluegrass.com”><div id=“logolink”></div></a></div>
Divs are blocks. Anchors are inlines. Inlines are like water; blocks are like buckets. Buckets can hold water (and other buckets). Water can’t hold a bucket. Anchors cannot hold divs (except in HTML5-land, where down is up and oompa-loompas happily make chocolate). And, another link with no text. Don’t make us guess where we’ll end up if we click something.
But anyway.
I don’t know WHY IE is doing this (IE6 and 7 are doing it), but each td is huge. Much much larger than in the other browsers. Instead of trying to fix what’s horribly broken, I’d rather just make a regular menu. One with actual text for people (can just be alt text, that’s fine, but you need something).
I’m not sure if the header div is holding an image or something? But if it’s not, we can ditch it entirely. I see this:
#header {
}
Looks like we can chuck it.
<ul id="siteMenu">
<li><a href="biography"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c2.jpg" width="71" height="50" [b]alt="Bio"[/b] /></a></li>
<li><a href="music"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c3.jpg" width="90" height="50" [b]alt="Music"[/b] /></a></li>
<li><a href="shows"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c4.jpg" width="99" height="50" [b]alt="Shows"[/b] /></a></li>
<li><a href="news"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c5.jpg" width="88" height="50" [b]alt="News"[/b] /></a></li>
<li><a href="photos"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c6.jpg" width="100" height="50" [b]alt="Photos"[/b] /></a></li>
<li><a href="videos"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c7.jpg" width="97" height="50" [b]alt="Videos"[/b] /></a></li>
<td><a href="contact"><img src="wp-content/themes/default/images/bluegrass-menu_r1_c8.jpg" width="122" height="50" [b]alt="Contact"[/b] /></a></li>
</ul>
<div id="logolink"><a href="http://www.mountaincovebluegrass.com" title="home "></a></div>
That last one: I can’t really tell what that is… it’s not over the background picture so I’m really not sure what’s going on, but IF you just wanted a big clickable area, you can just do that with the anchor:
#logolink a {
float:left;
height:180px;
width:250px;
}
Floating the anchor makes it have block context. You can now set a width and height on it.
I’m not sure what’s up with the absolute urls, is that another weird wordpress thing? Bleh.
border=“0” is removed. That belongs in CSS, which is why it’s been deprecated from HTML Strict.
Just have this in your CSS page, near the top:
img {
border: 0;
}
Anyway, the width you had set on the table, set it on the ul:
#siteMenu {
margin: 0; /I dunno if there’s a reset, so I’m removing any default margins given to lists/
padding: 31px 0 0 76px;
width: 740px;
list-style: none;/remove bullets/
}
Though that right padding is suspicious. Normally your page container would be able to constrain that menu (or table) by itself.
The li’s, we just make sure IE doesn’t staircase them:
#siteMenu li {
display: inline;
}
The anchors, float them:
#siteMenu a {
float: left;
}
You can space them out as much as needed with left or right margins, whatever you want. If you do, for IE6’s benefit, add display: inline after the float: left statement on the anchors. Since each anchor holds an image with a set height and width, you shouldn’t need to add those per anchor… as floats, they should shrink-wrap to their contents automagically.
But also, style the text. We have alt text on the images now. Many browsers will default that to small and the default anchor colour (blue). Since your page is actually black without images, make the anchor text white or some readable colour.
#siteMenu a {
float: left;
display: inline; /IE6/
margin-left: whatever;
color: #fff;
font-size: 1.2em; /or something/
}
Make them give feedback when hovered or focussed:
#siteMenu a:focus, #siteMenu a:hover, #siteMenu a:active {
color: #ff0;
text-decoration: none;
}
The :active thing is just for IE6’s benefit.
Now to tell the truth, even that setup isn’t really nice either, because other than a little hand on my mouse cursor, I don’t get a whole lot of feedback anyway… I assume it’s a clickable menu mostly because it looks like one. When I go through the menu with my keyboard, a dark outline appears on a dark image. I’d at least set the outline colour to white or some light colour. What might be better is using some image replacement and have the images actually change on hover/focus. But, that’s beyond the scope of the simple image-based menu.
Sorry if I sound grumpy and bitter, I’ve been losing some hair as a frustrated user lately. Make your users happy, and they will love coming to your site. And remember, blind and low-vision people listen to music, go to YouTube, and like the check out band sites. It’s a good idea to start with site structure first and add in all the artsy photosstuff later. It can look exactly the same, except there’ll be a navigable site there too.
Without seeing a link or some code, we can’t really help you. A link would be best.
Well, tried that and it just made it mess up in both IE and FF 
Maybe I implemented it wrong. I used a conditional tag as a quick fix, and added more margin in for IE6 and IE7. I’m sure that is not the right thing to do, but I did that while I figure out the bigger issue and fix many other issues I have here.
I see you fixed the menu on your index page but on the other pages it’s still messed up(in IE6). Maybe you should consider to make it an include. that makes it way easier for you also for future changes
wow…thank you for the in-depth review. I’m working through that list you gave, and fixing other issues. I don’t do a lot of straight up coding, so this is a learning experience for me. Fixed the header by getting rid of the table and using div/ul. Finding and fixing other issues. Thank you so much!!!
Thank you, Donboe, I will do that now.
I’ve run into a new issue…in IE 6 it shifts all divs up and under the “siteMeun” div, but in IE 8 and FF it doesn’t. Searching for a solution to this, but finding nothing. Thank you so much for the help so far…I’ve learned a lot in the last 24 hours!!!
Hm, because the menu items are floated, it might be good if everyone clears them (this may or may not be IE6’s issue though).
So the div#logolink, you may want to give it clear:
#logolink {
clear: both;
}
Things who aren’t floated can ride up alongside or underneath floats, and clearing floats means the element has to check to make sure it’s definitely under the bottom of any floats above it. Again, I dunno if this is IE6’s issue though.