FireFox not obeying my margins??

Could someone point out what my problem is here http://www.wallpaperladyandmore.com

Its fine in IE, but in FF the margin height above my <h1> title is pushing the box down instead of just the text??

 

Collapsing margins ?
http://www.search-this.com/2007/03/12/no-margin-for-error
Use
margin-top:0px;
padding-top:30px;
for h1

 

The problem is your positioning of the menu - notice how the 'gap' is the exact same height as your menu?

Position:relative; bottom:0; certainly does move the content up the page by the specification - UNFORTUNATELY by the spec it also does NOT change the 'flow' box... You moved the contents, not the container (if that makes any sense)

The solution is to declare the height, then use margin-top to move it up so that 'flow' changes with it.

On top of which you have two extra containers in the header ALONE that you don't need, are applying borders which aren't visible, etc, etc.

You could probably get by with just:
[/code]
.Navigation {
position:relative;
margin:-30px auto 0;
padding:0;
width:680px;
height:30px;
border:1px solid #EBE9DE;
border-bottom:none;
background:#EDCACF;
list-style:none;
font:bold 12px/30px arial,helvetica,sans-serif;
text-align:center;
}

.Navigation li {
display: inline;
margin:0;
padding:0;
}

.Navigation li a {
margin:0 20px;
text-decoration:none;
color:#027AC6;
}


.Navigation li a:hover,
.Navigation a:active {
text-decoration: underline;
}
[/code]

assigining .Navigation to the UL and getting rid of that extra DIV wrapper.

You've got a LOT of unneccessary DIV's in there - hang on I'll toss together a rework.

 

Actually the gap is the same height as the margin-top for my h1. If i set that margin to 0 the gap is gone, but I have no spacing above the h1 text. If i set the margin-top for h1 to 200px the gap grows to 200.

So FF is using the margin-top for h1 but is applying it outside the div? weird.

Will try the margin 0, padding 30 and see if that fixes it.

Yeah, I may have some un-needed divs. This is CSS layout site #4 or 5 for me. Still struggling with the pains of IE vs FF.

 

Nope, thats not working. I loose the gap but can't get any spacing for h1. seems to be ignoring the padding

EDIT : Woops, It does Work!

I just forgot my ; at the end of the padding line

Thank you Dan

 

Actually, Dan_A was correct - I missed that margin-top which is pushing the container's rendering box down.

-- edit -- man, this board SO needs a 'people have posted since you typed your response' page.

 

Actually there is one. Click your User CP link. It displays all the threads you subscribed to that have had posts since you last visited. If you post in a thread your automatically subscribed to it, or you can subscribe to a thread you have not posted in.

 

For #4 or #5 then, you are doing REALLY well and seem to have grasped a lot of the 'basics' fairly quickly... and you've got fairly good code indenting habits already in place which is a welcome sight given the code some other people have been known to vomit up.

One of the keys to good markup though is to always ask yourself "does this container do anything I cannot apply to the tag inside it?"

I'm seeing some centering problems too alongside your original issue - most of it seeming to stem from your declaring width on a lot of elements that don't need it declared. With a fixed-width layout if you just put everything in a single DIV, you can remove MOST of those extra's.

Here's a free lesson on how I'd approach coding that page.

I always lay out the content first WITHOUT worrying about appearance. I just mark up the sections in semantic code with NO inline presentation.

First off, we'll wrap all the page content in a container DIV - in theory what we're going to apply to that can just be applied to BODY, but IE 5.x chokes on that so we'll use a DIV.

You really should only have one H1 per page - it's the page header underwhich all other headers go... as such it should probably be where your header is - so we're talking an image replacement technique. It should include the full text that's up there, and I'd mark the phone number as separate with a EM.

<h1>Wallpaper Lady & More - <em>(503) 691-2781</em><span></span></h1>

That span will be our image, which we'll 'ride up' over our content when we get to the CSS.

All the other headers should therin be dropped to H2's and H3's... realistically you only have two that should be H2's, the one at the start of content, and the one in the footer as 'content' wise those are the two siblings. Remember the purpose of headers is to mark the beginning of a section and it's subsections - NOT to give emphasis or appear a certain way. (appearance is CSS department)

Again, the menu's UL can just be dropped right in.

Next up is the 'content area' - this does warrant ONE container... you've got three.

Big text would be a H2, and the only H2 inside the content DIV

Next is a subsection, so H3 - then are the three images. Are three images a paragraph? No, they are not. That should be a div with a class, NOT a paragraph with styling inlined. Remember, any use of inline styles like "Center" or FONT tags has NO PLACE in a CSS layout. We should also be ditching the 'border=0' since we can hit that ONCE in the CSS.

Next is a paragraph of text, which you did as it should.

The next section looks more like it's a sibling to the above area, not a child - as such that should be the same level header as the one before it, an H3. (you had H2, H3 - I'm saying H3, H3) - will also save us some CSS since the two are styled identically. (which is usually also a good indicator of siblings)

Flat UL, nothing wrong with that.

The contact box is a bit tricky because you have it filled 90%+ with headers. I know you want that text to be important, but those H1's are going to rank as important as the site title, which is NOT exactly SEO friendly. Really this should be a H3, just drop the text in because there isn't enough content to warrant a paragraph mark, and a DIV for styling the phone number. Is the phone number the header to a section of text? No it is not. That get's a div. Header -> Content.

<div class="contact">
	<h3>Contact Us Today for a FREE Estimate</h3>
	Email Us through our <a href="contact.html">Contact Form</a><br />
	or Call
	<div class="phonenumber">(503) 691-2781</div>
</div>

Code (markup):

Next another paragraph, nothing wrong there.

But a job title and name does NOT equal a paragraph, that's a standout - which means a div with a class.

The next one is not too bad, but since all your text is strong, just style it that way with CSS and save yourself some code... you also are closing a strong tag that isn't open... and frankly - that strong colored text SHOULD be a header for this section.

It too is kin to what came before it - Oh, and you REALLY should include some alt text on your images.

<div class="ccb">
	<img src="http://wallpaperladyandmore.com/resources/ccb_logo-no_text-00204e_no-background62.gif"
		width="62" height="62" 
		alt="Oregon Construction Contractors Board (CCB) No. 154005"
	/>
	<h3>LICENSED - BONDED - INSURED</h3>
	Oregon Construction Contractors Board (CCB) No. 154005
</div>	

Code (markup):

At this point we've covered your page content, so we'll close the content DIV and start the footer. Because we just closed the DIV that starts with a H2, we can now use the H2 again in the footer.

<div id="footer">
	<h2>
		WALLPAPER LADY &amp; MORE CORPORATION (2007) Portland, OR<br />
		<a href="http://www.wallpaperladyandmore.com">Portland Painting Contractor</a>
	</h2>
	<a href="http://www.contractorsandtrades.com">Web Design & Internet Marketing</a> 
	by contractorsandtrades.com
</div>

Code (markup):

YES, I'd make that whole thing the H2, then use the anchor to style the larger text. A good rule of thumb is that when you use a header, you are starting a section - usually if I use a header I've just opened a DIV before it, and don't close the div until AFTER the content that header is for.

In fact, I'd go back and wrap the H3 sections that aren't in DIV's in DIV's... we'll use a simple class like 'infobox' - even if we don't use it, it marks the sections each header covers.

Net result is 4161 bytes where you had 5344 bytes of code. 1.2k savings isn't a lot, but it is still a 22% reduction in code.

... to be continued

 

... continued

Now for the CSS - I always start my CSS with nulling all margins and padding with the universal selector. It gives a nice even baseline from which everything else can be styled... We'll also nix image borders.

* {
	margin:0;
	padding:0;
}

img {
	border:none;
}

Code (markup):

Next up is the body tag. I always set my default font size here so I don't have to play with it later - in this case we'll go with 85% which is roughly equal to the 11pt you were using. This layout does not appear to rely on the render heights so % is safe to use. We'll set a 140% line-height which will space the text quite nicely... set our default font color, and the background. To simplify header generation we'll attach that background-image here top left repeat-x.

We will also declare text-align:center; so that IE 5.x will actually CENTER the fixed width layout.

body {
	font:normal 85%/140% helvetica,arial,sans-serif;
	color:#333;
	background:#FEFCF1 url(images/header_tile.png) top left repeat-x;
	text-align:center; /* IE 5x centering */
}

Code (markup):

Notice that I declare my font settings on one line - it's less code and fairly easy to remember it's

font: properties font-size/line-height font-family

so

font:bold italic 12pt/16pt times,serif;

is the same as

font-weight:bold;
font-style:italic;
font-size:12pt;
line-height:16pt;
font-family:times,serif;

Which you can see is a heck of a lot less code - Oh, and I highly recommend ALWAYS stating your line-heights as the default between browsers is NOT a reliable number ranging anywhere from 1.1 to 1.3 (though the specification says it should be anywhere from 1.0 to 1.2)

We'll also hit the anchors globally - I noticed you were styling each of them with properties that were the default behavior, and in some cases making redundant/unneccessary declarations. Remember that styles inherit and can be overloaded - as such:

a {
	color: #AE3719;
}

a:visited {
	color:#68A;
}


a:hover,
a:active {
	color:#027ac6;
}

Code (markup):

is probably the best way of doing it. Notice I changed the color for visited - people do like to see where they've gone. I've also added a active state, that way keyboard navigators aren't left out in the cold if their browser doesn't do it's own highlighting.

next up is our container... We'll set our width here once and NEVER have to worry about setting it anywhere else in our code... we'll do the margin:0 auto; so that it centers in browsers other than IE 5.x, and we'll UNDO the IE 5.x centering so that our content has the default behavior of text-align:left. We'll also toss some padding on the bottom just to make it pretty.

#container {
	width:684px;
	margin:0 auto;
	padding-bottom:20px;
	text-align:left; /* return to normal after IE fix */
}

Code (markup):

On to the H1 - as the only h1 on the page we don't need classes... It's going to be our logo image, but we also want text to show if images are turned off. (see, there's a method to my madness) - as such we are using a 'image replacemnt technique'.

First, we set 2px padding to make sure our 680px image is centered equal to the border-width of the content. We align the text center, set the EM to display:block to set it on it's own line... very important here is the use of PX fonts and px line-heights - because next we set our span to display:block, set it's height to 180px, and give it a negative top-margin equal to the combined line-heights of our two lines of text. Rounding errors in PT and %/EM fonts can cause this method to break, so px it is. This 'slides' our image up over the content. Position:relative is added to set it's depth sorting to a higher priority than it's siblings - as such we don't even need to muss with a z-index.

Notice no widths are declared - block level elements default to the width of your container minus any borders and padding... so we don't need to even worry about those!

h1 {
	font:bold 32px/48px helvetica,arial,sans-serif;
	height:180px;
	text-align:center;
	padding:0 2px; /* make up for border on other elements */
}

h1 em {
	display:block;
	font:normal 14px/16px helvetica,arial,sans-serif;
}

h1 span {
	display:block;
	height:180px;
	margin-top:-64px;
	position:relative;
	background:url(images/logo.jpg) top left no-repeat;
}

Code (markup):

Next is the menu. First thing we do is the list-style:none, and set the height just as you did. If we set text-align:center once here, we don't need to do it again for the menu. You'll notice the border declaration - because CSS properties override each-other, the further down the source the more likely it is to take precidance, we can set all four borders to your 1px color, then unset the bottom one. This is a HUGE savings in code.

Notice the lack of top/bottom padding on any of the elements, this is because once again we set our line-height equal to the height of our container centering the text top to bottom. WAY simpler to implement.

I also went with a slightly larger font than you did - because 12px is damned near illegible on higher resolution machines - we need to use PX there because of the aforementioned line-height issues in metrics with lower granularity and rounding errors, and because we want px to account for the 1px border-top.

Again we have the negative margin-top and position:relative, in this case 31 px, the height of our box PLUS the height of our border. Using a negative margin instead of position:relative avoids flow errors you get with position:relative top/bottom.

We also make use of that same anchor styling technique.

#menu {
	list-style:none;
	height:30px;
	text-align:center;
	border:1px solid #FEFCF1;
	border-bottom:none;
	background:#EDCACF;
	font:bold 14px/30px helvetica,arial,sans-serif;
	position:relative;
	margin-top:-31px;
}

#menu li {
	display:inline;
}

#menu a {
	margin:0 20px;
	text-decoration:none;
	color:#027AC6;
}


#menu a:hover,
#menu a:active {
	text-decoration: underline;
}

Code (markup):

Next up is the actual page content... You've got 20px margins you were applying to your elements individually - since you don't want any elements to go outside that 20px, instead let's apply that as padding to #content... and rather than futzing with a top margin or padding on the H2 or footer, let's put that 30px top/bottom right here. No real surprises for background or border - though you'll notice another border declaration 'reduction' technique.

#content {
	padding:30px 20px;
	background:#FFF;
	border:solid #DDD8C4;
	border-width:0 2px;
}

Code (markup):

The H2 is next on the agenda, it gets a 180% font size. a line-height 40% over that, and a margin-bottom. While we're in here let's FIX the margin behavior of all UL's, since you do use one, and we'll set it to circle here too.

#content h2 {
	font:normal 180%/140% helvetica,arial,sans-serif;
	color:#AE3719;
	margin-bottom:15px;
}

#content ul {
	margin:0 0 15px 4em;
	list-style:circle;
}

Code (markup):

Now, I assigned the class 'infobox' - a nice generic description, to our two top sections starting with H3... So let's style it's H3's. Rather than introducing margin errors let's put padding on that nice extra DIV.

.infobox {
	padding:10px 0;
}

.infobox h3 {
	font:normal 1.3em/140% helvetica,arial,sans-serif;
	color: #027ac6;
}

Code (markup):

TECHNICALLY again that extra div is not needed to apply the style, but it helps mark what sections the headers are actually FOR. A good search spider will detect the close of the DIV and assume that content after that close is NOT under that heading.

The three images are fairly simple - we already nixed their borders up above, and images by default are a funky cousin to display:inline-block - so this is fairly simple.

.views {
	text-align:center;
	margin:15px 0;
}

Code (markup):

Everything else is already looking good until we get to the .moreinfo text, which gets a font-weight... and that's it.

.moreinfo {
	font-weight:bold;
}

Code (markup):

THEN we have the content box - it needs margins, we'll save some margin effort on it's childre by appling top/bottom padding here. The text gets centered and since all the text is bold, we'll apply that here too. We also should nab styling the header, .phonenumber and anchors while we're at it with their FAC. Done right, we don't even need to add any padding or margins to them.

.contact {
	margin:15px 30px 25px;
	padding:10px 0;
	color:#FFF;
	background:#BA1446;
	text-align:center;
	font-weight:bold;
}

.contact h3,
.contact .phonenumber {
	font:bold 160%/140% helvetica,arial,sans-serif;
	color:#FDF3CC;
}

.contact a {
	color:#FDF3CC;
}

.contact a:active,
.contact a:hover {
	color:#F46520;
}

Code (markup):

We come to the text I marked as 'owneroperator' - bold, center, underline, margins top and bottom.

.owneroperator {
	text-align:center;
	font-weight:bold;
	text-decoration:underline;
	margin:15px 0px;
}

Code (markup):

and the contractors board - instead of putting the align="left" this is presentation, it should be in the CSS, not the html. We'll give it left and right margins to narrow it, but we don't need to bother with top or bottom as the other elements around it already have margins and/or padding on them. We WILL give it top and bottom padding to space it from the top and bottom border that's set, and we'll set it to overflow:auto so it pays attention to the height of the floated image.

We'll also pad out the image to space it as you did, and style the H3 - You might have to play with that margin-top to center it for small fonts - I only tested on large fonts and as such didn't 'play with it' as much as I should have.

.ccb {
	margin:0 30px;
	padding:15px 0;
	overflow:auto;
	border:solid #DDD8C4;
	border-width:2px 0;
}

.ccb img {
	float:left;
	padding:0 15px 0 45px;
}

 .ccb h3 {
	font:bold 100%/140% helvetica,arial,sans-serif;
	color:#F46520;
	margin-top:10px;
}

Code (markup):

meaning the only thing left to style is the footer. Because we closed the content area we'll need to apply not just the bottom border, but the side borders as well, omitting the top - again declare all sides then undeclaring the top is fastest. The rest of this is all just padding and spacing, though we do play a display:block trick with the anchor inside the H2.

#footer {
	background:#FFF;
	border:solid #DDD8C4;
	border-width:0 2px 2px;
	padding:0px 20px 30px;
	text-align:center;
	font-size:85%;
}

#footer h2 {
	font-size:100%;
}

#footer h2 a {
	display:block;
	font-size:140%;
	margin:5px 0 30px;
}

Code (markup):

and that's it. Works out to 2,786 bytes of CSS where you had 9,261 bytes... Most of that is things like border and padding reduction, but a lot of it can be attributed to you overthinking your solutions to a lot of layout issues - which is why you were having cross browser issues.

I'm not saying that's a bad thing, you are just starting out and it takes a while to learn all this.

You can see it live here:
http://battletech.hopto.org/for_others/axemedia/template.html

the directory:
http://battletech.hopto.org/for_others/axemedia

is unlocked - I resaved your images with a touch of image optimization, gave them new filenames so as to not get them confused - chops another 45k off the page.

Page tested as 100% working in IE 6 & 7, FF, Opera, Safari. It also works with a couple minor glitches in IE 5.5, but IE 5.2 Mac chokes on the negative margins in the header. You could get around that by using absolute positioning if you actually care about IE 5.2 mac - but to be brutally honest we need to stop coding pages to support a browser Microsoft stopped supporting five years ago. NS4 has gotten the axe, now that IE7 has been out for half a year it's IE5's time to meet the executioner.

Oh, and it also validates XHTML 1.0 Strict - and apart from the IE 5.x centering trick there's not a browser specific hack in sight for any of the 'modern' browsers.

... and if you are wondering why I took the time, I'm in the process of writing several tutorials, possibly a full article on the subject - so I'm doing several dry runs with other people's sites in here.

Working on other people's layouts has the advantage that quite often they try to do things you'd never try yourself - meaning you can learn while teaching.

 

That's not what I mean... In SMF (the forum system I prefer) if people respond while you are typing your reply, when you hit submit it says "People have replied while you were typing your post - you may wish to review your post" and throws you back to the edit page WITHOUT adding your post.

I kind of got spoiled by that one... which has nothing to do with subscribed threads whatsoever.

 

And for the record, deathshadow's template loaded in a smooth 20 seconds on my 56k dialup connection using Opera 9.21 for Windows.

 

deathshadow, wow thanks for the lesson. It clears a lot of things up for me.

In those few sites I've done so far, I started with ripping someone else's code from a random site I liked and just experimented with altering the style sheet.

This one is the first one where I actually wrote all the page markup by hand.

I've been butchering the same stylesheet, adding/subtracting things as I need, and a lot of trial and error. Now you've showed me the light on where to start with the stylesheet. Awsome.

 

I used to think that IE was always fine and it was FF that was at fault, but then I found out that FF is fully standards complient and IE does whatever it wants.

acording to my webstats though only 3% of visitors are using FF.

what to do.

 

Actually, Firefox is not fully standards compliant. The sad truth is that no browser (not even Opera and Safari) completely support the standards. Also, IE "will do whatever it wants" only if you let it. If you use a complete and valid DOCTYPE, collapse your margins and padding, collapse your table borders, fix the table's layout (table-layout: fixed; ) and use the bare minimum of HTML code necessary to define the structure of your Web page (header, menu, content, sidebars, footer IN THAT ORDER) then use CSS to present that structure in the manner you have selected, IE will generally behave.

And yes, unless you're going for a 100% document height, need to support PNG alpha transparency, :hover on all elements (not just anchors), or min/max-width/height, you can generally get by without hacking for IE 5/6 with a little bit of experience.

 

That's heartening to hear. My problem when making a new page is, okay I need this, that, and that, and then start writing, then come up to a point where I'm like, okay, how do I do this part? And whatever I think of is usually contrived and roundabout, causing errors or some browser or other puking, so then I search online for something specific (like horizontal navbars) and find 100 pages that are all a little different and still give me trouble. I know that "there is more than one way to do it," but that's my downfall. I need less options, not more, because I always pick the wrong one.

Hopefully, watching people redo other people's sites will get me in the right frame of mind.

deathshadow, will your tutorial be posted on your battlegrounds site?

 

you could try a an empty div at the end of your page with a clear command in the css styles to help pull the whole page downf or firefox to read