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.
11  6032  
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.
Hi, I do not understand what you mean with the "relativity". Could you explain that to me. I'm still learning.
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
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.
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.
I've noticed. Sad to be honest.
Ok the markup is pretty straight forward... HTML - <div id="container">
-
<h2>Hello Heading</h2>
-
<table width="200" style="margin:50px 50px">
-
<tr><td></td></tr>
-
</table>
-
</div>
CSS - #container
-
{
-
width:300px;
-
height:500px;
-
float:left;
-
position:absolute;
-
margin-left:410px;
-
margin-top:160px;
-
}
I don't see any difference. Are you using IE9? Are you using a doctype?
That is strange. I am using IE 9. My document type is - <!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.
dear JnrJnr
use the following codes HTML -
<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 -
#container
-
{
-
width:300px;
-
height:500px;
-
margin-left:410px;
-
margin-top:160px;
-
}
-
#container h2
-
{
-
clear:both; margin:0px 0px 50px 0px;
-
}
-
#container table
-
{
-
clear:both;
-
}
-
@JnrJnr - I still don't see anything different.
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: - h1,h2,h3,h4,h5,table,div,td,tr,span,body,form,p,img,iframe {
-
margin: 0px;
-
padding: 0px;
-
}
-
Sign in to post your reply or Sign up for a free account.
Similar topics
by: TABOUT |
last post by:
Hello,
The code which I have attached below properly has the margins working
in Portrait mode. The margin is contained in an object called
settings. The behavior is that the top and bottom...
|
by: Ned |
last post by:
I am having trouble with a layout that I am trying to convert from
table based layout to css based layout. I have included source code
for a stripped down version.
The problem is that when the...
|
by: Linda Antonsson |
last post by:
Hi,
I am trying to put together a CSS-based layout consisting of a header, a
sidebar and a main content area.
Page: http://www.westeros.org/ASoWS/
CSS:...
|
by: lkrubner |
last post by:
Am I wrong, or do paragraphs have extra space on top in FireFox, when
compared to Microsoft IE. The top of this page is an example:
http://www.publicdomainsoftware.org/index.php?pageId=299
The...
|
by: typingcat |
last post by:
First, thank you for my previous post.
But I'm afraid that I've returned with a more picky question.
http://cat3.dotnet29.hostbasket.com/korean/
This page looks as I intended on Microsoft...
|
by: JB |
last post by:
Hi All,
This is doing my head in! Please help.
I've built a simple <ul> to serve as a menu for a page I'm working on. I
have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and...
|
by: arteccentrix |
last post by:
Please bear with me as I am new to both Firefox and CSS. I have browsed
through a number of groups looking for similar problems to my own but
can't find a definitive answer. If anyone here can help...
|
by: terrybali |
last post by:
Hi Guys
I am new to forum and nontechnical.
My site has several large flash files.
I am looking for someone who can help us solve two problems.
Willing to pay whatever normal rate is for this...
|
by: Bouzy |
last post by:
I have a problem that I know gets asked about a lot. Its how my page differs in IE vrs. Firefox. I know IE sucks, but hears whats going on.
IE......
|
by: luftikus143 |
last post by:
Hi there,
I recently upgraded to Firefox 3 and suddenly my Ajax.Updater doesn't work anymore. Firefox gives me a "Security Error"... I am using the recent versions of prototype and script.xx.us.
...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
