14 replies [Last post]
philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

Does anyone have any idea what is causing the extra space at the bottom of #column2. I put bottom borders on my two main columns so that you could see what I am talking about. Any help would be greatly appreciated. Thanks.

The page is
http://www.jalc.edu/athletic/newpage.html

I got nuthin'

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Is it the

Is it the padding-bottom:30px; in #bodyarea ?

philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

Nope

No, that's the extra space you see below the line. Thanks.

I got nuthin'

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You will need to explain

You will need to explain what you concider extra space. I see a normal behaving layout, column two is longer than column one. Are you expecting them to be equal height?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

extra space

I mean the space between the bottom of #column2column1 and the bottom border of #column2. Thanks.

I got nuthin'

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

You told it to put 30px

You told it to put 30px there:

#bodyarea { 
  overflow: hidden; 
  width: 760px; 
  padding-bottom: 30px;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I think he's speaking of the

I think he's speaking of the space above the border line and below the green headed column2column1 div. The #bodyarea padding is below the black border line. It's IE (6) that renders the padding the OP is questioning. looking into it now...

philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

firefox

Yes, wolfcry911 is talking about the correct area. I just noticed that firefox doesn't add the extra space. Thanks.

I got nuthin'

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I'm sorry, but I got

I'm sorry, but I got nuthin'
I hope a guru figures this out because I'm completely stumped.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

I suspect, but have not

I suspect, but have not tested, margin collapse. #column2column1 has layout. IE will collapse margins through padding and borders, which are no-nos, and with floats, which is also a no-no. Try giving

#column2column1 ul {
  margin-bottom: 0;  /*an explicit value often works, 
                       regardless of value.*/
  }

You should do the same to its sibling, in case it's ever the longer.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

didn't seem to work

Double check my CSS to see if I did what you wanted. It didn't seem to work. Thanks.

I got nuthin'

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Looks OK. I haven't a clue.

Looks OK. I haven't a clue. It's bound to be some little something that's hidden away. Otherwise, someone would recognize the issue quickly.

There's a bit of difference in the #info block too. :shrug:

If this extra space is a deal breaker, you may need to do a little destructive debugging. Make working copies of the document and the css file. Bit by bit, remove a section of the document, and then from the css. If there is no change, leave it out and go to the next thing. If the removal fixes the issue, put it back. In the end, you'll have only the problem and its cause. Be sure to bring your conclusions back to the forum so we can all learn.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

well Gary was right, it's

well Gary was right, it's the ul's bottom margin that's causing it. Things to note, as gary already mentioned, IE is wrong in collapsing the margin when a border is present - it should have rendered inside the #column2column1 div. And second, for some reason, IE will not honor margin values explicitly set in #column2column1 ul!!!
I don't understand why. Even if a more specific rule of #column2 #column2column1 rule is used, IE doesn't see it.

I can only guess that IE is having problems with the id names being so close to one another. To fix the problem you can set the ul under #column2 to margin-bottom: 0
#column2 ul {margin-bottom: 0;}

philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

wow

Wow, I would not have figured that out on my own. Thank you guys for your help.

I got nuthin'

philbert25
Offline
Enthusiast
Last seen: 11 years 38 weeks ago
Joined: 2007-02-13
Posts: 85
Points: 0

I also noticed

After fixing this, I also noticed that the space for the bottom padding of the bodyarea seemed to be bigger taller than 30px. I looked in Fire fox, and sure enough there was a difference. I am working on that now.

I got nuthin'