Page 1 of 1
CSS annoying white space problem
Posted: Thu Sep 28, 2006 5:33 am
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
Posted: Thu Sep 28, 2006 6:25 am
by Benjamin
Very interesting problem you have got there..
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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="mainContent">
<div class="gutter">
<p>hfgh</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
</body>
</html>
Posted: Thu Sep 28, 2006 6:29 am
by JayBird
Thanks for that, i had just discovered the p margin:0
Quite annoying.
Thanks
Posted: Tue Oct 03, 2006 11:05 am
by wtf
Posted: Tue Oct 03, 2006 11:16 am
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.
Posted: Tue Oct 03, 2006 11:32 am
by daedalus__
All block (perhaps i mean block-level) elements have that margin.
You can remove the margin by saying
You could also make it display inline, like a span tag.
Posted: Tue Oct 03, 2006 4:31 pm
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.
Posted: Tue Oct 03, 2006 5:18 pm
by daedalus__
I thought they did.