I'm having a problem similliar to RobertP the other day or so, I read that thread and changed from laying out in tables to div.
That helped a LOT, for sure. I'm still having an issue where a page will look right in 1 browser, then be jacked up in the others.... I fix it for a different browser, and it's jacked in the first. Good times.
I've validated the code, had a handfull of issues here and there, worked those kinks out, and still ... jacked.
That site is ready to go, pretty much, and starts at san.lunariffic.com/studi188/index.html (not the offical addy, of course)
Here's the CSS to accompany the base HTML
CODE
div.share{
float : left;
margin-top : 15%;
clear : right;
}
div.topstrip {
width : 100%;
background-color : #5ce62e;
margin : 0;
}
div.left {
float : left;
width : 167px;
margin : 0;
/* padding : 1em; */
margin-top : 105px;
}
p.tblinfo {
text-align : center;
color : black;
}
span.upleft {
text-align : left;
vertical-align : top;
}
body.bgc {
background-color : #e6b2ff;
}
.img1 {
position : absolute;
left : 27%;
top : 1%;
width : 450px;
height : 380px;
}
.img2 {
position : absolute;
left : 1%;
top : 110%;
}
.img3 {
position : absolute;
left : 82%;
top : 102%;
}
div.lefto {
float : left;
width : 167px;
margin : 0;
padding : 1em;
margin-top : 80px;
}
div.content {
margin-top : 120px;
float : left;
width : 800px;
}
div.contento {
margin-top : 20px;
float : left;
width : 700px;
}
div.head {
margin : 0;
padding : 1em;
margin-top : 50px;
}
div.cal {
margin-top : 300px;
}
.hiC {
text-align : center;
}
.hiclear {
text-align : center;
clear : both;
}
span.bull{
font-size:35px;
color:#5ce62e;
}
th.s{
width : 10%;
border:2px solid #5ce62e;
}
th.l{
width : 16%;
border:2px solid #5ce62e;
}
float : left;
margin-top : 15%;
clear : right;
}
div.topstrip {
width : 100%;
background-color : #5ce62e;
margin : 0;
}
div.left {
float : left;
width : 167px;
margin : 0;
/* padding : 1em; */
margin-top : 105px;
}
p.tblinfo {
text-align : center;
color : black;
}
span.upleft {
text-align : left;
vertical-align : top;
}
body.bgc {
background-color : #e6b2ff;
}
.img1 {
position : absolute;
left : 27%;
top : 1%;
width : 450px;
height : 380px;
}
.img2 {
position : absolute;
left : 1%;
top : 110%;
}
.img3 {
position : absolute;
left : 82%;
top : 102%;
}
div.lefto {
float : left;
width : 167px;
margin : 0;
padding : 1em;
margin-top : 80px;
}
div.content {
margin-top : 120px;
float : left;
width : 800px;
}
div.contento {
margin-top : 20px;
float : left;
width : 700px;
}
div.head {
margin : 0;
padding : 1em;
margin-top : 50px;
}
div.cal {
margin-top : 300px;
}
.hiC {
text-align : center;
}
.hiclear {
text-align : center;
clear : both;
}
span.bull{
font-size:35px;
color:#5ce62e;
}
th.s{
width : 10%;
border:2px solid #5ce62e;
}
th.l{
width : 16%;
border:2px solid #5ce62e;
}
I hope you guys don't find my code too annoying, I know the CSS is disjointed a bit, as I've been trying to conquer this issue.
I'm wondering if maybe I should use a JS to reference different pages by browser type.... most of the rest of the site works right, the home page and art gallery seem to be my biggest headaches. Any comments on the JS for referencing idea would be appreciated.
Thanks for lookin.
Answers