Noobc0re Posted March 12, 2013 Share Posted March 12, 2013 (edited) How do I know which doctype to use for my site not to look stupid in IE? The problem I have currently is that it does not center the site and the gap between two divs is too big and the buttons look all strange. EDIT: apparently Firefox is also having issues with it. It is centered, but the buttons are all strange. Edited March 12, 2013 by Noobc0re Link to comment Share on other sites More sharing options...
Ingolme Posted March 12, 2013 Share Posted March 12, 2013 Any of the valid document type declarations will make the browser run in standards compliant mode. Getting it to look right in Internet explorer requires some effort from your part. It's possible that, if you're running in standards compliant mode and your elements still have different sized margins it means that some elements have the browser's default margin. Elements such as <ul>, <p> and <form> have a margin my default which may be different in different browsers. Setting them to zero or a fixed value in the stylesheet will solve that problem.In addition, in standards compliant mode, vertical margins, those that are above or below the element, are applied to the ancestors of the element that has the margin. The <p> element's default margin applies to the <div> element that contains it. If you're trying to center a block element, you need to give it a set width and then set its left and right margins to "auto" Link to comment Share on other sites More sharing options...
Noobc0re Posted March 12, 2013 Author Share Posted March 12, 2013 There are no relevant elements that have default margins in play. The three browsers just read them so differently. Chrome has the divs bigger than IE has them. Link to comment Share on other sites More sharing options...
Ingolme Posted March 12, 2013 Share Posted March 12, 2013 Without seeing more I can't tell you exactly why it's behaving differently. If you set a width to the element it will be the same in all browsers. The height is determined by content. The content size depends on the font size which is set by the browser. Link to comment Share on other sites More sharing options...
Noobc0re Posted March 12, 2013 Author Share Posted March 12, 2013 I have one enveloping div at 1000 px Inside that I have one div left aligned at 450px and another 450px div aligned to the right. Chrome has only a little space inbetween them, while IE has a massive one. I tried increasing the sizes for them to look right on IE, but then they got too big on chrome so they stacked up on one another. Link to comment Share on other sites More sharing options...
thescientist Posted March 12, 2013 Share Posted March 12, 2013 like Ingolme alluded to, you really need to provide code or a link for us to be able to help you in any meaningful way. We get the views are inconsistent, now show us the code behind it. Link to comment Share on other sites More sharing options...
Noobc0re Posted March 12, 2013 Author Share Posted March 12, 2013 The html: [size=4]<html>[/size]<head><title>Gielain</title><link rel="stylesheet" type="text/css" href="css/index.css"></head><Body><div id=envelop><div id=headerbox><img src="pic/header.png" alt="header"></div><div id=menybox><ul class="meny"><li><a href="index.html" class="b1"></a></li><li><a href="omoss.html" class="b2"></a></li><li><a href="oversattning.html" class="b3"></a></li><li><a href="tolkning.html" class="b4"></a></li><li><a href="kontakt.html" class="b5"></a></li></ul></div><div id=textbox><img src="pic/Suorva_feb08-249_01.jpg" alt="sourva"><br><div class="t1"><h1>Jorgaleapmi ja dulkon </h1><p>Jorgalan davvisámegiela ja ruoŧagiela gaskkas muhto maid iežá gielaide go mus lea ovttasbargu iežá jorgaleddjiiguin.<br>Lean auktoriserejuvvon dulka davvisámegiela ja ruoŧagiela gaskkas Ruoŧas. Lean maid hárjanan dulkot dárogielas ja eaŋgalasgillii/eaŋgalasgielas.</p></div><div class="t2"><h1>Översättning och tolkning</h1><p>Översättningar till och från nordsamiska och svenska men även till ett antal andra språk. Auktoriserad tolk i nordsamiska - svenska, men har även erfarenhet av att tolka från norska och engelska.</p></div></div><div id=botbox><img src="pic/bot.png" alt="bot"></div></div></body>[size=4]</html>[/size] The CSS [size=4]@charset "utf-8";[/size]/* CSS Document */ * {margin: 0; padding: 0;} html {font-size:125%;} body {font-size:50%;} body {background-color:#ffffff;font-size:0.9em;color:#000000; font-family:"Minion Pro", Century, serif;margin: 10 0 10 0px;}#envelop {width:1000px; margin:auto;}#menybox {width:1000px;height:50px;font-size:1.5em;margin: 10 0 10 0px}#textbox {background-color:#505050;width:1000px;float:left;margin-top:0 px;background-image: url(../pic/textbg.png);margin: 10 0 50 0px;background-size: 100% 100%; background-origin: border; padding: 0 0 0 0px}#headerbox {width:1000px;height:165px; background: url(../pic/);}#botbox {width:1000px;height:100;} .meny li {float:left;margin:0 0px} .t1 {width:450px;float:left;background-image: url(../pic/textbg.png);background-size: 100% 100%; background-origin: border; padding: 10 10 10 20px;border-style:solid; border-width:2px;background-color:#ffffff;margin: 0 5 0 5;}.t2 {width:450px;float:right;margin-top:0 px;background-image: url(../pic/textbg.png);background-size: 100%; background-origin: border; padding: 10 10 10 20px;border-style:solid; border-width:2px;background-color:#ffffff;margin: 0 5 0 5;} .t3 {width:450px;float:left;background-image: url(../pic/textbg.png);margin:25 0px;background-size: 100% 100%; background-origin: border; padding: 10 10 10 20px;border-style:solid; border-width:2px; clear:both;background-color:#ffffff;} a {}a:link {text-decoration:none;}a:visited {}a:hover {color:#ffffff;font-weight:bold;}a:active {color:#ff0000;text-decoration:none} img {margin-bottom:10px} p {margin-bottom:30px}p.link {margin-bottom:40px} h1 {font-size:1.92em;margin-bottom:30px} /* button 1 */a.b1 {display: block; width: 145px; height: 50px; background-image: url(../pic/button/buttons2.png);background-position: 0 0px; margin: 0 auto;}a.b1:link {}a.b1:visited {}a.b1:hover {background-position: 0 -50px;}a.b1:active {background-position: 0 -100px;} /* button 2 */a.b2 {display: block; width: 150px; height: 50px; background-image: url(../pic/button/buttons2.png);background-position: -140 0px; margin: 0 auto;}a.b2:link {}a.b2:visited {}a.b2:hover {background-position: -140 -50px;}a.b2:active {background-position: 0 -100px;} /* Button 3 */a.b3 {display: block; width: 300px; height: 50px; background-image: url(../pic/button/buttons2.png);background-position: -295 0px; margin: 0 auto;}a.b3:link {}a.b3:visited {}a.b3:hover {background-position: -295 -50px;}a.b3:active {background-position: 0 -100px;} /* Button 4 */a.b4 {display: block; width: 200px; height: 50px; background-image: url(../pic/button/buttons2.png);background-position: -595 0px; margin: 0 auto;}a.b4:link {}a.b4:visited {}a.b4:hover {background-position: -595 -50px;}a.b4:active {background-position: 0 -100px;} /* Button 5 */a.b5 {display: block; width: 200px; height: 50px; background-image: url(../pic/button/buttons2.png);background-position: -800 0px; margin: 0 auto;}a.b5:link {}a.b5:visited {}a.b5:hover {background-position: -800 -50px;}a.b5:active {background-position: 0 -100px;}[size=4]}[/size] Link to comment Share on other sites More sharing options...
Ingolme Posted March 12, 2013 Share Posted March 12, 2013 Here's the problem: margin: 0 5 0 5; Internet Explorer lets you get away with forgetting to put units but other browsers ignore this rule altogether. Link to comment Share on other sites More sharing options...
Noobc0re Posted March 12, 2013 Author Share Posted March 12, 2013 No, that was just something I put in while trying to solve the issue. Even when I put px in it barely changes anything. Link to comment Share on other sites More sharing options...
Ingolme Posted March 12, 2013 Share Posted March 12, 2013 There's also this:padding: 10 10 10 20px; and this:margin:25 0px; Put units on all your CSS first and then see if the problem is still occurring. If it is, then post your updated code. Link to comment Share on other sites More sharing options...
Noobc0re Posted March 12, 2013 Author Share Posted March 12, 2013 Apparently if you go into IE while viewing the site and press f12 you get the check on stuff thing. there you see the document-mode is on "insufficient code", if you change that to IE 8 or 9 standards, that problem fixes it self. But it gets the same odd buttons that firefox has. I would explain it using proper language, but my IE is in swedish so I have to guess the translations. I'm guessing this is the doctype problem. Is there a way to tell IE to view the site in IE9 standard mode? Link to comment Share on other sites More sharing options...
Noobc0re Posted March 13, 2013 Author Share Posted March 13, 2013 Setting the doctype to html4 solved that issue. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now