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:
ul{
font-family: tahoma;
font-size: 10px;
letter-spacing: 1pt;
list-style-type: none;
}
li{
text-align: right;
}
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.
<!-- m --><a class="postlink" href="http://img130.imageshack.us/img130/990/ulspacingie4kq.png">http://img130.imageshack.us/img130/990/ ... gie4kq.png</a><!-- m --> (<!-- m --><a class="postlink" href="http://img130.imageshack.us/my.php?image=ulspacingie4kq.png">http://img130.imageshack.us/my.php?imag ... gie4kq.png</a><!-- m -->)
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.li {margin:0;padding:0} or maybe to the ul, I forgot. Make sure you have a proper doctype, too.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:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item 3</a></li>
</ul>
</div>
</body>
</html>
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
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?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
regardsHappy to help.
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:
ul{
font-family: tahoma;
font-size: 10px;
letter-spacing: 1pt;
list-style-type: none;
}
li{
text-align: right;
}
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.
<!-- m --><a class="postlink" href="http://img130.imageshack.us/img130/990/ulspacingie4kq.png">http://img130.imageshack.us/img130/990/ ... gie4kq.png</a><!-- m --> (<!-- m --><a class="postlink" href="http://img130.imageshack.us/my.php?image=ulspacingie4kq.png">http://img130.imageshack.us/my.php?imag ... gie4kq.png</a><!-- m -->)
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.li {margin:0;padding:0} or maybe to the ul, I forgot. Make sure you have a proper doctype, too.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:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item 3</a></li>
</ul>
</div>
</body>
</html>
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
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?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
regardsHappy to help.