Why does webpage not render correctly in Opera?

[swizzy]

I have a question please; this page in this website
looks really out of whack in Opera Browser:

http://www.theartofpleasure.net/gallery.html

as well as a few other pages. It looks fine in every other browser (I haven't viewed it on a MAC however) yet Opera renders this hacked up look.

If an expert could lend me your infinite wisdom on how to fix this problem I will forever be grateful, as it is driving me nutzoid not knowing. I don't even know where to begin to be honest.

Here is the code:


body {
width: 800px;
position: relative;
clip: rect(auto auto auto auto);
background-color: #333333;
margin: 0px;
padding: 0px;

}
#head {
height: 202px;
width: 800px;
left: 0px;
top: 0px;
position: absolute;
visibility: visible;
z-index: 3;
display: block;
margin: 0px;
padding: 0px;
right: 0px;
bottom: 0px;


}
#foot {
display: block;
height: 10px;
width: 800px;
position: absolute;
color: #cccc66;
top: 800px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
left: 0px;
visibility: visible;
z-index: 1;
padding-left: 200px;

}
#imgleft {
height: 197px;
width: 306px;
position: absolute;
display: block;
z-index: 4;
top: 202px;
left: 0px;
visibility: visible;
margin: 0px;
padding: 0px;
}
#img1 {
display: block;
height: 56px;
width: 306px;
position: absolute;
z-index: 5;
top: 399px;
left: 0px;
visibility: visible;
margin: 0px;
padding: 0px;
}
#img2 {
display: block;
height: 56px;
width: 306px;
position: absolute;
z-index: 6;
left: 0px;
visibility: visible;
top: 455px;
margin: 0px;
padding: 0px;

}
#img3 {
display: block;
height: 56px;
width: 306px;
position: absolute;
left: 0px;
top: 511px;
visibility: visible;
z-index: 7;
margin: 0px;
padding: 0px;
}
#img4 {
display: block;
visibility: visible;
position: absolute;
height: 55px;
width: 306px;
left: 0px;
top: 566px;
z-index: 8;
margin: 0px;
padding: 0px;

}
#img5 {
display: block;
height: 55px;
width: 306px;
position: absolute;
left: 0px;
top: 621px;
z-index: 9;
visibility: visible;
margin: 0px;
padding: 0px;
}
#img6 {
display: block;
width: 306px;
position: absolute;
left: 0px;
top: 676px;
z-index: 10;
margin: 0px;
padding: 0px;
height: 55px;
visibility: visible;
}
#img7 {
display: block;
height: 55px;
width: 306px;
position: absolute;
z-index: 11;
top: 731px;
margin: 0px;
padding: 0px;
visibility: visible;
left: 0;
}
classes:

<style type="text/css">
<!--
.content {
display: block;
height: 583px;
width: 487px;
z-index: 11;
left: 306px;
top: 202px;
position: absolute;
padding: 0px;
margin: 0px;
background-image: url(images/background/creambkgd_03.gif);
}
#slideshow {
margin: 0px 75px 125px;
padding: 0px;
}
a:link {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
}
a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #CC9966;
}
a:hover {
color: #cc9966;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
}
a:active {
color: #cc9966;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
}
</style>

 

[BillyRayPreachersSon]

I'd ask this in forum215, but as a starting point, you need to ensure you have a full DOCTYPE (which you do not), and that yoru HTML and CSS validates (which it does not):

http://validator.w3.org/check?uri=http://www.theartofpleasure.net/gallery.html

http://www.htmlhelp.com/cgi-bin/val...ry.html&warnings=yes&spider=yes&hidevalid=yes

http://jigsaw.w3.org/css-validator/...y.html&warning=1&profile=css21&usermedium=all

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[swizzy]

Thank you Billy Ray for taking the time to give me a hand on this. I appreciate it!

I will do this!

 

[swizzy]

Hi Billy,

I did all the validation for each page and it came back successful however the gallery page is still all ski-haw
in Opera.

The other pages worked well tho.

Is there anything further that you might suggest?

Thanks again for your help.

Miss Swizzy

 

[BillyRayPreachersSon]

Yes - ask in forum215 - it's a better place to ask HTML / CSS questions.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]