CSS - Can't Quite Grasp The Collapsing Margins Issue In Ie

Hi!

Could some experienced CSS developer please confirm this:

All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px).

However, bottom & top margins never combine.

Is all this true?

I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>.

Code:

html, body {
	margin:0px;
	padding:0px;
	background-image:url(images/interface/background.png);
}


#body_image {
	width:935;
	margin:0 auto;
	padding:0px;
	background-image:url(images/interface/body.png);
	background-repeat:no-repeat;
	background-position:center;
}

#container {
	width:904px;
	height:750px;
	margin:15px;
}



#slug {
	height:15px;
}

Code:

<div id="body_image">

<div id="container">
	<div id="header">Header</div>
	<div id="nav">Nav</div>
	<div id="sidebar">Sidebar</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
	


</div>
</div>

The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background.

Hi All,

This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently.

Take a look at this:
http://zeroonedesign.com/beta/newsite/index.html

CSS he
http://zeroonedesign.com/beta/newsite/style.css

Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code

Code:

#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}

#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}

#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}

#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}

#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}

Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything.

So... I have two versions of this page, one that validates, and another that doesn't. Problem is that the invalid one looks correct! This is because I got the css working before i discovered the invalid code...

The offending code involves a nested ul in my nav. The invalid, looking good version looks like this:
Code:

<ul>
li /
li /
<ul>
li /
li /
</ul>
li /
</ul>

To make it valid, I have to wrap li tags around the nested ul. I've spent gobs of time trying to figure out how to get my styles to work with this new code, but I must be missing something very simple.

Here are the urls:
invalid & valid

Here's the css:
Code:

#nav {
	width:180px;
	background-image:url(/images/moraga_logo.png);
	background-repeat:no-repeat;
	float:left	
}

#nav ul.l1 {
	width:179px;
	position:relative;
	top:100px;
	margin:0;
	padding:0;
}

#nav ul.l2 {
	width:179px;
	margin:0;
	padding:0;
}
	
#nav ul.l1 li {
	list-style:none;
	border-top:1px solid #FFFFFF;
	height:21px;
	font-family:geometric, lucida, verdana, sans-serif;
	font-size:.8125em;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:.125em;
	text-align:right
}

#nav ul.l2 li {
	text-transform:lowercase;
	border:none;
	font-size:.6875em;
}

#nav li.active a {
	color:#A22B38;
	text-decoration:none
}

#nav li.active a:hover {
	color:#FFFFFF;
	text-decoration:none
}

#nav a:link {
	color:#000000;
	text-decoration:none
}

#nav a:visited {
	color:#000000;
	text-decoration:none
}

#nav a:hover {
	color:#FFFFFF
}

#nav a:active {
	color:#000000;
	text-decoration:none
}

Thank, in advance, for your generous help!
-BBD

the contentWrapper div section collapse prematurely in mozilla, but displays fine in IE. Anyone know why?

http://www.mgan.net/work/10-06-04/layout1.html

Is there a css rule I don't understand in firefox that IE is overlooking?

This is the first site I have attempted to layout using CSS and have ran into a slight problem that I can't figure out so I am looking to the expertise of others.

I have a layout that contains a sidebar (used for sub-nav) and a content area all inside of a wrapper. When there is content in the sidebar all is fine in IE and Firefox; however when I include no content in the sidebar IE looks fine but Firefox collapses the space where the sidebar was and begins the content there.

Here are some of the links;
Appearing correctly due to content in sidebar:
http://www.jaycutler.com/Eumyotheria/the_program/the_program_index.html

Appearing incorrectly due to no content in sidebar:
http://www.jaycutler.com/Eumyotheria/contact/contact.html

The CSS file can be found he
http://www.jaycutler.com/Eumyotheria/css/stylesheet.css

Any advice that can be offered would be greatly appreciated.
Thank you for your time,
Brian

Hi

I have site where I am forced to set my content div <div id="content"> min-height with jquery on each page.Site Link
This is because the content div keeps collapsing and ignoring the content it has. Can someone teach me how to fix this please.

Hi. Please see the code below. I basically have a two column layout placed inside a container div(id="productDiv"). Each column is floated left, followed by an empty div that is set to clear:both. However, the productDiv collapses over the floated divs in Mozilla.
It works as expected in IE. If I place a border on productDiv, it will expand as desired. This seems like buggy behavior for Mozilla. Has anyone ever seen this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Testpage</title>
		<style type="text/css">
				body{
					background-color: #eeeeee;
					color: #000000;
					margin: 20px auto auto auto;
				}

				#content{
					position: relative;
					background-color: #ECEADD;
					font-size: 8pt;
					padding: 0;
				}


				#productDiv{
					position:relative;
					margin-left: 12em;
					background-color: #00ff00;
					/*border: 1px solid black;*/
					padding:0;
				}



				#category{
					position:relative;
					color:#000000; 
					font-size: 18pt;
					margin: .5em 0 .5em 0;
				}

				#productInfoLeftCol{
					position: relative;
					float: left;
				}

				#productImage{
					position: relative;
					height: 360px;
					width: 310px;
					display:block;


				}

				#productInfoRightCol{
					position:relative;
					float: left;
					margin-left: 1em;

				}



				.clearer{
					clear:both;
				}


		</style>
    </head>
	     <body>

				<div id="content">				
					<div id="productDiv">
						<h2 id="category">Category</h2>						
						<div id="productInfoLeftCol">
							<img id="productImage" src="http://www.google.com/intl/en/images/logo.gif" alt="Some Product Image"/>
							some text here
						</div>
						<div id="productInfoRightCol">
							rightcol
						</div>
						<div class="clearer"></div>
					</div>
				</div>

    </body>
</html>

Hi all,

I am trying to collapse columns on double click by changing the style visibility of a col class from visible to collapse.
Nice idea idea but it is not supported on IE and , although Firefox claims it does, with Firefox doesn't work either.
sooo, do you know of any alternative to using the collapse thingie?
'hidden' is not an option as it leaves the space of the column on the table layout.
I am checking the display prop now but I am not understanding it very well if it's a solution for me.

many thanks in advance.

I am just being scripting and have been messing with this problem for several hours and still have gotten no where at all so I was hoping for some assistance.

I am attempting to make my stacked links open upon mouseover to display all the sublinks beneath the main ones and then close one the mouse is moved away from that area. I have the main ones working, as that is easy, it is those others that have me stumped. I am using outset and inset boarders to make it appear as if a drawer is being pulled out to reveal the sub-links. Any advice would be great, thank you.

Hi, I want to make something that works like this:

dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html#

(cant post proper urls as I'm new)

Whereby each link has a number of sub-links under it, and when you click a main link, the sub links for the previous one shut and the new one opens.

But the tutorial on that site is not much help. It just gives you a load of code to copy into your editor, and when I've done that it didn't work anyway. Could someone point me in the direction of a tutorial to do this or let me know what I should be doing, as I can't seem to find anything on how to do it.

Thanks!

Hi,

I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems

1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border.

2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses

The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border.

I would appreciate any help that you might offer.

Thanks

according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that

*
{
font size: 1em;
}

h1
{
font-size: 1.5em;
margin-bottom: 1em;
}

gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting

p
{
margin-top: 1em;
}

instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably?

the only way around this i can think of is this

*
{
font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/
}

h1
{
font-size: 1.5em; /*...then this would be 15px*/
margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/
}

h2
{
font-size: 1.2em; /*12px*/
margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/
}

p
{
margin-botton: 1em;
}

Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative?