/    Sign up×
Community /Pin to ProfileBookmark

CSS IE6 LI Width Problem

Copy linkTweet thisAlerts:
Jun 04.2007

Hi,

I am using a CSS Suckerfish horizontal dropdown and it all works fine apart from on IE6.

The problem is that the li tags seems to stretch the full width of the page and sit on top of each other.

If i set the width on the li this fixes it, but the problem is I have lots of items in the navigation and fixing a width for each of the li’s is not possible – so I have just set padding etc.

Is there anyway around this to get it to display in IE6 without having to set the width on the li?

Thanks

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 04.2007 — How about posting the code you are using, or a link to a tempory site??
Copy linkTweet thisAlerts:
@WebJoelJun 04.2007 — If i set the width on the li this fixes it, but the problem is I have lots of items in the navigation and [I]fixing a width for each of the li's is not possible[/I] - so I have just set padding etc.[/QUOTE] You are not applying width inline, are you? If you have many <li>s then yes, -that would not be feasible or reasonable.

Maybe a global setting for all <li>. If the content of the <li> is a hyperlink, then you have options. By setting the margins of the [I]li a {margin:0 10px 0 10px}[/I] for instance, and display:block; probably, you can get each <li>'s anchor to have 10-pixels right and left padding (thus being the apparent width of the drop-down).

I prefer a default width and text-align:left; (or center). To me, this looks more 'professional' than varying widths of drop-down lists.

But need to see the code.
Copy linkTweet thisAlerts:
@prismeMay 07.2008 — Hi I'm using a suckerfish mod called superfish and I was facing the same issue

this thread put me on the right way and I just wanted to share my experience, hope this helps

I've just made the CSS targeting more specific and went from this

.nav ul li,

[B].nav a[/B] {

width: 100%;

}

to this

.nav ul li,

[B].nav ul li a[/B] {

width: 100%;

}
Copy linkTweet thisAlerts:
@CentauriMay 08.2008 — The problem is that the li tags seems to stretch the full width of the page and sit on top of each other.[/QUOTE]

this is commonly caused by setting the <a>s as blocks of undefined width and the <li>s as inline - IE6 doesn't like that much. I find the most reliable way is to float [B]both[/B] the <a>s and <li>s left.
Copy linkTweet thisAlerts:
@ashlinixonDec 23.2010 — This saved me-- thank you!
×

Success!

Help @Disfunctional spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...