none
Alignment issue when viewing my site in Google Chrome RRS feed

  • Question

  • I know just enough about website development to be dangerous, so please bear with me. I have had my website online for several years - only updating my portfolio at times.

    I have noticed that when viewing the main page with Google Chrome, it appears to be totally blank - but it is viewable by scrolling down to the midpoint! It appears OK in IE8. I have played around with margins & all the position options using Expression Web 4, but it still appears the same in Google Chrome.

    Please take a look: http://www.caribphotography.com

    I have a feeling the answer is simple. Any advice is appreciated!

     

    Friday, February 11, 2011 3:36 AM

Answers

  • Believe it or not, Chrome is understandably confused.

    You have TWO html and body tags in that page, with a 704px high table above the second <body> tag.  That's why Chrome is dropping down 704 before displaying content.

    Look in Code View.  Fix the errors - there are several.  EW points them out.

    An XHTML termination in the google tag (remove the slash).

    An invalid "fprolloverstyle" in the <style > tag.  Remove it.  The style tag should read: <style type="text/css">

    An unmatched </p> tag and unmatched </a> tag - remove them.

    Then (the big ones) a second <html> and <body> tag underneath your flash markup.  Remove them.

    And two </html> tags.  Remove one.

     

    Now, Chrome moves things up, but still thinks the flash is a lot taller than it is (set the page background to white and you'll be able to see the flash box outline), and I don't have an answer for that.

    • Marked as answer by TWBoyd Friday, February 11, 2011 2:20 PM
    Friday, February 11, 2011 6:48 AM
  • Look at the <embed> code. It defines height as 700% instead of 700px.

    A couple of other notes: you have a doctype, but it appears to be incomplete, so your page renders in quirks mode. That probably explains the variety of views among different browsers. Also, the "invisible" keywords on the page are a bad idea. It won't help you, but could very easily harm your SEO efforts.

    Jim

    • Marked as answer by TWBoyd Friday, February 11, 2011 2:20 PM
    Friday, February 11, 2011 7:20 AM

All replies

  • I have noticed that when viewing the main page with Google Chrome, it appears to be totally blank - but it is viewable by scrolling down to the midpoint! I have a feeling the answer is simple. Any advice is appreciated!

    ================

    I am running Internet Explorer (IE) 9 Beta (Release Candidate) 32 bit and 64 bit.

    IE 9 32 bit shows everything to be pretty much correct; however, I see an occasional white progress bar in the middle of the photo as it fades to the next one.

    IE 9 64 bit shows the logo and links on the left however, the right side of the site is outlined in white and gives the "broken graphic" red X. There is no scroll bar. This could be a bug in IE 9, since it is in beta.

    Safari works fine, but does show the white scroll bar in the middle of each photo as it's faded into the next one.

    I get the same thing you see in Google Chrome; however, I don't see a white scroll bar here.

    I also get the same thing you see in Firefox 4.0 Beta 10. No white progress bar here either.

    Opera shows the logo and links; however, the right side is black with no scroll bar.

    One other thing I've noticed; I am repeatedly asked to allow Adobe Flash to run, even after I've already installed it; not in all of the browsers, but enough to point out that it may be something you should look at.

    I can confirm what you're seeing, and give you other observations. However, the real gurus will have to take it from here.


    Nancy Ward
    Friday, February 11, 2011 4:30 AM
  • Believe it or not, Chrome is understandably confused.

    You have TWO html and body tags in that page, with a 704px high table above the second <body> tag.  That's why Chrome is dropping down 704 before displaying content.

    Look in Code View.  Fix the errors - there are several.  EW points them out.

    An XHTML termination in the google tag (remove the slash).

    An invalid "fprolloverstyle" in the <style > tag.  Remove it.  The style tag should read: <style type="text/css">

    An unmatched </p> tag and unmatched </a> tag - remove them.

    Then (the big ones) a second <html> and <body> tag underneath your flash markup.  Remove them.

    And two </html> tags.  Remove one.

     

    Now, Chrome moves things up, but still thinks the flash is a lot taller than it is (set the page background to white and you'll be able to see the flash box outline), and I don't have an answer for that.

    • Marked as answer by TWBoyd Friday, February 11, 2011 2:20 PM
    Friday, February 11, 2011 6:48 AM
  • Look at the <embed> code. It defines height as 700% instead of 700px.

    A couple of other notes: you have a doctype, but it appears to be incomplete, so your page renders in quirks mode. That probably explains the variety of views among different browsers. Also, the "invisible" keywords on the page are a bad idea. It won't help you, but could very easily harm your SEO efforts.

    Jim

    • Marked as answer by TWBoyd Friday, February 11, 2011 2:20 PM
    Friday, February 11, 2011 7:20 AM
  • Thank you much, Kathy & Jim, for taking the time to help!

    I have resolved the issues & now it appears as it should on all browsers.

    Friday, February 11, 2011 2:23 PM