CODEWITHSUNDEEP
htmlcssbrowserscrollbar
gath
gath

Reputation: 25472

How can I fix my CSS code to work with IE (where it shows scroll bars)?

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">

<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?

Upvotes: 1

Views: 1242

Answers (5)

Sean Molam
Sean Molam

Reputation: 638

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...

Upvotes: 1

Stacy
Stacy

Reputation: 11

If you can remove the overflow:auto property it can work. But better you setup IE7 cross css style to fix the scroll bar issue.

Upvotes: 1

Matt Lacey
Matt Lacey

Reputation: 65556

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;}

Upvotes: 1

Emily
Emily

Reputation: 10088

.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.

Upvotes: 1

Sinan &#220;n&#252;r
Sinan &#220;n&#252;r

Reputation: 118128

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

Upvotes: 1

Related Questions