469,271 Members | 1,785 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

Space above and below my div in firefox but not in IE

seeoneomen
I am having a spacing problem above and below my divs that are positioned "relative". In FireFox space is added above and below my div whereas the page displays correctly in IE on the PC. If you view my page in FireFox, you will see that the right column has spaces below the "Featured Products" heading and the line to the left of the text block that sits below it. The same problem is occurring with the div that follows with the heading "Latest News". Hopefully someone can give me some guidance. Here is my page and style sheet:

My page: www.embeddedinsight.com/lightwire/kat

My style sheet: www.embeddedinsight.com/lightwire/kat/css/lightwire_styles.css

Thank you for your help.

Katrina
Oct 23 '07 #1
14 13938
drhowarddrfine
7,435 Expert 4TB
You have 7 HTML errors and 13 CSS errors, some directly related to the right column. IDs are unique names that are only allowed once per page.

Never use IE as a reference for something that is working. IE is nine years behind web standards or incorrect in its implementation. Always test in Firefox, Opera or Safari first; then adjust for IEs quirks and bugs.
Oct 23 '07 #2
Thanks for your help. I have validated my css page. My html page has one error due to a center tag, that I need to keep because the center attribute I defined in my style sheet doesn't actually center the text.

My problem remains.. Space above and below my right column divs that are positioned relative.

Katrina
Oct 23 '07 #3
drhowarddrfine
7,435 Expert 4TB
I've been gone all day so late getting back to this. Just a quick look but IE may be expanding your wrapper div to contain the absolutely positioned elements. This is a bug in IE and should not happen. Firefox is performing correctly. The fix I don't have time for right now; maybe later tonight.
Oct 23 '07 #4
Hello.. thanks. The problem is that firefox is not displaying correctly. When you look at the page, you will see that in the right hand column there is space between the "Featured Products" and the vertical line below (a left border to a div that contains the featured products text). Below that sits the "Latest News" heading and also below that rectangle, the left vertical border of the content is separated by a space. I'm really stumped here, I really appreciate the help.

Katrina
Oct 24 '07 #5
drhowarddrfine
7,435 Expert 4TB
Firefox is displaying what you wrote. IE is displaying what you want but not what you wrote. As I said, IE is displaying its "expanding box" bug.

Busy again today. More on this later.
Oct 24 '07 #6
drhowarddrfine
7,435 Expert 4TB
To center your page, remove the <center> and </center> tags. Then, in your css, in #wrapper, add:
margin: 0 auto;

I didn't look into your second <center> tag.

As I said above, the problem lies in IEs improper expansion of the containing elements around the absolutely positioned elements. These elements are removed from the normal flow and the parent containers should collapse to the size of their content, which is what they properly do in Firefox, and will also in Opera and Safari.

To see this, in #h_top, do
background-color:blue;
and adjust the width, if necessary, and you'll see it. I don't know what is covering up that background.

There is too much going on for me to work on this. I do not believe absolutely positioning everything is necessary and it rarely is.
Oct 24 '07 #7
Thank you for your info. Because of the extra space that firefox "correctly" adds, I had to make the bottom margin of the div for "latest news" and "featured products" equal to -8px. Then position that on a layer that sits above the content with the vertical line. The vertical line joins up exactly at the base of the title box on firefox, but on a pc the line overlaps, but is not visible because it is covered by the title box that is sitting on the layer above it.

After getting the line to abut the box in both instances, I then had to give the content text some breathing room. As it worked for me, ie does not read padding-top, and firefox does not read margin-top. So I specified the desired space for each platform in the div to have it render correctly.

Perhaps my solution is a bit of a hack job, but at this point, it displays correctly and I can work on other parts. If there is a better way, I'm all ears.
Oct 25 '07 #8
drhowarddrfine
7,435 Expert 4TB
Expand|Select|Wrap|Line Numbers
  1. If there is a better way, I'm all ears.
I would just suggest, as I did above, to consider not using absolute positioning for every element. This is an unusual choice and problems like this frequently crop up.

Other places on the 'net even advocate never using absolute positioning, something I think is a totally wrong position to take.
Oct 25 '07 #9
I didn't use absolute positioning for that area. The positioning is relative with a top-margin.. or is that considered absolute positioning?
Oct 26 '07 #10
drhowarddrfine
7,435 Expert 4TB
#wrapper is relative but its contents are absolute and #wrapper will collapse to its content.
Oct 26 '07 #11
I had the same problem, and used -px for margin-top margin-bottom for firefox, but it looks collapsed in IE. I'm thinking about using @import CSS for IE to make it look ok, what do you think?
Feb 20 '08 #12
danich
1
I'm having a similar problem.

www.savrcom.com/services.shtml
or
www.savrcom.com/technology.shtml

In IE (yes, I follow that it's doing something wrong) the blue borders meet up properly bottom and top (very slight gap at top, not concerning about that right now) whereas in firefox there is a huge gap at the bottom.

I realized this morning that IE is reading the border style to include the embedded image object whereas firefox is not.

Fix for firefox is to add <p> as needed to bring the text area down to even or below the bottom of the embedded image. This is a hit or miss fix, however; if I have to add/remove text in the block it'll throw everything off again. Is there a more elegant way to fix it?
Feb 20 '08 #13
drhowarddrfine
7,435 Expert 4TB
The validator says you are not completing some tags.
Feb 20 '08 #14
angkana
15
I'm having a similar problem.

www.savrcom.com/services.shtml
or
www.savrcom.com/technology.shtml

In IE (yes, I follow that it's doing something wrong) the blue borders meet up properly bottom and top (very slight gap at top, not concerning about that right now) whereas in firefox there is a huge gap at the bottom.

I realized this morning that IE is reading the border style to include the embedded image object whereas firefox is not.

Fix for firefox is to add <p> as needed to bring the text area down to even or below the bottom of the embedded image. This is a hit or miss fix, however; if I have to add/remove text in the block it'll throw everything off again. Is there a more elegant way to fix it?
u should in put
*{margin:0;padding:0;} in css
it's just define space of margin and padding

Best regards,
Angkana Jivaphaiboolsak
Feb 24 '08 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by skullcap | last post: by
3 posts views Thread by Eric | last post: by
7 posts views Thread by Gustaf Liljegren | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.