tags:

views:

288

answers:

5

Guys I have the following CSS code, works fine with Firefox, Chrome but breaks like hell when i run it in IE7!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"&gt;

<html lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Box Test</title>

    <style type="text/css">

        .mybox  { float:left;  overflow:auto; visibility:visible;
          width:220px; height:100px; 
          margin:3px; padding:10px; 

          border-left:1px solid gray; border-right:1px solid black; 
          border-top:1px solid gray;  border-bottom:1px solid black; 
          background-color:gold; }

    .small { width:45px; height:auto; font-weight:bold;}

    .boxfont{font-weight:bold; font-size:16px; margin-left:15px;} 

    </style>

  </head>

  <body>

     <div class="mybox small">
    box 1
        <div class="boxfont">box1 label</div>
      </div>

     <div class="mybox small">box 2</div>

     <div class="mybox small">box 3</div>


  </body>

</html>

Why do i get scroll bars on the first box in IE7 and NOT in any other browser?

+1  A: 

I suspect overflow:auto in .mybox but I can't test it because I do not have access to IE7 at the moment.

Sinan Ünür
+3  A: 

See this question/answer:

http://stackoverflow.com/questions/927626/how-do-you-deal-with-internet-explorer

JoshFinnie
+1  A: 

Either increase the width of .mybox to 60px or set overflow:hidden. This is because IE7 show the scrollbars with a different calculation of width, it is highly annoying...

Sean Molam
+1  A: 

.small has a width of 45px and left and right padding of 10px. .boxfont has a left-margin of 15px.

45px-10px-10px-15px leaves you with only 10px of space for your text. The other browsers are showing the text, IE is putting in the scrollbars.

Put overflow:hidden on .boxfont to see where it is cut off in Firefox.

To fix this, you can put overflow:visible on .small to have IE show the text but that will make your box a little bigger. Or you can just increase the width of your box a bit.

Emily
+1  A: 

The problem you are experieinceing is due to the IE Box Model issue. You can fix the display issue in your code by replacing the .boxfont definition as below.

.boxfont{font-weight:bold; font-size:16px; margin-left:10px;}
Matt Lacey