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

[drhowarddrfine]

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.

[seeoneomen]

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

[drhowarddrfine]

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.

[seeoneomen]

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

[drhowarddrfine]

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.

[drhowarddrfine]

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.

[seeoneomen]

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.

[drhowarddrfine]

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.

[seeoneomen]

I didn't use absolute positioning for that area. The positioning is relative with a top-margin.. or is that considered absolute positioning?

[drhowarddrfine]

#wrapper is relative but its contents are absolute and #wrapper will collapse to its content.

[sourapple77]

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?

[danich]

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?

[drhowarddrfine]

The validator says you are not completing some tags.

[angkana]

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