14 replies [Last post]
bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Hi everyone,

I'm having a slight problem with everyone's favorite browser - IE. I'm trying to center the divs for my new guestbook, and it displays perfectly on FF, Opera, & Safari. However, it's not even close on any IE version. The guestbook aligns to the top left of the page with no border and no image above it. I researched this a bit, and tried the "text-align:center;" fix, but to no avail. I'm assuming there's something fairly obvious that I'm missing. The page is www.andrewdavidnelson.com/guestbook

Here's the code:

<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>G U E S T B O O K</title>
<script type="text/javascript" src="flashdetect.js"></script>
	    <style type="text/css">
<!--
body{
	margin:0;
	padding-top:7%;
	background-color:#ffffff;
	text-align:center;
}
#flashcontent {
   width:750px; /* Change this to the width of your layout */
   height:400;
   border:1px;
   border-color:#999999;
   border-style:solid;
   margin:0 auto;
   text-align:left;
   }
#wrap {
   width:750px; /* Change this to the width of your layout */
   margin:0 auto;
   text-align:left;
   }
 
-->
        </style>
</head>
<body>
<div id="wrap"><img src="../indeximages/index_r1_c1.jpg" alt="adn"></div>
<div id="flashcontent">
			<p align="center">It looks like you don't have flash player 6 installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
            <div align="center">
              <script type="text/javascript">
			var so = new SWFObject("guestbook.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
			so.addVariable("maxDrawingSize", "250")
			//so.addVariable("datapath", "alternate location of guestbook files here")
			so.write("flashcontent");
            </script>
            </div>
</div>
</body>
</html>

Thanks for any help!

Triumph (not verified)
Anonymous's picture
Guru

Doctype belongs first. It

Doctype belongs first. It is out of order now and IE renders in quirks mode. Validate your markup and see if it works for you.

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Thanks for the suggestion. I

Thanks for the suggestion. I cleaned up the top, but it doesn't seem like the IE rendering has changed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>G U E S T B O O K</title>
<script type="text/javascript" src="flashdetect.js"></script>
	    <style type="text/css">
<!--
body{
	margin:0;
	padding-top:7%;
	background-color:#ffffff;
	text-align:center;
}
#flashcontent {
   width:750px; /* Change this to the width of your layout */
   height:400px;
   border:1px;
   border-color:#999999;
   border-style:solid;
   margin:0 auto;
   text-align:left;
   }
#wrap {
   width:750px; /* Change this to the width of your layout */
   margin:0 auto;
   text-align:left;
   }
 
-->
        </style>
</head>
<body>
<div id="wrap"><img src="../indeximages/index_r1_c1.jpg" alt="adn"></div>
<div id="flashcontent">
			<p align="center">It looks like you don't have flash player 6 installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
            <div align="center">
              <script type="text/javascript">
			var so = new SWFObject("guestbook.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
			so.addVariable("maxDrawingSize", "250")
			//so.addVariable("datapath", "alternate location of guestbook files here")
			so.write("flashcontent");
            </script>
            </div>
</div>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 10 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Your online page doesn't

Your online page doesn't match your code, could you fix that?

Verschwindende wrote:
  • CSS doesn't make pies

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Sorry about that! I was

Sorry about that! I was trying out different things, but still no luck. Here's the current code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>G U E S T B O O K</title>
<script type="text/javascript" src="flashdetect.js"></script>
	    <style type="text/css">
<!--
body{
	margin:0;
	padding-top:7%;
	background-color:#ffffff;
	text-align:center;
}
#flashcontent {
   width:750px; /* Change this to the width of your layout */
   height:400px;
   border:1px;
   border-color:#999999;
   border-style:solid;
   margin:0 auto;
   text-align:left;
   }
#wrap {
   width:750px; /* Change this to the width of your layout */
   margin:0 auto;
   text-align:left;
   }
 
-->
</style>
</head>
<body>
<div id="wrap"><img src="../indeximages/index_r1_c1.jpg" alt="adn"></div>
<div id="flashcontent">
			<p align="center">It looks like you don't have flash player 6 installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
 
            <div align="center">
              <script type="text/javascript">
			var so = new SWFObject("guestbook.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
			so.addVariable("maxDrawingSize", "250")
			//so.addVariable("datapath", "alternate location of guestbook files here")
			so.write("flashcontent");
            </script>
            </div>
</div>
</body>
</html>

Thanks for any help!

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 33 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

You need to validate again.

You need to validate again. It appears you either haven't implemented your doctype correctly or you've copied and pasted without understanding the ramifications, or you've switched doctypes.

Until you get the doctype correct the browser will seldom render your page as you intend and will make up it's own rules.

A doctype is a Document Type Definition (DTD), which tells the browser what version of HTML you have coded the page in. At the moment, there are three flavours - HTML 4.01, XHTML 1.0, and XHTML 1.1.

N.B. The syntax is different for HTML and XHTML

The one you are using - HTML 4.01 Strict - is recommended unless you know precisely why you are using one of the others.

Short version - DOCTYPES ARE IMPORTANT. USE THEM. (Beginners Forum)
http://csscreator.com/node/18218

Long version - DocTypes: HTML or XHTML, Which is best ? (How To forum) http://csscreator.com/node/8878

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Doctype

Thanks for the message. I read about the doctypes and tried to fix it - the document has no errors when validated on W3C, and yet it still doesn't work on IE. Here's the latest code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>G U E S T B O O K</title>
<script type="text/javascript" src="flashdetect.js"></script>
	    <style type="text/css">
<!--
body{
	margin:0;
	padding-top:7%;
	background-color:#ffffff;
	text-align:center;
}
#flashcontent {
   width:750px; /* Change this to the width of your layout */
   height:400px;
   border:1px;
   border-color:#999999;
   border-style:solid;
   margin:0 auto;
   text-align:left;
   }
#wrap {
   width:750px; /* Change this to the width of your layout */
   margin:0 auto;
   text-align:left;
   }
 
-->
</style>
</head>
<body>
<div id="wrap"><img src="../indeximages/index_r1_c1.jpg" alt="adn"></div>
<div id="flashcontent">
			<p>It looks like you don't have flash player 6 installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
 
              <script type="text/javascript">
			var so = new SWFObject("guestbook.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
			so.addVariable("maxDrawingSize", "250")
			//so.addVariable("datapath", "alternate location of guestbook files here")
			so.write("flashcontent");
            </script>
            </div>
</body>
</html>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I just copied and pasted

I just copied and pasted your code into a new file, and checked in IE6 and IE7-- looks centered!

You don't need (actually shouldn't have) the <-- comments --> around stuff inside style. You might have gotten that from some people who use XHTML and think it's going to be parsed by a real XML parser, which 99.9999% of the time it won't be, and in real XHTML the tags are CDATA (the browser if using a real XML parser will think that's content to be rendered which of course it isn't). But in real life, we don't need those comments.

Anyway, you maybe need to refresh your cache in IE? It looks good here.

I'm no expert, but I fake one on teh Internets

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Hmmm

Thanks for the help. It still doesn't render correctly on IE for me (I had a couple other people check as well and still didn't work). I took out those --> comments as well. Still no luck!

Updated code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>G U E S T B O O K</title>
<script type="text/javascript" src="flashdetect.js"></script>
	    <style type="text/css">
body{
	margin:0;
	padding-top:7%;
	background-color:#ffffff;
	text-align:center;
}
#flashcontent {
   width:750px; 
   height:400px;
   border:1px;
   border-color:#999999;
   border-style:solid;
   margin:0 auto;
   text-align:left;
   }
#wrap {
   width:750px; 
   margin:0 auto;
   text-align:left;
   }
 
</style>
</head>
<body>
<div id="wrap"><img src="../indeximages/index_r1_c1.jpg" alt="adn"></div>
<div id="flashcontent">
			<p>It looks like you don't have flash player 6 installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
 
              <script type="text/javascript">
			var so = new SWFObject("guestbook.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
			so.addVariable("maxDrawingSize", "250")
			//so.addVariable("datapath", "alternate location of guestbook files here")
			so.write("flashcontent");
            </script>
            </div>
</body>
</html>

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You are showing your DTD tag

You are showing your DOCTYPE tag indented. Any white space before the DTD will put IE in "quirks" mode where it acts like it is still 1995.

It might be just a cut/paste artifact, but if it isn't then fix it. Oh wait, I see a live link and indeed the white space is there. So as I said IE will be pretending it's still 1995 and do things in it's own, er, special way.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

I got rid of the indent and

I got rid of the indent and there's still a problem somewhere. Hmmm...

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Here's my most recent

Here's my most recent code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>G U E S T B O O K</title>
<script type="text/javascript" src="flashdetect.js">
</script>
<style type="text/css">
body {
	margin:0;
	padding-top:7%;
	background-color:#ffffff;
	text-align:center;
}
#flashcontent {
	width:750px; 
	height:400px;
	border:1px;
	border-color:#999999;
	border-style:solid;
	margin:0 auto;
	text-align:left;
}
#wrap {
	width:750px; 
	margin:0 auto;
	text-align:left;
}
 
</style>
</head>
<body>
<div id="wrap"><img src="/indeximages/index_r1_c1.jpg" alt="adn">
</div>
<div id="flashcontent">
<p>It looks like you don't have flash player 6 installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p>
 
 
<script type="text/javascript">
var so = new SWFObject("guestbook.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
so.addVariable("maxDrawingSize", "250")
//so.addVariable("datapath", "alternate location of guestbook files here")
so.write("flashcontent");
</script>
 
</div>
</body>
</html>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 14 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I don't get

I don't get it.

http://stommepoes.nl/centeredie.html (your code, not most recent, but the other one I'd checked earlier)

http://stommepoes.nl/centeredie.gif

It's centering fer me... (And I should have said, I'd already removed the <-- the first time I checked just to make sure they weren't the cause of the problem and they weren't)

So, I can't imagine it's a server thing, but have your friends with IE look at my copy and see if it's centered. I'll keep it on my server for like a week or two or whatever so they have time to look.

Ed, I used to think a space before the doctype was enough to trigger Quirks mode, but after finding a page that needs Quirksmode to even work (tartelin.com), I found I couldn't replicate his page in IE without explicitly adding a character first... (thus, the reason for the ASCII bear I guess).

I'm no expert, but I fake one on teh Internets

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Weird

Thanks for all your help. I checked out your page and it is centered correctly in the box with the image on top. However, it still doesn't work when I check my page. I had a couple other people, including some who had never checked the page before in IE, and it still loads in the top left without the border and image on top. Seems very odd to me!

bcadn7
Offline
newbie
Last seen: 14 years 14 weeks ago
Joined: 2008-10-25
Posts: 9
Points: 0

Problem Solved!!

Don't know why this worked, but when I changed the name of the page from /guestbook.html to /guest.html, it worked fine in IE. Why would that be? Is it because maybe the actual flash files were also called "guestbook" and IE got confused? Weird, at least it works now. Thanks everyone for all your help!