3 replies [Last post]
weatherbe
weatherbe's picture
Offline
newbie
Colorado
Last seen: 5 years 23 weeks ago
Colorado
Timezone: GMT-6
Joined: 2014-07-03
Posts: 2
Points: 3

Hi all,

I am not new to CSS, but I am always looking for ways to increase my knowledge. Even though I know that html5 is the new craze, I am still working with XHTML. The code in question is based on XHTML/CSS. It does validate on both ends. The issue revolves around margin-top. I use it constantly and understand its parameters. My issue is that I found an inconsistency with this css command that I have not been able to figure out.

This code is coming from the book "CSS, The Missing Manual." I emailed the author of the book but so far I have not heard back from him so that is why I am hopeful the experts here can solve this mystery.

There are two margin-top commands for this particular book example. The margin-top in question not only moves the space down, regarding the sidebar, but for some strange reason also moves the down the wrapped around section (left of the sidebar) which as you will see has its own margin-top code. Based on the author's explanation, each margin-top command is supposed to work with the the DIV it is directed at.

The specific codes in question sit in the CSS external style sheet. The first one and the main one in question is:

#banner {
  margin-top: 48px;
}

This would be directed at the sidebar DIV and would move that section down 48 pixels. The second margin-top code is for the left section of the page, the part that wraps around left of the sidebar. It moves that section down 115 pixels. The code is as follows in the external CSS stylesheet:

#announcement {
  margin-top: 115px;
 }

This would be directed at the wrapped around section of the page.

As mentioned even though the author states that each different margin-top code is directed at the specific DIV, the sidebar margin top code also drops the wrapped around section down as well. I have gone through every scenario possible and can't figure out why that would be. These are two separate DIV's with their own specific CCS code directed at them. If that's the case, why does the #banner margin top code affect its section as well as the #announcement section? This section gets moved not only by #announcement margin-top but also by #banner margin-top.

Below you will find the external style sheet code followed by the XHTML code:

________________________________________________
The full external CSS code is as follows:

/* reset css */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
/* end reset */
 
 
body {
  background-image: url(images/bg_page.png);
  background-repeat:repeat-x;
}
 
 
#wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
  overflow: hidden; /* contain float */
  background-color: white; 
  background-image: url(images/bg_main.jpg);
  background-position: top left;
  background-repeat: no-repeat;
}
 
#banner {
  margin-top: 48px;
}
 
#main {
	float: right;
	width: 565px;
	margin-right: 15px;
	padding-top: 25px;
}
 
* html #main {
  display:inline; /* ie 6 double margin bug */
}
#announcement {
	margin-right: 600px;
	margin-left: 20px;
	background: url(images/scroll_middle.jpg) repeat-y center top;
	margin-top: 115px;
}
 
#copyright {
	clear: both;
	font: bold 12px Tahoma, Geneva, sans-serif;
	color: #65747E;
	padding: 5px;
  margin: 0 15px;
	border: 1px dotted #98AFBE;
  border-left: none;
  border-right: none;
}
 
 
#banner h1 {
	font: normal 48px Georgia, "Times New Roman", Times, serif;
	text-align: right;
  color: #272D32;
}
 
#main h2 {
	font: 24px Tahoma, Geneva, sans-serif;
	margin-bottom: 15px;
	font-family: Tahoma, Geneva, sans-serif;
  background-image: url(images/underline.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 7px;
}
 
#main p {
	font: 14px Tahoma, Geneva, sans-serif;
	color: #323A3F;
	margin-bottom: 20px;
	font-family: Tahoma, Geneva, sans-serif;
}
 
#announcement h2 {
	font: italic bold normal 20px Georgia, "Times New Roman", Times, serif;
	text-align: center;
	color: #323A3F;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 18px;
  background: url(images/scroll_top.jpg) no-repeat center top;
	padding-top: 70px;
}
 
#announcement ul {
	font: 14px Tahoma, Geneva, sans-serif;
}
 
#announcement li {
	list-style: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  background-position: 0 4px;
  padding-left: 25px; 
  margin-bottom: 10px;
	margin-left: 30px;
	padding-right: 40px;
}
 
 
 
#announcement .last {
	background: url(images/scroll_bottom.jpg) no-repeat center bottom;
	padding-bottom: 65px;
}

________________________________________________

Below is the full XHTML 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Background Images</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>CSS: The Missing Manual</h1>
</div>
<div id="main">
<h2>Lorem Ipsum Dolor Sat</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Nisi Ut Aliquid</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div id="announcement">
<h2>Announcements</h2>
<ul class="last">
<li>Lorem Ipsum Dolor Sat</li>
<li>Quis nostrum exercitationem ullam</li>
<li>Eius modi tempora incidunt</li>
<li>Quis autem vel eum iure reprehenderit</li>
<li> Sed quia non numquam eius modi tempora incidu</li>
<li>Nemo enim ipsam voluptate</li>
 
</ul>
</div>
<div id="copyright">
<p>Copyright 2010, Lorem Ipsum Corporation</p>
</div>
</div>
</body>
</html>

________________________________________________

Thank you to anyone who can clear up this mystery for me.

I really appreciate any and all feedback.

Sincerely,
Greg

[added code tags]

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Margin collapse

You have bumped your nose against margin collapse. Note the following:

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  html, body {
    font: normal 100%/125% sans-serif;
    margin: 0;
    padding: 0;
    }
 
  p {
    background-color: yellow;
    font-size: 1em;
    margin: 1.25em 0;
    }
 
div {
    background-color: lightblue;
    margin: 0 1.25em;
    }
 
.mc-test {
    float: left;
    }
 
.control {
    /*overflow: auto;*/
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
<div class="mc-test">
  <p>whoopty-doo</p>
  </div>
<div class="mc-test">
  <p>whoopty-doo</p>
  </div>
<div class="control">
  <p>whoopty-doo</p>
  </div>
</body>
</html>

The float elements provide a new block formatting context. That means, in a non-technical sense, that the elements know what's inside and outside of themselves. The basic div in the example doesn't, and margins inside it (the divs don't have margins) collapse through the edge of the parent.

Now, uncomment the overflow property on the .control div and watch the margins uncollapse.

See Meyer on collapsing margins for a more technical explanation.

Speaking of Meyer, get rid of that silliness called a reset. Explanation is here. Those resets reset the standards for ugly. Don't use them.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

weatherbe
weatherbe's picture
Offline
newbie
Colorado
Last seen: 5 years 23 weeks ago
Colorado
Timezone: GMT-6
Joined: 2014-07-03
Posts: 2
Points: 3

Hi Gary, thank you very much

Hi Gary, thank you very much for the explanation. Well done. This is why no matter how many years I have done this, I still have more to learn. I just wonder why the author of CSS The Missing Manual made it sound like these two very separate css rules would handle their respective Divs. It would have been nice to read your explanation so I wouldn't have as you said, "bumped my nose again margin collapse." Great analogy. It sure felt like I was bumping my head against something ... Tongue. Now I know just because a section wrapped in a Div and there is no specificity issues, there could still be an override. Nice to know that.

Regarding the margin resets, this was very new to me, and as I said, this example comes directly from the book so I was just regurgitating what he had in his book. I wanted you to see the whole code I was using. Based on the author, the different browsers have their own ways of formatting, and the resets take every browser back to ground zero, at least based on how Iunderstood his explanation. Do you not agree with this? I should say that every website I have designed never used a reset. I had never heard of it before. I will say though that in theory, it would be nice not to have to deal with the different browser inconsistencies so it would seem reset would do that. I'll read the link you gave me on resets. Happy to read that, and would love your further take on resets if you have the time.

Really appreciate your help with my problem Gary. I have heard wonderful things about this forum. Now I see why.

Hope you are having a great weekend!

All the best,
Greg

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Re resets

Resets are simply make-work that provide nothing useful. First, tell me which elements have different default style property values. The majors have pretty much converged over the years. Even where they were different, it didn't make much difference; IE and Opera had padding on html, while Firefox and Safari had margin on body. Both were 8px. Same type thing with how hr was constructed. UL and ol set their indentions differently, IE/Opera once used margin while Firefox/Safari use padding. In either case, the indention is 40px. Only if you wanted to change the values did it matter.

If you want values different from the defaults, set them to the values you want. There is no sane reason for doing a hop and a skip to get back to where you want to be, anyway.

The browsers' default values provide a safe failover. Should you not set your own preferred value, sane values are provided. Contrarily, consider what happens if you fail to override the global reset. It's not pretty, and in some cases it's not caught until the client happens onto the wrong page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.