1. Home
  2. Forums Index
  3. Browser Side / CSS 10:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Extra Space Below DIV

Opera and IE versus Firefox and Netscape

         

danmccarthy

6:05 am on Dec 29, 2004 (gmt 0)

10+ Year Member



Hey folks. I've been struggling with a three-pixel CSS problem for about 12 hours now. Basically the issue comes down to my "container" div extending below my "bottom-row-left/right/center" divs by a couple pixels in IE6 and Opera. I have an ugly red background added to show the div extending phenomenon. The page displays fine in Firefox and Netscape.

Can Anyone help?

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>StudioŚM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="center-test.css" rel="stylesheet" type="text/css" media=all />
</head>
<body>
<div id="container">
<div class="top-row-left">
<img src="gradient.gif" width="215" height="59" />
</div>

<div class="top-row-center">
<img src="studiom5.gif" width=215 height=59 />
</div>
<div class="top-row-right">
<img src="gradient.gif" width="215" height="59" />
</div>

<div id="left-circle"><a href="web-design.html"><img src="central-sq-shad.jpg" name="CentSq" width="215" height="215" border="0" id="CentSq"></a>
</div>
<div id="middle-circle"><a href="photography.html"><img src="christian-science-shad.jpg" name="ChristianSci" width="215" height="215" border="0" id="ChristianSci"></a>
</div>
<div id="right-circle"><a href="about.html"><img src="frames-shad.jpg" name="Frames" width="215" height="215" border="0" id="Frames"></a>
</div>
<div class="bottom-row-left">
<img src="gradient.gif" width="215" height="59" />
</div>
<div class="bottom-row-center">
<img src="gradient.gif" width="215" height="59" />
</div>
<div class="bottom-row-right">
<img src="gradient.gif" width="215" height="59" />
</div>
</div>
</body>
</html>

And Here's the CSS:

html {
margin: 0px;
padding: 0px;
}

body {
margin: 50px;
padding: 0px;
text-align: center;
background-color: #EEEEEE;
}

#container {
width: 645px;
height: 388px;
margin: 0px auto;
text-align: left;
border-left: 1px solid #6699CC;
border-top: 1px solid #6699CC;
border-right: 1px solid #6699CC;
border-bottom: 0px solid #6699CC;
background: red
}

.top-row-left
{
float: left;
width: 215px;
height: 59;
}

.top-row-center
{
float: left;
width: 215px;
height: 59;
}

.top-row-right
{
float: left;
width: 215px;
height: 59;
}

#left-circle {
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
padding-top: 25px;
width: 215px;
height: 240px;
float: left;
}

#middle-circle {
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
padding-top: 25px;
width: 215px;
height: 240px;
float: left;
}

#right-circle {
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
padding-top: 25px;
width: 215px;
height: 240px;
float: left;
}

.bottom-row-left
{
float: left;
width: 215px;
height: 59;
}

.bottom-row-center
{
float: left;
width: 215px;
height: 59;
}

.bottom-row-right
{
float: left;
width: 215px;
height: 59;
}

Thanks,

Dan

emac

8:51 pm on Dec 29, 2004 (gmt 0)

10+ Year Member



Figured out your issue - let me catch my breath - i'll explain in a sec. I reformatted the code.

danmccarthy

9:20 pm on Dec 29, 2004 (gmt 0)

10+ Year Member



sounds good. i've been sweating it for hours. can't wait...

emac

9:24 pm on Dec 29, 2004 (gmt 0)

10+ Year Member



you had a few issues with padding, size, missing quotes, etc...
I worked your file and thought it was kind of sick joke - so I scrapped most of it and started over.

As you might be aware, on a MAC (IE 5 - Safari) using <td>, if you are nesting in a table the <td> thereafter will give extra space if you return the </td> to it's own separate line. And this worked the same. By returning the </div> in IE, you get that stupid 3px space at the bottom. I just did it as a test and it worked. Delete the return and the space goes away, but this only applies to nested <div>.

I renamed <img src> files, chaged the red because it was bugging me out and deleted some stuff for my sake but I am sure it will make sense.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>StudioŚM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="center-test.css" rel="stylesheet" type="text/css" media=all />
</head>
<body>

<div id="container">

<div class="im-a">
<img src="test.gif" width="215" height="59" /></div>

<div class="im-b">
<img src="test_b.gif" width="215" height="59" /></div>

<div class="im-c">

<img src="test_c.gif" width="215" height="59" /></div>

<div id="mid-im-a">
<img src="test_c.gif" width="215" height="215" /></div>

<div id="mid-im-b">
<img src="test.gif" width="215" height="215" /></div>

<div id="mid-im-c">
<img src="test_b.gif" width="215" height="215" /></div>

<div id="top-im-a">
<img src="test.gif" width="215" height="59" /></div>

<div id="top-im-b">
<img src="test_b.gif" width="215" height="59" /></div>

<div id="top-im-c">
<img src="test_c.gif" width="215" height="59" /></div>

</div>
</body>
</html>

---
and the css:

html {
margin: 0px;
padding: 0px;
}

body {
margin: 50px;
padding: 0;
background-color: #EEEEEE;
}

#container {
width: 645px;
height: 383px;
margin: auto;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff
}

.im-a {
float: left;
width:215px;
height:59px
}

.im-b {
float: left;
width:215px;
height:59px
}

.im-c {
float: left;
width:215px;
height:59px
}

#mid-im-a {
float: left;
padding-top: 25px;
width: 215px;
height: 215px
}

#mid-im-b {
float: left;
padding-top: 25px;
width: 215px;
height: 215px
}

#mid-im-c {
float: left;
padding-top: 25px;
width: 215px;
height: 215px
}

#top-im-a {
float: left;
padding-top: 25px;
width: 215px;
height: 59px
}

#top-im-b {
float: left;
padding-top: 25px;
width: 215px;
height: 59px
}

#top-im-c {
float: left;
padding-top: 25px;
width: 215px;
height: 59px
}

---

I did not validate the html and css to w3c though. Let me know if it works, or doesn't work for you.

danmccarthy

10:12 pm on Dec 29, 2004 (gmt 0)

10+ Year Member



thank you so much. it was not a sick joke. i'm just teaching myself how to design a site without tables.

i didn't know about a return before a nexted </div> causing issues.

as far as the quotes problem, i know exactly what you mean. that was just laziness on my part, i didn't think it could cause any browser display issues. but i wouldn't have seen that anyhow, as it doesn't sound like it occurs on PCs.

i think the bug I had noticed was related to the size/padding/quotes issues that you mentioned, but I still haven't figured out exactly what yet, even though it's solved. if you have a sec to explain what exactly i had done wrong with size and padding, i'd be very appreciative.

emac

12:01 am on Dec 30, 2004 (gmt 0)

10+ Year Member



Glad it worked for you. I was just messing around with the sick joke remark. I just started designing all in div's myself about a month ago so it is fresh ground for me as well.

Basically, I work both on Mac and PC and I only saw the problem on IE (PC). Safari and Firefox was fine, but when I started playing with it everything went wacky on all browsers.

As far as the return on nested </div>, that was a guess, as it was when I had a similar issue with a </td> and was fixed by accident. For some reason it does this with nestd div's that has an image (I forgot to mention the image part).

Anyway, compare my css with yours and you will see how I adjusted the padding and sizes - it was a bit off, so it created wierd problems.
If you have any other issues or new findings let me know, (sticky mail).

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:01 pm May 1, 2026