Skip navigation
scubapepe
scubapepe Calculating status...
Currently Being Moderated

Firefox website shifted, IE8 and safari is ok. pls help!

Jan 28, 2010 8:04 AM

HI,

Just build the website in CS4 and when wieving online in firefox wedsite is completely shifted, but when I open site in Safari or IE is ok.

 

here is the link: www.gadtours.com

 

I tried to make changes but no luck.

 

Please help.

 

Thank you.

 

Pete

1282 Views   14 Replies   Latest reply: Hollywoodstarrs, Jan 29, 2010 5:49 PM
 
Replies
  • pziecina
    Currently Being Moderated
    1. pziecina,
    Jan 28, 2010 8:13 AM   in reply to scubapepe
    Report

    Hi

     

    The only shift I can see between the browsers is caused by the different browsers 'chrome' not the page.


    Can you supply a screen shot of what you are seeing?

     

    PZ

     
    |
    Mark as:
  • scubapepe
    Currently Being Moderated
    2. scubapepe,
    Jan 28, 2010 8:38 AM   in reply to pziecina
    Report

    here are the snapshots.

     

    Screen shot 2010-01-28 at 10.29.27 AM.png

     

    Screen shot 2010-01-28 at 10.30.13 AM.png

     

    Screen shot 2010-01-28 at 10.30.20 AM.png

     

    Screen shot 2010-01-28 at 10.30.26 AM.png

     
    |
    Mark as:
  • pziecina
    Currently Being Moderated
    3. pziecina,
    Jan 28, 2010 8:56 AM   in reply to scubapepe
    Report

    Hi

     

    Have you refreshed your browser and cleared the cache?

     

    This is what I am getting in FF -

     

    Noname.jpg

    PZ

     
    |
    Mark as:
  • scubapepe
    Currently Being Moderated
    4. scubapepe,
    Jan 28, 2010 9:04 AM   in reply to pziecina
    Report

    Yes I did, this what I see on my mac 13,3 inch.

     

    on my 19" I see ok.

     
    |
    Mark as:
  • pziecina
    Currently Being Moderated
    5. pziecina,
    Jan 28, 2010 9:11 AM   in reply to scubapepe
    Report

    Hi

     

    The possible cause is the excessive use of position absolute, see - http://forums.adobe.com/thread/477969.

     

    PZ

     
    |
    Mark as:
  • scubapepe
    Currently Being Moderated
    6. scubapepe,
    Jan 28, 2010 1:10 PM   in reply to pziecina
    Report

    I don't have a lot of absolute div's. Any other idea???

     
    |
    Mark as:
  • bregent
    Currently Being Moderated
    7. bregent,
    Jan 28, 2010 2:32 PM   in reply to pziecina
    Report

    PZ, try increasing your font size in FF. You'll see the menu wrap around and wreck the layout. Maybe this is what the OP is referring to.

     
    |
    Mark as:
  • pziecina
    Currently Being Moderated
    8. pziecina,
    Jan 29, 2010 6:37 AM   in reply to bregent
    Report

    Hi breqent

     

    Thank for the tip, now I can see the problem, but as the OP says there are not many absolute positioned divs, I find it remarkable that there are more than 22 in their css code, (I stopped counting at this number) and using absolute positioning would cause such an effect when text is zoomed if it is not allowed for in the design, as the block must grow in size if it is too small to contain the text.

     

    I am not saying that this will cause this in this perticular instance, but!!

     

    PZ

     
    |
    Mark as:
  • bregent
    Currently Being Moderated
    9. bregent,
    Jan 29, 2010 8:55 AM   in reply to pziecina
    Report

    >I am not saying that this will cause this in this perticular instance, but!!

     

    Yeah, I hear ya.

     
    |
    Mark as:
  • scubapepe
    Currently Being Moderated
    10. scubapepe,
    Jan 29, 2010 12:44 PM   in reply to bregent
    Report

    So guys any suggestions?

     

    Thanks.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    11. Nancy O.,
    Jan 29, 2010 1:44 PM   in reply to scubapepe
    Report

    Paula Z already gave you an excellent link on the pitfalls of using APDivs.

     

    If you're going to use APDivs as your primary layout method, you'll need to wrap them inside a relatively positioned container.

     

    CSS:

     

    #wrapper {

    position: relative;

    width: 900px /**change to required width in px, % or ems**/

    }

     

    HTML

    <div id="wrapper>

    page content goes inside here

    </div>  <!--end wrapper-->

     

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

     
    |
    Mark as:
  • scubapepe
    Currently Being Moderated
    12. scubapepe,
    Jan 29, 2010 3:00 PM   in reply to Nancy O.
    Report

    Thank you Nancy.

     

    Where do I need to insert the wrapper? Do I have to put it into CSS and HTML?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    13. Nancy O.,
    Jan 29, 2010 3:30 PM   in reply to scubapepe
    Report

    Where do I need to insert the wrapper? Do I have to put it into CSS and HTML?

     

    Put the CSS code in with your other CSS code - external stylesheets are preferred.

    Put the HTML code around your exisiting page code - between the <body> and </body> tags.

     

    HTML & CSS Tutorials - http://w3schools.com/

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

     
    |
    Mark as:
  • Hollywoodstarrs
    Currently Being Moderated
    14. Hollywoodstarrs,
    Jan 29, 2010 5:49 PM   in reply to Nancy O.
    Report

    Nancy helped me out when I thought it was my div tags causing a problem when the text in those div's moved in firefox and not in ex7.  She recommended I zero out the browser pre-set settings for padding and margin.  This was the answer and the catch all provided didnt quite solve it.  It however pointed me in the right direction.  I hope this can be used by you as well. Here goes.

     

    place this in your css external sheet or in your css list: ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,i nput,label,div,dd,dt,dl,table,tr,td {margin:0; padding:0;}

     

    the catch all *{margin:0; padding:0;} i was told can work most of the time, which for me is not good enough.  The above css zero out code is suppose to work all of the time.....

     

    Goodluck

         Hollywoodstarrs

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points