SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Table inconsistency in browser versions

    Hi people,

    I am reffering to my new site http://www.wishtotravel.com . The site was originally designed by a friend web designer, but after a tragic event, he had to abandon the project, so its up to me to fix the remaining bugs, but i'm no CSS expert. Please have a look the above site in Firefox, i.e. 6 and i.e. 7 to see what I mean. Site is designed for a 1024px monitor.

    The correct display is what appears in i.e. 6. You can see that there is a space of approximatly 5 pixels between the left panel and right panel. The current CSS settings for these are as follows:

    For I.E.

    .mainBox
    { width: 1024px; margin-left: auto; margin-right: auto; margin-top:-15px;}

    .stackLeft
    { width: 52%; float: left; padding: 0px; margin: 4px;
    }
    .stackRight
    { width: 40%; float: right; padding: 0px; margin: 4px;
    }

    For Firefox:

    .mainBox
    { width: 100%; overflow: auto;
    }
    .stackLeft
    { width: 53%; float: left; padding: 0px; margin: 5px;
    }
    .stackRight
    { width: 38%; float: right; padding: 0px; margin: 5px; margin-right: 40px;
    }


    In i.e. 7 the space between the left and right pannel is appearing to be too wide.

    In Firefox we get that same space, but the pannels themselves are far too wide and expand depending on the size of the browser.

    Could someone please help us figure out what the problem is?

    Thanks for your help.

    m

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marcyboy View Post
    In Firefox we get that same space, but the pannels themselves are far too wide and expand depending on the size of the browser.
    That's because .mainbox's width is set at 100%, not a fixed-pixel width. And your percentages don't add up to 100 so that's why you've got space left over in the middle. You shouldn't be mixing % widths and pixel margins either - use the same unit for both.

    The reason the gap is different between IE6 & 7 could be because of the double-margin bug. Add display: inline to the floats and see if that resolves it.

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tyssen but none of that helped The reason why they dont add up to 100% is because if I do this the right column goes below the left toward the right angle. Any other ideas?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well have you done anything about changing your pixel margins? And do you want the layout to be 100% width in Firefox or a fixed pixel width?

  5. #5
    SitePoint Member
    Join Date
    Mar 2004
    Location
    England
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup I have. For Mozilla I am now using the following:

    .mainBox
    { width: 1024px; overflow: auto;
    }
    .stackLeft
    { width: 550px; float: left; padding:#0px; margin: 5px;
    }
    .stackRight
    { width: 428px; float: right; padding: 0px; margin: 5px;
    }

    I'm now suspecting that Firefox still reads inside the IE browser detection to layout the page. The code used for that is:

    <link href="<?=SCRIPT_ROOT?>style/style<?=browserType($_SERVER['HTTP_USER_AGENT'])!='IE'?'_ff':''?>.css" rel="stylesheet" type="text/css">

    I'll have a play with the latter to see if I find any different code, but in the meantime if anyone has any ideas please do let me know.

    Cheers

    M

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Browser-sniffing like that's not a reliable practice. What you should do instead is serve up the same stylesheet to all browsers and then use hacks within that main stylesheet or IE conditional comments to serve different rules to IE to overcome its bugs. You shouldn't need completely separate layout rules for Firefox et al and IE based on what you have at the moment.


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
  •