Jump to content
Killersites Community
GregP

Ie7 Not Displaying Menu Properly - Stacked Instead Of Horizontal

Recommended Posts

So, I'm a total noob when it comes to CSS. I've been trying to convert an old school HTML site to a new site with CSS and fluid design. I started with a template and have the site set up pretty much how I'd like - except that I now find that my menu in the header doesn't display properly in IE7. The menu items stack instead of spreading out nice and even, horizontally.

 

I attached two screenshots showing what it's looks like in just about all browsers and another showing what it looks like in IE7. 

 

I've been trying to find a solution but just can't seem to find it. I'm sure it's a simple solution but being a complete noob, I'm just not seeing it. I thought I found the solution when I came across this site: http://stackoverflow.com/questions/2473171/ie7-relative-absolute-positioning-bug-with-dynamically-modified-page-content but I'm still at a loss. Either I'm not implementing the solution correctly or my problem is not related to the issue this post tries to address. Most, if not all, occurrences of overflow : hidden; in the CSS were added by me in an attempt to fix the problem.  

 

I'll try to include the appropriate CSS and HTML below. 

 

Any guidance you can provide would be greatly appreciated. I'm glad I found KillerSites and this forum. It's helped me out quite a bit so far in my attempts to get up to speed with CSS. 

 

Thanks!

 

CSS:

 

.cssmenu {
position : relative;
overflow : hidden;
}
.cssmenu > ul > li {
display : inline-block;
position : relative;
overflow : hidden;
}
.cssmenu > ul > li a.home {
background : url('../images/home.png') no-repeat;
}
.cssmenu > ul > li a.home:hover {
background : url('../images/home_h.png') no-repeat;
}
.cssmenu > ul > li.active a {
color : #ffffff;
}
.cssmenu > ul > li span img {
vertical-align : middle;
overflow : hidden;
}
.cssmenu > ul > li > a {
font-family : 'Merriweather Sans', sans-serif;
color : #999999;
display : block;
font-size : 16px;
line-height : 1.5em;
padding : 9px 16px;
text-transform : uppercase;
transition : all 0.3s ease-out;
}
.cssmenu > ul > li > a:hover {
color : #ffffff;
}
.header_sub_bg {
background : #f8f8f8;
border-bottom : 1px solid #dddddd;
height : 30px;
}
.hdr-nav {
float : right;
width : 47%;
position : relative;
overflow : hidden;
}
.sub_nav li {
float : left;
position : relative;
overflow : hidden;
}
.sub_nav li.active a {
border-bottom : 1px solid #161616;
}
.sub_nav li a {
height : 38px;
color : #555555;
display : block;
float : left;
font-size : 1.1em;
padding : 8px 16px;
position : relative;
overflow : hidden;
text-decoration : none;
}
.sub_nav li:hover > a {
border-bottom : 1px solid #161616;
}

 

 

HTML:

 

<!-- start header -->
<div class="header_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
</div>
<div class="cssmenu">
<ul>
  <li class="active"><a href="index.html">Home</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="facts.html">Facts/FAQ's</a></li>
                <li><a href="howto.html">How To Apply</a></li>
                <li><a href="order.html">Order</a></li>
                <li><a href="MSDS.html">MSDS/Label Info</a></li>
                <li><a href="ticks.html">About Ticks</a></li>
                <li><a href="fleas.html">About Fleas</a></li>
                <li><a href="gnats.html">About Gnats</a></li>
                <li><a href="fireants.html">About Fire Ants</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact Us</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>

 

post-129384-0-55088000-1397985001_thumb.png

post-129384-0-93405800-1397985047_thumb.png

Share this post


Link to post
Share on other sites

Now I am sure someone will try to answer your questions directly regarding the IE7 bug ... but you have to ask yourself if it's worth even bothering with this old buggy browser that very, very few people use today.

 

Take for example web browser user stats from Wikipedia - probably a very accurate and even account of what is going on in the broader Web:

 

http://stats.wikimedia.org/archive/squid_reports/2014-01/SquidReportClients.htm

 

... And in their samples, IE7 is used 0.98% of the time! On the W3C ... it is 0%.

 

If it works on IE 10-11 and the other browsers, I think you are good.

 

Stef

  • Upvote 1

Share this post


Link to post
Share on other sites

I agree with Stef.  However, without really seeing the code myself, the odds are is that you will need to set a conditional comment for IE7 and use float:left for the list ( <li> ).  You can also try display:inline-block.  It's been about 1 1/2 years since I coded anything for IE7 so I am guessing here.

Share this post


Link to post
Share on other sites

Now I am sure someone will try to answer your questions directly regarding the IE7 bug ... but you have to ask yourself if it's worth even bothering with this old buggy browser that very, very few people use today.

 

Take for example web browser user stats from Wikipedia - probably a very accurate and even account of what is going on in the broader Web:

 

http://stats.wikimedia.org/archive/squid_reports/2014-01/SquidReportClients.htm

 

... And in their samples, IE7 is used 0.98% of the time! On the W3C ... it is 0%.

 

If it works on IE 10-11 and the other browsers, I think you are good.

 

Stef

 

Thanks Stefan, I agree. I think it's good to go. Unfortunately, my client still uses IE7. The menu displays perfectly on IE8 and above. I told him he needs to upgrade his browser. I'm keeping my fingers crossed that he takes my advice. 

 

I agree with Stef.  However, without really seeing the code myself, the odds are is that you will need to set a conditional comment for IE7 and use float:left for the list ( <li> ).  You can also try display:inline-block.  It's been about 1 1/2 years since I coded anything for IE7 so I am guessing here.

 

Thanks for the input Eddie. I'll try your suggestions. 

Share this post


Link to post
Share on other sites

I just took  a quick look at your code and I'm fairly certain transition is not allowed in ie7

 

also border-bottom is buggy in ie7; here is an example of what usually works

 

for example, instead of  border-bottom : 1px solid #161616; do below instead

border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #161616;

Share this post


Link to post
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


×