Hi, I have a calendar built CSS.
I have positioned each month so i get 4 in a row - works in Firefox but not in IE.

FireFox:

IE:

Code:

#calendar_month_1 {
    position:relative;
    left:-10px;}
    #calendar_month_2 {
    position:relative;
    top:-152px;
    left:190px;}
    #calendar_month_3 {
    position:relative;
    top:-304px;
    left:390px;}
    #calendar_month_4 {
    position:relative;
    top:-474px;
    left:590px;}
    #calendar_month_5 {
    position:relative;
    top:-456px;
    left:-10px;}

What am i doing wrong???

thanks
Rachel

I think this has to do with the negative positioning. I know IE doesn't handle negative margins very well, so I imagine it doesn't handle negative positioning very well either.
I would probably float the divs. Be sure to give all the divs a specified width and float them all to the left. After each set of 4, clear the float.

I agree, using all that positioning and negative margins is asking for trouble. Use floats instead.

third opinion for floats.

I agree also i guess.

Gosh that was a really big help - Ive now floated them - looking good, all apart from October - wtf? whys it over there??
Comes up like this in Firefox and IE:


october is month number 10, heres the code:

#calendar_month_8 {
float:left;}
#calendar_month_9 {
float:left;}
#calendar_month_10 {
float:left;}
#calendar_month_11 {
float:left;}
#calendar_month_12 {
float:left;}

Any reason why it isnt coming out okay??
Thanks
Rachel

You have no defined width. When you float an element, it MUST have a defined width.

Originally Posted by LadynRed

You have no defined width. When you float an element, it MUST have a defined width.

Thanks for that - It seems to be working now - well i have a height issue now - but thats coz some months are longer than others...
Many thanks for your help!!!