SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with padding in IE

    Hi all,

    For my new layout I want to have a large square with little squares in it. So I made a relative positioned cube with absolute positioned (for design reasons) squares in it.

    Now, in Chrome and Firefox this works. All the squares have the same width and height; 60px (2px padding included) and all positions are right.

    But in IE (8 & 9), the little squares' padding seem to have become margin.

    Probably a stupid mistake, but I can't seem to get it right.
    Attached Files Attached Files

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thought I would post my code as a reply because the attachment approval takes some time

    HTML :
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/master.css" />
    </head>
    <body>
    
    <div id="cube">
    
    <div class="dot60 r1 c1 r1bg"></div>
    <div class="dot60 r1 c2"></div>
    <div class="dot60 r1 c3"></div>
    <div class="dot60 r1 c4"></div>
    <a href="" class="dot60 r1 c5 r1bg"></a>
    <a href="" class="dot60 r1 c6 r1bg"></a>
    
    
    <div class="dot60 r2 c1 r2bg"></div>
    <a href="" class="dot60 r2 c2 r2bg"></a>
    <a href="" class="dot60 r2 c3 r2bg"></a>
    <a href="" class="dot60 r2 c4 r2bg"></a>
    <a href="" class="dot60 r2 c5 r2bg"></a>
    <a href="" class="dot60 r2 c6 r2bg"></a>
    
    <div class="dot60 r3 c1 r3bg"></div>
    <a href="" class="dot60 r3 c2 r3bg"></a>
    <a href="" class="dot60 r3 c3 r3bg"></a>
    <a href="" class="dot60 r3 c4 r3bg"></a>
    <a href="" class="dot60 r3 c5 r3bg"></a>
    <a href="" class="dot60 r3 c6 r3bg"></a>
    
    <div class="dot60 r4 c1 r4bg"></div>
    <a href="" class="dot60 r4 c2 r4bg"></a>
    <a href="" class="dot60 r4 c3 r4bg"></a>
    <a href="" class="dot60 r4 c4 r4bg"></a>
    <a href="" class="dot60 r4 c5 r4bg"></a>
    <a href="" class="dot60 r4 c6 r4bg"></a>
    
    <div class="dot60 r5 c1 r5bg"></div>
    <a href="" class="dot60 r5 c2 r5bg"></a>
    <a href="" class="dot60 r5 c3 r5bg"></a>
    <a href="" class="dot60 r5 c4 r5bg"></a>
    <a href="" class="dot60 r5 c5 r5bg"></a>
    <a href="" class="dot60 r5 c6 r5bg"></a>
    
    <div class="dot60 r6 c1 r6bg"></div>
    <a href="" class="dot60 r6 c2 r6bg"></a>
    <a href="" class="dot60 r6 c3 r6bg"></a>
    <a href="" class="dot60 r6 c4 r6bg"></a>
    <a href="" class="dot60 r6 c5 r6bg"></a>
    <a href="" class="dot60 r6 c6 r6bg"></a>
    
    </div>
    </body>
    </html>
    CSS :

    Code:
    html, body, div, img, span, form, fieldset, p {
    	margin:0;
    	padding:0;
    }
    
    #cube {
    	width:410px;
    	height:410px;
    	position:relative;
    	background-color:#cccccc;
    }
    
    .dot60 {
    	width:56px;
    	height:56px;
    	padding:2px;
    	position:absolute;
    	display:block;
    	color:#666666;
    }
    
    .c1 { left:0; }
    .c2 { left:70px; }
    .c3 { left:140px; }
    .c4 { left:210px; }
    .c5 { left:280px; }
    .c6 { left:350px; }
    
    .r1 { bottom:350px; }
    .r1bg { background-color:#000000; }
    .r2 { bottom:280px; }
    .r2bg { background-color:#222222; }
    .r3 { bottom:210px; }
    .r3bg { background-color:#444444; }
    .r4 { bottom:140px; }
    .r4bg { background-color:#666666; }
    .r5 { bottom:70px; }
    .r5bg { background-color:#888888; }
    .r6 { bottom:0; }
    .r6bg { background-color:#aaaaaa; }

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Without a valid DOCTYPE IE is thrown into Quirks Mode.

    Add the following to the very top of your HTML markup:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I formatted the code here to make it easier to read so I removed my doctype..
    I'm currently working with HTML5's doctype : <!DOCTYPE HTML>
    But this is not working. So how should I solve this one with the HTML 5 doctype?

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The rendering in IE8/9 and other browsers looks identical here. What causes you to believe padding has become margin?

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, the strangest thing happened. I placed the doctype at the very top of the page and the page worked! Now when I place it back to where it was, it still works!
    I'm more than confused, I haven't changed anything else.
    But that's probably why I couldn't find anything about this problem searching the web for the last 6 hours..

    Anyway, thank you for your help!


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
  •