Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

CSS Menu Quirk - Firefox and IE are 1px off
 
barrmy
Sr. Member
 
Avatar
Total Posts:  102
Joined:  2008-06-03
 

I just noticed an issue with my topNav category menu, where FF/IE are 1px off from each other (IE is shifted one pixel lower).  I’m new to CSS so I really appreciate any help

Here is my CSS....Thanks in advance!!

#nav { float:left; margin-top:16px; margin-left:1px; font-size:1.1em; z-index:999; position:absolute;
top115px}


/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li {
   
position:relative;
   
display:block;
   
height:23px;
   
font-size:11px;
   
font-weight:bold;
   
background:transparent url(../images/bgOFF.gifrepeat-x top left;
   
font-family:Arial,Verdana,Helvitica,sans-serif;
   
border-top:4px solid #B30000;

   
margin:0;
   
padding:0;
   list-
style-type:none;
   
width:auto;

   
display:block;
   
float:left;margin:0;
    
}


/************ 1ST LEVEL  ***************/
#nav a {    
   
display:block;
   
float:left;
   
color:#666;
   
text-decoration:none;
   
padding:11px 20px 0 20px;
   
height:23px;
   
background:transparent url(../images/bgDIVIDER.gifno-repeat top right;
       
}
#nav a:hover {    
   
color:#B30000;
   
background:#fff url(../images/bgON.gif) no-repeat top right;
           
}
Image Attachments
cssmenu_ff.jpgcssmenu_ie.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
Bran
Jr. Member
 
Total Posts:  4
Joined:  2008-06-30
 

Well, it appears that you are using list elements (li) for the navigation.  Instead of using display:block for those elements and trying to adjust them, have you considered using display:inline?  That is a common technique for li elements.  More info: http://w3schools.com/css/pr_class_display.asp

Floating is usually a more difficult way to arrange your elements unless you must.  Another thought - did you make sure to “clear:both” after you float your a tags?

I hope what I said was helpful.

 
Magento Community Magento Community
Magento Community
Magento Community
 
barrmy
Sr. Member
 
Avatar
Total Posts:  102
Joined:  2008-06-03
 

Bran - I appreciate the reply!  I tried editing based on your note but it did not work.

By playing around with the code, I know the key differentiator (and what fixes the issue) is alternating between top:0 or top:-1px in the ‘#nav li’ section (0 works in FF/-1 for IE).  I tried all the tricks (using html>body; !important; #top) but none of them worked to differentiate the browsers.

Border-top (the red bar) seems to be rendered one pixel lower in FF than IE....as such, it’s making up for the lower location of the actual icons....

 
Magento Community Magento Community
Magento Community
Magento Community
 
Bran
Jr. Member
 
Total Posts:  4
Joined:  2008-06-30
 

Well, you could use a trick from Webcredible (http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml - number 4).  Try setting min-height (or max-height if that works instead) in a class declaration like in the example link.

Good luck.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top