Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
li in horizontal list doesn't break in IE!
In Firefox on a Mac:
In IE6/7:
It looks like a common bug but I can’t solve it. Any help?
Last edited by RedFox (2010-02-22 18:19:51)
Offline
#2 2010-02-22 19:14:44
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: li in horizontal list doesn't break in IE!
Oh yes, I’ve had that before. I ‘solved’ it by replacing all spaces with non-breaking spaces… Can’t help you but I’d love to hear a solution too ;)
Offline
#3 2010-02-23 02:46:33
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: li in horizontal list doesn't break in IE!
This is part of your CSS-file:
#nav {
clear: both;
background-color: transparent;
}
ul.directory {
float: left; /* Make parent float if children float! */
padding: 10px 40px 20px 40px;
}
ul.directory li {
float: left;
padding: 0 6px 10px 2px;
font-size: 1.2em;
color: #3e465c;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
line-height: 100%;
display: inline;
}Why do you declare float: left and display: inline?
Offline
Re: li in horizontal list doesn't break in IE!
GugUser
Left floats on li’s to line up from left to right; display: inline for IE to get this right > www.positioniseverything.net
Last edited by RedFox (2010-02-23 08:54:26)
Offline
#5 2010-02-23 13:07:13
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: li in horizontal list doesn't break in IE!
Redfox
This is true for horizontally arranged lists, and so, in this case, an element with float requires a width (display: inline only, if you declare a margin: left or a margin: right).
If you want every link lined side by side, then that is better without a list, only with the a-elements. In an vertical list (default), the li-elements are blocks.
Offline
Re: li in horizontal list doesn't break in IE!
Everything is working now (as wanted!) in IE. Put whitespace: nowrap; in/on the li’s and you’re there … :)
Offline
#7 2010-02-23 15:38:35
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,473
Re: li in horizontal list doesn't break in IE!
One thing is to do it right, another find a solution with a trick.
You decided for the second option.
What means nowrap?
What happens if you enlarge the text? ;-)
Offline