Jump to content

Css Problem In Ie7 (Ul And Span)


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...