View Full Version : Misalignment of image

07-16-2008, 06:08 AM
This should be pretty simple, but it has me stumped.

Main site: http://www.tswartz.com/
Style sheet: http://www.tswartz.com/style.css


As you can see from the above image, the main logo (http://www.tswartz.com/woodlogo.gif) doesn't center on the top of the page. On the right side, there are 171 pixels before the main container below it. On the left side, there are 150 pixels before the main container below it. As far as I can tell, this only happens in Firefox and Safari. IE seems to be ok.

The code is as simple as it could be:

<div id="header">
<a href="http://www.tswartz.com/"><img src="http://www.tswartz.com/woodlogo.gif" alt="Tony Swartz" border="0"></a>

Maybe I'm missing something simple here? Any ideas?

07-16-2008, 10:17 AM
To expect a standard output from browser, we need to standardise our code first. There are many errors, see http://validator.w3.org/check?uri=http&#37;3A%2F%2Fwww.tswartz.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Also, <center> tag is depreciated. A simple style of text-align:center; would center all texts and inline elements.

07-17-2008, 07:35 AM
Your wish is my command. Unfortunately, the misalignment is still present, as can be seen below:


The image aligns fine in Internet Explorer 6. It doesn't align in Internet Explorer 8, Safari 3.1, Firefox 3, and Internet Explorer 7.

Thanks for the reply!

07-17-2008, 08:26 AM
Maybe I'm missing something simple here? Any ideas?

I donít know what the issue is, but it seems to be related to one of your scripts since, when I enable scripting for your site, the image moves to the right. (I have the NoScript extension for Mozilla Firefox (3) installed, so scripting is generally disabled until I explicitly enable it.)

<div id="header"><a href="http://www.tswartz.com/"><img src="http://www.tswartz.com/woodlogo.gif" alt="Tony Swartz" border="0"></img></a>

While using end tags for EMPTY elements in XHTML is technically correct form (e.g., <img></img>), it only works properly when you serve your XHTML as XML. When serving it as HTML, the XHTML 1.0 specification recommends against it (see Appendix C) since end tags for EMPTY elements is forbidden in HTML 4.01 (i.e., your XHTML document gets read by an HTML tag soup parser that doesnít recognize the end tags). Fx3 seems to strip such end tags while Iíve heard that some versions of Internet Explorer will create a new element named /img. In summary, EMPTY elements in XHTML served as HTML should use XML empty‐element tag syntax (e.g., <img />).