SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    banner appears different in firefox to ie8

    Hi,

    I have created a wrapper using the sliding doors technique and then made a three column layout. I put in an image for the banner. The problem is the banner image looks fine in IE8 but overhangs the wrapper to the right in firefox.
    I messed about a bit with the sizes of the banner but it seems if I get it right in one the other browser does not look right.

    it can be seen at: http://www.alphatest.co.uk

    the css is as follows:

    Code:
    body{
    margin:0;
    padding:0;
    /*background:url(c2_images/corp2_back.gif) repeat-x;*/
    background:#ccffff;
    }
    
    #wrapper{
    width:90%;
    margin:2% auto;
    background:#E5E5E5;
    
    }
    
    .wrapper{
    width:100%;
    background-color:#cccccc;
    background:url(c2_images/bigwrap_bl_shad.jpg) no-repeat left bottom;
    }
    
    .wrap_outer{background:url(c2_images/bigwrap_br_shad.jpg) no-repeat right bottom;
    }
    
    .wrap_inner{background:url(c2_images/bigwrap_tl_shad.jpg) no-repeat left top;
    }
    
    
    #header{
    width:98%;
    height:22%;
    background:url(c2_images/bigwrap_tr_shad.jpg) no-repeat right top;
    overflow:hidden;
    padding-top:2.15%;
    margin-left:2.1%;
    margin-right:2.1%;
    margin-bottom:2%;
    
    }
    
    #header img{overflow:hidden;}
    
    #mainNav{
    float:left;
    width:16%;
    background-color:#99CC66;
    margin-left:4%;
    }
    
    #content{
    float:left;
    width:76%;
    background-color:#339999;
    margin-right:2%;
    }
    
    #mainContent{
    float:left;
    width:59%;
    background-color:#996600;
    padding-top:30px;
    padding-left:5%;
    padding-right:5%;
    
    }
    
    #secondaryNav{
    float:left;
    width:29%;
    padding-right:2%;
    background-color:#FFFF99;
    
    }
    
    #footer{
    clear:both;
    }
    Anyone got any ideas why this si doing this?

    thanks

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, it seems a rounding error the browsers have with the margin you declared for the header: 2.1%. Try changing it to 2% and see if that gets it better.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    With all the percentages browsers wil have to make a choice whether to round up or down and those odd pixels can really add up .

    Try as Luki said but also add display:inline; here to fix an IE6 bug
    Code:
    #mainNav{
    float:left;
    width:16%;
    background-color:#99CC66;
    margin-left:4%;
    }
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    With all the percentages browsers wil have to make a choice whether to round up or down and those odd pixels can really add up .

    Try as Luki said but also add display:inline; here to fix an IE6 bug
    Code:
    #mainNav{
    float:left;
    width:16%;
    background-color:#99CC66;
    margin-left:4%;
    }
    I tried as you both advised and it does cut the image off slightly in firefox. I suppose i will just have to target i.e.browsers with a seperate css for this do you think?

    thanks

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Conditional comments won't be needed, granted I can't help you right now due to me having to leave, but if noone responds by the time Iget back I'll take a look . YOu rarely ever need CC's
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Where exactly are we looking ? I see overlaps in different laces depending on screen width.

    I can see bigger problems though where your page has great big gaps in it on my monitor.

    See attached screenshot.

    You should utilise some sort of min and max widths to make it hold together better.
    Attached Images Attached Images

  7. #7
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Where exactly are we looking ? I see overlaps in different laces depending on screen width.

    I can see bigger problems though where your page has great big gaps in it on my monitor.

    See attached screenshot.

    You should utilise some sort of min and max widths to make it hold together better.
    Hi Paul, I really thought i had cracked it with this technique but its really causing problems. You hve actually found a problem other than the one the thread was about but it is probably more major.

    I dont think im making the wrapper large enough. Mine is only about 1000px. Width wise it should really be double that shouldnt it?

    Can i use max width on IE8? and would it go in #wrapper or .wrapper?

    I think i need to get this sorted before i return to the other problem.

    thanks for your help

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It should be on #wrapper since that's the outer parent . Yes Max-width will work on IE8 though IE6 will need an expression to simulate it

    2000px? Almost every single monitor will have a scrollbar lol, some huge and some not as huge but still huge lol
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It should be on #wrapper since that's the outer parent . Yes Max-width will work on IE8 though IE6 will need an expression to simulate it

    2000px? Almost every single monitor will have a scrollbar lol, some huge and some not as huge but still huge lol
    Thanks for that. i put the max-width in as 1100 which is the same width as right and left images together.

    Now back to the original problem.

    I have just put a graphic in the banner to prove (terrible picture - sorry) but in ie it fits perfect. In firefox it is far short of the size of the wrapper. Could this be a case for conditional comments or am i missing something?

    thanks

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, to fix IE6/7 (this is not addressing your problem, you need to fix the double float margin bug on "#mainNav" and then offset the rounding errors (a -1px margin will patch it up)

    I don't see IE6/7/8/FF/Opera appearing any differently though as far as the graphic in the banner
    Code:
    #mainNav
    {
    	display:inline;/*fix Ie6's double float margin bug*/
    	margin-right:-1px;/*offset rounding errors*/
    }
    Could you screenshot the trouble spot? In FF and IE8 if you will (or whatever browser(s) that are right/wrong design wise )
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  11. #11
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, to fix IE6/7 (this is not addressing your problem, you need to fix the double float margin bug on "#mainNav" and then offset the rounding errors (a -1px margin will patch it up)

    I don't see IE6/7/8/FF/Opera appearing any differently though as far as the graphic in the banner
    Code:
    #mainNav
    {
    	display:inline;/*fix Ie6's double float margin bug*/
    	margin-right:-1px;/*offset rounding errors*/
    }
    Could you screenshot the trouble spot? In FF and IE8 if you will (or whatever browser(s) that are right/wrong design wise )
    I shall install a snapshot prog and get back to you.

    thanks

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just use MS paint, open that up.
    Go to your browser and hit Alt+Print Screen (top of your keyboard)

    Then go to paint and hit CTRL+V

    Save it and repeat the process for the second browser.

    Then go to photobucket or something and then upload it and paste the direct link here
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  13. #13
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    doesnt seem like I have ms paint on Vista.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Really? That's weird..not that I have vista though.

    You can download gimp.

    It's a free editor and does the same job. If vista won't allow that then try this
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  15. #15
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Ryanreese

    Thanks for all the stuff you put into this problem. It has boiled down to a problem with firefox itself. A virus i think. It wasnt refreshing for some reason. There has been something wrong for some time so i tried system restore on the computer. And now both pages in IE and firefox look fine. No wonder it looked fine on your computer!!

    thanks for all the extra advice re margins


  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It was probably just a cached version and that can be fixed by c learing it .
    CTRL+F5 clears cahce.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •