Jump to content

Margin-top Doesn't Work In Ie7!


gameboyz
 Share

Recommended Posts

The use of position: absolute on your elements is causing the page to look messed up, and I'm using Firefox.In standard compliant browsers, margins of nested elements sum together and get placed on the ancestor. Your #navmenu class is pushing the entire #head element object down.

Edited by Ingolme
Link to comment
Share on other sites

The use of position: absolute on your elements is causing the page to look messed up, and I'm using Firefox.In standard compliant browsers, margins of nested elements sum together and get placed on the ancestor. Your #navmenu class is pushing the entire #head element object town.
Nope it's not messed up. Not if you're referring to a blue streak across the page cutting through the logo.I removed all unnecessary properties from the #navmenu , leaving only a margin-top and a background (to identify its position) to see if it would work. And what do you mean by my #navmenu pushing the entire #head element object town?
Link to comment
Share on other sites

Nope it's not messed up. Not if you're referring to a blue streak across the page cutting through the logo.I removed all unnecessary properties from the #navmenu , leaving only a margin-top and a background (to identify its position) to see if it would work. And what do you mean by my #navmenu pushing the entire #head element object town?
That was a typing mistake from my part, I meant down. The #head div is being pushed down further than it would be if you hadn't given a margin to #navmenu.If a box is inside another, like this:
<box1>  <box2>  </box2></box1>

If neither of them have padding or borders, <box2> will lose its margin (therefore getting stuck to the edges of <box1>), and in turn, the margin of <box1> will increase by as much as <box2> was intended to have.By the way, I don't see the blue streak cutting "through" the logo, I see it behind the logo, and the text is behind as well. The text being behind the image is what makes it look wrong.

Edited by Ingolme
Link to comment
Share on other sites

if you assign different coloured borders (solid and dashed) to the elements, you will be able to identify what each element is doing.#wrapper {border: 1px solid blue;} flush with top edge, and surrounds head and nav menu, but not the logo as it not a block type element (<p> or <div>)#head {border: 1px solid yellow;} has 25px top-margin, so it is 25px below top edge of its containing div wrapper. navmenu has 20px margin-top, and so is 20px below top edge of its containing div head. #logo {border: 1px dashed red;} it lies flush with top edge (20px margined edge) of its containing div head#logo-omo {border: 1px dashed lime;} when visible is 100px from the top, and 60px from left edge of its containing div head.the <br /> seems to cause a double line within firefox, but it is not required anyway, so removing it will make it match IE, as well other browsers.

Edited by dsonesuk
Link to comment
Share on other sites

if you assign different coloured borders (solid and dashed) to the elements, you will be able to identify what each element is doing.
I wouldn't use borders, I use background color, because borders interfere with the behaviour of box elements. Some boxes behave differently when given borders.
Link to comment
Share on other sites

That was a typing mistake from my part, I meant down. The #head div is being pushed down further than it would be if you hadn't given a margin to #navmenu.If a box is inside another, like this:
<box1>  <box2>  </box2></box1>

If neither of them have padding or borders, <box2> will lose its margin (therefore getting stuck to the edges of <box1>), and in turn, the margin of <box1> will increase by as much as <box2> was intended to have.By the way, I don't see the blue streak cutting "through" the logo, I see it behind the logo, and the text is behind as well. The text being behind the image is what makes it look wrong.

The #head div being pushed down is okay, what I want is for the #navmenu to be positioned further down. The margin-top property doesn't work in IE and I dunno why.And yeah, the blue streak behind the logo, that's what I mean.
Link to comment
Share on other sites

Problem solved, I dunno why LOL!Omg you guys are wrong lol. By not having <br /> tags there is a relationship between the #logo-omo and other elements that cause the other elements' positions to be affected upon display:block-ing the #logo-omo. But by placing <br />s these relationships are broken so the #logo-omo is an individual element which does not affect others. And it's tested with FF and IE.

Edited by gameboyz
Link to comment
Share on other sites

its not the css code that is causing the problem! the <br /> is being rendered differently between firefox and IE, this is the same with '<p>' the margin for the paragraph are different (as in a larger space between paragraphs is produced in IE).removing the unwanted/ <br /> (thats what you use the margins for) results in the layout being identical. now all you need to do is make the neccessary changes to position of navmenu (increase top margin height to the extra height the BR produced when present in FF) to provide to the required position.<br /> bbbbbaaaaaddddd extra margin height ggggggooooooddddd

Link to comment
Share on other sites

it would have helped if you explained, what you required! (would like navmenu appear below logo)"Nope it's not messed up. Not if you're referring to a blue streak across the page cutting through the logo" ?????????????the ff layout with the extra space (caused by br rending) i thought, is what you required, but wanted to know why ie was not producing the same effect.remember "#wrapper {border: 1px solid blue;} flush with top edge, and surrounds head and nav menu, but not the logo as it not a block type element (<p> or <div>)."you need to turn the #logo into a block/box element, remove position: absolute; and insert display: block;, which require no br (which is considered a bad practice for layout positioning, spacing) and you will achieve the required effect.

Edited by dsonesuk
Link to comment
Share on other sites

This is so weird. Check this out.

<!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><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Shucks! | Home</title><script type="text/javascript" src="resources/scripts/jquery.js"></script><script type="text/javascript" src="resources/scripts/global.js"></script><style type="text/css">body {font-family:arial;margin:0;padding:0;background:#dce8f4;}a {text-decoration:none;}#wrapper {width:1000px;margin:auto;overflow:hidden;}	#head {	margin:0;	padding:0;	}			#head .top {		height:50px;		background:#2675bf;		}			#logo {			width:116px;			height:46px;			position:absolute;			background:url(http://fabcode.org/shucks/resources/images/logo.png) no-repeat;			}			#logo-omo {			color:#ffffff;			font-size:10px;			font-family:arial;			position:absolute;			top:35px;			margin-left:30px;			display:none;			}			#navmenu {		background:lightblue;		height:50px;		padding-left:10px;		}				#navmenu a {			color:	#000000;			font-size:13px;			font-weight:bold;			line-height:37px;			padding:11px 5px 38px 5px;			}				#navmenu a:hover {			background:#d2f5b3;			}				#container {	margin-top:25px;	background:url(http://fabcode.org/shucks/resources/images/bg.png) no-repeat;	}			#container .top {		background:url(http://fabcode.org/shucks/resources/images/bg-top.png) no-repeat;		height:20px;		margin-left:-25px;		}</style><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="http://fabcode.org/shucks/resources/css/ie7.css" /><![endif]--></head><body><div id="wrapper"><div id="head"><div class="top"><a href="http://fabcode.org/shucks/" id="logo"> </a><br /><div id="logo-omo">Back to Shucks!</div><br /></div><div id="navmenu"><a href="http://fabcode.org/shucks/file">File a Shuck!</a><a href="http://fabcode.org/shucks/browse">Browse for Shucks!</a><a href="http://fabcode.org/shucks/guidelines">Guidelines</a><a href="http://fabcode.org/shucks/faq">Help</a></div></div><div id="container"><div class="top"> </div></div></div></body></html>

Save it as 1.html and open in IE7. Then remove the doctype declaration, save as 2.html and open in IE7. Hover your mouse over the navigation menu and see the difference. Why does a doctype affect the padding-bottom property? And how come this problem doesn't happen in FF?

Edited by gameboyz
Link to comment
Share on other sites

This is so weird. Check this out.
<!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><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Shucks! | Home</title><script type="text/javascript" src="resources/scripts/jquery.js"></script><script type="text/javascript" src="resources/scripts/global.js"></script><style type="text/css">body {font-family:arial;margin:0;padding:0;background:#dce8f4;}a {text-decoration:none;}#wrapper {width:1000px;margin:auto;overflow:hidden;}	#head {	margin:0;	padding:0;	}			#head .top {		height:50px;		background:#2675bf;		}			#logo {			width:116px;			height:46px;			position:absolute;			background:url(http://fabcode.org/shucks/resources/images/logo.png) no-repeat;			}			#logo-omo {			color:#ffffff;			font-size:10px;			font-family:arial;			position:absolute;			top:35px;			margin-left:30px;			display:none;			}			#navmenu {		background:lightblue;		height:50px;		padding-left:10px;		}				#navmenu a {			color:	#000000;			font-size:13px;			font-weight:bold;			line-height:37px;			padding:11px 5px 38px 5px;			}				#navmenu a:hover {			background:#d2f5b3;			}				#container {	margin-top:25px;	background:url(http://fabcode.org/shucks/resources/images/bg.png) no-repeat;	}			#container .top {		background:url(http://fabcode.org/shucks/resources/images/bg-top.png) no-repeat;		height:20px;		margin-left:-25px;		}</style><!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="http://fabcode.org/shucks/resources/css/ie7.css" /><![endif]--></head><body><div id="wrapper"><div id="head"><div class="top"><a href="http://fabcode.org/shucks/" id="logo"> </a><br /><div id="logo-omo">Back to Shucks!</div><br /></div><div id="navmenu"><a href="http://fabcode.org/shucks/file">File a Shuck!</a><a href="http://fabcode.org/shucks/browse">Browse for Shucks!</a><a href="http://fabcode.org/shucks/guidelines">Guidelines</a><a href="http://fabcode.org/shucks/faq">Help</a></div></div><div id="container"><div class="top"> </div></div></div></body></html>

Save it as 1.html and open in IE7. Then remove the doctype declaration, save as 2.html and open in IE7. Hover your mouse over the navigation menu and see the difference. Why does a doctype affect the padding-bottom property? And how come this problem doesn't happen in FF?

Browsers use the Doctype Declaration to decide whether to render the page in Standards Compliant mode or Quirks mode. In quirks mode every browser interprets the code how they want to, while in Standards Compliant mode they follow the W3C guidelines.If you remove the Doctype Declaration, browsers are likely to represent the page very differently between eachoter. I always recommend Standards Compliant mode, even if at first your page looks broken when changing to it.
Link to comment
Share on other sites

using padding to make the height match the #navmenu is a bad idea, most sites use display: block; for #navmenu a, and then float: left; to bring them together in a row, then use height: 44px; to match the height of the green of the background-image, which all browsers should now match.

Link to comment
Share on other sites

Browsers use the Doctype Declaration to decide whether to render the page in Standards Compliant mode or Quirks mode. In quirks mode every browser interprets the code how they want to, while in Standards Compliant mode they follow the W3C guidelines.If you remove the Doctype Declaration, browsers are likely to represent the page very differently between eachoter. I always recommend Standards Compliant mode, even if at first your page looks broken when changing to it.
Yep I use Standards Compliant mode all the time too, because I believe that browsers should follow the W3C guidelines. This is the reason why I don't use IE. Though I heard that IE8 is good. Lol.
using padding to make the height match the #navmenu is a bad idea, most sites use display: block; for #navmenu a, and then float: left; to bring them together in a row, then use height: 44px; to match the height of the green of the background-image, which all browsers should now match.
Thanks I'll try it out. I used display:block at first but I didn't use float:left, and it looks screwed up lol.Edit: After using display:block and float:left, is it a bad idea if I use padding to space them out? Edited by gameboyz
Link to comment
Share on other sites

No!, using padding left/right is not a problem, if you use padding top/bottom, the height is an addition to the font height. so if the user changes, for example 'view text height', or different font is used for whatever reason, this will change the total height and basically screw up the design. using the fixed height with the display: block; any font changes in height will not affect the height, because it is fixed and not reliant on font height itself.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...