Jump to content

Margins don't work as they should in Internet Explorer


JustRob
 Share

Recommended Posts

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

Edited by JustRob
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by jkloth
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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. Edited by thescientist
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Edited by thescientist
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...