Welcome!

[mjbaker]

Hello all,

In the attached image you can see the error that I'm talking about. I can't reproduce this on my machine using IE, but it has registered on other computers running IE 8.

Any help would be greatly appreciated.



Here is my code:

CSS:

Code: Select all


#topMenu { float:left; width:575px; margin-left:50px; }
.topMenu { list-style-type:none;    }

.topMenu a {  font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333; text-decoration:none; padding:44px 20px 42px 20px; float:left; max-width:100px; clear:none; }

.topMenu1 { list-style-type:none;    }

.topMenu1 a {  font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333; text-decoration:none; padding:44px 20px 42px 20px; float:left; clear:none; }

.topMenu a:hover { color:#374f9d; background-image:url(images/menuarrow.png); background-repeat:no-repeat; background-position:bottom center; }

.topMenu1 a { font-weight:bold; color:#374f9d; background-image:url(images/menuarrow.png); background-repeat:no-repeat; background-position:bottom center; }


xhtml:

Code: Select all

<ul id="topMenu">

<?php $purparrow = $post->post_title; ?>

<?php if ($purparrow == 'Services') { ?><li class="topMenu1"><?php } else { ?><li class="topMenu"><?php } ?><a href="/butsko/services">Services</a></li>
<?php if ($purparrow == 'Portfolio') { ?><li class="topMenu1"><?php } else { ?><li class="topMenu"><?php } ?><a href="/butsko/portfolio">Portfolio</a></li>
<?php if ($purparrow == 'Some news item') { ?><li class="topMenu1"><?php } else { ?><li class="topMenu"><?php } ?><a href="/butsko/2009/09/newest-post/">News</a></li>
<?php if ($purparrow == 'Industry links') { ?><li class="topMenu1"><?php } else { ?><li class="topMenu"><?php } ?><a href="/butsko/industry-links">Industry links</a></li>
<?php if ($purparrow == 'Careers') { ?><li class="topMenu1"><?php } else { ?><li class="topMenu"><?php } ?><a href="/butsko/careers">Careers</a></li>
<?php if ($purparrow == 'Contact' || $purparrow == 'Team')  { ?><li class="topMenu1"><?php } else { ?><li class="topMenu"><?php } ?><a href="/butsko/contact">Contact</a></li>

</ul><!-- End UL id="topMenu" -->


[mjbaker]

Should also note that the issue existed before "max-width" was used in the CSS

[falkencreative]

I'd suggest starting by removing the float on the <a>s within the menu, and floating the <li>s left instead. I believe that should fix your issue (though you may need to tweak your CSS to make it work). Alternately, you should be able to use display:inline instead.

[mjbaker]

I'd suggest starting by removing the float on the <a>s within the menu, and floating the <li>s left instead. I believe that should fix your issue. (Or you should be able to use display:inline)

I think this is how it was originally setup when the error began, but I could be wrong, I'll try it again, thanks.

Where would you place the display:inline (I'd assume on the li in an IE specific style sheet)?

Can you possibly provide any insight into why this is not happening for me in IE8, but does with another computer?

Thank you!

[falkencreative]

Where would you place the display:inline (I'd assume on the li in an IE specific style sheet)?

You should be able to place it in your regular style sheet -- it'll work just fine in other browsers.

Can you possibly provide any insight into why this is not happening for me in IE8, but does with another computer?

Are you accidentally running IE7 Compatibility mode? Other than that, I really have no idea.

If you provide a link to the site, or send it to me in a private message, (that'll let me edit using Firebug), I should be able to provide you with the actual code you need.

[Andy]

Code: Select all

#topMenu {
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

#topMenu li {
  float: left;
}

#topMenu a {
  color: #333;
  display: block;
  font: 0.8em Arial, Helvetica, sans-serif;
  padding: 44px 20px 42px 20px;
  text-decoration: none;
}

#topMenu a:hover {
   color:#374f9d;
   background:url(images/menuarrow.png) no-repeat bottom center;
}

.topMenu1 a { font-weight: bold }


[mjbaker]

Thanks you two, moving the float to the li element made it work.