Jump to content

Issue with space between <DIV>s w/ & w/o borders


spamboy

Recommended Posts

I am having a heck of a time with my <DIV> elements in Firefox.In my code, I have a containing <DIV> that is 200px wide by 600px tall. In that area, I want to have three 200px by 200px boxes. I can render these fine -- until one of the boxes contains text enclosed in <P> elements. In Internet Explorer, these display fine. In Firefox, not so well.When I add <P> within one of my three 200px wide/tall <DIV> boxes, some strange things happen in Firefox. A gap is produced above these <DIV>s, which has the effect of shoving my content down unexpectedly. But if I apply a visible border, then all is well -- but I don't want a border or the added width it brings to my smaller boxes. As I said, these display "as I expect" them to in IE -- how can I get around this issue in Firefox?A link to my code can be found here: http://www.spamboy.com/firefox_error.htmlMy browser versions:-- Firefox 1.0.7-- Internet Explorer 6.0Any help is appreciated, thanks!Spamboy

Link to comment
Share on other sites

Why don't you use two <br /> tags instead? And if you need paragraph styling, you can use the <span> tag. It's a known thing that paragraphs don't display equally in all browsers. Two <br /> tags will get you much closer to a cross-browser site...

Link to comment
Share on other sites

Why don't you use two <br /> tags instead? And if you need paragraph styling, you can use the <span> tag. It's a known thing that paragraphs don't display equally in all browsers. Two <br /> tags will get you much closer to a cross-browser site...

So, I'm not smoking crack or seeing things -- it comes down to a browser-issue? I understand why a <P> element would clear after the containing block, but before doesn't make sense to me. Which browser renders the <P> correctly -- FireFox 1.0.7 or IE 6?Using <SPAN> elements would be fine; would just require additional markup in my CSS, but otherwise sounds like it should work.Thanks!Spamboy
Link to comment
Share on other sites

add this top your CSS:p {margin:0px;padding0px;}You might want to play with margin and padding in your divs as well. When you have nested tags and you don't define margin and padding, things can get weird since the nested area is not 200px anymore. In this case, it seems that the <p> tag top margin is jacking it up.

Link to comment
Share on other sites

So, I'm not smoking crack or seeing things -- it comes down to a browser-issue?  I understand why a <P> element would clear after the containing block, but before doesn't make sense to me.  Which browser renders the <P> correctly -- FireFox 1.0.7 or IE 6?Using <SPAN> elements would be fine; would just require additional markup in my CSS, but otherwise sounds like it should work.Thanks!Spamboy

I wouldn't know anything about whether or not you smoke crack, but that's beside the point. It's definetely a browser issue. I don't know which browser renders the <p> element correctly, but I'm thinking it's not IE. Most likely it's Opera or Firefox...
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...