Horizontal menu. One menu item is wider then others (css)

HTML & CSS
1

:confused:Hi everyone,
This is apparently a very simple “menu” style but it contains a problem I cannot solve by myself :frowning:
This is my HTML code:


<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="css/test.css" />
  </head>
  <body>
    <ul>
      <li class="no_border"><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li><a href="#">d</a></li>
    </ul>
  </body>
</html>

and this is my “test.css” file


ul {
    position:absolute;
    border-bottom:1px solid #9fa9aa;
    border-right:1px solid #9fa9aa;
    border-left:1px solid #9fa9aa;
    list-style-type:none;
   }
ul li {
    float:right;
    border-right:1px solid #9fa9aa;
    color:#9fa9aa;
    font-family:tahoma, arial,"sans serif";
    font-size:100%
    }
ul li.no_border {border-right:none}
a {
   text-decoration:none;
   color:#9fa9aa;
   background-color:e6d9ad;
   }
a:hover {background-color:red;}

Attached is a screenshot of how my page is displayed through a Chrome browser.
Why is “d” menu item wider then the other menu items !!!:frowning:
What did I do wrong to make “d” menu item wider then the rest of them menu items?!!:injured:
How can I make “d” menu item as wide as the rest of the menu item ?!
henks a lot !

2

The attachment doesn’t work for me. But try putting: width: 200px; on the ul li class. The reason the D li is bigger than the rest is it is probably using all of the available width left for the menu. If you specify how much width each one must take, then it won’t use up the rest. If you wanted them even widths relative to the base width, try using width % instead of pxs.

3

If that’s your only code, then it’s just the default margin/padding on the UL. You can remove that like so:

ul{
    margin: 0; 
    padding:0;
}
4

Thanks Patch but it didn’t work. I adde:


border:2px solid;
width:3%;

to ul and what I got is the screeshot attached.

5

You are so right Ralph.m and I’m so grateful…

6

Add it to the ul li class and not the just the UL (the ul will encompass the whole menu, whereas you want each listing (li) the same size)

7

Thanks,
I did as you suggested but it didn’t work.
Anyway, what ralph.m suggested is the right thing to do.
Few years ago I was advised in this very forum to assign 0, at the beginning of any css file, to whole lot of selectors such as padding, margin and a lot more but I forgot to do so because I bump into css rarely and when it happens I find myself forgetting many things :frowning:
Thank you !

8

Yeah, it could be considered a bit lazy, but something like this at the start of your style sheet can save a lot of messing around later:

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}