Jump to content

Css Problem In Ie7 (Ul And Span)


moonlurker
 Share

Recommended Posts

Hi forum, I've been struggling with an annoying bug in IE7. You can see in the pictures how the nav it's correctly displayed in any friendly browser and in that spooky thing called IE7. I've put a red border around the <li> elements so you can see what's the problem in IE7, hope you can find me to find the solution to it. Chromesample-chrome.jpg IE7sample-ie7.jpgAs you can see the <li> elements are being extended to the right and overlapping the <span> element in the right. Here's my HTML and CSS for reference HTML

<div class="category-image"><img src="images/PipelineImage.jpg" alt="main-pic-development" width="700" height="264"/><ul class="subnav"><span class="left-yell-corner"></span> <li class="yell-bg"><a href="#">Pipeline</a></li> <span class="right-yell-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">TDD Opportunities</a></li> <span class="right-blue-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">Technologies</a></li> <span class="right-blue-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">Publications</a></li> <span class="right-blue-corner"></span></ul></div>

CSS

.category-image {width:100%;position: relative;float: left;margin-top:20px;margin-bottom: 30px;}[/b][b]ul.subnav {display: block;float: left;width: auto;margin-left: 60px;margin-right: auto;margin-top: -38px;position: relative;}[/b][b]ul.subnav li {display: inline;width: auto;text-decoration: none;list-style-type: none;font-family: Arial, sans-serif;font-size: 15px;font-weight: lighter;border: 1px solid red;}[/b][b]ul.subnav li a{display: block;float: left;text-decoration: none;margin-top: 10px;height: 20px;padding: 0 10px;color: white;position: relative;}[/b][b]ul.subnav li.yell-bg {float: left;list-style-type: none;background: url(../../images/subnav-yellow-pattern.png) repeat-x;height: 55px;}[/b][b]ul.subnav span.left-yell-corner {float: left;display: block;width:9px;height: 55px;background: url(../../images/subnav-yellowcorner-left.png) no-repeat 0 0;}[/b][b]ul.subnav span.right-yell-corner {float: left;display: block;width:9px;height: 55px;background: url(../../images/subnav-yellowcorner-right.png) no-repeat 0 0;margin-right: 2px;}[/b][b]ul.subnav li.blue-bg {float: left;list-style-type: none;background: url(../../images/subnav-blue-pattern.png) repeat-x 0 3px;display: block;height: 38px;padding-top: 1px;position: relative;}[/b][b]ul.subnav span.left-blue-corner {float: left;display: block;width:8px;height: 38px;background: url(../../images/subnav-bluecorner-left.png) no-repeat 0 3px;}[/b][b]ul.subnav span.right-blue-corner {float: left;display: block;position: relative;width:8px;height: 38px;background: url(../../images/subnav-bluecorner-right.png) no-repeat 0 3px;margin-right: 4px;}[/b][b]

Thank you very much in advance, hope you can help me guys.

Edited by moonlurker
Link to comment
Share on other sites

One problem there is that you have invalid mark-up. You can't have <span> elements right under a <ul>. The <ul> can contain nothing by <li> elements in it. Validate your HTML here: http://validator.w3.org/ I'd say that Internet Explorer is trying to put the spans inside the <li> elements to make sense out of your HTML.

Link to comment
Share on other sites

Put the spans inside the <li> elements. and put a third element between the two spans for the middle image instead of putting a background on the <li>

<li>  <span class="yellow-left"></span>  <span class="yellow-middle">    Content  </span>  <span class="yellow-right"></span></li>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...