Sat, 2008-10-25 02:23
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!
Sat, 2008-10-25 03:33
#1
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.
Sat, 2008-10-25 04:40
#2
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>
Sun, 2008-10-26 21:13
#3
Your online page doesn't
Your online page doesn't match your code, could you fix that?
Sun, 2008-10-26 21:44
#4
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!
Sun, 2008-10-26 23:35
#5
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 
Mon, 2008-10-27 00:35
#6
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>
Mon, 2008-10-27 12:58
#7
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.
Mon, 2008-10-27 17:03
#8
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>
Mon, 2008-10-27 22:44
#9
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.
Tue, 2008-10-28 01:21
#10
I got rid of the indent and
I got rid of the indent and there's still a problem somewhere. Hmmm...
Tue, 2008-10-28 02:04
#11
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>
Tue, 2008-10-28 13:30
#12
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).
Tue, 2008-10-28 17:32
#13
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!
Tue, 2008-10-28 22:37
#14
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!