Jump to content

Mouse Over Bar Color Problem


Takuaraa
 Share

Recommended Posts

Hello, I've to build a website as a project. For the beginning I started to make this bar. lenzw374.png The problem is that when I pass with my mouse over a box, the whole box should be yellow but that's not the case. Here's what happens. 92blb798.png What am I doing wrong? Here's my HTML + CSS code.

<!DOCTYPE html><html> <head>  <title>CESIR</title>  <meta charset="UTF-8" />  <link href="CESIR.CSS" type="text/css" rel="stylesheet"></head> <body><div class="menu">  <ul>   <li><a href="http://www.cesir.net/index.php">Présentation</a></li>   <li><a href="http://www.cesir.net/axerecherche.php">Axes de recherche</a></li>   <li><a href="http://www.cesir.net/contenuformation.php">Formations et séminaires</a></li>   <li><a href="http://www.cesir.net/#">Groupes de travail</a></li>   <li><a href="http://www.cesir.net/contenudossier.php">Dossiers</a></li>   <li><a href="http://www.cesir.net/#">Contact</a></li>  </ul></div></body></html>

body	 {	   min-width:1350px;	   font-family:arial;	  }	.menu ul	 {	   margin-top:0px;	   list-style:none;	   border-style:solid;	   border-width:1px;	   padding-bottom:15px;	   padding-top:15px;	   margin-right:150px;	   margin-left:150px;	  	   /* ***** BACKGROUND COLOR ***** */	   background: rgb(206,219,233); /* Old browsers */	   background: -moz-linear-gradient(top,  rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6+ */	   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1))); /* Chrome,Safari4+ */	   background: -webkit-linear-gradient(top,  rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10+,Safari5.1+ */	   background: -o-linear-gradient(top,  rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Opera 11.10+ */	   background: -ms-linear-gradient(top,  rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* IE10+ */	   background: linear-gradient(to bottom,  rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C */	   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=0 ); /* IE6-9 */	  	   /* ***** BORDER RADIUS ***** */	   -moz-border-radius-bottomright:50px;	   border-bottom-right-radius:50px;	   -moz-border-radius-bottomleft:50px;	   border-bottom-left-radius:50px;	  }	.menu li	 {	   display:inline;	   border-style:dotted;	   border-right-width:0px;	   border-left-width:1px;	   border-top-width:0px;	   border-bottom-width:0px;	   padding-bottom:15px;	   padding-top:15px;	   padding-left:30px;	   padding-right:30px;	   margin-left:-7px;	  }	.menu li:first-child  {	   border-style:none;	   padding-bottom:15px;	   padding-top:15px;	  }	.menu a	 {	   text-decoration:none;	  }	.menu a:visited   {	   text-decoration:none;	   color:black;	  }	.menu a:hover   {	   text-decoration:none;	  	   padding-top:15px;	   padding-bottom:15px;	  	   background: rgb(252,234,187); /* Old browsers */	   background: -moz-linear-gradient(top,  rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6+ */	   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color-stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1))); /* Chrome,Safari4+ */	   background: -webkit-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10+,Safari5.1+ */	   background: -o-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Opera 11.10+ */	   background: -ms-linear-gradient(top,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* IE10+ */	   background: linear-gradient(to bottom,  rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C */	   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */	  }

Thanks,Takuaraa.

Link to comment
Share on other sites

You need the anchor to be either display: block; (with float) for older IE browsers, or display: inline-block; currently it is using its default of display:inline; which only stretches to content within it, also consider using padding only for the anchors horizontally, and line-height: to align vertically.

Link to comment
Share on other sites

Hello, Thank you for your answer but I didn't understand it well. In the ".menu li" I changed from "display:inline;" to "display:inline-block;" and I also deleted in the ".menu ul" "padding-bottom:15px;" and "padding-top:15px;". But now I don't exactly know what to do, where to put the line-height,... . Thanks,Takuaraa

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...