CSS Problem.. Please help me !

[Tamas Szegedi]

I have CSS problem, but it just in Internet explorer (6-7).
In firefox or safari everything is okey...

There is 2 problem .. 1.) empty target in the top of the central..
2.) some clothe jump to the next target and will be empty targets :S

1 pic - firefox
2 pic - ie
3 attachment is the global.css

Please see my Attachments :$
And please help me :$

Thank you !

global.css.zip

[Dave Egerton]

Assuming these products blocks are floated left- do you also have margins on them?. Internet Explorer can, and usally does, double the margin on the side being floated

So create a IE specific style sheet and attach this by following the rules used for linking to your gloabl.css uisng the conditional comments like below

<!--[if IE]>Special instructions for IE 6 CSS link here
First, if my usumption is right, add a extra attribute to the divs containing your products in this IE CSS file ( if they are floated and have margins), display:inline; this will usally do the trick

However, I am guessing and ideally you need to post your URL

[Tamas Szegedi]

http://www.bamby.hu

Please write me the whole code, because i'm not too good in CSS :$
I waiting for you answer, and i'm very happy that you help me :$

THANK U !!!

[Dave Egerton]

Ok, if you take a look you have

#center_column {global.css (line 229)
margin:0 0 30px;
width:700px;
}

ul#product_list {global.css (line 1460)
border:0 solid #CC0000;
list-style-type:none;
margin-top:2em;
overflow:hidden;}

.clear {global.css (line 29)
clear:both;}

* {global.css (line 3)
margin:0;
padding:0;}

ul#product_list li {global.css (line 1464)
border:0 solid #33FFCC;
float:left;
height:270px;
margin-bottom:6em;
padding:20px;
width:184px;
}

In your side ul#product_list li you have images that are 200px wide. In IE it will expand block elements to fit around the image but in other browsers the images pop out. This is not noticed in FF because of the padding are the image can move into

So centre_column is 700px wide, in this you have your ul#product_list
and within this are the li containing your images, images are 200px wide + 20px padding = 240px

240 x 3 = 720px so there looks the problem, in IE you need the main block to be 720 or it will not fit and third ones float down

quickest solution that should work (But you will have to test), reduce padding as follows

ul#product_list li {global.css (line 1464)
border:0 solid #33FFCC;
float:left;
height:270px;
margin-bottom:6em;
padding:16px;
width:184px;
}

don't add the "{global.css (line 1464" values - they are so you know where to go only

regards

[Tamas Szegedi]

Wow .. It's perfect

THANK YOU VERY VERY MUCH :$

[Raver]

I have a pretty serious CSS problem too, but it just in Internet explorer 7(well I only checked on IE version 7 ).
In firefox it looks perfect.

The centre column and right column have been pushed down and looks awful in IE 7( I assume in other IE versions too).

Trying to decipher the solution here but my line numbers are different and it all becomes confusing to me.

Attached is screenshot in IE7 of my site which push down center col, right col and links below to my site n CSS

Seeking advice to correct the problem from a CSS expert cause I hardly know CSS

My website link

My Global CSS link

Truly Appreciate your help and time for your assistance.