SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    San Jose
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the current method (or hack) for fixing CSS width problems?

    I played around with the padding and width of a single div and noticed the differences in size between Chrome and IE 8. Here is the code:

    Code:
    div {
        width: 100px;
        padding: 10px;
        border: 10px solid #000;
      }
    So then I spent some time on google looking for tutorials that could fix this problem. One (dated) tutorial suggested this hack:
    Code:
    * html div {
        \width: 140px; 
        w\idth: 100px; 
      }
    Then I found Tantek's Box Model hack and I will see if this works. But I'd like to know if you guys are familiar with modern box model hacks or actual CSS3 methods to make sure that everything looks the same in any browser. I am designing my practice site in XHTML strict and I have the classic problem of trying to correct my columns after I applied padding to them.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    This is not a problem that I am aware of. It sounds like something from the IE5 days.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    First of all you shouldn't even need to be coding for IE6 and down anymore these days (unless for some reason your site statistics show it htat way)

    In IE5s box model, the width of margins/borders/padding isn't added up in total of width. It's subtracted from the total dimension.

    If you aren't coding for IE5 but rather for IE6, and you are getting this issue. Most likely you are still in quirks mode somehow.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    San Jose
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right now I am only using IE 8. I don't understand why the following layout looks different between IE8 and other browsers whenever I apply a padding of 6px to one of the content columns.


    What's the best fix for this situation?
    • Conditional statements
    • CSS hack or Javascript hack
    • Should the columns be classes instead of divs?
    • Errors in the CSS code?


    Stylesheet:
    Code:
    #wrapper {
    	background-color: gray;
    	width: 760px;
    	margin:0 auto;
    }
    #header {
    	background-color: orange;
    }
    
    #container {
    	background-color: silver;
    }
    #mainCol {
    	background-color: #ffffff;
    	width: 560px;
    	float: left;
    	padding: 6px;
    }
    #rigCol{
    	background-color: #99cc00;
    	width: 200px;
    	float: right;
    }
    #footer {
    	background-color: #cc6600;
    	clear: both;	
    }
    Website structure:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>2 Column Layout Example</title>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">a</div>
    <div id="container" class="clearfix">
    	<div id="mainCol">aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa a</div>
    	<div id="rigCol">a</div>
    </div>
    <div id="footer">a</div>
    </div>
    </body>
    </html>
    Thanks

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What happens when you click the little "compatibility view" icon in IE 8? It's otherwise known as the "completely-hose-the-site button," but if for some reason you are in compatibility mode it may have switched to the IE box model instead of the standard box model.

    Because of the IE fiasco that I just never set a padding or border on elements with a width. I don't trust IE 8 either, even though it's supposed to render pages with the standard box model. Users can still click that compatibility button.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deffvaltez View Post
    Right now I am only using IE 8. I don't understand why the following layout looks different between IE8 and other browsers whenever I apply a padding of 6px to one of the content columns.
    It looks exactly the same to me in IE7,8, 9 and Firefox. Do you have a live link so we can test?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Compatibility view won't trigger the broken box model in IE it just triggers an ie7 mode I believe which is still in standards mode and still uses the correct box model. Iit's only quirks mode that triggers the broken box model in ie6+. ( Ie5 is always in the broken box model mode but we can forget IE5 as it is dead and buried.)

    There are a few simple reasons why you will have triggered quirks mode and it will be one of the following:

    1) No doctype

    2) Old html 4 transitional doctype without URI (or an even older doctype)

    3) You have comments or code above the doctype

    4) You have the xml declaration above the doctype in IE6

    If you have done any of the above you will be in quirks mode. Just use a full modern doctype with no xml declaration and no comments or code above the doctype and then you will be in standards mode and use the correct box model.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) are you using a reset? If not you may have default margins/paddings messing with you (since I'm not explicitly seeing them set).

    2) perfect width on a layout tends to fail in many browsers, a negative margin on one of your elements can prevent 'perfect width' drop... though in your case, you've got one element with width, why does the other one need it? This is part of were I find it EASIER to design fluid, even if the overall layout is fixed.

    3) raw10 hit it on the head, just don't declare padding/border same time as width... for example instead of declaring a side padding on the container, declare side MARGINS or padding on the children.

    4) lose the stupid clearfix nonsense and just declare overflow and a haslayout trigger on your wrapper.


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
  •