/    Sign up×
Community /Pin to ProfileBookmark

unwanted space between li elements in IE

Copy linkTweet thisAlerts:
Nov 01.2005

hi,

i am having a bit of difficulty with a basic CSS problem which totally ruins my layout :/

I am using an unordered list as a menu and i am using this CSS rules for it:

[CODE]
ul{
font-family: tahoma;
font-size: 10px;
letter-spacing: 1pt;
list-style-type: none;
}

li{
text-align: right;
}
[/CODE]

quite basic formatting, but the problem i am having is it looks different on IE and FF. i get unwanted space between two list elements, please check the screenshot below.

[URL=http://img130.imageshack.us/my.php?image=ulspacingie4kq.png][IMG]http://img130.imageshack.us/img130/990/ulspacingie4kq.png[/IMG][/URL]

i tried using padding:0px and margin: 0px but it didnt help.

how can i get rid of the unwanted space in IE ( so that it looks like the firefox screenshot) ?

thanks.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@drhowarddrfineNov 01.2005 — li {margin:0;padding:0} or maybe to the ul, I forgot. Make sure you have a proper doctype, too.
Copy linkTweet thisAlerts:
@ant_eater2authorNov 01.2005 — thanks for your reply drhowarddrfine, but unfortunately i still have the same error.

i am using xhtml1.1 dtd and my test page is as follows:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>x</title>

<style type="text/css">

ul{
font-family: tahoma;
font-size: 10px;
letter-spacing: 1pt;
list-style-type: none;
}

li{
text-align: right;
}

</style>

</head>

<body>

<div>
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
</ul>
</div>

</body>
</html>[/code]

i tried adding margin:0;padding:0 to both ul and li elements as you suggested but i still get the same output on IE ?

any solutions will be greatly appreciated ?
Copy linkTweet thisAlerts:
@David_HarrisonNov 01.2005 — IE won't let the size of any element be smaller than the line-height, therefore setting a smaller line-height will solve the problem.

However setting a margin and padding of 0 for ALL elements at the start of a CSS file is a very good idea, it removes the browsers defaults which can cause prolems later.

Also, it's best not to specify a font size in fixed units as users who may not be able to read it will not be able to resize it if they use IE, I would recommend setting all font sizes in %, a font-size specified in % will be that percentage of the parent elements font size.

Final point, you seem to have a rather unnecessary <div> element there, you planning on using it for something or is it just causing some page bloat?
Copy linkTweet thisAlerts:
@ant_eater2authorNov 01.2005 — thanks for your suggestion David Harrison, adjusting the line height solved my problem. As you suggested i set all the margins and paddings to 0 aswell, that is quite a useful tip ?

I understand the accesibility issue caused by the fixed font sizes but as this will be an internal used layout and i will mostly be the only one using it i didnt pay great attention to it, thanks for pointing that out.

(i snipped most of the code thats why that <div> is there lonely on its own ? )

thanks again for your comments and guidance

regards
Copy linkTweet thisAlerts:
@David_HarrisonNov 01.2005 — Happy to help. ?
×

Success!

Help @ant_eater2 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.1,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...