Forum Moderators: not2easy
I have a problem which is currently driving me mad and I can't see why it's happening. Maybe someone will be able to help.
I have a page with an image, a divider and a main content panel however in IE7 there appears to be a bottom margin adding by itself which I cant unset. Code is posted Below.
doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html:
<div id="mainarea">
<div id="picturebar">
<img id="rotary" src="rotator1.jpg" width="740" height="100" alt="Images" />
</div>
<div id="divider"></div>
<div id="contentpane">
<div id="maincontent">
<h1>Main Content Page</h1>
<p>here is a paragraph of content.</p>
</div>css:
body{
background-color: black;
}
#mainarea {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom:0px;
border:0px;
padding:0px;
background-color: white;
width: 740px;
}
#picturebar {
margin: 0px;
border:0px;
padding: 0px;
}
#divider {
height: 10px;
width: auto;
background-color: #680000;
margin:0px;
border:0px;
padding:0px; }
#contentpane {
padding: 10px;
}
Apologies if this has already been covered elsewhere but i did use the search function and I couldnt find anything useful.
Thanks in advance for any help!
<div id="mainarea">
<div id="picturebar">
<img id="rotary" src="rotator1.jpg" width="740" height="100" alt="Images" />
</div>
<div id="divider"></div>
<div id="contentpane">
<div id="maincontent">
<h1>Main Content Page</h1>
<p>here is a paragraph of content.</p>
</div>
</div>
</div>
I do note a black margin at the bottom, most likely can be eliminated by this?
body{
background-color: black;
margin-bottom:0;
padding-bottom:0;
}
Unrelated, the following is equivalent to your #mainarea CSS:
#mainarea {
margin: 0;
padding:0;
background-color: white;
width: 740px;
}
For all four values, you'd do
margin: 0 auto 0 auto;
or
margin: 0 12px 0 12px;
etc.....
I have corrected the code to:
<div id="mainarea">
<div id="picturebar">
<img id="rotary" src="rotator1.jpg" width="740" height="100" alt="School Images" />
</div>
<div id="divider"></div> <div id="contentpane">
<h1>Main Content Page</h1>
<p>here is a paragraph of content.</p>
</div>
</div>
and the css to:
body{
background-color:black;
}
#mainarea {
margin: 0;
padding:0;
background-color: white;
width: 740px;
}
#picturebar {
margin: 0;
border:0;
padding: 0;
vertical-align:top;
}
#divider {
height: 10px;
width: auto;
background-color: #680000;
margin:0;
border:0;
padding:0; }
#contentpane {
padding: 10px;
}
The place where im getting the white bar is inbetween the top image and the divider. I Didn't explain it properly in my first post. This is only happening in IE7.
Could you have another look for me?
Thanks.
if you want it colored, then just make it 10px of border-bottom instead, and color the border.
I just tried that and im still getting the exact same problem :(
<img src="blah" />
</div>
to
<img src="blah" /></div>
I just fixed it myself by adding a rule.
#picturebar img{
display:block;
}
Thanks for all the help!
