Member Avatar for ada_a

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 :)

<!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
  • 139 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by ada_a
Member Avatar for drjohn

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.

Member Avatar for ada_a

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:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.