shadowayex Posted January 30, 2008 Share Posted January 30, 2008 Ok, Here is my stylesheet: body {background-color: #000000; font-family: arial; text-align: center; font-size: 10pt; height: 100%; width: 100%;}a:link {color:#ffff00;text-decoration:none}a:hover {color:#ffff00;text-decoration:underline}a:active {color:#ffff00;text-decoration:none}a:visited {color:#ffff00;text-decoration:none}a:visited:hover {color:#ffff00;text-decoration:underline}a.text {color:#000000;text-decoration:underline}a:hover.text {color:red;text-decoration:underline}a:visited.text {color:#000000;text-decoration:underline}a:visited:hover.text {color:red;text-decoration:underline}div.page {width:721px;border-style:ridge;padding:15px;background-color:#0000ff; height: 100%;}div.navi {width:143px;float:left;text-align:left}div.main {text-align:center;width:427px;float:left}div.right2 {width:135px;text-align:left;background-color:#ffcc33;border-style:ridge; float:right}div.text {background-color:#ffcc33;border-style:ridge;text-align:left; padding:10px;width:365px} Seemingly correct. Not much wrong that I can see. Here's my site:http://terraworld.freehostia.com/If you're using Mozilla, you see my problem. If you're using IE, try looking on Mozilla for a second. I just downloaded Mozilla to see if it looked alright....nope. I have no idea what's wrong and why. Any help? Link to comment Share on other sites More sharing options...
rustysilo Posted January 30, 2008 Share Posted January 30, 2008 I don't know if it causes the trouble, but I think specifying width and height for body is unnecessary. Link to comment Share on other sites More sharing options...
Ingolme Posted January 30, 2008 Share Posted January 30, 2008 That's what happens when you develop for specifically one browser (and worse, Internet Explorer).I've fixed up your CSS a bit, it should work in all browsers ok (except for the borders maybe, because of Internet Explorer's box model). I haven't done any tests so it might have some mistakes. html,body {background-color: #000000; font-family: arial;text-align: center; font-size: 10pt; height: 100%;width: 100%;}a:link {color:#ffff00;text-decoration:none}a:hover {color:#ffff00;text-decoration:underline}a:active {color:#ffff00;text-decoration:none}a:visited {color:#ffff00;text-decoration:none}a:visited:hover {color:#ffff00;text-decoration:underline}a.text {color:#000000;text-decoration:underline}a:hover.text {color:red;text-decoration:underline}a:visited.text {color:#000000;text-decoration:underline}a:visited:hover.text {color:red;text-decoration:underline}div.page {width:721px; margin: 0 auto;border-style:ridge;padding:15px;background-color:#0000ff;height: 100%;}div.navi {width:143px;float:left;text-align:left}div.main {text-align:center; margin: 0 auto;}div.right2 {width:135px;text-align:left;background-color:#ffcc33;border-style:ridge;float:right}div.text {background-color:#ffcc33;border-style:ridge;text-align:left;padding:10px; width: 365px; margin: 0 auto;} Link to comment Share on other sites More sharing options...
shadowayex Posted January 30, 2008 Author Share Posted January 30, 2008 Used your stylesheet, Mozilla looks a little better, but still some minor errors. IE, however....ouch. Do you think maybe the fact that I'm using precise measurements rather than percents might have something to do with it. Also, my three column design doesn't work if the middle isn't floated left if I'm using exact measurements. Do you think maybe I should use percents instead? Link to comment Share on other sites More sharing options...
Ingolme Posted January 30, 2008 Share Posted January 30, 2008 You'll also have to change your HTML a little.I don't understand why you need so many line breaks in your code.The design should work fine the way it is. <!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>Unofficial TerraWorld Guide!</title><link rel="stylesheet" type="text/css" href="mystyle.css" /></head><body><div class="page"><h1>Welcome!</h1><div class="navi">Home<br /><a href="about.html">About TerraWorld</a><br /><a href="noobguide.html">For Noobs</a><br /><a href="worldmap.html">World Map</a><br /><a href="itemsmain.html">Items</a><br /><a href="quests.html">Quests</a><br /><a href="skills.html">Skills</a></div><div class="right2">Your ad could go here! <a href="java script:onClick(window.open('mailto:cooltrainer_2001@hotmail.com'))" class="text">Email me</a> if you are interested. Width is fixed at 135 pixels do to the layout of the website. The height, however, is not. Prices are 1g for every 100 sq pixels per month (so if your banner is 135 x 800 px it will cost 1080g a month).</div><div class="main"><div class="text">This site has all kinds of information refering to the MMORPG called TerraWorld! To the left there is a navigation bar that will take you anywhere you need to go. Information may be added or changed as the game if updated. Please enjoy!</div><br /><h2>Updates</h2><div class="text"><h3>December 8th, 2007</h3>The homepage, About TerraWorld, and Skills pages are made. The layout is pretty set. But I need images! <a href="java script:onClick(window.open('mailto:cooltrainer_2001@hotmail.com'))" class="text">Email me</a> TerraWorld related images that I may add to my site. Who knows, you may get rewarded!</div></div></div></body></html> Link to comment Share on other sites More sharing options...
shadowayex Posted January 30, 2008 Author Share Posted January 30, 2008 I don't understand why you need so many line breaks in your code.....That was for my own "keep things straight" thing. Does it interfere with anything? And I did your edit. With slight tweaking everything looks alright for the most part. I looked through at your edits and are those "margin: 0 auto" ones required? What does that even do? Not trying to criticize I've just never seen it before. There's something up in IE on the homepage I noticed. Same with Mozilla put something else is up. Link to comment Share on other sites More sharing options...
Ingolme Posted January 30, 2008 Share Posted January 30, 2008 That was for my own "keep things straight" thing. Does it interfere with anything? And I did your edit. With slight tweaking everything looks alright for the most part. I looked through at your edits and are those "margin: 0 auto" ones required? What does that even do? Not trying to criticize I've just never seen it before. There's something up in IE on the homepage I noticed. Same with Mozilla put something else is up.Well, with the line breaks, they make the source code up too much space. I use indenting and comments to organise my code.About "margin: 0 auto;", that's what makes Mozilla center the object in the browser.Right now I see your page fine in both browsers except for one mistake: Internet Explorer is displaying box too far left.To fix it, substitute your corrent main class for this one:div.main {text-align:center; margin: 0 auto;width: 400px;} Link to comment Share on other sites More sharing options...
shadowayex Posted January 30, 2008 Author Share Posted January 30, 2008 Well, with the line breaks, they make the source code up too much space. I use indenting and comments to organise my code.About "margin: 0 auto;", that's what makes Mozilla center the object in the browser.Right now I see your page fine in both browsers except for one mistake: Internet Explorer is displaying box too far left.To fix it, substitute your corrent main class for this one:div.main {text-align:center; margin: 0 auto;width: 400px;}Ok, on Mozilla the Update header was too far over, but the new class fixed it. THANK YOU SO MUCH! I've never worked with Mozilla before but I will use this as a reference a lot. I owe you big time. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.