Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS margin error in firefox and ie browser despite reset

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39434
    mervdsz
    Member

    Hi
    I am CSS beginner. I am trying to create a full width layout
    .
    So i have set width to 100% and reset the margin,padding and border to 0 , as has been explained in so many tutorials to have the “reset effect”.

    BUT despite doing the “reset” i am getting some margin around my text in both the browsers.

    I am testing currently in following browsers:
    Firefox 14.0.1
    IE 9

    OS used is: win 7 (64 bit)

    The HTML and CSS code is as follows:
    index.html






    Untitled Document







    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.






    style.css




    Kindly help me understand my error.
    Thanks

    #108169
    Paulie_D
    Member

    What kind of margin, how big….and “just around the text”…you mean the ‘p’ text?

    #108171
    wolfcry911
    Participant

    do you have a link to test page or image showing the problem? How much margin?

    as you’re just learning, I’ll give a few pointers. Don’t worry about general resets right now – you’ll have time to learn and review them in the future when you better understand things. Looking at the reset you used, none of the 4 elements you selected have a border by default, so that’s unnecessary. divs have zero margin and padding as default in all browsers, so that too is unnecessary. html and/or body will have margin and/or padding applied so that makes sense. And unless you want p elements slammed against other elements, either leave the default margin/padding or set the value you’d like to have – why set it to zero only to overrule it later? I understand that in this test case you may want 0 margin – that’s fine. That’s enough on the reset…

    The #container is a div, has no margin, padding, or border by default (which you’ve set to zero anyway) and because it’s a block level element, takes up all available width anyway. Setting width: 100% will introduce problems if you want padding later. The only rule needed is the background-color.

    Why a transitional doctype? There is no reason a new page should be developed under one – use a strict doctype. I’d also abandon xhtml and use html5. While not yet a CR, it’s the future, backwards compatible, and can safely be used right now (not to mention so much easier to use).

    As to the problem – have you used the style tags in the css file? If so, remove them. They are used for adding styles in the head section of an html document. Otherwise, I see no reason for things not to work.

    #108174
    mervdsz
    Member

    @paulie : thanks for your reply…No i guess it is margin around the entire container div….
    i got an image… just dont know how to upload it here…


    @wolfcry911
    : thanks for the many useful tips… i admit i still truly dont undertand the various doc types.. it is very confusing…
    But i would like to know why the margin is showing despite the reset done…

    #108185
    wolfcry911
    Participant

    did you read my last paragraph?

    regarding the doctype, just use

    from here on out and you’ll be all set. You will need to add a shiv for older IE, but you can read all about it here.

    #108130
    mervdsz
    Member

    @wolfcry911: thanks.. i will read about html5 from the above link….
    i changed the doctype like u said…

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.