Post by meghansarasan on Feb 23, 2013 16:03:04 GMT -8
Hi there.
I'm almost done with a skin but when I checked it in additional browsers, IE did some really crazy things to it. The skin has a fixed element on the right bottom side of the page and the board is centered using margin auto. In IE, it shoves the fixed element way up towards the top of the page, and the foot image is pushed over to the left. I have a doctype and I even used an extra styled div with text-align: center. I don't know how to fix this, none of my usual troubleshooting methods are working.
Here is a link to the board: halcyon
Here are the header codes:
And here are the footer codes:
I appreciate any help I can get. Thanks for your time.
I'm almost done with a skin but when I checked it in additional browsers, IE did some really crazy things to it. The skin has a fixed element on the right bottom side of the page and the board is centered using margin auto. In IE, it shoves the fixed element way up towards the top of the page, and the foot image is pushed over to the left. I have a doctype and I even used an extra styled div with text-align: center. I don't know how to fix this, none of my usual troubleshooting methods are working.
Here is a link to the board: halcyon
Here are the header codes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style>
body {
margin-top: -30px;
}
a:link, a:visited, a:active
{
text-decoration:none;
}
a:hover
{
color:#3E9F7E;
}
.windowbg2
{
background-color:#706132;
}
.welcomebg, .menubg
{
display:none;
}
#container {
width: 850px;
margin: 0 auto;
background-color: transparent;
background-image: url(http://halcyon.b1./uploads/halcyon/snakeskin/zforum_background.png);
background-repeat: repeat-y;
background-position: top center;
padding: 0 15px;
}
#container_top {
background-image: url(http://halcyon.b1./uploads/halcyon/snakeskin/zforum_header.png);
background-repeat: no-repeat;
background-position: top center;
height: 243px;
}
#container_bottom {
background-image: url(http://halcyon.b1./uploads/halcyon/snakeskin/zforum_footer.png);
background-repeat: no-repeat;
background-position: bottom center;
height: 165px;
}
.sidebox {
margin: 0;
width: 202px;
bottom: 150px;
right: 0;
position: fixed;
float: right;
}
.sidetop {
margin: 0;
height: 51px;
width: 202px;
}
.sidefill {
margin: 0;
height: auto;
width: 202px;
background-color: #706132;
background-image: url(http://halcyon.b1./uploads/halcyon/snakeskin/zside_lefter.png),
url(http://halcyon.b1./uploads/halcyon/snakeskin/zside_righter.png);
background-position: left top, right top;
background-repeat: repeat-y;
}
.sidefill p {
margin: 0;
padding: 0 5px;
text-align: center;
}
.sidefoot {
margin: 0;
height: 43px;
width: 202px;
clear: both;
}
a.group1 {
color: mediumseagreen;
}
</style>
<div class="sidebox">
<div class="sidetop">
<img src="http://halcyon.b1./uploads/halcyon/snakeskin/zside_header.png">
</div>
<div class="sidefill" style="text-align: center;">
<p>
<a href="http://halcyonsummer.proboards.com/index.cgi"> Home </a> -
<a href="http://halcyonsummer.proboards.com/index.cgi?action=login"> Login </a> -
<a href="http://halcyonsummer.proboards.com/index.cgi?action=pm"> Inbox </a> -
<a href="http://halcyonsummer.proboards.com/index.cgi?action=logout"> Logout </a>
<br>
<!--REPLACE BELOW WITH CBOX-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Your CBOX Here
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!--END REPLACE WITH CBOX-->
<br>
<a href="#top">Back To Top</a></font>
<br>
<img src="http://img24.imageshack.us/img24/4956/dinkything2.png">
</div>
<div class="sidefoot">
<img src="http://halcyon.b1./uploads/halcyon/snakeskin/zside_footer.png"></div>
</div>
<div style="text-align: center;">
<div id='container_top'>
</div>
<div id='container'>
<div style="width: 760px; margin: 0 auto;">
<a href="http://meghead01.proboards.com/index.cgi?action=admin">
<img src="http://img12.imageshack.us/img12/7939/admind.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi">
<img src="http://img25.imageshack.us/img25/7894/homecjm.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=newestthreads">
<img src="http://img819.imageshack.us/img819/9548/newtopicu.png" border="0" />
</a>
<a href="http://help.proboards.com/">
<img src="http://img717.imageshack.us/img717/8487/helpkl.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=search">
<img src="http://i650./uu227/halcyonsummer/Buttons/search.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=members">
<img src="http://img8.imageshack.us/img8/3433/membersf.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=calendar">
<img src="http://img10.imageshack.us/img10/6224/calendarr.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=viewprofile">
<img src="http://img9.imageshack.us/img9/739/profilemcp.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=login">
<img src="http://img11.imageshack.us/img11/3117/logind.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=logout">
<img src="http://img10.imageshack.us/img10/1388/logout.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=register">
<img src="http://img14.imageshack.us/img14/1751/registerx.png" border="0" />
</a>
<a href="http://meghead01.proboards.com/index.cgi?action=pm">
<img src="http://img23.imageshack.us/img23/2177/inbox.png" border="0" />
</a>
And here are the footer codes:
</div>
</div>
<div id='container_bottom'>
</div>
</div>
I appreciate any help I can get. Thanks for your time.