Log In · Register

 
 
 Closed TopicStart new topic
Display differences in IE/Firefox, Aligning blogbody in Javascript
raptorv22
post Aug 31 2006, 03:25 PM
Post #1


Newbie
*

Group: Member
Posts: 3
Joined: Aug 2006
Member No: 460,023
Hello. I'm fairly new to designing xangas, and my HTML skills are just enough that I can manage to tweak existing layouts to suit my design- I sort of cannabalize them. I've run into one of the nasty differences between IE and Firefox. I'm running Firefox myself, and have managed to get my Xanga into a layout I'm content with. However, viewing it in Internet Exporer has a very unpleasant effect: while the banner and left modules remain in position, the actual blog body gets shifted down below these. Because most people still use IE to browse, I'd like it to be accessible to them. My skills here are insufficient, I've been playing with the code trying to find whats causing this but I'm not entirely sure what I'm looking for, or how to construct a workaround. I'm sure it can be managed, I just don't know how.

So, any help would be appreciated. Here's the code for the layout (as displayed on http://mattcity.com.). I'll just give you all of it, since I don't know what particular piece is giving me the trouble.

QUOTE
<script language=javascript>
shuffle = 1; //Replace 1 with 0 if you want to temporarily turn off this script

//you can keep adding more titles by copying over, as long as you change the number
title=new Array();
title[0] = "A little shy, and sad of eye, but very wise was he.";
title[1] = "Walk down the right back alley in Matt City, and you can find anything.";
title[2] = "There was a boy... A very strange, enchanted boy.";
title[3] = "Where hippoes roam free.";
title[4] = "Sometimes it rains in Matt City.";
title[5] = "Matt City has a gravity of its own.";
title[6] = "Matt City - It doesn't suck.";


if (shuffle == 1) {
var randsg = Math.floor(Math.random()*title.length);
document.title = title[randsg];
}
</script>

<style type="text/css">
.mainleft, table.navigation, table.footer, hr{
display:none;
}
body{
background-image:url(http://freshness.cbstaff.com/Images/cb%20skins/bravery-bg.png);
}
div.banner{
margin-left:-8px!important;
margin-left:-10px;
margin-top:-11px!important;
margin-top:-20px;
}
div.info{
width:300px;
height:430px;
margin-top:0px!important;
margin-top:-40px;
}
div.info, table, div.blogspace, P, B, I, TD, TH, center {
color:#ffffff;
font-family: Verdana;
font-size: 10pt;
}
td.header{
background-image:url(http://freshness.cbstaff.com/Images/cb%20skins/bravery-date-bg.gif);
border-bottom: none;
font-weight:bold;
font-family:Courier New;
font-size:16pt;
}
A:link, A:visited, A:active{
color:#Fff;
text-decoration:underline ;
font-size:10pt;
font-family:Verdana;
text-decoration:underline;
}
a:hover{
text-decoration: underline;
border-bottom: none;
color:#ff9900;
}
div.blogspace{
margin-left:345px;
margin-top:-436px!important;
margin-top:-510px;
width:450px;
}
.caption, .blogheader{
background-image:url(http://freshness.cbstaff.com/Images/cb%20skins/bravery-date-bg.gif);
border-bottom: none;
font-weight:bold;
color:#ffffff;
font-family: Courier New;
font-size: 10pt;
}
h4{
font-family:courier new;
font-size:16pt;
color:#fffff;
</style>

<div align="left">
<body>
<div align="left" class="banner"><a href="http://mattcity.com"><img src="http://img.photobucket.com/albums/v669/raptorv22/TheEnd.jpg" border="0" usemap="#Map"> </a>


</div>

<div class="info">
<table width="335" border="0">
<tr>
<td class="header">Concerning Matt</td>
</tr>
<tr>
<td><img src="http://myspace-240.vo.llnwd.net/00753/04/25/753785240_m.jpg"><p>This is filler for now. Still designing teh site, yo.<br><br></td>
</tr>
<tr>
<td class="header">Blog Stuff</td>
</tr>
<tr>
<td><a href=http://xanga.com alt="Xanga">Xanga</a><br><a href=http://www.xanga.com/private>Private</a><br><a href=http://xanga.com/CLAF>Edit</a><br><a href=http://www.xanga.com/Private/SubscribeTo.aspx?user=raptorv22 target=_blank>Subscribe</a><br><p>

</tr>
<tr>
<td class="header">Espionage</td>
</tr>
<td><br><font color="#000000"><a href="http://mattanderson.textamerica.com"><img src="http://imageserver.textamerica.com/user.images.x/47/IMG_468747/90x90/_0521%5CTZ200521172528437.jpg?90.90.468747.2"></a>
<p></td>
</tr>
<tr>
<td class="header">Featured Attractions</td>
</tr>
<td><br><a href="http://www.amazon.com/gp/product/B000B5XZYW/sr=8-2/qid=1148231993/ref=pd_bbs_2/104-9782199-0349561?%5Fencoding=UTF8"><img src="http://images.amazon.com/images/P/B000B5XZYW.01._SCTHUMBZZZ_.jpg"><br> FEATURED ALBUM: <br>Prepare To Be Wrong</a><br>An EP from one of my favorite bands, Straylight Run. Definately check out the song "Hands in The Sky (Big Shot)."
<p><p>
<a href="http://www.amazon.com/gp/product/081297722X/sr=8-2/qid=1148256545/ref=pd_bbs_2/104-9782199-0349561?%5Fencoding=UTF8"><img src="http://images.amazon.com/images/P/081297722X.01._SCTHUMBZZZ_V57219238_.jpg"><br> FEATURED BOOK: <br>Under the Black Flag</a><br>Jason got me this one. It's a book about pirates- and a well written one at that. YARRRRRR!!

<p>
<a href="http://www.amazon.com/gp/product/B000077VR3/qid=1148256360/sr=8-4/ref=pd_bbs_4/104-9782199-0349561?%5Fencoding=UTF8&v=glance&n=130"><img src="http://images.amazon.com/images/P/B000077VR3.01._SCTHUMBZZZ_.jpg"><br> FEATURED MOVIE: <br>Moulin Rouge</a><br>Beauty, Freedom, Truth, and Love. Everyone needs to see this once in their lives. It's brilliantly directed and acted. The hopeless romantic side of me loves it, despite it bringing down my "manliness."
<p></td>
</tr>
<tr>
<td class="header">You Can Click These</td>
</tr>
<tr>
<td><br>
<a href="http://myspace.com/raptorv22"><img src="http://img.photobucket.com/albums/v669/raptorv22/Untitled-1copy.gif"></a><p>
<a href="http://penny-arcade.com"><img src="http://www.penny-arcade.com/docs/button_pa.gif"></a><p>
<a href="http://digg.com"><img src="http://img.photobucket.com/albums/v669/raptorv22/digg.gif"></a><P>
<a href="http://jinx.com"><img src="http://www.jinx.com/images/banners/banner.jinx.1.gif"></a><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<img src="http://img.photobucket.com/albums/v669/raptorv22/firefox.png"><p><a href="http://firefox.com">Best viewed in Firefox.</a><br><br></td>


</tr>
</table>
</div>

<div class="blogspace">
 
*digital.fragrance*
post Aug 31 2006, 03:33 PM
Post #2





Guest
There are ways to make them display almost identically, with maybe a pixel or two difference. It has to do with the order and type of code.

First you put your <style>sheet information, then you place your navigation info. It looks like you used tables - might I suggest <div> layers? I see you have them, but you can position them using margin values. That way the code is more compatible.

Last goes your blog div layer - like you have it, plus the margin attributes.

Example, check out the coding here: http://www.createblog.com/layouts/download.php?id=14221
 
raptorv22
post Aug 31 2006, 06:03 PM
Post #3


Newbie
*

Group: Member
Posts: 3
Joined: Aug 2006
Member No: 460,023
Thanks, I'll try that. Hopefully I'll be able to figure it out. I'll give it a good shot and if not I might need some more help thumbsup.gif

I'm not familiar with DIVs enough to do this, unfortunately. Could someone help me out, show me how a bit of the coding would look like with the margins instead of tables?

(posts merged)
 
*digital.fragrance*
post Aug 31 2006, 09:21 PM
Post #4





Guest
Sure -
CODE
<div style="overflow: none; width: ##px;
margin-top: ##px; margin-left: ##px; background-color: #B1D4F4;  
">
CONTENT HERE
</div>
 
raptorv22
post Aug 31 2006, 11:22 PM
Post #5


Newbie
*

Group: Member
Posts: 3
Joined: Aug 2006
Member No: 460,023
Managed to fix it. Thank you :)
 
« Next Oldest · Xanga Resolved Topics · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic