0

Hey there community,

I recently designed a new blog layout and in the designing process, the html, css and javascript worked perfectly on all browsers.

However, when I uploaded it onto my blog host (blogger), the layout became messed up and my div entitled main 1 was pushed to the right on IE. It still works on both chrome and Firefox though.

The DOCTYPE I used worked perfectly prior to my uploading onto blogger, which makes me wonder if it's a problem with the host interpreting my code?

Can any body check it out? the link his http://ada-nikki.blogspot.com.

and the html file in .txt is attached under

Thanks in advance and hoping for a reply as soon as humanly possible,

Ada :)

Attachments
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
<html>
<head>



<title>
Ada no Nikki - Dreamer, Scholar, what's the difference?
</title>


<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		header_03_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_03-over.png");
		header_06_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_06-over.png");
		header_10_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png");
		header_11_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png");
		header_14_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_14-over.png");
		header_15_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_15-over.png");
		preloadFlag = true;
	}
}

// -->

</script>

<script type="text/javascript"> 
function changeNavigation(id) 
{document.getElementById('profile').innerHTML=document.getElementById(id).innerHTML}
 
</script> 


<style type="text/css">
#navbar-iframe
{ display: none !important; }

body { 
background: url("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/bg3.jpg") repeat-x fixed center top;
margin: 0px; 
padding: 0px; 
padding-top:0px;
text-align: center;
font-family: tahoma;
font-size: 8pt;
color: #CFCFCF;
min-width:1192px;
}

 A:link, A:visited, A:active
        { text-decoration: none; font-weight: none; color: #FFC7BF; cursor: crosshair; font-family: georgia; filter: none;}
        A:hover
        { color: #EBD6B6;}
                           

#center{
width: 1192px; 
text-align: center;
top:0px;
border: 0px; 
padding: 0px;  
margin: 0 auto; 
} 

div#main1
{
margin-left:140px;
position:absolute;
top: 0px;;
width: 898px;
padding: 5px;
padding-top:340px;
background: url("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/mainbg-1.jpg") repeat-x fixed center bottom;
z-index:-1;
}


.date {
        font-family: arial;
        color: #ED7777; 
        font-size: 9pt;
        font-weight: none;
        text-align: right;
        line-height: 13px;
        background:transparent;
        text-transform: lowercase;
        letter-spacing: 1px;
        
        }
                                
.title {
        font-family: georgia;
        color: #FDC4BB; 
        font-size: 14pt;
        font-weight: none;
        line-height: 12px;
        padding: 5px;
        
        text-align: right;
        border-bottom: 2px dashed #81320F;
        letter-spacing: -1px;
        background-color: transparent;

        }


.posts {
        font-family: tahoma;
        color: #FFFFFF; 
        font-size: 10pt;
	line-height:14px;
        padding:10px;
        font-weight: none;
        text-transform: none;
        letter-spacing: 0px;
        }



a.previous
	{background:#BA6458;letter-spacing:1px;line-height:8pt;display:block;color:723E37;text-align:center;font-size:10;}
a.previous:hover
	{background:#723E37;letter-spacing:2px;line-height:8pt;display:block;color:BA6458;text-align:center;font-size:10;}



</style>


</head>


<body onload="preloadImages();">
<div id="center">
<div style="positon:absolute;left:0;top:0;z-index:2;">

<table id="Table_01" width="1193" height="675" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_01.png" width="1192" height="301" alt=""></td>
		<td>
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/spacer.gif" width="1" height="301" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_02.png" width="436" height="64" alt=""></td>
		<td rowspan="2">
			<a
				onmouseover="changeImages('header_03', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_03-over.png'); return true;"
				onmouseout="changeImages('header_03', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_03.png'); return true;"
				onmousedown="changeImages('header_03', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_03-over.png'); return true;"
				onmouseup="changeImages('header_03', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_03-over.png'); return true;">
				<img name="header_03" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_03.png" width="123" height="118" 

border="0" alt="" onclick="changeNavigation('profile1')"></a></td>
		<td rowspan="8">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_04.png" width="633" height="373" alt=""></td>
		<td>
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/spacer.gif" width="1" height="64" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_05.png" width="338" height="87" alt=""></td>
		<td colspan="2" rowspan="3">
			<a
				onmouseover="changeImages('header_06', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_06-over.png'); return true;"
				onmouseout="changeImages('header_06', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_06.png'); return true;"
				onmousedown="changeImages('header_06', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_06-over.png'); return true;"
				onmouseup="changeImages('header_06', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_06-over.png'); return true;">
				<img name="header_06" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_06.png" width="97" height="122" border="0" 

alt="" onclick="changeNavigation('archive')"></a></td>
		<td rowspan="7">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_07.png" width="1" height="309" alt=""></td>
		<td>
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/spacer.gif" width="1" height="54" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_08.png" width="123" height="255" alt=""></td>
		<td>
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/spacer.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_09.png" width="241" height="79" alt=""></td>
		<td colspan="2" rowspan="3">
			<a
				onmouseover="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png'); return true;"
				onmouseout="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11.png'); return true;"
				onmousedown="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png'); return true;"
				onmouseup="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png'); return true;">
				<img name="header_10" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10.png" width="97" height="105" border="0" 

alt="" onclick="changeNavigation('links')"></a></td>
		<td>
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/spacer.gif" width="1" height="35" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<a 
				onmouseover="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png'); return true;"
				onmouseout="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11.png'); return true;"
				onmousedown="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png'); return true;"
				onmouseup="changeImages('header_10', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_10-over.png', 'header_11', 

'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11-over.png'); return true;">
				<img name="header_11" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_11.png" width="8" height="70" border="0" 

alt="" onclick="changeNavigation('links')"></a></td>
		<td rowspan="4">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_12.png" width="89" height="187" alt=""></td>
		<td>
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/spacer.gif" width="1" height="44" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_13.png" width="151" height="143" alt=""></td>
		<td rowspan="2">
			<a 
				onmouseover="changeImages('header_14', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/header_14-over.png', 'header_15', 

'http://i85.photobucket.com/albums/k
2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by ada_a
0

check you have a doctype and are not forcing IE into quirks mode.
Check what is actually being presented by the web site via View source. if that's different to what your original template had, not sure what to suggest.

0

the doctype worked fine before i uploaded it onto blogspot. after checking the source, it adopted the doctype i had typed up in the code, so i really don't know what went wrong. thanks for the suggestion though

anyone else? D:

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.