SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox vs IE vs Safari vs Opera

    Hey guys,

    There's always been 1 thing I hate when coding and thats cross browser compatibility. But we HAVE to deal with it.

    So I have this menu...

    http://mariodabrowski.com/portfolio/site/

    And the darn thing is a few pixels off in each browser. And to make things worse it's off by a different amount in each lol

    The thing that's off is the margin:219px 0 0 0; on my contact_menu DIV. I basically need the value to be 221px for safari, like 225px for opera, and so forth.

    So what I need to do is set specific values for seperate browsers. Is there a way to do this?

    An example would be...

    Code:
    width:100px;    // Applies to all
    #width:100px;  // Applies only to IE
    Any help would be awesome, it's something I've always wondered about.

    Thanks,
    Mario
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Did you set all the default margin sizes to the same values to start with or just let each browser use its own defaults that are slightly different from other browsers?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wow that was tricky

    i can't really explain why you can't get the inline list to work across browsers, but here's another way to do it that looks the same in IE6/7 FF2, Opera for PC (can't test mac)

    Code:
    *{
    	margin:0;
    	padding:0;
    	}
    
    body{
    font-family:Arial, Helvetica, sans-serif;
    	margin:0 0 10px 0;
    	background-color:#061315;
    	background-image:url(images/blue_bg.gif);
    	background-repeat:repeat-x;
    	}
    	
    #bg_container{
    	height:352px;
    	width:100%;
    	padding:0;
    	margin:0;
    	z-index:1;
    	}
    	
    #right{
    	width:50%;
    	height:352px;
    	background-image:url(images/dark_bg.gif);
    	background-repeat:repeat-x;
    	margin:0;
    	padding:0;
    	float:right;
    	z-index:1;
    	}
    
    #main_container{
    	width:810px;
    	height:auto;
    	z-index: 2;
    	position:absolute;
    	top:0;
    	left: 50%;
        margin-left: -405px;
    	}
    	
    #header{
    	width:810px;
    	height:57px;
    	background-image:url(images/clean.gif);
    	background-position:20px;
    	background-repeat:no-repeat;
    	}
    	
    #mid_container{
    	width:810px;
    	height:245px;
    	}
    	
    #mid_banner{
    	width:495px;
    	height:245px;
    	background-image:url(images/mid_banner.gif);
    	float:left;
    	}
    	
    #contact_menu{
    	width:auto;
    	height:26px;
    	float:left;
    	margin:219px 0 0 0;
    	}
    	
    #mid_menu{
    	width:315px;
    	height:243px;
    	float:right;
    	margin:1px 0 1px 0;
    	}
    	
    #body_container{
    	width:810px;
    	height:auto;
    	}
    	
    #body_left{
    	width:495px;
    	height:auto;
    	float:left;
    	}
    	
    #body_news{
    	width:495px;
    	height:auto;
    	background-color:#f0f9f8;
    	}
    	
    #body_news_banner{
    	width:495px;
    	height:110px;
    	padding:10px 0 0 0;
    	}
    	
    #body_news_text{
    	width:463px;
    	height:auto;
    	text-align:left;
    	padding:0 16px 20px 16px;
    	}
    	
    #body_right{
    	width:315px;
    	height:auto;
    	float:right;
    	}
    	
    #body_right_header{
    	width:297px;
    	height:36px;
    	border-bottom:1px solid #103034;
    	text-align:left;
    	padding:13px 0 0 18px;
    	}
    	
    #body_right_content{
    	width:298px;
    	height:auto;
    	text-align:left;
    	padding:15px 0 0 17px;
    	}
    	
    h1{
    	font-size:12px;
    	font-weight:bold;
    	color:#3db2c3;
    	}
    	
    .news_body{
    	font-size:12px;
    	color:#666666;
    	}
    	
    #open_comments_container{
    	width:489px;
    	height:27px;
    	border-bottom:1px solid #103034;
    	padding:12px 3px 0 3px;
    	}
    
    #number_of_comments{
    	width:auto;
    	height:auto;
    	float:left;
    	}
    	
    #open_comments{
    	width:auto;
    	height:auto;
    	float:right;
    	}
    	
    .blue_text{
    	font-size:12px;
    	color:#3bacbc;
    	}
    	
    .white_text{
    	font-size:12px;
    	color:#fff;
    	}
    	
    .grey_text{
    	font-size:12px;
    	color:#737373;
    	}
    	
    #unknown_container{
    	width:495px;
    	height:auto;
    	margin:0 0 10px 0;
    	background-color:#103034;
    	}
    	
    #respected_sites{
    	width:495px;
    	height:100px;
    	background-color:#194b52;
    	}
    	
    #footer_container{
    	width:489px;
    	height:28px;
    	padding:6px 3px 0 3px;
    	}
    
    #footer_left{
    	width:auto;
    	height:auto;
    	float:left;
    	}
    	
    #footer_right{
    	width:auto;
    	height:auto;
    	float:right;
    	}
    	
    #contact_menu ul{
    	margin:0 0 4px 0;
    	}
    	
    div#contact_menu li{
    	float: left;
    	margin-right:5px;
    	list-style-type:none;
    	}
    	
    	
    #contact_menu a {
    	font-size:11px;
    	font-weight:bold;
    	text-decoration:none;
    	padding:4px 13px 4px 13px;
    	display: block;
    }
    
    #contact_menu a:link{
    	color:#153c40;
    	padding:4px 13px 4px 13px;
    	background-color:#b0dade;
    	/*#line-height:26px;*/
    	}
    	
    #contact_menu a:visited{
    	color:#153c40;
    	background-color:#b0dade;
    	/*#line-height:26px;*/
    	}
    	
    #contact_menu a:hover{
    	color:#153c40;
    	padding:4px 13px 8px 13px;
    	background-color:#f0f9f8;
    /*	#line-height:26px;*/
    	}
    	
    #contact_menu a:active{
    	color:#153c40;
    	padding:4px 13px 8px 13px;
    	background-color:#f0f9f8;
    /*	#line-height:26px;*/
    	}
    	
    #contact_menu #active_contact{
    	color:#153c40;
    	padding:4px 13px 8px 13px;
    	background-color:#f0f9f8;
    	/*#line-height:26px;*/
    	}
    	
    a.comments_drop:link, active, visited{
    	font-size:12px;
    	color:#3bacbc;
    	text-decoration:none;
    	outline:none;
    	}
    	
    a.comments_drop:visited{
    	font-size:12px;
    	color:#3bacbc;
    	text-decoration:none;
    	outline:none;
    	}
    	
    a.comments_drop:hover{
    	font-size:12px;
    	color:#737373;
    	text-decoration:none;
    	outline:none;
    	}
    i pasted the whole thing because i reorganized some of your declarations so there isn't so much repetition (i put the font declaration in the body rule), added a * rule to zero out all elements' padding and margins, you might have to go back in and explicitly add magin and padding back in for some of your elements. also i added a #contact_menu a general rule that holds all the common rules for all the psuedo-classes of the anchor tag, less lines of css that way.



    what i changed for your list is instead of having the list items inline, i made them block elements and then floated them left. then added some margin right to each of them.

    let me know if it works out for you.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Toronto, Ontario
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Wow Ashley that worked like a charm. The only problem with it is in Camino & Safari, there still seems to be a gap under the menu.

    But it's much closer then where I was before you stepped into the picture

    Oh and if you want to test your sites in Safari, it is now available for PC, you can grab it here...

    http://www.apple.com/safari/download/

    It always helps to be able to see what people on macs are seeing.

    Also when you write code like this...

    Code:
    	/*#line-height:26px;*/
    Is that making it specifit to IE?

    Thank you so much for the help,
    Mario

    Oh and if anyone knows what the problem might be with Camino & Safari I'd love to try and come up with a solution.
    $ Available For Hire
    Need a website designed or coded? Then feel free to contact me!

    PSP Backgrounds - PSPBG.net || Photoshop Brushes - PSBrushes.net

  5. #5
    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)
    Hi,
    Oh and if anyone knows what the problem might be with Camino & Safari I'd love to try and come up with a solution.
    The problem is because you are leaving a lot of things to chance. The list items have padding making up their height so now their height relies on padding plus font-size and line-height. Any rounding errors will show themselves up here.

    When you need pixel perfection then you must make sure that nothing is left to chance.

    This fixes it for me:


    Code:
         
    #contact_menu{
        width:auto;
        height:26px;
        float:left;
        margin:219px 0 0 0;
        }
       
    #contact_menu ul{
        margin:0;
        height:26px
        }
        
    div#contact_menu li{
        float: left;
        margin-right:5px;
        list-style-type:none;
        height:26px
        }
        
        
    #contact_menu a {
        font-size:11px;
        font-weight:bold;
        text-decoration:none;
        padding:0 13px 0 13px;
        display: block;
        line-height:22px;
        height:22px;
    }
    
    #contact_menu a:link{
        color:#153c40;
        background-color:#b0dade;
        /*#line-height:26px;*/
        }
        
    #contact_menu a:visited{
        color:#153c40;
        background-color:#b0dade;
        /*#line-height:26px;*/
        }
        
    #contact_menu a:hover{
        color:#153c40;
        padding:0 13px 0 13px;
        background-color:#f0f9f8;
        /*#line-height:26px;*/
        height:26px;
        }
        
    #contact_menu a:active{
        color:#153c40;
        padding:0 13px 0 13px;
        background-color:#f0f9f8;
        /*#line-height:26px;*/
        height:26px
        }
        
    #contact_menu #active_contact{
        color:#153c40;
        padding:0 13px 0 13px;
        background-color:#f0f9f8;
        /*#line-height:26px;*/
        height:26px
        }
     
    * html #contact_menu a{float:left}    
    The top and bottom padding is removed and a set height is applied so we know exactly how high the elements is. Line-height is just used to center the text vertically. (of course an em height would allow better scaling but I didn't want to confuse the issue)

    Please don't use nasty hacks like this:
    Code:
    #line-height:26px
    Use the star selector hack (* html {})to target IE because it separates the hack from the style and leaves the rest of the code clean and it also validates unlike the hack you used. Or use conditional comments to target separate versions of IE if necessary including ie7 if it needs it.

    Don't hack for any other browser except IE because it is simply too unreliable. Also there are no real consistent hacks for these browsers because they are updated regularly and bugs are fixed almost daily (in nightly builds etc).

    If you find something differs from one browser to another (excluding IE) then the best course of action is to review your code and change the design to accommodate it as we have seen above.

    In reality the only browser that should be getting (or usually needs) a hack is IE. Other browsers will more or less fall into line with a change of approach most times and obviate the need for any hacks at all.

  6. #6
    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)
    oops I missed out one thing I added for ie6.

    Code:
    * html #contact_menu a{float:left}

  7. #7
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ethics View Post

    Also when you write code like this...

    Code:
    	/*#line-height:26px;*/
    Is that making it specifit to IE?
    that is just comment syntax, i didn't want to get rid of it, but i didn't want to use it either, so i commented to let you decide if you wanted to put it back in later.

    I totally forgot i can now view pages in safari on a PC, wow that just sounds weird. downloading it right now!
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?


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
  •