By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,541 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

CSS margin problems in Firefox vs IE

JnrJnr
P: 88
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 Images
File Type: jpg Untitled.jpg (19.5 KB, 559 views)
Dec 30 '11 #1
Share this Question
Share on Google+
11 Replies


BigPapaN0z
P: 24
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.
Dec 30 '11 #2

JnrJnr
P: 88
Hi, I do not understand what you mean with the "relativity". Could you explain that to me. I'm still learning.
Dec 30 '11 #3

BigPapaN0z
P: 24
Sorry about that, I shouldn't be assuming. :) I used the term "relativity" as in the positioning of the div. position: relative|absolute|etc It's just a positioning CSS rule for layouts/divs/etc.

For more info: W3C
Dec 30 '11 #4

JnrJnr
P: 88
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.
Dec 30 '11 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Dec 30 '11 #6

JnrJnr
P: 88
I've noticed. Sad to be honest.
Ok the markup is pretty straight forward...

HTML
Expand|Select|Wrap|Line Numbers
  1. <div id="container">
  2. <h2>Hello Heading</h2>
  3. <table width="200" style="margin:50px 50px">
  4. <tr><td></td></tr>
  5. </table>
  6. </div>
CSS
Expand|Select|Wrap|Line Numbers
  1. #container
  2. {
  3.   width:300px;
  4.   height:500px;
  5.   float:left;
  6.   position:absolute;
  7.   margin-left:410px;
  8.   margin-top:160px;
  9. }
Dec 30 '11 #7

drhowarddrfine
Expert 5K+
P: 7,435
I don't see any difference. Are you using IE9? Are you using a doctype?
Dec 30 '11 #8

JnrJnr
P: 88
That is strange. I am using IE 9. My document type is
Expand|Select|Wrap|Line Numbers
  1. <!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 Images
File Type: png Capture.PNG (50.5 KB, 273 views)
Dec 31 '11 #9

P: 45
dear JnrJnr

use the following codes
HTML
Expand|Select|Wrap|Line Numbers
  1. <div id="container">
  2. <h2>Hello Heading</h2>
  3. <table width="200" style="margin:50px 50px">
  4. <tr><td>this is the table</td></tr>
  5. </table>
  6. </div>
  7.  
CSS
Expand|Select|Wrap|Line Numbers
  1. #container
  2. {
  3.   width:300px;
  4.   height:500px;
  5.   margin-left:410px;
  6.   margin-top:160px;
  7. }
  8. #container h2
  9.  clear:both; margin:0px 0px 50px 0px;
  10. }
  11. #container table
  12. {
  13. clear:both;
  14. }
  15.  
Jan 2 '12 #10

drhowarddrfine
Expert 5K+
P: 7,435
@JnrJnr - I still don't see anything different.
Jan 2 '12 #11

danp129
Expert 100+
P: 321
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:

Expand|Select|Wrap|Line Numbers
  1.     h1,h2,h3,h4,h5,table,div,td,tr,span,body,form,p,img,iframe {
  2.         margin: 0px;
  3.         padding: 0px;
  4.     }
  5.  
Jan 20 '12 #12

Post your reply

Sign in to post your reply or Sign up for a free account.