SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A few problems I am having, and need some serious help.

    So lets be honest, I'm a real big n00b when it comes down to this whole CSS thing. I'm use to my good ol' plain tables and what not using HTML.

    So lets get started.

    I have this layout.. www.monarkstudios.ca/peter/

    In IE7 it looks perfect, but Firefox and IE6 I'm having problems.

    I was posting on other forums, and they told me what the problem was, but I wasnt really getting it explained to me in "dummy-free" terms.

    In Firefox, they said that the white bars were caused by Collapsing Margins - whatever that is?

    And the reason why it isn't centered is because well.. IE is getting it wrong, and there is a certain way to center it.

    Can someone please explain to me how do I fix this "collapsing margins", and how I get this layout centered correctly?

    Thanks in advance,
    Peter

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2006
    Location
    Halifax, Canada
    Posts
    498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all, the centering:

    I assume you used text-align to center the page. This doesn't work in browsers other than IE, so you need to use margin: 0px auto; to correct it.

    Here is the code that will center your page:

    Code:
    .header_login, .header_bar, .header_middle, .seperator, .body, .footer {margin: 0px auto;}
    Basically, margin: 0px auto sets the vertical margin to 0px and the horizontal margin to 'auto'. When the left and right margins are both auto, the page is centered.
    Paul Butler.org
    JSSpamBlock - Reduce WordPress spam.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, that worked perfectly. simple enough i just made a wrapper tag in which goes around the whole thing and set that margin to 0px.

    thanks for the help..

    now just fixing up those bars on Firefox, and IE6-.

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2006
    Location
    Halifax, Canada
    Posts
    498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, the margins are a bit trickier. Interestingly, if you set body {border: 1px solid;} everything fits into place nicely, but of course you get an ugly border. I have had this same problem before, but I can't remember how I fixed it except that I did get it working in the end.
    Paul Butler.org
    JSSpamBlock - Reduce WordPress spam.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you didn't read the information we linked to? Why didn't you just ask for more details? One thread he's referring to is here.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Crazy enough, your everywhere Kravvitz.

    Yeah, I was reading that documentation, but I don't understand the whole general idea of collapsing margins still.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Collapsing margins are fairly simple. When you have two top margins or two bottom margins on a parent and child element that touch and the parent element doesn't have a border or padding to get in the way and neither element is positioned or floated the vertical margins collapse. So the resulting margin is the greater of the two margins.

    So in this case, you have the top margins of <p>s collapsing with the top margins of their parent <div>s, thus causing the graphical glitch.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I see what you mean when it over laps, so I took out the margins. Now how exactly would I fix this problem? I took out the margins and they still intend to overlap.

    Like header_middle, and header_bar/header_bar_txt for example. I see that header_middle is overlapping the other one. Obviously adjusting the height wont matter, so now how would I go about fixing this?

    The same follows for separator, and body_content, and footer. I just dont understand on how I would fix the situation.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't look like you changed the margins.

    You've lost me on the rest of that.

    You still need to contain the floats in Firefox. Did you not understand the articles on that either?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like I said, I'm all new to this stuff LOL, and I can tell im being a hassle.

    And to answer your question, no.

    By margins, do you mean margin-top, margin-bottom, etc.

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case I was referring to the top and bottom margins of the paragraphs.

    I realize this stuff is complicated, but I get the feeling that you expected to learn this stuff in a few days. Learning all of the ins and outs of these techniques can take weeks or even months.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, so I'm looking at the CSS code, and there is no top and bottom margins for body_txt and body_menu_txt.

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't matter if the margins on those are 0. What matters is there is a vertical margin on the child paragraphs and there is no padding or border to stop the margins from collapsing. Sorry, I didn't make that clear.

    The collapsing margins will be prevented if you add a little vertical padding or vertical borders to those two elements.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All is working/looking well.

    Kravitz, and for anyone else who took a lot at this, and helped, thanks alot! I look forward to my future posts in the forums!


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
  •