Jump to content
Stef's Coding Community
Sign in to follow this  
benjaminmorgan

Problem with navigation float in IE7

Recommended Posts

IE 7 is such a problem causer. I can not get the navigation menu to float right. It looks staggered like a diagonal. Here is my code. Help is appreciated. It should float left. the class navul is 500px and that divided by 4 = 125 px for each link

 

 

HTML

				<ul class="navul">
				<li><a class="current" href="index.html">Home</a></li>
				<li ><a href="services.html">Services</a></li>
				<li ><a href="portfolio.html">Portfolio</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>

 

CSS

.navul a {
display: inline-block;
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
color: black;
border-radius: 0 0 5px 5px;
behavior: url(pie.htc);
font-weight: bold;
text-decoration: none;
}

.navul a.current {
background: black;
color: white;
}

Share this post


Link to post
Share on other sites

I've seen this stagger in IE before. It's usually because the li tag needs a float: left, not the "a" tag inside it. Try adding

.navul li {
float: left;
}

Share this post


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.
Note: Your post will require moderator approval before it will be visible.

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...
Sign in to follow this  

×
×
  • Create New...