Hi there, I was recently told that my website wouldn't display correctly in Netscape, and upon further inspection, realised that the same problem occurs in Firefox. Unfortunately, I suck at web design (which should be obvious after a quick look at my code). The site displays exactly as I want it to in Internet Explorer, and while the vast majority of my visitors are IE users, I'd like to optomise the page for other browsers. If anyone can help out I'd be extremely grateful. The URL is as follows: http://www.michmich.net The style sheet is titled michmichstyle.css Thanks!
Firefox and Netscape are obeying your height and width rules on the <div>s (as they should). You need to adjust them, set them to 'auto' or remove them. Mick
Thanks for the quick reply. I tried setting the margins to auto, but all it accomplished (in firefox) was properly centering my content - there was still a lot of overlap. If anyone can help, the style sheet code is as follows: html { scrollbar-face-color:#003300; scrollbar-darkshadow-color:#003333; scrollbar-arrow-color:#ffff99; scrollbar-track-color:#FFFF99; scrollbar-shadowcolor:#003333; scrollbar-highlight-color:#003333; scrollbar-3dlight-color:#003300; font-family:sans-serif; background:#FFFFCC; } a:link {color: #006633; text-decoration: underline; font-weight:bold} a:visited {color: #003300; text-decoration: underline; font-weight:bold} a:hover {color: #999966; text-decoration: overline; font-weight:bold} a:active {color: #66CC66; text-decoration: underline; font-weight:bold} #links { background:#FFFFFF; width:704px; height:40px; padding-top:4px; padding-right:4px; padding-left:4px; padding-bottom:4px; border-bottom: 1px solid #003300; border-left: 1px solid #003300; border-right: 1px solid #003300; border-top: 1px solid #003300; margin-bottom: 4px; margin-top: 20px; margin-left: 20px; margin-right: 20px; } #border { margin-right: 4px; margin-left: 4px; margin-bottom: 4px; margin-top: 4px; border: 2px solid #000000; background:#003300; } #insert { text-align:center; width:704px; height:300px; padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; border: 1px solid #003300; margin-bottom:10px; margin-top:4px; margin-right:20px; margin-left:20px; background:#ffffff; } #comics { text-align:center; width:380px; height:300px; padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; margin-bottom:10px; margin-top:4px; margin-right:20px; margin-left:20px; background:#ffffff; } #text { margin:auto; text-align:left; width:380px; height:300px; padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; margin-bottom:10px; margin-top:4px; margin-right:20px; margin-left:20px; background:#ffffff; } I think the problem may lie in the implementation of my css in the html documents. Take a look: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Mich Mich</title> <style type="text/css" media="screen">@import "michmichstyle.css";</style></head> <link rel=StyleSheet href="/michmichstyle.css" type="text/css"> <div id="border"> <center> <div id="links"> <img src="heade.gif" alt="MICH MICH."><br> <a href="index.html">HOME</a> <a href="archive.html">ARCHIVE</a> <a href="about.html">ABOUT</a> <a href="mailto:shaun@michmich.net">CONTACT</a> </div></center> <center> <div id="insert"> <font size="+1"><b>RECENT COMICS</b></font> <font="rockwell"> <font size="+3"> <div id="comics"> <br> <a href="castration.html"><IMG BORDER="0" src="castrationicon.jpg"></a><br>CASTRATION<br><br> <a href="wetdream.html"><IMG BORDER="0" src="wetdreamicon.jpg"></a><br>WET DREAM<br><br> <a href="swimsuitarea.html"><IMG BORDER="0" src="swimsuitareaicon.jpg"></a><br>SWIMSUIT AREA<br><br> <a href="bathtime.html"><IMG BORDER="0" src="bathingicon.jpg"></a><br>BATH TIME<br><br> </font></font> </div> </center> </div> <center><font size="-4" color="FFFFCC">© Shaun Lyons 1997-2005</font></center> </div> </div id="border"> </html> Thanks in advance to anyone who can help.
It's not your margins - it's the width and height attributes. #links { background:#FFFFFF; width:704px; padding:4px; border: 1px solid #003300; margin: 20px 20px 4px 20px; } #border { margin: 4px;border: 2px solid #000000; background:#003300; } #insert { text-align:center; width:704px; padding:4px; border: 1px solid #003300; margin:4px 20px 10px 20px; background:#ffffff; } #comics { text-align:center; padding:4px; margin:4px 20px 10px 20px; background:#ffffff; } #text { margin:auto; text-align:left; padding:4px; margin:4px 20px 10px 20px; background:#ffffff; } Code (css): Give that a try.
Thanks so much! The site is actually readable in firefox and netscape now. This is an extremely minor issue, but do you have any idea how I could get "© Shaun Lyons 1997-2005" to display within the green border (as it does in IE). Also, do you have any idea how I could get the text div to work on firefox? I can't get the about.html page to display the same way in firefox as in IE. And finally (though this last question is simply taking advantage of your incredible generosity and deserves a smack in the face as much as a civil answer) could you give me some advice on altering the code so the border displays at a solid 20px on all sides? As it stands, the site looks as i intended it to in 800 by 600, but in higher resolutions, the left and right sides appear drastically wider than the top and bottom ones. Thanks again!
There you go. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL="http://www.w3.org/TR/html4/loose.dtd"]http://www.w3.org/TR/html4/loose.dtd[/URL]"> <html><head><title>Mich Mich</title> <style type="text/css"> a:link {color: #006633; text-decoration: underline; font-weight:bold} a:visited {color: #003300; text-decoration: underline; font-weight:bold} a:hover {color: #999966; text-decoration: overline; font-weight:bold} a:active {color: #66CC66; text-decoration: underline; font-weight:bold} #links { background:#FFFFFF; width:704px; padding:4px; border: 1px solid #003300; margin: 20px 20px 4px 20px; } body { margin:auto; text-align:center; } #border { width:756px; margin: 4px auto; border: 2px solid #000000; background:#003300; } #insert { font-family: Rockwell, Verdana, Arial, sans-serif; width:704px; padding:4px; border: 1px solid #003300; margin:4px 20px 10px 20px; background:#ffffff; } #comics { font-size: 2em; padding:4px; margin:4px 20px 10px 20px; background:#ffffff; } #footer { font-size:0.8em; background:transparent; color:#FFFFCC; } </style> </head> <body> <div id="border"> <div id="links"> <img src="heade.gif" alt="MICH MICH."><br> <a href="index.html">HOME</a> <a href="archive.html">ARCHIVE</a> <a href="about.html">ABOUT</a> <a href="<A href="mailto:shaun@michmich.net">CONTACT</a">mailto:shaun@michmich.net">CONTACT</a> </div> <div id="insert"> <b>RECENT COMICS</b> <div id="comics"> <a href="castration.html"><IMG BORDER="0" src="castrationicon.jpg"></a><br>CASTRATION<br><br> <a href="wetdream.html"><IMG BORDER="0" src="wetdreamicon.jpg"></a><br>WET DREAM<br><br> <a href="swimsuitarea.html"><IMG BORDER="0" src="swimsuitareaicon.jpg"></a><br>SWIMSUIT AREA<br><br> <a href="bathtime.html"><IMG BORDER="0" src="bathingicon.jpg"></a><br>BATH TIME<br><br> </div> </div> <div id="footer"> © Shaun Lyons 1997-2005 </div> </div> </body> </html> Code (markup): And the 'about' page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>Mich Mich</title> <style type="text/css"> a:link {color: #006633; text-decoration: underline; font-weight:bold} a:visited {color: #003300; text-decoration: underline; font-weight:bold} a:hover {color: #999966; text-decoration: overline; font-weight:bold} a:active {color: #66CC66; text-decoration: underline; font-weight:bold} #links { background:#FFFFFF; width:704px; padding:4px; border: 1px solid #003300; margin: 20px 20px 4px 20px; } body { margin:auto; text-align:center; } #border { width:756px; margin: 4px auto; border: 2px solid #000000; background:#003300; } #insert { font-family: Rockwell, Verdana, Arial, sans-serif; width:704px; padding:4px; border: 1px solid #003300; margin:4px 20px 10px 20px; background:#ffffff; } #text { width:380px; text-align:left; font-size: 1.4em; padding:4px; margin:4px auto 10px auto; background:#ffffff; } #footer { font-size:0.8em; background:transparent; color:#FFFFCC; } </style> </head> <body> <div id="border"> <div id="links"> <img src="heade.gif" alt="MICH MICH."><br> <a href="index.html">HOME</a> <a href="archive.html">ARCHIVE</a> <a href="about.html">ABOUT</a> <a href="mailto:shaun@michmich.net">CONTACT</a> </div> <div id="insert"> <b>ABOUT MICH MICH</b> <div id="text"> Mich Mich is updated on a weekly basis. This site contains an archive of the strips which have appeared in the University of Alberta's student newspaper <a href="http://www.gateway.ualberta.ca">The Gateway</a>. Aside from creating characteristically shitty comics, the author's hobbies include newt and salamander husbandry, and adding to his extensive collection of <a href="urinatingtoys.html">urinating toys</a>. If you've become disheartened by the pathetically small size of the archive, or the poor quality of the strips, you might consider visiting the <a href="links.html">links page.</a> </div> </div> <div id="footer"> © Shaun Lyons 1997-2005 </div> </div> </body> </html> Code (markup):