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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Macintosh DIV heights different on Mac & PC, but the same in browsers.

    Not to be too confusing, but I have a website that appears the same in IE and FF on a PC plus Safari on a Mac, but different in FF on a Mac.

    On a PC (and Safari on Mac) the site appears correct.
    On a Mac, in FF the site is misaligned.

    The page in question is http://www.uttermedia.net/page_fire

    The bottom of the flash gallery on the page SHOULD line up perfectly with the bottom of the 'HOME PHOTO DESIGN IMAGE' links.

    On Mac, the flash gallery appears about 49px too high.

    The site is made of two basic divs.

    Any help or pointers would be much appreciated, this has been bugging me for weeks, and I can't seem to find the problem!
    Last edited by UtterBen; 02-27-2009 at 12:02 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    It looks like this in my Firefox (latest version on Mac):



    Note the yellow background at the bottom. This is because my default browser background is not white and you forgot to specify a color explicitly.
    Attached Thumbnails Attached Thumbnails DIV heights different on Mac & PC, but the same in browsers.-excerpt.jpg  

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello UtterBen,
    I have no MAC machine to test on so I can't see this but...
    if you put a background color on your right div, #text1 like this:
    Code:
    #text {
    float: right;
    margin: 72px 10px 0 0;
    width: 355px;
    height: 579px;
    font: 10px "Verdana";
    color: #404040;
    line-height: 13px;
    background: #f00;
    }
    You can see your not wrapping all your content.
    Remove the height, like this, and see what happens:
    Code:
    #text {
    float: right;
    margin: 72px 10px 0 0;
    width: 355px;
    /*height: 579px;*/
    font: 10px "Verdana";
    color: #404040;
    line-height: 13px;
    background: #f00;
    }
    Same thing is happening on your #image too.
    Does that help?
    Last edited by Excavator; 02-27-2009 at 03:54 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    UtterBen (02-27-2009)

  • #4
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey guys,

    Many thanks for your help. I managed to fix the problem just after I made this post (hence the screenshot looking good). It turned out to be line-height. Needed to include it in CSS for all my divs. Now the entire site looks identical in all browsers.

    Excavator...I wasn't aware of the wrapping issue, so kudos for spotting that! Thanks.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by UtterBen View Post
    Excavator...I wasn't aware of the wrapping issue, so kudos for spotting that! Thanks.
    Actually, VIPStephan got it 2 minutes before I did, hehe.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    You still didn’t specify that your page background color should be white.


  •  

    Posting Permissions

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