Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Misalignment of image

    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:

    Code:
    <div id="header">
    <center>
    <a href="http://www.tswartz.com/"><img src="http://www.tswartz.com/woodlogo.gif" alt="Tony Swartz" border="0"></a>
    </center>
    </div>
    Maybe I'm missing something simple here? Any ideas?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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=ht...Inline&group=0

    Also, <center> tag is depreciated. A simple style of text-align:center; would center all texts and inline elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tswartz (07-17-2008)

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Your wish is my command. Unfortunately, the misalignment is still present, as can be seen below:

    http://browsershots.org/http://tswartz.com/

    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!

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by tswartz View Post
    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.)

    Quote Originally Posted by view-source:http://www.tswartz.com/
    Code:
    <div id="header"><a href="http://www.tswartz.com/"><img src="http://www.tswartz.com/woodlogo.gif" alt="Tony Swartz" border="0"></img></a>
    </div>
    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 />).
    Last edited by Arbitrator; 07-17-2008 at 07:28 AM. Reason: I quoted the code that I was referring to.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •