Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    firefox padding on hover

    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

    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

    Code:
    <!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


    Code:
       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;	
    	}

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    And d) validate your html and css for those lists of errors.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Try using a line-height instead.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •