Why do browsers treat margin differently?

HTML & CSS
1

Hi - I have this in my css:

#header{width:100%;margin-bottom:30px;}

opera, IE & Safari ignore it. They display this (no 30px margin below the menu that should be there)

while FF & chrome correctly display the 30px margin like this:

Is there a way to tell the first three browsers to behave themselves? Or have I done something wrong?

thanks! - Val

2

Whether youā€™re aware of it or not, every browser has its own built-in stylesheet that it will use if it doesnā€™t get overridden by your own CSS. These can be negated by using a CSS reset, such as this one from Eric Meyer - http://meyerweb.com/eric/tools/css/reset/

Given that three browsers, are ignoring what youā€™ve done, Iā€™d check in the dev tools for each to see what CSS is being applied. Iā€™d suggest that something in there is being seen as having a greater level of specificity than you own code, itā€™s then a case of working out what that is.

3

In addition to chrisofarabia:
There are a lot of great CSS-Resets out there and personally I like this one (it is more modern and made by using Eric Meyers) the most, but do not forget:

this is a starting point, not a self-contained black box of no-touchiness.
~ Eric Meyer

2 Likes
4

I knew I missed something out of my reply.

5

Most likely you have done something wrong because modern browsers are pretty consistent in the way they handle margins assuming that you arenā€™t relying on the defaults as mentioned above.

I checked in IE11 and Firefox and they are both observing the margin correctly. If you are talking about an old browser like IE8 (Safari PC is dead destroy it now) then it seems you donā€™t have the html shiv in place for IE8 to recognise the new html5 elements that you are using (). IE8 will not apply any styling to that element as it knows nothing about it.

You need the html5 shiv and then set the element to display:block.

<!-- the next script is the html5shiv and for media query support in IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You are still using the old html4 doctype anyway so you should have stuck to using divs or upgrade to the html5 doctype and use the new elements with the shive and a suitable reset.

6

Hi all - thanks for your feedback. I fixed the problem by removing the margin-bottom from header, and adding it to menu. Then it displays ok across all browsers.

Hi Paul - thank you! Youā€™re right, it doesnā€™t make sense to use html4 any more. Am I right in understanding your advice is:

(1) change this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to this:

<!DOCTYPE html>

And somewhere inside <head> add this:

<!-- the next script is the html5shiv and for media query support in IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I say ā€œsomewhere insideā€ because my header.php begins with doctype and ends with a meta property, then in each individual file it continues with more metaā€™s (e.g. the ogā€™s unique to that file) and </head> ends in the individual file template, not in the header template.

So my idea is to add the html5shiv to header.php template. Is that ok? Itā€™ll end up looking something like this:

<head>
<meta charset...
etc meta's
<!-- the next script is the html5shiv and for media query support in IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--that's the end of header.php and now begins the individual file.php-->
<link rel="canonical" ...
<meta <meta property="og:url" ... etc bunch of meta og's
<?php wp_head(); ?>
</head>

Itā€™s not a wordperfect page but I call the wp environment so as to use a wp plugin (ajax testimonials).

you should have stuck to using divs

you mean instead of the css tables?

or upgrade to the html5 doctype and use the new elements with the shive and a suitable reset.

(2) Yes Iā€™ll do that! Can you confirm itā€™s ok to stick the shiv anywhere inside <head>?

(3) What does ā€œa suitable resetā€ mean? Is that the display:block? Iā€™m scared to add that to #header, so that instead of this:

#header{width:100%;}

it becomes:

#header{width:100%;display block;}

The file.php template is:

<header id="header" role="banner"><?php include("$rpath/1cde/head.php"); ?></header>

and head.php has all the css table stuff with logo, fontawesome icons, subscribe form, postit image, and then the non-table #menu. Iā€™m scared to set all that to display:block, in case it messes with tables which have their own display rules.

I feel more comfortable just moving the margin-bottom away from #header and down to #menu. And leaving headerā€™s only rule as width:100%.

Iā€™m really grateful you brought up that doctype. Itā€™s something we all forgot when making the template responsive.

thank you! - Val

7

Val, if your header.php includes all the <head> section, how do you give each page a unique TITLE?

8

Hi - no it doesnā€™t. Thatā€™s why I was asking Paul if itā€™s ok to have the shiv anywhere inside <head>. Header.php has half of the <head> (like stylesheet) then the rest of the <head> is in each individual file.php (like title). So head opens in header.php and closes in indiv-file.php.

The test page is here, although you canā€™t see from that the division of head into 2 separate files.

http://greensmoothie.com/test/1mst.php

9

Iā€™ll be interested to see Maestro Paulā€™s reply, too. This is the order that Boilerplate uses if it helps.

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
10

If you want to use the new html5 elements then yes you should use the html5 doctype although it will actually do no harm if you donā€™t (apart from validation). Of course as you are using a transitional doctype you may have validation errors if you change to the the html5 doctype anyway.

The shiv goes in the head but should follow any stylesheets. I also forgot to give you the media query script that IE8 needs. There are a couple of scripts about to patch media queries but I tend to use this one which should also follow the main css.

If you use modernizr then you donā€™t need the html5 shiv but you still do need the media query script. Modernizr provides feature detection so if you donā€™t expect to use it then just go with the html5 shiv as it is much lighter code.

11

I donā€™t know what those are! Iā€™m guessing css tables is oneā€¦ Anyway it just feels right to have the same doctype as those pages on the site that are in wordpress.

This shiv thing now is getting too complicated for me. Iā€™m gonna leave it out altogether. IE8 can go to pot.

Iā€™m grateful you inspired me to dump that old doctype!

thanks million, Val

12

No CS has nothing to do with html5 at all :smile:

html5 is mark up elements such as the ā€˜headerā€™ element that you are already using and giving you the problem in IE8 as I already mentioned. The other new html5 elements are listed here.

13

Thereā€™s nothing complicated about it. Just include it in the head after the css and forget about it. Same for the media query script.

14

hahaha - youā€™ve forgotten thereā€™s only one pea in my brain. I havenā€™t the faintest idea what that page is saying (let alone what Iā€™m supposed to extract from it & add to my css). It seems to be about IE8 being responsive and Iā€™m sure 99% of mobile phones & tablets couldnā€™t give a hoot about ie8 and will work just fine without shiv. So now I can go back to protecting my pea (and my header.php) without shivā€¦

15

No CS has nothing to do with html5 at all

I just realized what youā€™re saying to me. Youā€™re saying thereā€™s something new in there thatā€™s html5. Thereā€™s only 2 new things I see:

<header id="header"...
<nav id="menu"...

So all I need do is this:

<div id="header"...
<div id="menu"...

and then ie8 will recognize the #header? I want it to see the width:100%.

But if thatā€™s the case, does that mean IE8 is not seeing the dropdown menu & its hamburger? Since it doesnā€™t recognize <nav?

thanks, Val

16

Take a look at the CanIUse page on semantic elements - http://caniuse.com/#search=semantic

That covers all the new HTML5 semantic elements - section, article, aside, header, footer, nav, figure, figcaption, time, mark & main

It will also tell you which browsers support them - for IE, that means IE9+ and not IE8

17

Yes assuming you havenā€™t applied styles using the html5 tag name,

It wonā€™t recognise styles on nav or header but it will apply styles to inner elements it recognises.

Consider the following simple example in IE8.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
header {
	padding:25px;
	background:red;
	margin-bottom:30px
}
.test {background:blue}
.next {background:green}
</style>
</head>

<body>
<header>
		<div class="test">Testing</div>
</header>
<div class="next">Next</div>
</body>
</html>

In IE8 you will get a blue strip flush against a green strip. In other browsers the blue strip will be inside a padded red background and the green strip will be 30px away from them and not flush.

18

thanks Paul - thatā€™s really interesting! So it recognizes the ul & li styles but not the #menu! As they say, in Redmond no one can hear you screamā€¦

I donā€™t want to do that shiv jazz because it will no longer be needed in a year or two & itā€™s extra data. Iā€™m thinking just to ignore the whole thing. IE updates itself automatically doesnā€™t it? So whoā€™s likely still to be on 8?

Or do you rather advise I should change <header> and <menu> into <div>? And search through my html to see if thereā€™s any others that donā€™t begin with div & change them too, e.g. maybe thereā€™s a <footer>

19

Microsoft Edge will do that, but no version of IE ever has. Version number changes for IE were a major release, and had to be selected/installed by the user (or their admin staff), when they appeared. The only thing beyond that were patches that Microsoft released, though these were usually to address security concerns, rather than feature releases.

Whilst IE8 is now a very small (around 1%) part of whatā€™s recognised out in the wild now, IE9 through IE11, are far more prevalent.

20

thank you! Iā€™m going to stick to my fancy new <header and <nav tags then and not do the shiv :slight_smile:

I just took a look in IE tester and as Paul said, itā€™s ignoring the styling for #menu ā€“ e.g. text-align:center; is displaying the menu as left-aligned ā€“ but itā€™s picking up all the styles (+ links) for ul & liā€™s inside the menu.

Even when I change <nav to <div it still displays menu on the left. IE7 is even worse! Looks a real mess. But since only 1% are still using that old junk, Iā€™m going to ignore them.