SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Percent widths and cross browser compatibility?

    I have a quick question regarding div widths and cross browser compatibility. I've been using Opera and its Dragonfly developer's tool to test my css and just as soon as I finally got all of my widths correct for my layout, I tested it in other browsers and I found that they're rendering differently in Chrome, FF, and IE8. Of course they're working fine in Opera which is where I set them, but for some reason they're all different in the other browsers.

    My question is should I use a different element for the widths instead of percentages? Should I switch them to their equivalent pixel widths? How can I set these so that they render the same in all browsers? I thought that my CSS reset (the Eric Meyer reset) would unify all the different settings, but there must be something missing. The main container for the page is set to a pixel width, but the main content container boxes are all set to percentages. Any feedback on this would be much appreciated.

    You can see the testing site below:

    http://www.merrickmaritimesecurity.c...etestlink.com/

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    It comes down to rounding values to whole numbers. There is no consensus on whether one should round up, down, or closest. So each one will exhibit a different behavior. As for an alternative...I really couldn't tell you.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    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,

    Opera doesn't do fractions of a percentage which is why it fits in Opera. If you say 12.5% then in opera you get 12% but other browsers will round 12.5% to the nearest pixel.

    Your measurements seem flawed as you have a container of 1000px width and then your content-container is 74% of that width

    74% of 100px = 740px wide

    Your feature boxes are 27.5% wide + 2px border + 40px padding + 1.1% margin

    = 203.5 + 2 + 40 + 8.14 = 253.66 pixels

    There are three of these in the content-container box and deducting the margin from the last one we arrive at a width of 752.78 pixels which is over 12 pixels too wide to fit.

    Some browsers will round up and some will round down so to be safe you would need to make the elements add up to about 2 or 3 pixels smaller than the space allowed.

    I don't understand why you are using percentage widths when your layout is 1000px wide to begin with. It would be easier to use pixel widths and know exactly where you stand down to the last pixel.

    The only reason to use percentages in your case would be if you were going to change the main parent wrapper to a different pixel width and wanted the rest of the page to scale automatically.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback - I figured that there was a problem with using percentages instead of pixels, but wanted to ask before I went and started changing things again. I appreciate the help. Now on to making some changes...


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
  •