Log In · Register

 
 
Closed TopicStart new topic
Mis-Aligned in IE., My site works fine in FF, but in IE the background is mis-aligned!
randomchicka1994
post Jul 12 2008, 08:46 PM
Post #1


Newbie
*

Group: Member
Posts: 6
Joined: Jun 2007
Member No: 531,030



Okay, so I'm trying to re-do my site to celebrate Daniel Radcliffe's 19th birthday coming up.

When I preview the layout in Firefox, it looks perfectly fine:


However, when I preview it in Internet Explorer, the background is mis-aligned:


This is the code I'm using:
CODE
<style>
body {background-color: a6a5ae;
background-image:url("Future%20Lyts/danbg.png");
background-position: center;
background-repeat: repeat-y;
font-family: Trebuchet MS, Arial, sans-serif; font-size: 8pt; color: black;}
a:link
{font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color:fc066e;
text-transform: none; text-decoration: none;}
a:visited
{font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color:fc066e;

text-transform: none; text-decoration: none;}
a:hover
{font-family: Century Gothic, Arial, sans-serif; font-size: 8pt; color:black;

text-transform:
uppercase; text-decoration: none; }
a.nav, a.nav:active, a.nav:link, a.nav:visited {font-family: Trebuchet MS, Helvetica,
sans-serif; font-size: 9px; color: 7a06fc; text-transform: none; text-decoration:

none; display:
block !important; background-color:white; line-height: 12px; text-align: left;
margin:0px; padding: 0px;}
a.nav:hover {text-align: right !important; vertical-align: bottom; font-family: Arial,

Helvitica, sans-serif; font-size:9px; background-color:8ef90f; color:fc066e; display:

block; margin:0px; padding:0px; text-decoraton: none; text-transform:uppercase;

line-height: 12px; font-weight: bold; border-left: 5px solid; border-color:06f3fc;}
#rwr {position: relative; width:700px; top:0px; left: -350px; margin-left: 50%;}
.tp {position:absolute; width:700px; left:0px; top:0px; height: 775px;

background-color:transparent; background-image:url("Future%20Lyts/dan.png");}
.cnt {position: absolute; padding: 0px; width: 450px; left: 245px; top: 500px;

background-color: none;
background-image:url("Future%20lyts/dancntbg.png");}
.cnthdr {display: block; background-color:transparent; font-family: Trebuchet MS,

Arial, Sans-serif; letter-spacing: -1pt; color: fc066e; line-height: 30px;

text-align: left; font-size: 28pt; vertical-align: center; border-bottom: 2px solid;

border-color: 7a06fc; text-transform: none;}
.lnk {position: absolute; left: 9px; width: 200px;
top: 500px; padding: 0px; background-color: none;

background-image:url("future%20lyts/dancntbg.png");}
.navhdr {display: block; background-color: transparent; font-family: Trebuchet

MS,Arial, sans-serif; font-size: 12pt; color: 7a06fc; line-height: 15px; text-align:

right; vertical-align: center; text-transform: lowercase;

background-image:url("images/rblnkhdr.png"); background-position: top right;

background-repeat; no-repeat; border-bottom: 2px solid; border-color: 8ef90f;}
textarea {width: 150px; height: 15px; font-family: Small Fonts; font-size: 6pt;

background-color:white; color:7a06fc; border: 1px solid fc066e;}
.aut {display: block; font-family: Arial, Helvetica, sans-serif; font-size: 8pt;

color:fc066e;
text-transform: none; text-decoration: none; background-color: white; border-bottom:

2px dashed; border-color: 06f3fc; text-align: right;}
.cmnt {float: right; font-family: Arial, sans-serif; font-color:fc066e; font-size:

8pt;}
.copy {position: absolute; left: 2px; width: 700px; height: 50px;

background-image:url("future%20lyts/dancpyright.png");}
</style>[/code]

I had the same problem with a previous layout, only this time it's the image that was mis-aligned in IE.

Firefox:


Internet Explorer:


And this was the code I used:
[code]<style>
body {background-color: black;
background-image:url("images/sitejonasbg.png");
background-position: center;
background-repeat: repeat-y;
font-family: Trebuchet Ms, sans-serif; font-size: 10pt; letter-spacing: -.5pt; color: white;}
a:link
{font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 9pt; color:cc00ff;
text-transform: none; text-decoration: none;}
a:visited
{font-family: Trebuchet MS, Helvetica, sans-serif; font-size: 9pt; color:cc00ff; text-transform: none; text-decoration: none;}
a:hover
{font-family: Times New Roman, Georgia, serif; font-size: 9pt; color:0deeff; text-transform:
uppercase; text-decoration: none; }
a.nav, a.nav:active, a.nav:link, a.nav:visited {font-family: Trebuchet MS, Helvetica,
sans-serif; font-size: 9px; color: 0deeff; text-transform: none; text-decoration: none; display:
block !important; background-color:333333; line-height: 12px; text-align: left;
margin:0px; padding: 0px;}
a.nav:hover {text-align: right !important; vertical-align: bottom; font-family: Times New Roman,
Georgia, serif; font-size:9px; background-color:333333; color:cc00ff; display: block; margin:0px; padding:0px; text-decoraton: none; text-transform:uppercase; line-height: 12px; font-weight: bold;}
#bdy {position: relative; margin: auto; width: 750px;}
.tp {position: absolute; width:750px; left:2px; margin-top: -7; height:500px; background-color: transparent; background-image:url("images/sitejonasheader copy.png");}
.cnt {position: absolute; padding: 0px; width: 546px; left: 4px; top: 400px; background-color: none; background-image:url("images/cntbg.png");}
.cnthdr {display: block; background-color:363636; font-family: times new roman; letter-spacing: -1pt; color: black; line-height: 35px; text-align: right; font-size: 32pt; vertical-align: bottom; background-image:url("images/contentheader.png"); background-position: top-right; background-repeat: no-repeat;}
.lnk {position: absolute; left: 560px; width: 188px;
top: 400px; height: 100%; padding: 0px; background-color: none; background-image:url("images/cntbg.png");}
.navhdr {display: block; background-color: white; font-family: Trebuchet Ms, sans-serif; font-size: 18pt; color: black; line-height: 20px; vertical-align: center; background-image:url("images/navhdr.png"); background-position: top right; background-repeat; no-repeat;}
textarea {width: 150px; height: 70px; font-family: courier; font-size: 8pt; background-color:black; color:cc00ff; border: 1px solid 0deeff;}</style>


This is INCREDIBLY FRUSTRATING! I would love some help!
Reason for edit: Thumbed; codebox tags edited. - Cristy
 
heyo-captain-jac...
post Jul 12 2008, 08:49 PM
Post #2


/人◕‿‿◕人\
*******

Group: Official Member
Posts: 8,283
Joined: Dec 2007
Member No: 602,927



Copy/paste the position attributes, and add an underscore before them. Adjust those to your liking.
 
randomchicka1994
post Jul 12 2008, 08:53 PM
Post #3


Newbie
*

Group: Member
Posts: 6
Joined: Jun 2007
Member No: 531,030



Ohmygoodness... That is so simple but it WORKED!!!
Thank you so much!(:
 
tokyo-rose
post Jul 13 2008, 11:20 AM
Post #4


Senior Member
********

Group: Head Staff
Posts: 18,173
Joined: Mar 2005
Member No: 108,478



Closed and moved to MySpace Resolved Topics.
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: