SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slight menu misalignment

    Hi, I am having a problem with a horizontal menu. It seems to work fine in all browsers but Firefox, and when I tweak the CSS to make it look good in Firefoxthe other browser look dodgy.

    Please see www.wordspeare.co.uk

    On the main horizontal menu along the top, the images used for the hover effect and the 'current' page marker are slightly misaligned in Firefox - about one pixel lower than they should be

    Here's the css that relates to the menu:

    Code:
    /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  Menu xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
    
    
    #menu {
    	background-image:url(../images/menu-bar-full.png);
    	background-repeat:no-repeat;
    	height:42px;
    	font-weight:normal;
    	padding-right:70px;
    	text-align:right;
    }
    
    
    #menu ul {
    	padding:10px 0px 11px 0px;
    	margin:auto;
    	list-style:none;
    	
    	}
    
    #menu li {
    	display:inline;
    }
    
    #menu #current a {
    	background-image:url(../images/menu-bar-light-blue.png);
    	background-repeat:repeat-x;
    }
    
    #menu #current a:hover {
    	background-image:url(../images/menu-bar-grey.png);
    	background-repeat:repeat-x;
    }
    
    
    #menu a {
    	/*border:solid 1px #000000;*/
    	text-decoration:none;
    	color:#FFFFFF;
    	font-size:18px;
    	padding:10px 16px 11px 16px;
    }
    
    #menu a:hover {
    	background-image:url(../images/menu-bar-grey.png);
    	background-repeat:repeat-x;
    	
    }
    Any ideas?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I get a login page upon going there?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, my colleague took it offline. Should be good now.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'd be tempted to go along a slightly different route, such as this
    Code:
    #menu a
    {
    	display:-moz-inline-box;/*FF2*/
    	display:inline-block;/*Allow vertical padding*/
    }
    #menu ul
    {
    	width:600px;/*Allow for auto margins*/
    	padding:0;/*No need*/
    }
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Does this replace the other code for a and ul? or add to it?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The anchor code you will add (it doesn't have it to begin with)

    The width on teh <ul> you will add in, the padding rule you will just remove from the CSS file (I have padding:0 set there because I had to override the one set in your stylesheet)

    So everything there you are adding, but the padding on the <ul> rule you are actually just going to remove that from your CSS file
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Location
    Anglesey, Wales, UK
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As usual - worked a treat. Thank you.

    Can I ask, what's the display:-moz-inline-box;/*FF2*/ all about?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    FF2 doesn't support display:inline-block (though it has a vendor extension version of it) and as a result, if you want FF2 support (if not then remove that line, though it will cater for all your FF2 users) then that line is needed .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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