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 XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.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) {
		button_01_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button_01-over.png");
		button1_01_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button1_01-over.png");
		button2_01_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button2_01-over.png");
		button3_01_over = newImage("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button3_01-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/bg1.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:fixed;
top: 0px;
width: 898px;
padding: 340px 5px 5px 5px;
background: url("http://i85.photobucket.com/albums/k70/ada_akutenshi/images/mainbg-1.jpg") repeat-x fixed center bottom;
z-index:-1;
height:100%
}

div#main2
{
margin-left:140px;
position:absolute;
top: 0px;
width: 898px;
padding: 340px 5px 5px 5px;
z-index:1;
}

div#button
{
margin-left:430px;
position:absolute;
top: 0px;
padding: 305px 5px 5px 5px;
z-index:2;
text-align:left;
}

div#button1
{
margin-left:320px;
position:absolute;
top: 0px;
padding: 375px 5px 5px 5px;
z-index:3;
text-align:left;
}

div#button2
{
margin-left:235px;
position:absolute;
top: 0px;
padding: 455px 5px 5px 5px;
z-index:4;
text-align:left;
}

div#button3
{
margin-left:140px;
position:absolute;
top: 0px;
padding: 540px 5px 5px 5px;
z-index:5;
text-align:left;
}


.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:0px;top:0px;z-index:0;">
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/headtest.png">
</div>


<div id="button">
<a onmouseover="changeImages('button_01', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button_01-over.png'); return true;"	onmouseout="changeImages('button_01', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button_01.png'); return true;"	

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

true;"> 
	<img name="button_01" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button_01.png" width="122" height="119" border="0" alt="" onclick="changeNavigation('profile1')"></a> 



</a>
</div>

<div id="button1">

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

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

true;"> 
	<img name="button1_01" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button1_01.png" width="103" height="104" border="0" alt="" onclick="changeNavigation('archive1')"></a> 

</div>

<div id="button2">

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

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

true;"> 
	<img name="button2_01" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button2_01.png" width="103" height="104" border="0" alt="" onclick="changeNavigation('links')"></a> 

</div>

<div id="button3">
<a onmouseover="changeImages('button3_01', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button3_01-over.png'); return true;"	onmouseout="changeImages('button3_01', 'http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button3_01.png'); return true;"	

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

true;"> 
	<img name="button3_01" src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/button3_01.png" width="103" height="104" border="0" alt="" onclick="changeNavigation('tags')"></a> 
</div>


<div id="main1">
</div>

<div id="main2">


<div id="profile" style="height:315px;">
<table width="700" style="margin-left:200px;" height="315">
<tr>
<td width="350" valign="bottom">
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/profilepic.png" align="right">
</td>
<td valign="bottom" width="350">
<p align="justify">
Welcome to Ada's official blog. After having finished four years of high school, Ada is breaking out and putting herself out there. This blog is dedicated to life and 

Ada's interests, mainly on the lines of experiences, music, art and culture. One chapter of Ada's life closes, opening the door to newer and better experiences. Don't 

wanna miss out? She doesn't either.
</p>
<p align="left">
<b>Name</b>: Ada<Br>
<b>Date of Birth:</b> December 13, 1992<br>
<b>Nationality:</b> 90% Filipino, 8% Spanish, 2% Chinese<br>
<b>Educational Pursuit:</b> Molecular Biology and Biotechnology in The University of the Philippines<br>
<b>Interests:</b> Web Design, Art, Writing, Travel, Japanese/Korean Culture, Language<Br>
<b>Sports:</b> Softball, Table Tennis, Competitive Figure Skating, Roller Blading<br>
<b>Travel Tracks:</b> Thailand; Laos; Hawaii, US; Los Angeles, US; New York, US; Atlanta, US; Florida, US; San Diego, US<br>
<b>Current Obsession:</b> Demi Lovato
</p>
</td>
</tr></table>
</div>

<div id="profile1" style="height:315px;display:none;">
<table width="700" style="margin-left:200px;" height="315">
<tr>
<td width="350" valign="bottom">
<img src="http://i85.photobucket.com/albums/k70/ada_akutenshi/images/profilepic.png" align="right">
</td>
<td valign="bottom" width="350">
<p align="justify">
Welcome to Ada's official blog. After having finished four years of high school, Ada is breaking out and putting herself out there. This blog is dedicated to life and 

Ada's interests, mainly on the lines of experiences, music, art and culture. One chapter of Ada's life closes, opening the door to newer and better experiences. Don't 

wanna miss out? She doesn't either.
</p>
<p align="left">
<b>Name</b>: Ada<Br>
<b>Date of Birth:</b> December 13, 1992<br>
<b>Nationality:</b> 90% Filipino, 8% Spanish, 2% Chinese<br>
<b>Educational Pursuit:</b> Molecular Biology and Biotechnology in The University of the Philippines<br>
<b>Interests:</b> Web Design, Art, Writing, Travel, Japanese/Korean Culture, Language<Br>
<b>Sports:</b> Softball, Table Tennis, Competitive Figure Skating, Roller Blading<br>
<b>Travel Tracks:</b> Thailand; Laos; Hawaii, US; Los Angeles, US; New York, US; Atlanta, US; Florida, US; San Diego, US<br>
<b>Current Obsession:</b> Demi Lovato
</p>
</td>
</tr></table>
</div>

<div id="archive1" style="height:315px; display:none;">
  • 2 Contributors
  • 1 Reply
  • 148 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by digital29
Member Avatar for digital29

I tested it in IE and works fine...
Had look onto the code also, and it seems good too...
On what IE have you tested?

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.