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
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Firefox Issue - size/width variations?

    Hello All! (it's my first post! )

    The Problem
    I'm currently working on a website for a client and I've run into an issue that's really got me scratching my head.
    When viewing the site in Chrome or Safari the navigation, which is just a UL with some LI's floated left inside of it, displays perfectly. However, when the site is viewed in Firefox the width of the last LI (controlled by some java to remove some styling) is calculated differently and causes it to become too long to fit inside of the UL.
    I've done some research about how firefox applies widths to different elements, however I was unable to find anything that I could apply to my own problem.

    The HTML
    Code:
    <div id="navigation">
       <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Community Outreach</a></li>
            <li><a href="#">D.A.R.E.</a></li>
            <li><a href="#">Recruitment</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Crimestoppers</a></li>
       </ul>
    </div> <!-- /navigation -->
    The CSS
    Code:
    #navigation {
    	float:left;	
    	width:900px;
    	height:70px;
    	background:url(../images/navgradient.png) #004f74;
    	border-radius:8px 8px 0 0;
    }	
    #navigation ul{
    	width:900px;
    }
    /* 1/3 on the border */
    #navigation ul li:after{
    	content:'';
    	height:70px;
    	position:absolute;
    	margin-top:-70px;
    	margin-left:-21px;
    	border-left:1px solid #216585;
    }
    /* 2/3 on the border */
    #navigation ul li:before{
    	content:'';
    	height:70px;
    	position:absolute;
    	margin-left:-20px;
    	border-left:1px solid #000000;
    }
    /* 3/3 on the border */
    /* Styling of the Navigation items */
    #navigation ul li{
    	padding:0 19px 0 18px;
    	margin:0 2px 0 0;
    	float:left;
    	border-left:1px solid #216585;
    }
    
    /* removes borders from first nav */
    #navigation ul li:first-child:after, #navigation ul li:first-child:before{
    	border:none;	
    }
    #navigation ul li:last-child:after{
    	margin-left:-24px;	
    }
    #navigation ul li:last-child:before{
    	margin-left:-23px;	
    }
    The Java
    Code:
    $(function() {
    	// removes styling of the last item in the list
    	$('#navigation ul li:last').css("padding","0 21px 0 21px");
    	$('#navigation ul li:last').css("border-left","1px solid #216585");
    	$('#navigation ul li:last').css("background","none");
    	$('#navigation ul li:last').css("border-radius","0 8px 0 0");
    	$('#navigation ul li:last').css("margin","0");
    	$('#navigation ul li:last:before').css("margin-left","0");
    	$('#navigation ul li:last:after').css("margin-left","0");
    
    });

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Welcome to the forum!

    It would be helpful to have either your complete code (and images, if they play a role in page structure) or - better by far - to have a link to a live test page.

    You may not have used a doctype declaration. You might not have validated your HTML and a goof up there might be causing trouble. Your javascript could be involved or conflicting with another function. You may not have used a CSS reset and browser-specific style might be messing things up. I could guess and guess - but I'd rather just see what you're actually working with.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    It would be helpful to have either your complete code (and images, if they play a role in page structure) or - better by far - to have a link to a live test page.

    You may not have used a doctype declaration. You might not have validated your HTML and a goof up there might be causing trouble. Your javascript could be involved or conflicting with another function. You may not have used a CSS reset and browser-specific style might be messing things up. I could guess and guess - but I'd rather just see what you're actually working with.
    Unfortunately we don't have a live-site atm since we're doing some internal server maintenance and updating. :\

    But I can tell you the following:
    • Doctype has been properly declared as HTML5, which we're running with Modernizr.js for backwards compatibility with older browsers.
    • The javascript linked is the only other Java on the whole site other than the Modernizr.js
    • We're running a CSS reset to clear out all of the browser defaults and we are not running any browser-specific hacks/styling

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    This issue has been resolved. I ended up just using a Sprite as a background image instead of dealing with the padding differences between webkit and Gekko


  •  

    Tags for this Thread

    Posting Permissions

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