CSS margin problems in Firefox vs IE

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • JnrJnr
    New Member
    • Oct 2009
    • 88
    #1

    CSS margin problems in Firefox vs IE

    Hi people, I have a div, inside the div is a heading and a table. I want the table to be say 50px from the bottom of the heading. So I give the table a margin-top50px. In FF it calculates the table's margin against the heading and in IE it calculates the margin against the top of the div, see attached image.
    Could you please explain or guide me to what the problem is with the margins in Firefox and IE.
    I've read the article on collapsing margins here http://complexspiral.com/publication...psing-margins/ but its still not working for me.
    Attached Files
    Tags: None
    • BigPapaN0z
      New Member
      • Dec 2011
      • 24
      #2
      In the markup, are you setting the relativity explicitly? Even though there are standards, I've run across issues with browsers not having the same "defaults" when it comes to CSS. If setting the relativity doesn't fix the problem, let us know and we'll figure this out together :)

      One more thing, what versions of said browsers are you using? This can help out quite a bit when troubleshooting cross-browser issues.

      - - - - - -
      - EDIT -
      - - - - - -
      After re-reading your post again, I realized what you were actually asking. Silly me, I shouldn't be up this late. ;)

      Although what I posted above does have merit in the answer, it doesn't explain is clearly. As I mentioned, every browser has it's own way of doing things and this includes defaults for CSS. Just about anyone who has done any webdesign and tried to make it cross-browser compatible will tell you that IE is a big culprit for breaking CSS.

      As far as the issue goes that you're having, you could always add a browser specific markup. However, some believe this is cheating. There is supposed to always be a way around it (keyword: supposed) using pure CSS.

        Comment

        • JnrJnr
          New Member
          • Oct 2009
          • 88
          #3
          Hi, I do not understand what you mean with the "relativity ". Could you explain that to me. I'm still learning.

            Comment

            • BigPapaN0z
              New Member
              • Dec 2011
              • 24
              #4
              Sorry about that, I shouldn't be assuming. :) I used the term "relativity " as in the positioning of the div. position: relative|absolu te|etc It's just a positioning CSS rule for layouts/divs/etc.

              For more info: W3C

                Comment

                • JnrJnr
                  New Member
                  • Oct 2009
                  • 88
                  #5
                  Ok, well I dont know if this is good practise but it seems like absolute positioning works. When I apply absolute position to the table then the table's margin top is set relative to the heading and not the div.

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      When looking at how browsers work, Firefox will show what you wrote. IE will make things up as it goes along. Never, ever trust IE to do anything right.

                      Without a link, or the complete markup, anything we say is just a wild guess.

                        Comment

                        • JnrJnr
                          New Member
                          • Oct 2009
                          • 88
                          #7
                          I've noticed. Sad to be honest.
                          Ok the markup is pretty straight forward...

                          HTML
                          Code:
                          <div id="container">
<h2>Hello Heading</h2>
<table width="200" style="margin:50px 50px">
<tr><td></td></tr>
</table>
</div>
                          CSS
                          Code:
                          #container
{
  width:300px;
  height:500px;
  float:left;
  position:absolute;
  margin-left:410px;
  margin-top:160px;
}

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              I don't see any difference. Are you using IE9? Are you using a doctype?

                                Comment

                                • JnrJnr
                                  New Member
                                  • Oct 2009
                                  • 88
                                  #9
                                  That is strange. I am using IE 9. My document type is
                                  Code:
                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                  I coppied the code I posted and ran the page in both IE and FF and this is what it looks like - see attached image.
                                  When I add position absolute to the table then the table's margins are the same as in FF making them look the same in both browsers.
                                  Attached Files

                                    Comment

                                    • charles07
                                      New Member
                                      • Dec 2011
                                      • 45
                                      #10
                                      dear JnrJnr

                                      use the following codes
                                      HTML
                                      Code:
                                      <div id="container">
<h2>Hello Heading</h2>
<table width="200" style="margin:50px 50px">
<tr><td>this is the table</td></tr>
</table>
</div>
                                      CSS
                                      Code:
                                      #container
{
  width:300px;
  height:500px;
  margin-left:410px;
  margin-top:160px;
}
#container h2
{ 
 clear:both; margin:0px 0px 50px 0px;
}
#container table
{
clear:both;
}

                                        Comment

                                        • drhowarddrfine
                                          Recognized Expert Expert
                                          • Sep 2006
                                          • 7434
                                          #11
                                          @JnrJnr - I still don't see anything different.

                                            Comment

                                            • danp129
                                              Recognized Expert Contributor
                                              • Jul 2006
                                              • 323
                                              #12
                                              You can try adding the following style at the beginning of your CSS, but I would recommend searching for a reset CSS file and referencing it before any other linked CSS files:

                                              Code:
                                                  h1,h2,h3,h4,h5,table,div,td,tr,span,body,form,p,img,iframe {
        margin: 0px;
        padding: 0px;
    }

                                                Comment

                                                Previous template Next
                                                Working...