Log in

View Full Version : Resolved Padding on hover works in FF but not IE



roadjan
03-18-2009, 02:03 PM
Hi there

I have set the hover of the menu to create padding to give the effect of growth and emphasis to each link. It works great in ff but will not expand in ie - please help this is driving me crazy!!

The link - http://www.roundcloud.co.uk/index.html

Here is my html:


<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Competition</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Customers</a></li>
<li><a href="index.html">Partners</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>

and the css:


* {
margin: 0px;
padding: 0px;
}

html {
height: 100%;
margin-bottom: 1px;
}

body {
width: 800px;
margin: 0px auto 0px auto;
font-family: georgia;
font-size: 9pt;
background-color: #000;
color: #fff;
text-align: justify;
padding: 10px 0px 0px 0px;
background-image: url("freshair.jpg");
background-repeat: no-repeat;
background-position: center;
}

/* MENU
-------------------------------*/

div#menu {
}

div#menu ul {
width: 800px;
font-size: 13pt;
font-weight: bold;
}

div#menu li {
padding: 5px 0px 5px 0px;
border-top: 1px solid;
border-bottom: 1px solid;
display: inline;
float: left;
width: 133px;
text-align: center;
}

div#menu li a {
text-decoration: none;
color: #fff;
}

div#menu ul li a:hover {
text-decoration: none;
color: #0041c9;
background-color: #fff;
padding: 10px;
font-weight: bold;
border: 1px solid #0041c9;
margin: 0px;
}

Snookerman
03-18-2009, 03:55 PM
Add this to your CSS code:

div#menu ul li a:hover {
text-decoration: none;
color: #0041c9;
background-color: #fff;
padding: 10px;
font-weight: bold;
border: 1px solid #0041c9;
margin: 0px;
position: relative;
}

Good luck!

roadjan
03-18-2009, 04:08 PM
Snookerman - awesome, thank you. I will be posting on here from now on, I wasted hours, my talents are clearly limited.....

Snookerman
03-18-2009, 04:10 PM
You're welcome, glad to help!
You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!