IE (of course) doesn't look how it should

Nav menu and some other spacing issues

[tronathon]

I've tested the site in FF, Chrome, Opera and Safari. All look great. Then I get to IE and what do you know, everything is off. The nav menu bar and some of my sidebar spacing is completely wrong in IE.

The Nav Menu CSS:

#nav1 ul.sf-menu li {
 position: relative;
 background: url(images/nav1-sep.gif) no-repeat right top;
 float: left;
 line-height: 37px;
 padding: 0 1px 0 0;
 text-align: center;
}
#nav1 ul.sf-menu li a {
 color: #1f041f;
 display: block;
 position: relative;
 float: left;
 text-decoration: none;
 width: 160px;
 cursor: pointer;
 height:14px;
 padding:12px 0 11px 0;
 font-size:14px;
}

Nav Menu HTML:

 <div id="nav1">
  <ul class="sf-menu sf-js-enabled">
   <li><a href="<?php bloginfo('url');?>/">Home</a></li>
   <li><a href="<?php bloginfo('url');?>/about">About</a></li>
   <li><a href="<?php bloginfo('url');?>/whats-on-tap">What's on TAP</a></li>
   <li><a href="<?php bloginfo('url');?>/resume">Resume</a></li>
   <li><a href="<?php bloginfo('url');?>/blog">Streaming</a>
     <ul class="children">
      <li><a href="<?php bloginfo('url');?>/category/sinkers">Hooks, Lines & Sinkers</a></li>
      <li><a href="<?php bloginfo('url');?>/category/elusive-things">Splats, Drips, Leaks, and Other Elusive Things</a></li>
    </ul>
   </li>
   <li><a href="<?php bloginfo('url');?>/contact">Contact</a></li>
  </ul>
 </div>

Sidebar Title CSS:

.wtitle h2 {
 line-height: 40px;
 margin: 0;
 padding: 8px 0 8px 18px;
}

Sidebar Title HTML:

<div class="box list1 widget widget_text" id="text-8">
<div class="wtitle"><h2>Title</h2></div>
<div class="hl"></div>
<div class="content">
<div class="textwidget">Content</div>
</div>
</div>

If you need the site URL, it's [theresaaddison.me ].

Thanks so much for any help. IE drives me nuts and I'm not sure what to do to fix it. Thanks.

[tronathon]

It appears to be in IE7 (I can only check 7 & 8, browser shots isn't working for me today either). Thanks.

[SevenCubed]

You are missing 2 tags...one closing and one opening...that might be your problem...see bold hilites below.

<div id="nav1">
<ul class="sf-menu sf-js-enabled">
<li><a href="<?php bloginfo('url');?>/">Home</a></li>
<li><a href="<?php bloginfo('url');?>/about">About</a></li>
<li><a href="<?php bloginfo('url');?>/whats-on-tap">What's on TAP</a></li>
<li><a href="<?php bloginfo('url');?>/resume">Resume</a></li>
<li><a href="<?php bloginfo('url');?>/blog">Streaming</a>
</ul>
<ul class="children">
<li><a href="<?php bloginfo('url');?>/category/sinkers">Hooks, Lines & Sinkers</a></li>
<li><a href="<?php bloginfo('url');?>/category/elusive-things">Splats, Drips, Leaks, and Other Elusive Things</a></li>
</ul>
<ul>
</li>
<li><a href="<?php bloginfo('url');?>/contact">Contact</a></li>
</ul>
</div>

[SevenCubed]

You are also missing, ummmmmm, I think at least one </li> but I'll leave that one for you to figure :)

[Major_Payne]

These need to be corrected, too:

5 CSS errors [jigsaw.w3.org]

6 HTML errors [validator.w3.org]

XHTML 1.0 requires closer attention to syntax.

Ron

[tronathon]

<div id="nav1">
<ul class="sf-menu sf-js-enabled">
<li><a href="<?php bloginfo('url');?>/">Home</a></li>
<li><a href="<?php bloginfo('url');?>/about">About</a></li>
<li><a href="<?php bloginfo('url');?>/whats-on-tap">What's on TAP</a></li>
<li><a href="<?php bloginfo('url');?>/resume">Resume</a></li>
<li><a href="<?php bloginfo('url');?>/blog">Streaming</a>
<ul class="children">
<li><a href="<?php bloginfo('url');?>/category/sinkers">Hooks, Lines & Sinkers</a></li>
<li><a href="<?php bloginfo('url');?>/category/elusive-things">Splats, Drips, Leaks, and Other Elusive Things</a></li>
</ul>
</li>
<li><a href="<?php bloginfo('url');?>/contact">Contact</a></li>
</ul>
</div>

There aren't any missing tags. The CHILDREN UL is within the main UL tags (see bold and italics). The children menu is the dropdown of the Streaming category.

I cleared up the validation errors. I'm thinking the drop down has something to do with the z-index, but I've tried setting the dropdown to 99 and the slider to 1 and it's still not working.

[SevenCubed]

There aren't any missing tags...The children menu is the dropdown of the Streaming category

Ok my bad. Your OP was a bunch of very fragmented markup and you didn't mention it was a nested menu so I didn't see that. I was just reading it line for line.

[tronathon]

Ok my bad. Your OP was a bunch of very fragmented markup and you didn't mention it was a nested menu so I didn't see that. I was just reading it line for line.

It's no problem. It's a mess to my eyes as well :)

[tronathon]

After messing around a bit, I took out height and adjusted some padding and after too much fiddling, got it to be somewhat close to what I wanted. Thanks for the validation notice though.

[SevenCubed]

Oh by the way, did you reset your margins as your first CSS rule -- that never hurts...

Make this your very first rule in your CSS...

*{margin:0;padding:0;}

You can add other elements that you think might benefit from it too.

[Major_Payne]

When using the Universal selector at the very top of your CSS, I would include the border property:

* { margin: 0; padding: 0; border: 0; }

Sometimes "focus" is included. You might look into using this master Reset CSS [meyerweb.com].