A somewhat simple CSS question (I hope!)

[KevySaysBeNice]

Hi all!

I've been trying to fix this little problem I'm having for a while now, but I'm failing.

The problem is the gap between the top image with the dots and the main content area - this only happens with IE. You can see this page "live" at ccc.shoelessone.com - I figured that perhaps the issue was there was a margin somewhere set, or so on, but I don't think so. Also, I am aware of the "box model" problem, but I believe I've cleared all of the margins and padding around those elements and I'm still having a problem.

The CSS can be viewed directly here: ccc.shoelessone.com/main.css

Here is the problem "in action":

If somebody can magically tell me how to fix this little issue, I'd be very very appreciative.

 

[Praboy]

uuuooooouuu, it works well on IE 8 beta

 

[spotdog14]

http://img16.imageshack.us/img16/4734/capturekoq.png


uuuooooouuu, it works well on IE 8 beta

I seem to have a lot of problems with IE 6 and below with CSS. My pages always work fine in IE7+ and of course Firefox, Opera and Safari.

What IE version are you trying to use where it adds the spaces?


BTW on a side note are you based in the Mid Michigan area? For some reason I think we went with someone along that name for my wedding.

 

[maw]

try explictily defining position: relative and/or defining a height for the container

 

[FireStormGS]

Could be a problem with the margin/padding on the first paragraph causing the holes image to bump up a little. Try adding a break or clear before it.

 

[rosss]

KevySaysBeNice,

On a quick inspection, I would guess that the problem lies in the div "contentAreaInner" which had a padding-top of 1em. IE6 includes padding in the width and height of boxes.

With CSS you can add an IE only exception using an asterik ahead of your attributes. And you can add an IE6 only exception if you use an underscore ahead of the attribute as shown below. Just make certain that you do them in the right order so that your exception are after the main attribute so that that take control...

padding:1em 1em 1em 1em;
*padding:1em 1em 1em 1em; /* <IE only */
_padding: 0em 1em 1em 1em; /* IE6 only */

Another possibility could be that you have the topElement style with a large line-height:145%. This could possibly cause IE6 to be pushing that element down. Given the layout, I don't think this is the case, but it would be my second item to test.

Hope it helps!!!

 

[Dyslexic_Dog]

wrap your img in a <div id="badimage"> tag then in your css add this line.

div#badimage img{
    float: left;
}

That should fixerup

EDIT: I'd be happy to fix this for you for $30 you have several other issues related to standards compliance and code maintainability.

 

[Excavator]

Since that image is 620px wide and it's container is 620px wide it doesn't make a lot of sense to float it.

We float elements so we can put other things beside them. If the image is full width of container, there is no room to put anything beside it... no need for float

Instead, do a little photoshop work on the top image so it will line up with the two side images when you place it like this -

<div id="contentArea"> 
<div style="width: 100%; text-align: left;"> 
<img src="/res/images/ccclogo4.jpg" alt="Custom Chair Covers" style="margin-left: 2.5em;"> 
</div>  
<div id="contentAreaOuter">
[COLOR="Red"]<img style="margin: 0px;" src="/res/images/borderTop3.jpg" width="620" height="24" alt="">[/COLOR]
<div id="contentAreaInner">

<script type="text/javascript">

Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad​

 

[Dyslexic_Dog]

Since that image is 620px wide and it's container is 620px wide it doesn't make a lot of sense to float it.

We float elements so we can put other things beside them. If the image is full width of container, there is no room to put anything beside it... no need for float

Instead, do a little photoshop work on the top image so it will line up with the two side images when you place it like this -

<div id="contentArea"> 
<div style="width: 100%; text-align: left;"> 
<img src="/res/images/ccclogo4.jpg" alt="Custom Chair Covers" style="margin-left: 2.5em;"> 
</div>  
<div id="contentAreaOuter">
[COLOR="Red"]<img style="margin: 0px;" src="/res/images/borderTop3.jpg" width="620" height="24" alt="">[/COLOR]
<div id="contentAreaInner">

<script type="text/javascript">

Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad​

There's a bug in IE6 that puts magic padding and margin on images if they're the same size as the div, applying margin and padding as 0 doesn't fix it, the only fix I've found for this issue is to float the image.

 

[Excavator]

There's a bug in IE6 that puts magic padding and margin on images if they're the same size as the div, applying margin and padding as 0 doesn't fix it, the only fix I've found for this issue is to float the image.

It's true that IE6 has a lot of bugs and I've had to deal with all of them over the years.
"Magic" padding and margin isn't one I've ever had to fix though.