I have this image that includes a map to a website. This is the last thing to complete the site. PLEASE help me
figure out why the image will not center. Ive tried to left align and then tab it to the center. I've tried using the
center align on the toolbar tab. Theres gotta be something in my script that is cause th glitch. Her is the script
<div style="text-align:center; width:649px; margin-left:auto; margin-right:auto;">
<p style="text-align: left">
<img id="Image-Maps_2201206240011053" src="http://www.image-maps.com/uploaded_files/2201206240011053_Backwoods%20Wanted%20Poster.jpg" usemap="#Image-Maps_2201206240011053" border="0" width="649" height="840" alt="" />
<map id="_Image-Maps_2201206240011053" name="Image-Maps_2201206240011053">
<area shape="rect" coords="176, 698, 476, 748" href="http://www.backwoodsband.net/index.html" alt="" />
<area shape="rect" coords="645, 836, 647, 838" href="http://www.image-maps.com/index.php?aff=mapped_users_2201206240011053" alt="Image Map" title="Image Map" />
</map>
</div>
</body>
</html>
Full Version: IMAGE WILL NOT CENTER HELP
That centers for me. Only the P tag is on the loose and not needed.
BTW, this is not a script, but HTML markup with inline CSS styles.
BTW, this is not a script, but HTML markup with inline CSS styles.
It appears the margins are set to auto. I've tried few things which does center it only on my computer. Everyone else sees a left aligned photo. They've even change their resolution to no success. What should I change or add? Here is the full page.
http://www.backwoodsband.net/
http://www.backwoodsband.net/
You don't use a doctype. That puts browsers in quirks mode. IE doesn't understand centering with equal left and right margins when in quirks mode. So, the solution is to use an appropriate doctype. From the look of your markup that should be HTML 4.01 Transitional. It must be the long version with an URL or browsers will still be in quirks mode.
http://hsivonen.iki.fi/doctype/
http://hsivonen.iki.fi/doctype/
So my page is in quirks mode. Should it be in Standard mode? Confused on where this part of the source should be in my page. Thanks for the more specific answer. Added note. I'm not designing this page from direct html. It was designed in frontpage.
Frontpage - brrrr! 
This is called doctype switching and it's kind of hard to get your head around because it's so easy to misunderstand. For example it's easy to think that a Strict doctype gives you Strict (Standards) Mode, but that isn't necessarily so. It's just an unhappy choice of words. IMO the whole doctype switching is crap, but that's my humble opinion.
This isn't anything that's baked into HTML. It just so happened that way back when when web standards started to take off and IE5 for Windows was written its main author got an idea, that the browser should have two rendering modes. In one it should follow web standards as close as possible and so it wouldn't break all old tag soup pages out there it should also have a rendering mode where it interpreted HTML (and CSS) as older versions had done. The assumption was that HTML kludges didn't bother to use a doctype or in best case used the shorter versions of the doctypes at hand back then. So it was decided that the doctype (or lack thereof) and the way it was written should trigger which rendering mode to use. As it happens in browser land it didn't take long before other browsers followed suit and soon they all were switching along.
So there really isn't anything to understand. There's just this big table with different doctypes that trigger different rendering modes in different browsers - and not always the same one.
As long as you write HTML the only thing you need to remember is to use HTML 4.01, Strict or Transitional, and use the long doctype that has the URL to the DTD at w3c in it and you are all set. That's the best you can do.
End of history lesson.
This is called doctype switching and it's kind of hard to get your head around because it's so easy to misunderstand. For example it's easy to think that a Strict doctype gives you Strict (Standards) Mode, but that isn't necessarily so. It's just an unhappy choice of words. IMO the whole doctype switching is crap, but that's my humble opinion.
This isn't anything that's baked into HTML. It just so happened that way back when when web standards started to take off and IE5 for Windows was written its main author got an idea, that the browser should have two rendering modes. In one it should follow web standards as close as possible and so it wouldn't break all old tag soup pages out there it should also have a rendering mode where it interpreted HTML (and CSS) as older versions had done. The assumption was that HTML kludges didn't bother to use a doctype or in best case used the shorter versions of the doctypes at hand back then. So it was decided that the doctype (or lack thereof) and the way it was written should trigger which rendering mode to use. As it happens in browser land it didn't take long before other browsers followed suit and soon they all were switching along.
So there really isn't anything to understand. There's just this big table with different doctypes that trigger different rendering modes in different browsers - and not always the same one.
As long as you write HTML the only thing you need to remember is to use HTML 4.01, Strict or Transitional, and use the long doctype that has the URL to the DTD at w3c in it and you are all set. That's the best you can do.
End of history lesson.
PANDY: Is there a better HTML program to use other than Frontpage? Anyway, here is a new source code. What do you think? This should center my image? Good doctype?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {margin:0;}
body {background: url(http://www.backwoodsband.net/Medium%20Wood%20Background.jpg);}
#content img {
margin: 16px auto;
display: block;
}
</style>
</head>
<body>
<div id="content">
<img src="http://www.image-maps.com/uploaded_files/2201206240011053_Backwoods%20Wanted%20Poster.jpg" alt="band" width="649" height="840">
<!--end content--></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {margin:0;}
body {background: url(http://www.backwoodsband.net/Medium%20Wood%20Background.jpg);}
#content img {
margin: 16px auto;
display: block;
}
</style>
</head>
<body>
<div id="content">
<img src="http://www.image-maps.com/uploaded_files/2201206240011053_Backwoods%20Wanted%20Poster.jpg" alt="band" width="649" height="840">
<!--end content--></div>
</body>
</html>
Yes, if you plan to write HTML5.
FP is notorious for the bad markup it generates. But your HTML doesn't look like it's generated. Do you use FP to write HTML by hand?
There are WYSIWYG editors that are better than FP, but none that is really good. In WYSYWYG mode they all genarate convoluted and rigid HTML and often lots and lots of it, much more than is needed.
I recommend you find a good text editor and do it by hand. It gives more control and is faster in the long run.
FP is notorious for the bad markup it generates. But your HTML doesn't look like it's generated. Do you use FP to write HTML by hand?
There are WYSIWYG editors that are better than FP, but none that is really good. In WYSYWYG mode they all genarate convoluted and rigid HTML and often lots and lots of it, much more than is needed.
I recommend you find a good text editor and do it by hand. It gives more control and is faster in the long run.
Thank you so much for all the info. I was given this new html source which solved my problem. Unfortunately, I use Frontpage to create webpages or use premade templates. I create them in Frontpage design view. My html by hand is very limited. Mostly, to tweak out pages, but not by scratch. I just needed to add a hyperlink to the above source. Can you tell which doctype is in my source? I do have TextPad that I used for minor scripts in fash 8. I love your avitar. Are there any good html resources besides you? Thanks from Orange County CA.
What you posted above uses the doctype for HTML5. I think that if you need to ask you should stick with the one we talked about before, HTML 4.01 Transitional. It's just a matter of copying the right one and paste it in at the top of the document.
http://htmlhelp.com/tools/validator/doctype.html
There are lots of HTML related forums and help pages, alas I don't keep up so I can't tell you which are good now.
http://htmlhelp.com/tools/validator/doctype.html
There are lots of HTML related forums and help pages, alas I don't keep up so I can't tell you which are good now.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.