moonlurker Posted December 14, 2011 Share Posted December 14, 2011 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. Chrome IE7As 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. Link to comment Share on other sites More sharing options...
Ingolme Posted December 14, 2011 Share Posted December 14, 2011 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 More sharing options...
moonlurker Posted December 15, 2011 Author Share Posted December 15, 2011 Thank you very much Ingolme, I'd heard about that <span> inside an <ul>, I've doing some research to find a better technique to achieve that tabs but with no luck, I need these tabs to be fluid using transparent PNGs, do you know some technique that I could use? Link to comment Share on other sites More sharing options...
Ingolme Posted December 15, 2011 Share Posted December 15, 2011 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 More sharing options...
moonlurker Posted December 16, 2011 Author Share Posted December 16, 2011 Wow, thanks a lot! I'll have in mind that a <span> inside an <ul> isn't valid HTML and try to avoid this problems at the design stage. Thank you very much again! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.