FF/IE Compatability Issues Options

[honestly613]

I have a DIV layout && there are some sections that just won't appear correctly in IE.

I don't know if there is anything I can do on my part, or if it something that is completely out of my hands.

I defined a new font span, I suppose you would call it, in my style sheet && the font won't display correctly in IE.

Screenshots:

IE



FF



You can see in FF, the font is displaying correctly. Also, the comment box && contact sections are displaying normally, whereas in IE they're distorted.

If anyone can help, it really would be greatly appreciated.

Please thumb your images.

This post has been edited by WHIMSICAL 0NE: Jan 21 2007, 06:10 PM

[adafsdfasdfadasd...]

It's possible... I can't really tell you what to change without being able to see what coding you used :/ a link to your profile or your css/html would be nice...

[clarity]

Can you post your code & provide a link to your myspace?

[honestly613]

Oh yeah

probably should have done that.

myspace.com/honestly613

my stlye sheet is kind of a mess, but it makes sense to me, so sorry in advance if it's kind of all over the place.

CODE

<style type="text/css">table, td {background-color:transparent; border:none; border-width:0;}
body{background-image:url('http://i45.photobucket.com/albums/f98/honestly613/glass.jpg');
background-attachment: fixed;
background-position: bottom left; background-repeat: no-repeat; background-color:323232; }
table table table {border: 0px solid; border-color:000000; padding:0; background-color:96A6C7;}
table tbody td table tbody tr td.text table{background-color:96A6C7;} table table{border:0px;}
table table table table{border:0px;}
font, td, a, body, table, body, td, li, p, div, textarea, li, h1, h2, p, br
{font-family: century gothic; color: white; line-height: 10px; font-size:9px; text-transform:lowercase; letter-spacing:0px;}
textarea, input {font-family:times; font-size: 11pt; color: white; text-transform:lowercase; letter-spacing:0px; background-color:96A6C7;border:1px solid black;cursor:crosshair;}
.btext {font-family: century gothic; font-size: 9px; color: 000000; line-height: 9px; letter-spacing: px; font-weight: normal; text-transform: lowercase; display:none;}
.blacktext10 {font-family: century gothic; font-size: 9px;color: 000000; line-height: 9px; letter-spacing: px; font-weight: normal; text-transform: lowercase; display:none;}
.blacktext12 {font-family: century gothic; font-size: 9px; color: 000000; line-height: 9px; letter-spacing: px; font-weight: normal; text-transform: lowercase; visibility:hidden}
.lightbluetext8 {display:none;}
.nametext {font-family: times; color: white; line-height: 10px; font-size:14pt; text-transform:lowercase; text-align:center; letter-spacing:-1px;}
.orangetext15 {display:none;}
.redbtext, .redtext {display:none;}
.whitetext12 {font-family: century gothic; font-size: 9px; color: black; line-height: 9px; letter-spacing: 0px; font-weight: normal; text-transform: lowercase;}
.text {font-family: century gothic; font-size: 9px; color: black; line-height: 9px; font-weight: normal;text-transform:lowercase;letter-spacing:0px;}
img {filter: gray; border: 1;}
a:link, a.man:link, a.text:link, a:visited, a.man:visited, a.text:visited, a:active, a.redlink:active, a.redlink:visited, a.redlink:link, a.navbar:link, a.navbar:visited, a.navbar:active {font-family:century gothic; font-size: 9px; color: white; font-weight: normal; text-decoration: none; letter-spacing: 1px; text-transform: lowercase; line-height: 10px; background-color: transparent;}
a:hover, a.man:hover, a.text:hover, a.redlink:hover, a.navbar:hover {font-family: times; font-size: 20px; color:white; font-weight: normal; text-decoration: none; letter-spacing: -2px; text-transform: lowercase; line-height: 15px; background-color: FEC192;}
b {color:FEC192;}u {color:FEC192;text-decoration:underline; border-bottom:solid 3px B1B1B1;font-size: 9pt;font-family:georgia fonts;text-transform:none;}
s {color:FEC192;text-decoration:strikeout;}
i {color:FEC192;font-family:century gothic;}
b, strong {font-weight:bold;font-size:8pt;line-height:10px;text-transform:lowercase;color:FEC192;letter-spacing:0px;font-family:century gothic;} img { filter:none; border:0px;} a:link img {filter:none); border:0px solid black;}
f {color:323232; font-family:times;text-decoration: none; font-size: 18pt;font-weight:normal;border: none;letter-spacing:-3.0; line-height:13px;background-color: D3E3ED; text-transform: lowercase;display: inline; position: left; top: 9px; left: 0px; display: block; text-align:left;}
h {color:ffffff; font-family:times;text-decoration: none; font-size: 22pt;font-weight:normal;border: none;letter-spacing:-3.0; line-height:13px;background-color: FEC192; text-transform: lowercase;display: inline; position: left; top: 9px; left: 0px; display: block; text-align:center;}
a:hover img { filter:grey; border:0px solid black;} body {cursor:crosshair;} a:hover {cursor: crosshair;} TD TD {text-align: center;} TD TD TD {text-align: center;} TD TD TD TD {border-top: 0px solid; width:5%; text-align:center;} TD TD TD TD TD {border-top: 0px solid black; text-align:center;} TD TD TD TD TD TD {border: 0px solid;} TABLE, TD {padding: 0px; text-transform: lowercase; width:350px;} TABLE TABLE {padding: 0px; text-transform: lowercase;} TABLE TABLE TABLE {padding: 1px; text-transform: lowercase;height: .01%; width: 100%;} TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;} TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;} TABLE TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;} table td div div font {visibility:hidden;display:none;} table table table table {border: 0px; text-align: justify; padding: 0px;} table table table table table {border: 0px; text-align: justify; padding: 0px;} table table table table table table {border: 0px; text-align: justify; padding: 0px;} table table td.text table td.text table table tbody td table, span.btext {display: none !important} </style> <style type="text/css"> { Alignment by ECD & C0 } body{ padding-left: 400px; }
</style>

"f" & "h" would be the new font span classes I defined.

&& also

CODE

<style>
<table, table td {background-color:656668;}
table table table {visibility:hidden;}
table table table div table {visibility:visible;}
.comt table table table {visibility:visible;}
table div div, table tr td div font a {visibility:hidden;}
table div .content {visibility:visible}

.x {gereral}
body {background-color:656668;background-image:url(''); background-attachment: fixed; background-position:bottom left; background-repeat:no-repeat;}



.x {divs}
.info, .commentbox, .contact, .musicplayer, .blank1, .welcome, .music, .tv, .books, .blank2, .comt {background-color:656668; position:absolute; left:50%; top:0%; visibility:visible; border-width:1px; border-style:inset; border-color:000000; overflow:auto;}
.heading {width:100%; background-color:93BCDC; text-align:center; border-bottom-color:93BCDC; border-bottom-width:1px; border-bottom-style:solid; color:FFFFFF !important; font-family: times; color: white; line-height: 20px; font-size:14pt; text-transform:lowercase; text-align:center; letter-spacing:-1px;
}
.content {padding:3px;}
.info {width:200px; height:300px;
margin-left:-410px; margin-top:164px;}
.commentbox {width:200px; height:190px;
margin-left:-410px;margin-top:410px;}
.contact {width:200px; height:40px;
margin-left:-410px; margin-top:370px;}
.musicplayer {width:200px; height:110px;
margin-left:-410px; margin-top:520px;}
.blank1 {width:200px; height:150px;
margin-left:-410px; margin-top:630px;}
.welcome {width:130px; height:616px;
margin-left:452px; margin-top:164px;}
.music {width:336px; height:124px;
margin-left:-208px; margin-top:164px;}
.tv {width:320px; height:616px;
margin-left:130px; margin-top:164px;}
.books {width:336px; height:305px;
margin-left:-208px; margin-top:475px;}
.blank2 {width:336px; height:183px;
margin-left:-208px; margin-top:290px;}
.comt {width:860px;
margin-left:-310px; margin-top:805px;}

.x {comment box}
.commentbox {overflow:hidden;}
.commentbox input {border-color:000000; border-width:1px; border-style:solid; width:32px; height:21px; background-color:FFFFFF;}
.commentbox table textarea {position:relative; top:-9px; border-color:000000; border-width:1px; border-style:solid;}

.x {music player}
table table embed {position:absolute; left:50%; top:0%; margin-left:-403px; margin-top:538px; width:190px;}

.x {contacting}
.contact a:link, .contact a:visited {width:95px; background-color:93BCDC; border-color:93BCDC; border-width:1px; border-style:solid; text-align:center; letter-spacing:0px;}
.contact a:active, .contact a:hover {background-color:93BCDC; border-color:93BCDC; color:ffffff !important; letter-spacing:0px;}

.x {friends and comments}
.comt table, .comt table td {border-width:0px;}
.comt a img {width:90px;}

.x {linked images}
a img {border-width:2px; border-color:"Blue";}
</style>

I don't know how much of that you did or didn't need. As you can tell, I'm fairly amateurish.

Thanks again

[clarity]

Honestly, I don't know whats wrong here. It should work, although just to make sure can I see your codes for your div boxes?

[honestly613]

this is the comment & contact boxes...which are oddly distorted in IE

CODE

<div class=commentbox>
<span class=heading>[[comment]]</span>
<div class=content>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="52278333" type="hidden"> <textarea name="f_comments" class="Skem9box">you got what it takes to set me free. oh you could mean everything to me <33 </textarea><br /><input type="submit" value="&hearts;" class="Skem9sub"></form>

<style type="text/css">
textarea.Skem9box {width:180px; height:60px;color:ffffff;font-size:15pt;font-family:Times New Roman;background-color:93BCDC;}
input.Skem9sub {width:180px;color:ffffff;font-size:15pt;font-family:Times New Roman;background-color:93BCDC;}
</style>

</div>
</div>





<div class=contact>
<span class=heading>[[Contact.Me]]</span>
<div class=content>
<center>
<a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=52278333" style="margin-bottom:2px;">message</a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=52278333" style="margin-bottom:2px;">add</a>
<a href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=52278333" style="width:192">block</a>
<a href="http://collect.myspace.com/index.cfm?fuseaction=RateImage.UserRating&UserID=52278333" style="margin-bottom:2px;">rate</a>
</center>
</div>
</div>

&& this is the custom details section...

CODE

<div class=books>
<span class=heading>[[Me]]</span>
<div class=content>
<h>what do you want to know?</h><br>
<f>status: single  && loving it</f><br>
<f>here for: anything :]</f><br>
<f>orientation: gay [[&&proud of it]]</f><br>
<f>hometown: chi-town </f><br>
<f>ethnicity: mexican-american</f><br>
<f>zodiac sign: gemini [[13 June 1989]]</f><br>
<f>religion: catholic </f><br>
<f>smoker: nope </f><br>
<f>drinker: "no"</f><br>
<f>children: maybe</f><br>
<f>education: high school </f><br>

[clarity]

I know this may sound laboring, but perhaps inputing the background color code tags individually on each text you want it with?

[adafsdfasdfadasd...]

Did you try using span instead of making a new element? Right now you're trying to define the styles of an element (tag) which i don't think IE will recognize. [I played with what css you had in with div on my test page here]

Example:

CODE

.h {
color: white;
font-family: times;
text-decoration: none;
font-size: 22pt;
font-weight:normal;
border: none;
letter-spacing:-3.0;
line-height:13px;
background-color: FEC192;
text-transform: lowercase;
display: inline;
position: left;
top: 9px;
left: 0px;
display: block;
text-align:center;
}

<div class="books">
<span class="heading">[[Me]]</span>
<div class="content">
<span class="h">what do you want to know?</span><br/>
<span class="f">status: single  && loving it<br/>
here for: anything :]<br/>
orientation: gay [[&&proud of it]]<br/>
hometown: chi-town<br/>
ethnicity: mexican-american<br/>
zodiac sign: gemini [[13 June 1989]]<br/>
religion: catholic <br/>
smoker: nope <br/>
drinker: "no"<br/>
children: maybe<br/>
education: high school <br/></span>

This post has been edited by ximonolithix: Jan 22 2007, 11:31 AM

[honestly613]

Thank you so much ximonolithix! what you said worked.

Thanks Again

[clarity]

I'm glad you figured it out, and I'm sorry I couldn't help much.

Topic Closed.

If you need this reopened, please PM me or any other MySpace staff.