• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1466
  • Last Modified:

Bottom margin/padding/spacing doubled in IE7

I have a page setup that displays correctly in Firefox and Safari, but in IE7, the browser is adding extra padding/margin/spacing at the bottom of the content DIV.

The markup resembles:

<div id="page">
  <div id="header">
  </div>
  <div id="content">
     <div id="leftcol">
     <div id="rightcol">
  </div>
  <div id="footer">
  </div>
</div>

#leftcol and #right col are floated left, and #footer contains clear:both. For some reason in IE extra space is added at the bottom of #content right before #footer.

I'm sure there is a simple solution, but I have yet to find it in my searches. Thanks!
0
jimsteele01
Asked:
jimsteele01
  • 5
  • 5
  • 4
  • +1
2 Solutions
 
jimsteele01Author Commented:
The URL for the site in question is http://67.199.102.104 

Not sure if it was included in my question post.

Thanks!
0
 
Michel PlungjanIT ExpertCommented:
I think it is this:

p {
    padding: 0 0 20px 0;
}

where you may want

#leftcol p {
    padding: 0;
}
#rightcol p {
    padding: 0;
}


too
0
 
jimsteele01Author Commented:
Thanks for your response! Actually, I do want each p element in leftcol and rightcol to have a bottom padding to separate each p block. the bottommost p element should provide the spacing between the content area and the footer (where the double lines start). If I remove the padding, then it throws off the layout in Safari and Firefox.


0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
David S.Commented:
Odd.  Try removing the bottom margin from #rotatehome and giving a top margin to both #leftcol and #rightcol instead.
0
 
dgrafxCommented:
from looking at the page source my first reaction is "of course this will add space"
I'm more familiar with ie than with other browsers.
I develop in ie then modify where needed to accomodate other browsers.

The page is doing exactly as what I would expect.
To remove space you need to style and or layout differently.
like for example you have 2 closing div tags </div> and 1 closing P tag </p> before the footer starts.
By default P tags create space after them and so do div's.
NOTE: I did not look at your stylesheet.

You can try just adding to a certain element margin-top:0px or padding-top:0px to an element
this calls for experimenting

good luck ...
0
 
jimsteele01Author Commented:
Thanks again for the input, but this solution didn't help either. I removed all of the spacing between the closing tags and unfortunately nothing changed. Since it displays fine in FF and Safari, I was hoping that it was one of those situations where IE doubles the padding, but none of the IE CSS hacks are working yet.
0
 
dgrafxCommented:
just re-read my response
forgot to mention that these tags (div & p) are block tags
by default a block tag is like putting 2 <br />'s  after an inline tag
you can try (in your style) display:inline;
not sure if need to do this with just the affected div's or the p also

Q: when you are having this trouble - why are you using div's?
it seems that your situation could be much better handled by tables & tr - td
0
 
David S.Commented:
@Jim: No comment on my reply?


@dgrafx:

I suggest you learn how semantics apply to [X]HTML: http://www.dynamicsitesolutions.com/html/semantic-markup/
http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/

*sigh* There's more I'd like to say to you, but since you probably wouldn't listen anyway, I'm going to stop here.
0
 
dgrafxCommented:
great - now I'm getting advice from amateurs ...
0
 
David S.Commented:
LOL

That's really ironic. From my point of view you're the amateur -- mainly because you don't accept that IE is displaying it incorrectly.

So why do you think I'm an amateur? I really would like to know. Was it because my first reply was so short?
0
 
jimsteele01Author Commented:
Thanks for the responses.

@dgrafx
You are right about the way IE is rendering block elements. What I ended up doing to solve this problem (although I didn't want to necessarily do this) was to add conditional CSS links for IE specific browsers. That way, I could update the CSS issues in IE without affecting other browsers.

@Kravimir
Sorry, I missed your earlier reply. Because I am using #leftcol and #rightcol in other pages where there's no other div above them, I didn't want to put a top margin on those because it would cause unwanted space above those 2 elements. The conditional CSS, although not ideal, solved the issue. Hopefully IE8 will adhere to standards, so this won't be an issue in the future.



0
 
David S.Commented:
@Jim:  Ah. Yeah, given that additional constraint, I'd probably do what you did.

And yes, IE8 will be much more standards compliant than IE7. The second public beta version shows a great deal of improvement already. If you want more information on it, just ask.
0
 
jimsteele01Author Commented:
@Kravimir
That's great to hear. I know I'm not the only one frustrated with having to hack the CSS to make it work with IE. Looking forward to the new release!
0
 
dgrafxCommented:
>>Jim
Back in the day I used to kick and scream about browsers rendering pages differently.
Then I decided that since I cannot do anything about it - it was pointless to rant about standards - especially since MS rules the world.
So my plan was simple
most people use IE - so I use IE
I then simply need to modify a few things for other browsers

When you need to get the project done and get paid - there usually is not any time to rant about standards.
Don't get me wrong - if I could do anything about these issues I would.
I am not by any stretch saying "the heck with standards".

good luck with your project
if what I posted helped then I'm glad
0
 
David S.Commented:
@dgrafx

Ah. You didn't just always use IE as your primary test browser.

For me I find it easier to code to standards and then fix things in IE. It helps that by having experience I know a lot of what works and what doesn't, so I can avoid things that are particularly difficult to get IE to cooperate on.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 5
  • 5
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now