extra border with firefox

In IE i have horizontal  links that display ok but in FF the border and hover area is over the desired height and sticks out at the bottom of the row by about 2-3 px.

this is the entire code and label2 cssClass is causing the problems.
.top2 { 
        
        border  :1px outset  black;
      background-color :#f82121;
        width:1100px;
       
}  
 
.label2 {
	
	font-size:12px;
	font-family:verdana;
	font-weight:bold;
	text-decoration: none;
    padding:5px;
    padding-bottom:10px;
	display: inline;
	color: Yellow;
	border-left:1px solid #000000;
	border-right:1px solid #000000; 
	 margin-left:-4px;
	
 
 
}   
 
.label2:hover {
	background-color:#d1dcce;
	color:#000000;
	height :30px;
    border-bottom:1px solid #000000; 
 
}
 
.hmenu
{padding-left:870px; 
     
}
   <div class="top2" >
       
      
            <div class="hmenu">
              
                 <asp:HyperLink ID="HyperLink5" CssClass="label2" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>

Open in new window

jagguyAsked:
Who is Participating?
 
v2MediaCommented:
Kudos to the css master =)
0
 
v2MediaCommented:
Could you please post the resulting html for the page, not asp?
0
 
jagguyAuthor Commented:
here is all of it and i cant work it out why i get this extra vertical border on FF
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
      <style  type ="text/css" >
     body { 
    margin: 0px;
    padding: 0px;
       background-color :#e8feff;
         width:1100px;
} 
/*to float an image or area you change the normal webflow and objects can appear to the sid eof it on the same level.
you must clear float to stop using it eg clear: left;*/
 
.top { 
        height : 150px;
        border  :1px outset  black;
        background-color :#08289d;
        width:1100px;
  
        }
 
   
.top2 { 
        
        border  :1px outset  black;
      background-color :#f82121;
        width:1100px;
       
}     
 
.left  
{        float:left; 
        border  :1px outset  black;
         background-color :#0fb7c1;
        width:180px;
         height:800px;
                  }
        
.content {  
        float:left;
        margin-left:10px;
        background-color :#ffffff;
        width:675px;
        height:800px;
        border  :1px outset  black;
        }   
             
.right {  
        float:left;
        margin-left:10px;
        border  :1px outset  black;
        width:215px;
        background-color :#0fb7c1;
        height:800px;
             
          }  
  .footer{  clear:left;
        border  :1px outset  black;
         background-color :#08289d;
        width:1100px;
        font-size:10px;
    	font-family:verdana;
    	font-weight:bold;
    	color:yellow;
        }   
  
  
             
          #form1
          {
              height: 596px;
          }
 
 
 
.img2 {position:relative;
       top :19px;
       left :36px;
       border  :1px outset yellow;
             
          }
 
 
 
.label1 {
	padding:5px;
	font-size:12px;
	font-family:verdana;
	font-weight:bold;
	text-decoration: none;
	text-align:center ;
	
	display: block;
	color: #000000;
	 background:url(images/button1.png) ;
	  background:url(images/link8.png) ;
	 background-repeat:no-repeat ;
margin:3px;
 
 
}   
 
.label1:hover {
	color:red;
 
}
 
.label2 {
	
	font-size:12px;
	font-family:verdana;
	font-weight:bold;
	text-decoration: none;
    padding:5px;
    padding-bottom:10px;
	display: inline;
	color: Yellow;
	border-left:1px solid #000000;
	border-right:1px solid #000000; 
	 margin-left:-4px;
	
 
 
}   
 
.label2:hover {
	background-color:#d1dcce;
	color:#000000;
	height :30px;
    border-bottom:1px solid #000000; 
 
}
.label3 {
	
font-size:10px;
	font-family:verdana;
	font-weight:bold;
	text-decoration: none;
	
	display: block;
	color: #000000;
	 padding :5px 5px 5px 5px;
	
 
}  
.vmenu
{
    
}
.hmenu
{padding-left:870px; 
     
}
 
.boxbody
{position:relative;
 left:5px;
 top:5px;
    width:170px;
  border:1px solid #000000;  
  margin-bottom :5px; 
}
.boxhead h2
{margin: 0;
	padding: 5px;
	color: yellow; 
	text-align :center;
	font-weight: bold; 
	font-size: 15px; 
	border:1px solid #000000;
	background-color :#08289d;
	
}
 
 
.img3 {position:relative ;
       top :10px;
       left :25px;
       border  :1px outset yellow;
       
}
.boxbody2
{position:relative;
 left:5px;
    width:190px;
  border:1px solid #000000;   
}
.boxhead2 h2
{margin-bottom: 10px;
	padding: 5px;
	color: yellow; 
	text-align :center;
	font-weight: bold; 
	font-size: 15px; 
	border:1px solid #000000;
	background-color :#08289d;
	
}
.boxbody3
{position:relative;
 left:5px;
    width:190px;
  border:1px solid #000000;   
}
 table.servicesT
{ position:relative ;
       top :10px;
       left :10px;
       font-family: Verdana;
font-weight: normal;
font-size: 11px;
color: #404040;
width:660px;
background-color: #fafafa;
border: 1px #6699CC solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;}
 
 
table.servicesT th
{ border-bottom: 2px solid #6699CC;
background-color: #08289d;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
color: yellow
 
}
 
 
table.servicesT td
{ border-bottom: 2px solid #6699CC;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 11px;
color: #404040;
background-color: white;
text-align: left;
padding-left: 3px;}       </style> 
</head>
<body>
<form id="form1" runat="server">
    
    
      <div class="top" >
         <img src ="images/imagetop.png" class ="img2" /> 
      
   
          </div>
    
      <div class="top2" >
       
      
            <div class="hmenu">
              
                 <asp:HyperLink ID="HyperLink5" CssClass="label2" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                <asp:HyperLink ID="HyperLink6" CssClass="label2" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                <asp:HyperLink ID="HyperLink7" CssClass="label2" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                <asp:HyperLink ID="HyperLink8" CssClass="label2" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
          
            </div>
      </div>
    
      <div class="left" >
          <div class="vmenu">
             <div class="boxbody">
                <div class="boxhead"><h2>Year Level</h2></div>
	            
                   <asp:HyperLink ID="HyperLink1" CssClass="label1" runat="server" 
                    NavigateUrl="">Home dfgsdf</asp:HyperLink>
                   <asp:HyperLink ID="HyperLink2" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                   <asp:HyperLink ID="HyperLink3" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                   <asp:HyperLink ID="HyperLink4" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
             
             </div>
          </div>
           
             
             <div class="boxbody">
                 <div class="boxhead"><h2>Game Types</h2></div>
	            
                   <asp:HyperLink ID="HyperLink13" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                   <asp:HyperLink ID="HyperLink14" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                   <asp:HyperLink ID="HyperLink15" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                   <asp:HyperLink ID="HyperLink16" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
             
                
             </div>
          
      </div>
     <div class="content" >
                 <table summary="Services, or Links box template" class="servicesT" cellspacing="0" >
            <tr><th colspan="2" >Services or Links box template</th></tr>
            <tr> 
                <td>
                    <h3>
                        Ocean view circuit</h3>
                    <p>
                        <br />
                        Don&#39;t leave the Coast without walking this one. You can start out from the 
                        carpark at Burleigh headland or from the southern entrance at Tallebudgera Creek 
                        near the QPWS Burleigh Head Information Centre.</p>
                    <p>
                        This safe and easy track skirts a beautiful stretch of the river teeming with 
                        bird and fish life, past Sandy Cove and Echo Beach and beneath the giant basalt 
                        columns that form Burleigh headland.
                    </p>
                    <p>
                        Expect stunning views up and down the Coast on one side and rainforest remnants 
                        of Burleigh National Park on the other. Return along the same path back or 
                        stretch your stamina a little more on the rainforest circuit.</p>
                          <p>
                        Expect stunning views up and down the Coast on one side and rainforest remnants 
                        of Burleigh National Park on the other. Return along the same path back or 
                        stretch your stamina a little more on the rainforest circuit.</p>
                </td>
            	<td> <img src ="images/image4.jpg"  /> </td>
	           
            </tr>
            <tr> 
                <td>
                <br />
                <br />
                    <h3>Ocean view circuit</h3>
                    <p>
                        <br />
                        Don&#39;t leave the Coast without walking this one. You can start out from the 
                        carpark at Burleigh headland or from the southern entrance at Tallebudgera Creek 
                        near the QPWS Burleigh Head Information Centre.</p>
                    <p>
                        This safe and easy track skirts a beautiful stretch of the river teeming with 
                        bird and fish life, past Sandy Cove and Echo Beach and beneath the giant basalt 
                        columns that form Burleigh headland.
                    </p>
                    <p>
                        Expect stunning views up and down the Coast on one side and rainforest remnants 
                        of Burleigh National Park on the other. Return along the same path back or 
                        stretch your stamina a little more on the rainforest circuit.</p>
                          <p>
                        Expect stunning views up and down the Coast on one side and rainforest remnants 
                        of Burleigh National Park on the other. Return along the same path back or 
                        stretch your stamina a little more on the rainforest circuit.</p>
                </td>
            	<td> <img src ="images/image4.jpg"  /> </td>
	           
            </tr>    
        <br />
          </table>
  
   
                 <br />
               
  
   
      </div>
       <div class="right" >
      
                 <div class="boxbody2">
                    <div class="boxhead2"><h2>Game LInks</h2></div>
	               <img src ="images/image3.png" class ="img3" />
                     <br />
                    <br />
                    <asp:HyperLink ID="HyperLink9" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                    <asp:HyperLink ID="HyperLink10" CssClass="label1" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>
                   
              </div>
              <br />
              <br />
              <div class="boxbody3">
                      <asp:HyperLink ID="HyperLink11" CssClass="label3" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink> THis is my 1st link
                    <asp:HyperLink ID="HyperLink12" CssClass="label3" runat="server" 
                    NavigateUrl="">Home</asp:HyperLink>THis is my 2nd link
                   
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                      <br />
                   
              </div>
      
   
      </div>
 
      <div class="footer" >  
       contact information <br />
        email : dummy@home.com
          <br />
      </div>
     
    </form> 
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
v2MediaCommented:
Is that what outputs to the browser! Is ASP working on your server? None of the <asp:stuff> code belongs in html. I'm php so I can't confirm, but it looks to me as though the server is failing to process the page.
0
 
jagguyAuthor Commented:
the page works fine as this is the source code.

all of the asp.net belongs in html as that is how it works.

on the display I get am extra border. I can strip the asp stuff out to show the same problem
0
 
v2MediaCommented:
It must be localised. When I load that file in IE6 or FF3, I'm not getting any an extra border. Can you take a screengrab and highlight the problem border?
0
 
jagguyAuthor Commented:
this fixed it
 <style type="text/css">
.top2 {
        border:1px solid black;
        background-color:#f82121;
        width:1100px;
        height:20px;
}  
.label2 {
    font-size:12px;
    font-family:verdana;
    font-weight:bold;
    text-decoration:none;
    color: Yellow;
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    line-height:20px;
    padding:5px;
    vertical-align:middle;
}   
 
.label2:hover {
    background-color:#d1dcce;
    color:#000000;
    border-bottom:1px solid #000000;
 }
.hmenu
{
    padding-left:70px;
    overflow:hidden;
    height:20px;
}
</style>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.