[WSG] Mystery Margin or Padding in FF and IE
Hello All - I'm developing a new framework for my projects and have come across something I can't get rid of. Go here: http://www.koisis.com/.framework/-public/index.php If you look at the purple float that contains a beige main content area, you'll see that the beige content area is being pushed down about 25px for some reason in FF. In IE 6 and IE 7 the same phenomena also happens, but it happens at the TOP of the beige content area itself. I've gone over and over the css and can't see where I'm going wrong here - have also run the site through the W3C Validator but that service says everything's valid. Can anyone else see the error of my ways? Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***attachment: winmail.dat
Re: [WSG] Mystery Margin or Padding in FF and IE
In your CSS (
http://www.koisis.com/.framework/-public/assets/css/c.project_display.css)
you got this line:
*#contentMain h1
{
margin: 25px 0 10px 0;
}*
h1 margin (h1 is the first element in main area) is that mystery margin.
That's how CSS works. I guess somebody can find it in W3C site.
С уважением,
Юрий akella Артюх,
http://cssing.org.ua,
On Mon, Aug 25, 2008 at 12:34 PM, Cole Kuryakin [EMAIL PROTECTED] wrote:
Hello All -
I'm developing a new framework for my projects and have come across
something I can't get rid of.
Go here: http://www.koisis.com/.framework/-public/index.php
If you look at the purple float that contains a beige main content area,
you'll see that the beige content area is being pushed down about 25px for
some reason in FF. In IE 6 and IE 7 the same phenomena also happens, but it
happens at the TOP of the beige content area itself.
I've gone over and over the css and can't see where I'm going wrong here -
have also run the site through the W3C Validator but that service says
everything's valid.
Can anyone else see the error of my ways?
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Mystery Margin or Padding in FF and IE
Cole Kuryakin wrote:
Hello All -
I'm developing a new framework for my projects and have come across
something I can't get rid of.
Go here: http://www.koisis.com/.framework/-public/index.php
If you look at the purple float that contains a beige main content
area, you'll see that the beige content area is being pushed down
about 25px for some reason in FF. In IE 6 and IE 7 the same phenomena
also happens, but it happens at the TOP of the beige content area
itself.
The top margin you've declared on h1...
#contentMain h1 {margin: 25px 0 10px 0;}
...is escaping #contentMain and ends up on top of it in compliant
browsers. That's correct behavior AFAICS...
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
IE6/7 OTOH are containing h1's margin because of the 'hasLayout'
triggering...
#contentMain {width: 550px;
...you've declared in there. That's not correct but not much you can do
about it.
One way to solve it is to have zero margin-top on that h1, and use on it
padding-top instead.
Another way is to contain the margin-top by declaring...
#contentMain {float: left; display: inline;}
...which all browsers will agree on, and thereafter adjust h1's
margin-top to taste.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
