5 replies [Last post]
White Rabbit
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2007-01-05
Posts: 12
Points: 0

Ok here's the problem. The UL in the middle section which contains a navigation menu is acting strange. The effects all look fine, but whenever a link is clicked, it seems like some padding is disappearing or something. Load up the page and try clicking on all the links in the left menu to see what I mean.

/*page size and background color*/

html, body{
margin: 0;
height: 100%;
background-color: rgb(230,230,230);
}

/*header section including main navigation and logos*/

#top{
background-image: url('images/headerBG.jpg');
background-repeat: x;
height: 100px;
margin: 0;
min-width: 700px;
}

#top img{
margin-top: 10px;
margin-left: 5px;
float: left;
}

h1{
/*position: absolute;
right: 5px;*/
float: right;
padding-left: 75px;
margin-right: 5px;
border-bottom: dashed gray 1px;
font: normal normal 32px 'Arial Black', Arial, sans-serif;
color: rgb(185,185,185);
}

#top ul{
position: absolute;
top: 55px;
right: 5px;
list-style-type: disc;
min-width: 400px;
text-align: right;
}

#top ul li:first-child{
border-left: solid gray 1px;
}

#top ul li{
display: inline;
margin: 0;
padding: 5px;
border-right: solid gray 1px;
font: normal normal 14px arial, sans-serif;
}

#top ul li a:link, a:active, a:visited{
color: black;
text-decoration: none;
border: solid transparent 1px;
padding-left: 2px;
padding-right: 2px;
line-height: 130%;
}

#top ul li a:hover{
color: black;
background-color: white;
border: solid black 1px;
padding-left: 2px;
padding-right: 2px;
line-height: 130%;
}

#top a.logout:link, a.logout:visited, a.logout:active{
color: white;
text-decoration: none;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 1px;
border: solid transparent 1px;
}

#top a.logout:hover{
color: white;
background-color: rgb(100,100,100);
border: solid white 1px;
}

#top a.logout{
position: absolute;
top: 82px;
right: 5px;
font: normal normal 12px verdana, sans-serif;
}

/*Middle navigation menu*/

#middle ul{
float: left;
padding: 10px;
min-width: 80px;
max-width: 200px;
margin: 10px;
list-style-type: square;
list-style-position: inside;
}

#middle ul li{
border-bottom: dotted gray 1px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
padding-top: 2px;
background-color: rgb(245,245,245);
font: normal normal 12px arial, sans-serif;
color: rgb(185,185,185);
}

#middle ul li:first-child{
border-top: dotted gray 1px;
}

#middle ul li a:link, a:active, a:visited{
color: /*rgb(100,100,100)*/black;
text-decoration: none;
border: solid transparent 1px;
padding-left: 2px;
padding-right: 2px;
display: block;
}

#middle ul li a:hover{
color: /*rgb(245,245,245)*/black;
background-color:white;
border: solid black 1px;
padding-left: 2px;
padding-right: 2px;
display: block;
}

#middle{
background-color: white;
min-height: 70%;
margin: 0;
}

/*middle content section*/

#content{
margin-top: 10px;
background-color: white;
height: 100%;
}

h2{
font: normal normal 26px 'Arial Black', sans-serif;
color: rgb(100,100,100);
}

/*

classes*/

.description{
font: normal italic 12px verdana, sans-serif;
color: rgb(125,125,125);
}

/*footer section*/

#bottom{
background-color: rgb(245,245,245);
border-top: solid gray 1px;
border-bottom: solid gray 1px;
height: 75px;
text-align: center;
}

Practice3

New Portal Name
  • Trade Evaluation
  • Vehicle Walk
  • Inventory Targets
  • Daily UC Reports
  • Poogi
  • Recon
log out



  • Start Evaluation

  • Complete Vehicle Info

  • Pending Evaluations

  • Book Evaluations

  • View/Print Evaluations

  • View Dashboard

  • Reports

  • Administration

Vehicle Info



This is a class for descriptive text that gives information or

instructions on how to use the current section, or any other special notes.

White Rabbit
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2007-01-05
Posts: 12
Points: 0

Ok, I didn't notice this

Ok, I didn't notice this before, but the top menu is even worse. I have no clue what the heck is going on. The menu items are jumping all over the place!

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 10 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

LOL you broke it!!! Ok ok

LOL you broke it!!! Ok ok fine. Smile sorry I had to just say that.

Anyways. I want you to look at this, this is your code broken up:

#top ul li a:link, a:active, a:visited { color: black; text-decoration: none; border: solid transparent 1px; padding-left: 2px; padding-right: 2px; line-height: 130%; }

Do you notice that your a:active and a:visited are universal, and not restricted to #top?? That is why when the link jumps around.

Secondly, what did you do, your page is now completely corrupted in FireFox. I suggest you use the method I showed you earlier for your navigation. Goodluck!!

White Rabbit
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2007-01-05
Posts: 12
Points: 0

lol thanks very much. I see

lol thanks very much. I see what is going on now. Thanks again.

EDIT: Ok, i switched it to this and it still does the same thing. Am I doing this correctly?

#top ul li a:link, #top ul li a:active, #top ul li a:visited{ color: black; text-decoration: none; border: solid transparent 1px; padding-left: 2px; padding-right: 2px; line-height: 130%; }

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 10 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

#middle ul li a:link,

#middle ul li a:link, a:active, a:visited{ color: /*rgb(100,100,100)*/black; text-decoration: none; border: solid transparent 1px; padding-left: 2px; padding-right: 2px; display: block; } how about this part?

White Rabbit
Offline
Regular
Last seen: 13 years 43 weeks ago
Joined: 2007-01-05
Posts: 12
Points: 0

Ok, ok I think I get it now.

Ok, ok I think I get it now. Got it fixed. Thanks very much for your help!