[Solved] Unordered List Border Problems

[Soccerboy8891]

Ok I am trying to do what I thought would be a simple rollover where the bottom-border for my li elements would turn black when hovered over but I cannot manage to get this to happen. I was able to change the background color but not the border color. Also is there a way to change the length of the bottom border to be the same width as the text inside the li element? I tried changing the size of that as well and no success but when I click on a link they all scale down and scoot together. It’s so weird. Anyway here is my code. I hope it’s not too bad. I attached some example pics of before and after clicked for the size change reference. I’m not really going for looks here just getting the functional side down first. Thanks a ton for any advice.

[attachment=0]before clicked.gif[/attachment][attachment=1]after clicked.gif[/attachment]

First the HTML

Code:

• HOME
• ABOUT
• INFO

Now the attached stylesheet

Code:

html, body{
margin:0px;
padding:0px;
}
.container {
padding: 0px;
margin: 0px auto 0px auto;
height: auto;
width: 800px;
position: relative;
}
.header {
margin:10px auto;
height: 150px;
width: 780px;
background-color: #00FFFF;
display: block;
}
.navbar {
margin: 10px;
width: 780px;
background-color: #999999;
height: 50px;
position: relative;
}
.mainContent{
width: 780px;
height: 370px;
margin: 10px 10px;
background-color: #808080;
}
.navbar ul {
list-style: none;
position: absolute;
margin: 0px 0px;
padding: 0px;
top: 14px;
list-style-type: none;
}
.navbar ul li a:link {
margin: 0px 10px;
padding: 0px;
color: #FFFFCC;
font-weight: bold;
text-decoration:none;
}
.navbar ul li a:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
text-decoration:none;
}
.navbar li{
display: inline;
border-bottom: 2px solid red;
max-width: 125px;
padding-left: 5px;
padding-right: 5px;
}

[jamygolden]

Change your css to this and see if it helps:

Code:

*{
margin:0;
padding:0;
}
.container {
margin: 0 auto;
width: 800px;
position: relative;
}
.header {
margin:10px auto;
height: 150px;
width: 780px;
background-color: #00FFFF;
display: block;
}
.navbar {
margin: 10px;
width: 780px;
background-color: #999999;
height: 50px;
position: relative;
}
.mainContent{
width: 780px;
height: 370px;
margin: 10px;
background-color: #808080;
}
.navbar ul {
list-style: none;
position: absolute;
top: 14px;
list-style-type: none;
}
.navbar ul li a {
border-bottom: 2px solid red;
margin: 0 10px;
color: #FFFFCC;
font-weight: bold;
text-decoration:none;
}
.navbar ul li a:hover{
border-bottom: 2px solid black;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.navbar li{
display: inline;
max-width: 125px;
padding: 0 5px;
}

Feel free to ask if you have any other questions.

[Soccerboy8891]

Thank you that did exactly it. I will go back and make comparisons now and see where I went wrong. I already noticed I had a class in the style sheet that I no longer used in the html and some of my code was repetative. Thank you for the help.

[Author]

Posts