CSS Forum

**agent_KGB** · 01-16-2009, 05:48 PM

Hello, hope some of you are still at work and bored out of your mind...

i am having some problems (as always)... this time with aligning my menu bar (list) to the end of the page...

it looks good on firefox, but IE giving me hell (placing some margins to the left of my menu buttons)

my CSS code

Code:

}
#left_side {
    position:relative;
    width:150px;
    float:left;
    padding:5px 2px;
    margin:10px 0px 15px 0px;
    border:1px solid black;

ul#leftnavlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}

ul#leftnavlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#leftnavlist li a
{
display: block;
width: 100%;
padding: 0.1em 0 0.1em 0.1em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: White;
text-decoration: none;
background: #ae1401;
}

#leftnavcontainer>ul#leftnavlist li a { width: auto; }

ul#leftnavlist li#active a
{
background: #cc6600;
color: White;
}

ul#leftnavlist li a:hover, ul#leftnavlist li#active a:hover
{
color: white;
background: #cc6600;
border-color: #aaab9c #fff #fff #ccc;
}

My HTML Code

Code:

<div id="left_side">
<ul id="leftnavlist">
  <li><a href="#">Bracelets</a></li>
  <li><a href="#">Earrings</a></li>
  <li><a href="#">Necklaces</a></li>
  <li><a href="#">Sets</a></li>
</ul>
<br>
<ul id="leftnavlist">
  <li><a href="#">Men's Jewelry</a></li>
  <li><a href="#">Women's Jewelry</a></li>
  <li><a href="#">Past Creations</a></li>
</ul>
</div>

...i know... it would save everyone some time if i'd hire a real pro ;0)

**angele803** · 01-16-2009, 06:06 PM

Not sure if this is in your actual code, or if something might have happened when you were copying and pasting it here, but your style for "#left_side" does not have a closing bracket, and there is a closing bracket at the top.
You might also try adding this to the top of your stylesheet:

Code:

*, html{
        margin:0;
        padding:0;
        }

That will clear the margins and padding that different browsers automatically throw in.

**agent_KGB** · 01-16-2009, 06:20 PM

thanks Angele..
- i went ahead and added HTML tag to my css file... no luck
- checked my "#left_side" there is a closing thing... i just didn't copy it ;0)

i'll kick it around for a bit... who knows maybe IE will stop being such an *** and fix it by itself ;0)

**Brian07002** · 01-16-2009, 07:08 PM

If your clients primarily use IE then I would take this further, otherwise, I would just move into firefox / opera or any mozilla base browser to remedy this issue.

**LadynRed** · 01-17-2009, 01:37 PM

Ok, for one thing you're re-using the ID of #leftnavlist - you can't do that. ID's MUST be UNIQUE, one use on a page. If you change it to a CLASS, you can re-use it all you want.

The extra spacing between buttons is coming from the width:auto, get rid of it, the extra spacing disappears. You don't need width: auto - that's pretty much the default behavior. This code works:

Quote:

#left_side {
position:relative;
width:150px;
float:left;
padding:5px 0px;
margin:10px 0px 15px 0px;
border:1px solid black;
}

ul.leftnavlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}

ul.leftnavlist li
{
display: block;
margin: 0;
padding: 0;
height: 1%;
}

ul.leftnavlist li a
{
display: block;
width: 100%;
padding: 0.1em 0 0.1em 0.1em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: White;
text-decoration: none;
background: #ae1401;

}

/*ul.leftnavlist li a { width: auto; }*/

ul.leftnavlist li.active a
{
background: #cc6600;
color: White;
}

ul.leftnavlist li a:hover, ul.leftnavlist li.active a:hover
{
color: white;
background: #cc6600;
border-color: #aaab9c #fff #fff #ccc;
}
</style>
</head>

<body>

<div id="left_side">
<ul class="leftnavlist">
<li><a href="#">Bracelets</a></li>
<li class="active"><a href="#">Earrings</a></li>
<li><a href="#">Necklaces</a></li>
<li><a href="#">Sets</a></li>
</ul>
<br>
<ul class="leftnavlist">
<li><a href="#">Men's Jewelry</a></li>
<li><a href="#">Women's Jewelry</a></li>
<li><a href="#">Past Creations</a></li>
</ul>
</div>