...

View Full Version : firefox padding on hover



orange8
11-13-2008, 12:20 AM
Hi,

I am trying to sort out a padding increase for a:hover it works in ie6 & 7 but I suspect that I am exploiting a bug in ie6/7 as it does not work in firefox - I would essentially like to achieve the same result as ie6/7 in firefox, can anyone help me?

this seems to be the particular bit of code


.section-1 #menu a:hover{
color : #000;
padding-top:5px;
padding-bottom:5px;
}

Here's the link so that you can see
http://www.wod.co.uk/dev/copy%20of%20index.htm

the html concernned


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body class="section-1">
<div id="wrapper">
<div id="header">

<!--end of header --></div>



<div id="content">

<div id="headbg">
<ul id="menu">
<li id="nav-1"><a href="index.htm">test</a></li>
<li id="nav-2"><a href="test.htm">test</a></li>
<li id="nav-3"><a href="test.htm">test</a></li>
<li id="nav-4"><a href="test.htm">test</a></li>
<li id="nav-5"><a href="test.htm">test</a></li>

<li id="nav-6"><a href="test.htm">test</a></li>
<li id="nav-7"><a href="test.htm">test</a></li>
</ul>
<!--end of headbg --></div>
<div id="mainContent">


and the css





html, body {
margin: 0;
padding: 0;
height: 100%;
text-align: left;

}

#wrapper {
margin:auto;
background: #fff;
position: relative;
top:0px;
left:0px;
min-height: 100%;
height: auto !important;
height: 100%;
background-image:url(images/content_bg.jpg);
background-repeat:repeat-x;
padding-bottom:-50px;
}


#footer{
width:100%;

position: relative;
bottom: 0 !important;
bottom: -1px;
height: 25px;
text-align:center;
color:#ccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

#header{
position:relative;
top:-15px;

background-position:center;
background-color:#009fdc;
background-repeat: no-repeat;
height:100px;
text-align:right;
}
#headbg{
text-align:left;
position:relative;
top:0px;
left:-20px;
background-position:top;
background-repeat:no-repeat;
}


#content {
position:relative;
top:0px;
color:#000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:0.8em;
margin: 0 auto 0 auto;
clear:both;
height:100%;
width:900px;;
text-align:center;
font-family:Verdana, Geneva, sans-serif;

}


#mainContent{
text-align:left;
padding:5px;
height:100%;


}
.section-1 #mainContent{
border : 1px solid #009fdc;
}
.section-2 #mainContent{
border : 1px solid #00A581;
}

/********************************************************/
/********************************************************/
/********************* conent layout ***************************/
#sidebar1 {
/*generic sidebar 1 components*/
float: left;
text-align:right;
width:150px;
padding: 15px 0;
padding-left:2px;
padding-right:2px;
}
.section-1 #sidebar1{background-color:#d0edf8;}
.section-2 #sidebar1{background-color:#e2f1eb;}
#sidebar1 h3{
text-align:left;}
#sidebar2 {
float: right;
width: 150px;
background: #fff;
padding: 15px 0;
padding-left:2px;
padding-right:2px;
}


#centralContent {
margin-left:160px;
margin-right:160px;
height:100%;
font-size:11px;

}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

/********************************************************/
/********************************************************/
/********************* menu ***************************/

#menu {
font-family:Verdana, Geneva, sans-serif;
position:relative;
top:0px;
margin: 0 ;
margin-bottom:3px;
padding: 1px 20px;
}

#menu ul, #menu li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
margin-right:5px;
}

#menu a:link, #menu a:visited {
/* background : #009fdc;*/
/*border : 1px solid #ccc;*/
color : #fff;
/* float : left;*/
font-size : 10px;
font-weight : normal;
line-height : 14px;
margin-right : 4px;
padding : 5px 10px 2px 15px;
text-decoration : none;

}

#menu a:link.active, #menu a:visited.active {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}



#nav-1{
background:#009fdc;}
#nav-2{
background:#00A581;}
#nav-3{
background:#E60022;}
#nav-4{
background:#F08400;}
#nav-5{
background:#3E60AA;}
#nav-6{
background:#E50083;}
#nav-7{
background:#7BB83C;}



.section-1 #menu li#nav-1 a,
.section-2 #menu li#nav-2 a,
.section-3 #menu li#nav-3 a,
.section-4 #menu li#nav-4 a,
.section-5 #menu li#nav-5 a,
.section-6 #menu li#nav-6 a,
.section-5 #menu li#nav-7 a
{
color : #000;

}



.section-1 #menu li#nav-1, .section-2 #menu li#nav-2 {
padding-top:2px;
padding-bottom:4px;
}

.section-1 #menu a:hover{
color : #000;
padding-top:5px;
padding-bottom:5px;
}

drhowarddrfine
11-13-2008, 12:25 AM
Couple of things.
First, you are using xhtml end tags but declare html. Remove the slashes from />. Sometimes browsers quit rendering at those points.
Second, all new pages should always use a strict doctype. There is no need for transitional.
Third, never use IE as your reference for how things should work. Always, always use a modern browser like FF, Opera, Safari.

Now on to looking at the page.

drhowarddrfine
11-13-2008, 12:27 AM
And d) validate your html and css for those lists of errors.

Apostropartheid
11-13-2008, 09:11 PM
Try using a line-height instead.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum