Skip navigation
scubapepe
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

 
Replies
  • Currently Being Moderated
    Jan 28, 2010 8:13 AM   in reply to scubapepe

    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:
  • Currently Being Moderated
    Jan 28, 2010 8:56 AM   in reply to scubapepe

    Hi

     

    Have you refreshed your browser and cleared the cache?

     

    This is what I am getting in FF -

     

    Noname.jpg

    PZ

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

    Hi

     

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

     

    PZ

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

    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:
  • Currently Being Moderated
    Jan 29, 2010 6:37 AM   in reply to bregent

    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:
  • Currently Being Moderated
    Jan 29, 2010 8:55 AM   in reply to pziecina

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

     

    Yeah, I hear ya.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 29, 2010 1:44 PM   in reply to scubapepe

    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:
  • Currently Being Moderated
    Jan 29, 2010 3:30 PM   in reply to scubapepe

    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:
  • Currently Being Moderated
    Jan 29, 2010 5:49 PM   in reply to Nancy O.

    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:

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