Margins don't work as they should in Internet Explorer

JustRob · May 10, 2010

I apologize for asking so much, but I can't figure this one out.My current website works as it should in Mozilla Firefox and Google Chrome, but not Internet Explorer. The problem being that the margins are f*cked up.This time, I have a working link so it makes things easier. Just rightclick and view the code.Compare it between Firefox and IE (and Chrome if you must), and I think the problem will be obvious.Link: Click

thescientist · May 10, 2010

for those of us without immediate access to IE, could you actually explain the problem? I can tell just by not using a Strict DTD that IE will have problems. If its inconsistent margins/paddings with elements on the page, consider using a CSS reset selector as well.

JustRob · May 10, 2010

Reset selector? Sorry, I'm not very experienced yet with CSS, could you elaborate a bit on that?

ShadowMage · May 10, 2010

Reset selector? Sorry, I'm not very experienced yet with CSS, could you elaborate a bit on that?

It's not really a selector. It's just a declaration put at the beginning of your CSS stylesheets that will set values such as margin and padding to a specific default. Different browsers apply different values to different elements if those values are not explicitly defined. That's why you should use a CSS reset.To do that you use the universal selector (*) to target all elements. Then just add whatever default values you want. Generally margin and padding are all that are necessary:

* {   margin: 0px;   padding: 0px;}

JustRob · May 10, 2010

Oh. Well, I tried it, but it didn't seem to work. I'm pretty sure the problem has to be somewhere in the margins or paddings though, I can't think of what else it could be. For some reason IE treats them differently then Firefox and Chrome.

ShadowMage · May 10, 2010

Like scientist said, make sure you have a Strict DTD on your page. IE doesn't play nice if you don't have a Strict DTD, in fact all browsers will behave slightly different when you use other DTD's. Make sure that it validates under the strict rules too.edit: Oh and I can't view your page since I'm at work but perhaps you could post some code.

JustRob · May 10, 2010

Well, I dunno much about DTD's, I just used what Dreamweaver gave me standardly, assuming it was alright.Here's the code for the index.html and the stylesheet, maybe you can find something:Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Gototheframe - Home</title><link href="gototheframe.css" rel="stylesheet" type="text/css" /></head><body><div class="background"><div class="logo1"><div class="logo2"></div></div><ul class="menu1"><li class="current"><a href="index.html"><b>HOME</b></a></li><li><a href="nieuws.html"><b>NIEUWS</b></a></li><li><a href="projecten.html"><b>PROJECTEN</b></a></li><li><a href="overons.html"><b>OVER ONS</b></a></li><li><a href="contact.html"><b>CONTACT</b></a></li></ul><hr class="line1" /><div class="content"><h1>// Welkom bij Gototheframe</h1><div class="content_area">Gototheframe maakt interactieve media, kort gezegd alles wat op een beeldscherm komt en waar op u kunt klikken om een bepaalde actie uit te voeren.Interactieve media kan van alles zijn en door iedereen te gebruiken. Denkt u maar aan een informatieve website, een mooie presentatie of een leerzaam spel.</div></div><hr class="line1" /><div class="layout_copyright">Copyright ©2010 GOTOTHEFRAME</div></div></body></html>

Stylesheet

@charset "utf-8";/* CSS Document */html { height:100%;}body 	{min-height:101%;text-align: center;color: #FFFFFF;font-family:Arial, Helvetica, sans-serif;font-weight: bold;background-image:url(bg.png);}h1 {margin:auto;text-align:left;padding-right:114px;padding-bottom:5px;background:no-repeat;height: 17px;width: 595px;font-weight:bold;font-family:"Myriad Pro", Verdana;font-size:20px;color:#000000;text-transform: uppercase;}h2{margin-top:0px;text-align:left;font-weight:bold;font-size:15px;}a{font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#00CCFF;}a:hover{font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#CCFF00;}a.snelkoppelingen{color:#FFFFFF;font-size:15px;font-weight:normal;}a.snelkoppelingen:hover{color:#FFFF00;font-size:15px;font-weight:normal;}.logo1{background-image:url(logo1.png);margin-left:15px;width:210px;height:200px;}.logo2{background-image:url(logo2.png);margin-left:210px;width:590px;height:91px;}.header {margin-right:auto;margin-left:auto;background-image: url(banner.png);height: 200px;width: 800px;}.background {margin-right:auto;margin-left:auto;padding-bottom:30px;height:auto;width:831px;background-image:url(contentbg.png);}.line1{border: none;width:710px;border-top: 2px solid #8f0f1b;}hr{border: none;border-top: 1px solid #FFFFFF;}.menu1 {margin-top:-80px;margin-left:211px;padding-bottom:28px;list-style:none; height:44px;width:600px;}.menu1 li {float:left;background-image:url(menubar/buttons/button1.png);}.menu1 li a {display:block; float:left; height:44px; line-height:35px; color:#FFFFFF; text-decoration:none; font-size:13px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding-left:10px;padding-right:10px;cursor:pointer;}.menu1 li a b {float:left;text-align:center;padding-top:5px;padding-bottom:5px;padding-right:16px;padding-left:8px;}.menu1 li.current a {color:#FFFFFF; background:url(menubar/buttons/button2.png);}.menu1 li.current a b {}.menu1 li a:hover {color:#FFFFFF;background:#000 url(menubar/buttons/button2.png);}.menu1 li a:hover b {}.menu1 li.current a:hover {color:#FFFFFF; background:#000000 url(menubar/buttons/button2.png);cursor:pointer;}.menu1 li.current a:hover b {}.content {margin:0 auto;padding-top:5px;padding-bottom:10px;text-align: left;}.content_area {margin:0 auto;width: 670px;text-align:left;background:#820303;padding-left: 20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-family:Arial, Helvetica, sans-serif;font-size: 15px;font-weight:lighter;color:#FFFFFF;}.layout_copyright {margin-left:auto;margin-right:auto;font: bold 11px/0px Verdana, Arial, Helvetica, sans-serif;color:#8f0f1b;padding-top:10px;text-align:center;font-size:10px;}ul li.koppelingen{list-style-type:none;padding-left: 20px;background-image:url(bullet.gif);background-repeat: no-repeat;background-position: left center;}

thescientist · May 10, 2010

Well, I dunno much about DTD's, I just used what Dreamweaver gave me standardly, assuming it was alright.Here's the code for the index.html and the stylesheet, maybe you can find something:Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Gototheframe - Home</title><link href="gototheframe.css" rel="stylesheet" type="text/css" /></head><body><div class="background"><div class="logo1"><div class="logo2"></div></div><ul class="menu1"><li class="current"><a href="index.html"><b>HOME</b></a></li><li><a href="nieuws.html"><b>NIEUWS</b></a></li><li><a href="projecten.html"><b>PROJECTEN</b></a></li><li><a href="overons.html"><b>OVER ONS</b></a></li><li><a href="contact.html"><b>CONTACT</b></a></li></ul><hr class="line1" /><div class="content"><h1>// Welkom bij Gototheframe</h1><div class="content_area">Gototheframe maakt interactieve media, kort gezegd alles wat op een beeldscherm komt en waar op u kunt klikken om een bepaalde actie uit te voeren.Interactieve media kan van alles zijn en door iedereen te gebruiken. Denkt u maar aan een informatieve website, een mooie presentatie of een leerzaam spel.</div></div><hr class="line1" /><div class="layout_copyright">Copyright ©2010 GOTOTHEFRAME</div></div></body></html>

Stylesheet

@charset "utf-8";/* CSS Document */html { height:100%;}body 	{min-height:101%;text-align: center;color: #FFFFFF;font-family:Arial, Helvetica, sans-serif;font-weight: bold;background-image:url(bg.png);}h1 {margin:auto;text-align:left;padding-right:114px;padding-bottom:5px;background:no-repeat;height: 17px;width: 595px;font-weight:bold;font-family:"Myriad Pro", Verdana;font-size:20px;color:#000000;text-transform: uppercase;}h2{margin-top:0px;text-align:left;font-weight:bold;font-size:15px;}a{font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#00CCFF;}a:hover{font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#CCFF00;}a.snelkoppelingen{color:#FFFFFF;font-size:15px;font-weight:normal;}a.snelkoppelingen:hover{color:#FFFF00;font-size:15px;font-weight:normal;}.logo1{background-image:url(logo1.png);margin-left:15px;width:210px;height:200px;}.logo2{background-image:url(logo2.png);margin-left:210px;width:590px;height:91px;}.header {margin-right:auto;margin-left:auto;background-image: url(banner.png);height: 200px;width: 800px;}.background {margin-right:auto;margin-left:auto;padding-bottom:30px;height:auto;width:831px;background-image:url(contentbg.png);}.line1{border: none;width:710px;border-top: 2px solid #8f0f1b;}hr{border: none;border-top: 1px solid #FFFFFF;}.menu1 {margin-top:-80px;margin-left:211px;padding-bottom:28px;list-style:none; height:44px;width:600px;}.menu1 li {float:left;background-image:url(menubar/buttons/button1.png);}.menu1 li a {display:block; float:left; height:44px; line-height:35px; color:#FFFFFF; text-decoration:none; font-size:13px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding-left:10px;padding-right:10px;cursor:pointer;}.menu1 li a b {float:left;text-align:center;padding-top:5px;padding-bottom:5px;padding-right:16px;padding-left:8px;}.menu1 li.current a {color:#FFFFFF; background:url(menubar/buttons/button2.png);}.menu1 li.current a b {}.menu1 li a:hover {color:#FFFFFF;background:#000 url(menubar/buttons/button2.png);}.menu1 li a:hover b {}.menu1 li.current a:hover {color:#FFFFFF; background:#000000 url(menubar/buttons/button2.png);cursor:pointer;}.menu1 li.current a:hover b {}.content {margin:0 auto;padding-top:5px;padding-bottom:10px;text-align: left;}.content_area {margin:0 auto;width: 670px;text-align:left;background:#820303;padding-left: 20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-family:Arial, Helvetica, sans-serif;font-size: 15px;font-weight:lighter;color:#FFFFFF;}.layout_copyright {margin-left:auto;margin-right:auto;font: bold 11px/0px Verdana, Arial, Helvetica, sans-serif;color:#8f0f1b;padding-top:10px;text-align:center;font-size:10px;}ul li.koppelingen{list-style-type:none;padding-left: 20px;background-image:url(bullet.gif);background-repeat: no-repeat;background-position: left center;}

doh! Look, don't take Dreamweaver as gospel! WYSIWYG is called that for a reason. Listen to the advice we are giving you, look it up, maybe you'll find that it's a lot easier than you think....maybe say as easy as copying and pasting one line of code into your page to over write one that's there....?For the most part your site looks fine, except for the transitional DTD. Strict it up, validate you're code, and if you are (just assuming) using Dreamweaver to view your pages, don't do it. And of course there's always the universal selector.

JustRob · May 10, 2010

Hmm yeah you're right. I'll take a look at it tomorrow, thanks for the heads up

JustRob · May 10, 2010

Well, I tried changing the DTD, and validated my code, but this still doesn't solve the problem. Maybe I'm overlooking something stupidly obvious, I can't tell. Also I would like to research and fix this problem, but first I need to find out what the problem is. In any case, it's a problem related to IE.

thescientist · May 10, 2010

We've already told you what the likely cause is, jkloth to be specific put in greater depth. Different browsers, different defaults. The universal selector will probably solve that. Curious though, you validated your code, and that means you fixed the errors that came up, right?

ShadowMage · May 10, 2010

My current website works as it should in Mozilla Firefox and Google Chrome, but not Internet Explorer. The problem being that the margins are *messed* up.

Well, I tried changing the DTD, and validated my code, but this still doesn't solve the problem. Maybe I'm overlooking something stupidly obvious, I can't tell. Also I would like to research and fix this problem, but first I need to find out what the problem is. In any case, it's a problem related to IE.

So, which elements have goofed up margins? All of them? Just some of them? I can't see anything immediate that pops out at me in your code, but perhaps if I had someplace specific to look I might be able to spot something. Maybe you could point me to an example of a portion of the code that isn't doing what you want it to.

thescientist · May 10, 2010

So, which elements have goofed up margins? All of them? Just some of them? I can't see anything immediate that pops out at me in your code, but perhaps if I had someplace specific to look I might be able to spot something. Maybe you could point me to an example of a portion of the code that isn't doing what you want it to.

I swear it's like deja vu here sometimes. This was literally the first thing i asked,

for those of us without immediate access to IE, could you actually explain the problem?

JustRob · May 11, 2010

We've already told you what the likely cause is, jkloth to be specific put in greater depth. Different browsers, different defaults. The universal selector will probably solve that. Curious though, you validated your code, and that means you fixed the errors that came up, right?

No it means I used the link in your sig, uploaded my code, and since there were no errors there was nothing to fix

So, which elements have goofed up margins? All of them? Just some of them? I can't see anything immediate that pops out at me in your code, but perhaps if I had someplace specific to look I might be able to spot something. Maybe you could point me to an example of a portion of the code that isn't doing what you want it to.

<div class="logo1"> and <div class="logo2"> are too far to the right, they should be way over to the left. The <ul class="menu1"> is supposed to be a little lower and a little to the right.

I swear it's like deja vu here sometimes. This was literally the first thing i asked,

Sorry, I think I misread it

ShadowMage · May 11, 2010

I did have a chance to actually look at your site. I tested it in FF 3.6 and IE8. It looked identical in both browsers. Which version of IE are you testing in?Your code looks good btw. There shouldn't be anything there that's messing with your site. At least not that I can see.

JustRob · May 11, 2010

I think I got IE7

ShadowMage · May 11, 2010

I think I got IE7

Unfortunately I don't have access to IE7 so I can't try it out. Hopefully somebody else can pop in on this thread and shed some light. From what I can see there shouldn't be any problems.

thescientist · May 11, 2010

your live link is still Transitional... did you change it locally but not live? It's easier for us to test with developer tools when the sites are actually to a proper standard.

JustRob · May 11, 2010

Oh right, forgot... Link has been updated now with all pages and the stylesheet now has the selector in it

Margins don't work as they should in Internet Explorer

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived