1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Problems in Firefox and Netscape

Discussion in 'CSS' started by ShaunLyons, Sep 14, 2005.

0
  1. #1
    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!
     
    ShaunLyons, Sep 14, 2005 IP
  2. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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
     
    Arnica, Sep 15, 2005 IP
  3. ShaunLyons

    ShaunLyons Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    ShaunLyons, Sep 15, 2005 IP
  4. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Arnica, Sep 15, 2005 IP
  5. ShaunLyons

    ShaunLyons Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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!
     
    ShaunLyons, Sep 15, 2005 IP
  6. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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):
     
    Arnica, Sep 15, 2005 IP
    Colleen likes this.