SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS margins on my website display differently on Firefox / ie / Chrome

    I need help with this website they dont display correctly on on the browsers.

    Check the website : http://www.gtcbusiness.net/scmc/

    on chrome and firefox.

    How do i resolve this issue i know it is from the CSS margin i used.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks the negative margin bottom on #page is being ignored by webkit. I'm not sure what its doing there anyway (unless it was an abandoned attempt at a sticky footer).

    If you make these changes then both browers will be the same and you can work from there:

    Code:
    #u2297-4{margin-top:0}
    #page{margin-bottom:0}
    However, I didn't check any of the other pages so I don;t really know what you were doing with that negative bottom margin anyway so you will need to check.

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it worked , lastly i have one last problem that i have at http://www.gtcbusiness.net/snowflakes/4/ the circles are not well aligned on all browsers and screen sizes .

  4. #4
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Guelph, Ontario, Canada
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I try to check your page, Chrome is killing it. The script your a using for your slider conflicts in the JS.
    Second, this is maybe something you not going to like. Your (snowflakes/4) page is build with tables. After 2003 this is not a smart and reliable way to make a layout and get a good flow in your page.
    If you want to have easy access to your CSS for styling your page, loose the tables and insert div's. You are using to much inline css to style your page this results in slow pages and shows different in browsers. It's more work maybe now, but at the end you will be thankful you changed it.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As mentioned above this is quite awkward with that table structure. It is also compounded by the use of absolute positioning (with inline styles) which don't work well in a table context.

    This is a quick fix for that page but as there are no real hooks to target this code you will need to check it doesn't hit other pages in error.

    Code:
    #image + div{left:0!important;right:0!important;margin:auto!important}
    Or remove the inline styles from that div and apply via class instead.

    i.e. This is the div I am talking about.
    Code:
    <div style="position:absolute; top:160px; left:125px; background-color:transparent; width:880px; height:350px; float:left"> 
    			<!-- The content. -->
    If it's an old site then you have an excuse for using tables but it might be time for a re-design


Bookmarks

Posting Permissions

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