...

View Full Version : Unwanted DIV behaviour



johngreenwood
12-20-2009, 02:06 PM
I'm not sure what to say. I am rebuilding a website I made, but am using divs instead of tables, everything seemed fine, until I put something in the content div. Then it just went weird. It seems to have shifted down a bit, revealing the page background in between the content area and the navbar. I really have no idea what could be causing this, or why, so I am asking for help in tracking down and fixing the problem.

Thanks.

Attached is a screenshot demonstrating the problem. In Firefox, it only happens at the top, but in IE it happens at the top and the bottom.

vineet
12-20-2009, 02:25 PM
do you have a link to the page online.

vineet

johngreenwood
12-20-2009, 02:31 PM
No, it isn't up yet.

vineet
12-20-2009, 02:39 PM
ok, post your html and css to see whats wrong.

vineet

johngreenwood
12-20-2009, 02:51 PM
Well, the HTML is just a div with id="content".

Here's the CSS for it:


#content {
width:770px;
margin-left:8px;
margin-right:10px;
background-color:#FFFFFF;
background-image:url(../images/backgrounds/paper.jpg);
background-repeat:repeat;
min-height:0px;
}

abduraooft
12-20-2009, 03:56 PM
Well, the HTML is just a div with id="content".

Here's the CSS for it:


#content {
width:770px;
margin-left:8px;
margin-right:10px;
background-color:#FFFFFF;
background-image:url(../images/backgrounds/paper.jpg);
background-repeat:repeat;
min-height:0px;
}If you are looking for some help on your code, you need to show it- the complete HTML & CSS.

johngreenwood
12-20-2009, 04:22 PM
Ok, HTML body section:


<body onload="stretchPage()">
<div id="container">
<div id="header"></div>
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, [ ] rhoncus a urna. </p>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>




body {
margin:0px;
background-image:url(../images/backgrounds/wp_damask_002.gif);
background-repeat:repeat;
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}

p {
margin-left:40px;
margin-right:40px;
}

#header {
width:770px;
height:140px;
background-image:url(../images/headerbg-1.jpg);
margin-left:8px;
margin-right:10px;
}

#navbar {
width:770px;
height:30px;
margin-left:8px;
margin-right:10px;
background-color:#444444;
border-top: solid 1px #666666;
}

#content {
width:770px;
margin-left:8px;
margin-right:10px;
background-color:#FFFFFF;
background-image:url(../images/backgrounds/paper.jpg);
background-repeat:repeat;
min-height:0px;
position:relative;
}

#footer {
width:770px;
height:90px;
margin-left:8px;
margin-right:10px;
background-color:#444444;
position:relative;
}

#container {
width:788px;
height:auto;
margin-left:auto;
margin-right:auto;
background-image:url(../images/shadow/shadowLong.png);
background-repeat:repeat-y;
}

Thank you.

abduraooft
12-20-2009, 04:46 PM
Try adding
*{margin:0;padding:0;} into your CSS, to reset all browser specific default values of margins and paddings from all elements.

johngreenwood
12-20-2009, 04:54 PM
Perfect. the unwanted gap is closed and I may continue. Thank you very much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum