SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    FireFox & IE Issue: <li>-based Menu

    I stole most of the code for this from Vinnie, so I blame him entirely. Except for my incompetence.

    www.ensight.org

    In IE the menu is 2 pixels too short (on each side). I'm assuming I just need to expand the size of the menu. Problem is that in FireFox it's only 1 pixel too short, so I don't want to just expand it.

    I'm sure this is just another stoopididdle...
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  2. #2
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This should be most of the code related to the menu:

    Code:
    #menu
     {
     	width: 618px;
     	height: 35px;
     	background: #283140;
     	text-align: center;
     	color: #CDD1D8;
     	list-style: none;
     }
     
     #menu ul
     {
     	padding-left: 10px;
     	margin: 0; padding: 0;
     	list-style: none;
     	margin-left: 1px;
     }
     
     
     #menu li
     {  
     	float: left;  
     	width: 25%; 
     	text-align: center;  
     	font: bold x-small/100% tahoma;  
     	letter-spacing: .1em;  
     	margin: 0; 
     	color: #CDD1D8; 
     } 
     
     #menu li a
     { 
     	color: white; 
     	display: block; 
     	line-height: 35px; 
     	vertical-align: middle; 
     	height: 35px;
     	text-decoration: none;
     	letter-spacing: 150%;
     	border-bottom: none;
     }
     
     #menu li a:hover
     {  
     	background: #CDD1D8;
     	color: #283140; 
     	border: solid #283140;
     	border-width: 0 1px;
     	border-bottom: none;
     }
     
     #menu2
     {
     	font: bold small/100% tahoma;  
     	text-align: center;
     }
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  3. #3
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I think the problem is that your using percentage width, but the fixed width which is being divided into (4 ways in this case) ends up being a decimal, which probably causes a pixel added.

    I may be wrong, but I cant seem to get rid of the pixel (on the right, the left can be removed easily) without changing the fixed width do something which divides well, like 600.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  4. #4
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm. Fair point. So, basically, it's the interpretation that the browser makes based on the percentage of the total area?

    Wonder how I'd fix THAT easily ... :grumble:
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  5. #5
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this. Note: I did kill accouple of elements while trying to find the problem so add them again as required. This works in Firefox and IE6.0 (I think ).

    Code:
     #menu
     {
     	width: 616px;
     	height: 35px;
     	background: #283140;
     	text-align: center;
     	color: #CDD1D8;
     	list-style: none;
     	margin-left: 1px;
     }
     
     #menu ul {
     	padding-left: 10px;
     	margin: 0; padding: 0;
     	list-style: none;
     }
     
     
     #menu li  {  
     	float: left;  
     	width: 25%; 
     	text-align: center;  
     	font: bold x-small/100% tahoma;  
     	letter-spacing: .1em;  
     	margin: 0; 
     	color: #CDD1D8; 
     } 
     
     #menu li a:link { 
     	color: white; 
     	display: block; 
     	line-height: 35px; 
     	vertical-align: middle; 
     	height: 35px;
     	text-decoration: none;
     	letter-spacing: 150%;
     }
     
     #menu li a:hover {  
     	background: #CDD1D8;
     	color: #283140; 
     }
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  6. #6
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    NM the damn banner screws it up
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  7. #7
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think that did it!

    Geeze, I thought Paul was going to get to help

    I just need to adjust my banner image. I hadn't realised it was going over where it was supposed to
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  8. #8
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Shush, it's a gorgeous banner
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  9. #9
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    change the banner from left: 2px; to left: 1px;
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  10. #10
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cooooool...

    Told you it wasn't the damn banner

    /me ducks and runs

    Thanks mate!
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  11. #11
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Erm... What the hell?

    Open www.ensight.org in IE...
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jeremy
    Geeze, I thought Paul was going to get to help
    Sorry I went for dinner

    New guy is right in that percentages will be rounded up and down depending on browser so sometimes the element will be too big and sometimes too small depending on browser.

    So setting an appropriate size thats is divisible exactly by four will help

    Glad you got it sorted.

    Paul

  13. #13
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was just trying to be nice. This one's been ticking me off for ages. Funny that it was so simple.

    Still, something we've done messed up my whole site in IE
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  14. #14
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    IE doesnt like your css comments? Remove them and see what happens?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  15. #15
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Or, y'know, I'm just an idiot. Malformed CSS comment that FF ignored, but IE choked on.

    All fixed. Thanks guys
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  16. #16
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I caught it first
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  17. #17
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ... speaking of IE. Menu change doesn't fix issue in IE

    Sorry guys, I'm not being very helpful, am I?

    The funny thing is that in IE it doesn't cover up the whole area, it always leaves one pixel orphaned ...
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  18. #18
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ergh... Now that I removed the comments the menu is off 1 pixel in FF...

    Maybe the left:2px should be back?
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  19. #19
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    you killed margin-left: 1px; when you killed the comment
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  20. #20
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This should work perfectly

    Code:
     #menu
     {
     	width: 616px;
     	height: 35px;
     	background: #283140;
     	text-align: center;
     	color: #CDD1D8;
     	list-style: none;
     	margin-left: 1px;
     }
     
     #menu ul {
     	margin: 0; 
     	padding: 0;
     	list-style: none;
     }
     
     
     #menu li  {  
     	float: left;  
     	width: 25%; 
     	text-align: center;  
     	font: bold x-small/100% tahoma;  
     	letter-spacing: .1em;  
     	margin: 0; 
     	color: #CDD1D8; 
     } 
     
     #menu li a { 
     	color: white; 
     	display: block; 
     	line-height: 35px; 
     	vertical-align: middle; 
     	height: 35px;
     	text-decoration: none;
     	letter-spacing: 150%;
     }
     
     #menu li a:hover {  
     	background: #CDD1D8;
     	color: #283140; 
     }
    And #banner set to left: 1px;
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  21. #21
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    /me points at the idiot among us...

    Okay, fixed that... In IE I've now got a pixel on each end (like FF used to have).
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  22. #22
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    To repeat myself: Coooooolllll....

    Thanks mate!
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  23. #23
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Now to work on the bottom eh?
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  24. #24
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, new thread time
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright


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
  •