Forums

al_m473

what is happening with the wrapper in FF?

it shows on top and bottom of the box in IE7, but not in FF3.5, why?


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" 
   \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
   <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
   <title>Model Test Box</title>
   <style type=\"text/css\">
      * {margin: 0; padding: 0;}
      body {font-family: Arial, Helvetica, sans-serif; font-size: 16px; background: #fff;}
      #wrapper {margin: 0 auto; width: 960px; background: #eee;} 
      #box {margin: 20px; border: 5px solid blue; padding: 20px; background: #ccc;}
   </style>
</head>
<body>
<div id=\"wrapper\">
   <div class=\"box\">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p>
   </div>
</div>
</body>
</html>

Al

Robskiwarrior

sorry, what's going on? lol

eXo

"al_m473" said:
<div class=\"box\">

should be

<div id=\"box\">

al_m473

changed it to ID, was fiddling around with the code and uploaded the wrong version.

problem is that in FF, the wrapper color disapppears on the top of the box and on the bottom of the box. the space
occupied by the wrapper does not, just the background color. in IE, the background color shows up.

I will attach images

IE:

[attachment=1]IE_image.JPG[/attachment]

FF:

[attachment=0]FF_image.JPG[/attachment]

Al

al_m473

something else that is strange, if I use Firebug and highlight the wrapper, the wrapper starts 20px down from the top
of the page. there is no margin or padding on the wrapper and should be at the top of the screen, the #box has a
margin of 20px which seems to be affecting how the wrapper is displaying. I know I can get around this situation by
specifying padding: 20px on the wrapper but I would like to know why this is happening.

Al

apostrophe

Each browser has its own default css settings, that's why most people start with a reset.
Try this for now:

* {
 margin: 0;
 padding: 0;
}

al_m473

not that, apostrophe, I do have that in my CSS code

Al

apostrophe

Ok, I just had 10 minutes and as you didn't give us a link I recreated your page.

Basically what is happening is the containing div is collapsing. Just add overflow:hidden; to #wrapper.

al_m473

is the collapsing a function of FF? is that just how it works?

Al

apostrophe

Just a quirk of css.

treehouse : what would you like to learn today?

Forums

what is happening with my wrapper?