no borders in firefox

[cass27]

hi,

I think this is a css issue. www.jill-piano-teacher.co.uk I have just uploaded a site which i created in IE 6. Looks ok in IE 6 but when viewed in firefox strange things happen. The border on the right column cannot be seen. Nor is the body around the main content. Also, the copyright box and the bottom left box seem to have moved up a few pixels so inteffering with the rest of the page.

The css for the index page is:


div.mainbody{position:absolute; width:870px; height:656px; top:293px; left:60px; border:#000000; border:solid; border:thin; z-index:1; background-color: #FFFFFF;
}

div.indexpic{ float:left; width:196px; height:545px; z-index:4; margin-top:30px;
}

div.welcome{ float:left; margin-left:0; margin-right:0; width:400px; height:600px; background-color: #FFFFFF; margin-top:37px;
}

div.signature{ position:absolute; width:61px; height:90px; z-index:1; left: 485px; top: 492px;
}

div.musicnews{ float:left; width:160px; background-color:#99CCFF; margin-top:47px; border: #3366CC; border-left-style:inset; border-right-style:inset; border-top-style:inset; border-bottom-style:inset; border: thick; margin-left:25px;
}

div.book{ position: absolute; width:381px; height:296px; left:109px; top:754px; z-index:6;
}

div.copyind{ position:absolute; font-size:12px; width:339px; height:56px; z-index:7; left: 362px;
top: 971px;
}

div.markets{ position:absolute; width:155px; height:75px; z-index:7; left: 737px; top: 976px;
}

Anybody any ideas whats up?

thanks

[SRD]

I'm not sure, mainly through not having enough knowledge, but you have coded in XHTML which often causes browsers to adopt odd procedures.

In IE7 the left hand column containing 'Recent and Up-coming events' appears a few px down and to the left of the top right corner of the mainbody div.

There is well documented evidence (see the stickies on this forum) that IE handles margins differently to FF.

Finally, I love your 'hellotit' class.

My bumping this thread may attract more knowledgeable people to help out with more practical stuff.

[Dr John]

Change the code for .mainbody that says this
border:#000000; border:solid; border:thin;
to this
border:#000000 solid 2px;

You are not specifying WHICH border property you are setting in the original code. IE, being clever, has made an intelligent guess and was right. Other browsers don't guess as well when the code is wrong.

[drhowarddrfine]

Validate for your list of 15 html errors, too.

[cass27]

Finally, I love your 'hellotit' class.

Yes, I often get rid of my anger with troublesome clients with appropriate class names (so long as they dont understand code!)

Thanks for the bump!

You are not specifying WHICH border property you are setting in the original code. IE, being clever, has made an intelligent guess and was right. Other browsers don't guess as well when the code is wrong.

this was spot on Dr John. Im learning.

It still leaves what appears to be the absolute positioned divs which seem to be moving up down left or rright a few pixels in firefox. It sounds this is a known problem can anyone point me to a tutorial of ho to deal with this?