Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Problems in IE
I’m working on a design for a friend of mine and I’ve ran into a problem that I was hoping someone with a lot of CSS knowledge (well at least more than me – and that should be just about everyone) could help me out. The site looks just fine – considering it’s still in a design phase – in all but IE 5.5 through IE 6. You can see what I’m talking about here
If anyone has any suggestions, I’d really appreciate it.
-Josh
Offline
Re: Problems in IE
First put this in:
ul#nav li {
display: inline;
}
then
Change all of your uppercase to lowercase in your css file. Don’t use uppercase for XHTML or CSS. It’s just bad practice and doesn’t follow spec.
Offline
Re: Problems in IE
Nice site! Here’s your main problem:
<code>
#nav li a {
display: block;
float: left;
text-align: center;
width: 120px;
padding: 9px 0;
color: #9f9f9f;
text-decoration: none;
text-transform: uppercase;
}
</code>
Just move some of the rules to the li, and switch it to display:inline.
<code>
#nav {
width: 750px;
height: 35px;
margin: 0;
padding: 9px 0; /*pad the top for the li’s*/
position: absolute;
top: 0;
left: 0;
text-align: center;
}
#nav li {
display: inline;
padding: 9px 20px;
text-transform: uppercase;
}
#nav li a {
color: #9f9f9f;
text-decoration: none;
}
#nav li a:hover {
color: #eeeee7;
}
</code>
Display: inline is much easier to work with than floats. Just add side padding to increase the width (can’t set the width for inline).
Last edited by deldindesign (2006-06-07 19:08:51)
Offline
Re: Problems in IE
Thanks for the quick replies. I totally forgot to ditch the padding and margins on the #nav li{} as well as place it inline. That fixed the problem.
Solution:
#nav li {<br />
padding: 0;<br />
margin: 0;<br />
display: inline;
}
Again, thanks for all the help!
Offline
Pages: 1