CSS Margin Problem in Safari and Chrome
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 13 of 13

Thread: CSS Margin Problem in Safari and Chrome

  1. #1
    Join Date
    Jan 2009
    Posts
    15

    CSS Margin Problem in Safari and Chrome

    Hi my site, www.johndesu.com has an issue where a margin appears in Google Chrome and Safari. There is an 8px margin that appears. I want to get rid of it. The site displays fine in Firefox and IE.

    Thanks,
    John

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: CSS Margin Problem in Safari and Chrome

    [ moved ]
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: CSS Margin Problem in Safari and Chrome

    Every browser acts a little bit different than others when it comes to the body's default settings. Add the following to your CSS.

    Code:
    body {margin: 0px;}
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  4. #4
    Join Date
    Jan 2009
    Posts
    15

    Re: CSS Margin Problem in Safari and Chrome

    Quote Originally Posted by PeejAvery View Post
    Every browser acts a little bit different than others when it comes to the body's default settings. Add the following to your CSS.

    Code:
    body {margin: 0px;}
    i have done that but the problem still persists

  5. #5
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: CSS Margin Problem in Safari and Chrome

    You might want to do the same with your #main element. Or even specify it for the default of div tags.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  6. #6
    Join Date
    Jan 2009
    Posts
    15

    Re: CSS Margin Problem in Safari and Chrome

    i added it to the #main and specified it as the default but it still doesn't want to work for some reason

  7. #7
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: CSS Margin Problem in Safari and Chrome

    After looking at it further, you have something overwritting the CSS of the margin property of the body tag. I'm not sure what it is, but if you add style="margin: 0px;" within the body tag, you will see that border go away.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  8. #8
    Join Date
    Jan 2009
    Posts
    15

    Re: CSS Margin Problem in Safari and Chrome

    Quote Originally Posted by PeejAvery View Post
    After looking at it further, you have something overwritting the CSS of the margin property of the body tag. I'm not sure what it is, but if you add style="margin: 0px;" within the body tag, you will see that border go away.
    thanks for all the help. everything seems to be working fine now

  9. #9
    Join Date
    Jan 2009
    Posts
    15

    Re: CSS Margin Problem in Safari and Chrome

    Ok so that solved half the problem. Yet again in both Safari and Chrome the footer is not displaying correctly. This is probably another CSS issue, and yet again I am stumped.

    Any more of your wisdom PeejAvery?

    Thanks in advance

  10. #10
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,886

    Re: CSS Margin Problem in Safari and Chrome

    Just as something was causing the other styles to be re-written, this is most likely the case. There are only two options. 1. Remove the CSS causing the re-write. 2. Put the CSS you want last, or in the actual HTML element tags.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  11. #11
    Join Date
    Jan 2009
    Posts
    15

    Re: CSS Margin Problem in Safari and Chrome

    I figured out the footer issue, but I don't understand why so many things are being re-written in safari and chrome only. My text formatting is also not working for some reason.

    I've only had time lately to work on this a little because of finals, so any more help would be much appreciated.

  12. #12
    Join Date
    Jul 2005
    Location
    Currently in Mexico City
    Posts
    568

    Re: CSS Margin Problem in Safari and Chrome

    the main problem in these days that each browser has its own style defaults for the elements. So to fight this it is a good practice to reset these values. So each main CSS I write begins with:
    Code:
    html, body, table, th, tr, td, p, img, hr, ul, li, h1, h2, h3, h4, h5, div, form, fieldset {padding:0; margin:0; border:none;}
    and later I just override the values when it's needed.
    Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?

    I had a nightmare last night. I was dreaming that Iím 64-bit and my blanket is 32-bit and I couldnít cover myself with it, so Iíve spent the whole night freezing. And in the morning I find that my blanket just had fallen off the bed. =S (from: bash.org.ru)

    //always looking for job opportunities in AU/NZ/US/CA/Europe :P
    willCodeForFood(Arrays.asList("Java","PHP","C++","bash","Assembler","XML","XHTML","CSS","JS","PL/SQL"));

    USE [code] TAGS! Read this FAQ if you are new here. If this post was helpful, please rate it!

  13. #13
    Join Date
    Jan 2009
    Posts
    15

    Re: CSS Margin Problem in Safari and Chrome

    I found http://developer.yahoo.com/yui/reset/

    This gives defaults across browsers and seems to have fixed many of my problems.
    Thanks

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center