hey guys, im having some trouble with a html/css website i've created.. in firefox it looks fine.. but in IE (7) its totally messed up. Does anyone have any idea why this could be? this is the site: http://frontmill.mythicx.com/eras%20new/ And these are my source codes: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Erasmiaans</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="banner"> [img]header.jpg[/img] </div> <div class="sidecontainer"> <div class="sidebox"> <center><div class="button">[img]links.jpg[/img]</div></center> <div class="links"> <font color="72a707" face="Arial, Helvetica, sans-serif" size="2">Home</font> <font color="72a707" face="Arial, Helvetica, sans-serif" size="2">Samenvattingen</font> </div> </div> <div class="sidebox"> hoi </div> </div> <div class="contentcontainer"> <div class="content"> <font color="72a707" face="Arial, Helvetica, sans-serif">[b]Titel[/b]</font> <hr NOSHADE size="1"> <font color="8c8c8c" face="Arial, Helvetica, sans-serif" size="2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin dapibus nunc ac leo. Integer pharetra, est consequat sollicitudin venenatis, pede arcu pellentesque lorem, in lacinia est tellus eget enim. Quisque congue dignissim est. Donec mollis auctor purus. Ut elit. In sit amet lacus pulvinar dolor auctor vehicula. Sed ultricies, nisl nec convallis molestie, nibh elit vehicula enim, ut imperdiet metus elit et orci. Aenean eget purus. Nulla in dui in dui feugiat feugiat. Maecenas ac libero sit amet dui laoreet ornare. Maecenas vel ante. Ut ut orci vitae quam sollicitudin luctus. In hac habitasse platea dictumst. Nullam placerat lectus et pede. Integer nec augue. Quisque venenatis, metus sit amet mollis condimentum, nisl diam consequat quam, a ornare urna tellus a nisl. Nunc tellus. Cras imperdiet gravida quam. </font> </div> <div class="content"> hallo </div> </div> </div> </body> </html> Code: div.container { background-color: #e8e8e8; width:625px; margin:auto; border:1px solid #bcbcbc; padding:13px; } div.banner { background-color: #ffffff; } div.contentcontainer{ width:420px; } div.sidecontainer{ width:170px; float:right; margin-left:13px; heigt:auto; } div.content{ background-color: #ffffff; border:1px solid #bcbcbc; margin-top:13px; width:420px; padding:13px; vertical-align:top; } div.sidebox{ background-color: #ffffff; width:170px; border:1px solid #bcbcbc; float:right; margin-top:13px; margin-left:13px; } div.links{ width:110px; margin-top:13px; margin-left:15px; margin-right:45px; margin-bottom:13px; } div.button{ margin-top:5px; }
Just put something on the home page sayin 'Best viewed in Firefox' and link it to download firefox or summat similiar
no man.. that wont work.. 50% of the computer users (at least) dont even know what firefox is.. or dont know how to install/use it..
the positioning problem is the: Code: margin:auto; //Line 4 Each browser treats \"auto\" differently. Basicly everything is a positioning error. Test your things in Internet Explorer, mess with your margins, pads, and aligns. In the future, test with Internet Explorer. If it works with that (correctly), then it\'ll probably be good in every other broswer.
Sorry, john, but I have to disagree with you. My advice, as a webdesigner, is create while testing in Firefox (or Opera, if you so prefer). This will actually get you going with good code in the beginning, that you can tweek (with things like IE IF statements) later on. As far as the site issue you have, I'm betting its a "clear" issue. I don't have time to go through it fully, however my suggestion is add Code: clear:both to Code: div.bottom And play with it from there. Note, this is only from tinkering in Firefox, which isn't even displaying it correctly. I'm too lazy to fire up my test machine to look at it in IE :tongue: . The code I ended up with is Code: div.container{ background-color: #e8e8e8; width:650px; border:1px solid #bcbcbc; padding:25px 0; margin:0 auto; } div.header{ background-color: #ffffff; width:598px; border:1px solid #bcbcbc; height:160px; margin-bottom:15px; } div.content{ width:410px; margin:0 0 0 25px; float:left; } div.contentbox{ width:410px; border:1px solid #bcbcbc; background-color: #ffffff; margin-bottom:15px; text-align:left; padding:15px; } div.side{ width:165px; margin:0 25px 0 0; float:right; } div.sidebox{ width:165px; border:1px solid #bcbcbc; background-color: #ffffff; margin-bottom:15px; padding:5px; } div.bottom{ background-color: #ffffff; width:598px; border:1px solid #bcbcbc; heigt:20px; clear:both; } div.titel{ float:left; } div.datum{ text-align:right; } div.button{ width:145px; height:20px; } div.links{ text-color:#8c8c8c; } a:hover { text-decoration:none; color : #72a707; } a { text-decoration:none; } Hope that helps.
