CSS annoying white space problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

CSS annoying white space problem

Post by JayBird »

Okay, i have fairly simple layout, it can be seen here.

As you can see all the boxes butt up to each other nicely as they should.

Now, when i put the text in the green box inside <p> tags, the layout suddenly looks like this. As you can see, the blue and green box have moved down slightly leaving a gap between the green and red boxes.

I can't for the life of me figure out why.

Anyone got any ideas where i am going wrong, and what i can do to rectify the problem!

Thanks
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Very interesting problem you have got there..

Code: Select all

p {
  margin: 0px;
}
will fix it.

This will also fix it, adding a gutter. The p is expanding the box model.

Code: Select all

<!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>Untitled Document</title>
<style type="text/css">
<!--
body { margin: 0; }

div.gutter {
  padding: 10px;
}

#outerContainer { width: 100%; }

    #header { width: 100%; height: 160px; }
    
        #headerLogo { width: 219px; float: left; height: 160px; }
        
        #headerOptions { margin-left: 219px; background-color: #FF0000; height: 160px; }

    #content { width: 100%; }
    
        #mainMenu { width: 219px; float:left; background-color:#123456; }
        
        #mainContent { margin-left: 219px; background-color:#00CC00; }
-->
</style></head>

<body>
    <div id="outerContainer">
        <div id="header">
            <div id="headerLogo">asdas</div>
            <div id="headerOptions">hello</div>
        </div>
        <div id="content">
            <div id="mainMenu">
                <p>s         </p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>

                <p>&nbsp;</p>
                <p>&nbsp;    </p>
            </div>
            <div id="mainContent">
              <div class="gutter">
              <p>hfgh</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              </div>
            </div>
        </div>
    </div>
</body>
</html>
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Thanks for that, i had just discovered the p margin:0

Quite annoying.

Thanks
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post by wtf »

You may find this css usefull
http://developer.yahoo.com/yui/reset/
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Another trick is to start your css with * {margin:0;padding:0;} which resets everything. But that method has some drawbacks as well (http://kurafire.net/log/archive/2005/07 ... -revisited)

Gaps appearing suddenly or in one browser and not the other can also be caused by the different way margin-collapsing is handled by browsers.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

All block (perhaps i mean block-level) elements have that margin.

You can remove the margin by saying

Code: Select all

blah
{
   margin: 0;
}
You could also make it display inline, like a span tag.

Code: Select all

blah
{
   display: inline;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

All block (perhaps i mean block-level) elements have that margin
Not all block level elements. For example, divs don't have any margin or padding by default.

The thing is, the so-called defaults you see when you don't supply any rules yourselve are just the default css rules of each browser. So if you take a basic html document, the browser has it's own stylesheet to give the common elements some styling.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

I thought they did.
Post Reply