Sash
08-25-04, 04:43 AM
When my site is viewed at 800x600 the layout is fine but when viewed at 1024x768 the text overlaps onto the side menus. Can anyone advise on this?
As this seems to be a problem on every page I assume the cause is in the CSS layout?
I have added the css and one problem page.
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
background-color:white;
font-size: 11px;
font-style: normal;
font-variant: normal;
text-transform: none;
border: #000000;
padding-top: 96px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 190px;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:20px;
font-weight:bold;
color:#CC6600;
font-family: Arial, Helvetica, sans-serif;
}
q {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
a:link {
color:#003333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
}
a:visited {
color:#003333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}
a:hover {
color: #CC6600;
}
#Header {
margin:0px;
padding:0px 0px 5px;
letter-spacing: normal;
word-spacing: normal;
position: absolute;
border: none;
text-align: left;
vertical-align: text-top;
height: 105px;
width: 537px;
left: 5px;
top: 10px;
right: 10px;
bottom: 20px;
}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
#Content {
margin:0px 100px 50px 200px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
top: 140px;
}
#Menu {
position:absolute;
top:125px;
left:20px;
width:160px;
padding:10px;
background-color:#FFFFFF;
border:1px none #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #003333;
font-style: normal;
voice-family:inherit;
width:150px;
line-height: normal;
text-transform: none;
text-align: right;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
#Subhead {
padding:0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
margin: 100px 0px 0px;
height: auto;
width: auto;
}
.subhead {
margin:0px 100px 25px 250px;
padding:60px 0px 0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
}
#banner {
margin: 0px;
height: 44px;
width: 414px;
position: absolute;
left: 345px;
top: 20px;
right: 0px;
bottom: 0px;
padding: 0px;
}
.menu1 {
background-color: #FF9933;
color: #003333;
font-family: verdana;
font-size: 9pt;
line-height: normal;
zindex: 99;
layer-background-color: eae8e8;
border: thin;
padding: 5px 0px 5px 20px;
text-align: left;
font-weight: normal;
}.menu {
top:125px;
left:500px;
padding:10px;
background-color:#FFFFFF;
border:0px none #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #003333;
font-style: normal;
voice-family:inherit;
width:150px;
line-height: normal;
text-transform: none;
text-align: left;
}
A.white:hover {
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#search {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 8px;
font-weight: bold;
color: #000000;
position: absolute;
left: 542px;
top: 57px;
right: 0px;
bottom: 0px;
padding: 0px;
width: 238px;
}
#subheadhome {
padding:0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
margin: 0px;
height: auto;
width: auto;
position: absolute;
top: 90px;
}
#quote {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
padding: 1px;
width: 200px;
left: 545px;
top: 129px;
right: 0px;
bottom: 0px;
height: 100px;
border: 1px solid #999999;
position: absolute;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
#header2 {
margin: 0px;
position: absolute;
left: 550px;
top: 70px;
right: 0px;
bottom: 0px;
padding: 0px;
}
#menu2 {
position:absolute;
top:135px;
left:20px;
width:160px;
padding:5px 10px 5px 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #003333;
font-style: normal;
voice-family:inherit;
width:150px;
line-height: normal;
text-transform: none;
text-align: right;
border-top: 0px none #999;
border-right: 1px solid #000000;
border-bottom: 0px none #999;
border-left: 0px none #999;
}
#main {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
background-color:white;
font-size: 11px;
font-style: normal;
font-variant: normal;
text-transform: none;
position: absolute;
left: 170px;
top: 130px;
right: 0px;
bottom: 0px;
}
#home {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
left: 130px;
top: 112px;
position: absolute;
text-transform: uppercase;
}
#sidemenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
position: absolute;
width: 175px;
left: 600px;
top: 129px;
border: 1px solid #999999;
padding: 5px;
}
.sidebanner {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
position: absolute;
width: 200px;
left: 600px;
border: 1px none #999999;
padding: 5px 5px 5px 0px;
top: 129px;
right: 10px;
}
Page:
<html>
<head>
<title>KZN Wildlife - Biodiversity Conservation</title>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<META HTTP-EQUIV='Expires' CONTENT='-1'>
<meta name='keywords' content='History, information, information'>
<meta name='description' content='Interesting information about our organisation*Information and history on our organisation'>
<link rel='stylesheet' type='text/css' href='style/contentpage.css'>
</head>
<body>
<html>
<head>
<link rel='stylesheet' type='text/css' href='style/newstyle.css'>
</head>
<DIV ID="search">
<TABLE BORDER="0" ALIGN="RIGHT">
<TR><TD>
<script>
<!--
function checkform(form) {
//Check the keyword for an entry
if (form.Keyword.value == "") {
alert("Please enter a keyword to search for!")
form.Keyword.focus()
return false
}
}
//-->
</script>
<form method="post" action="search/default1.asp" name="searchform" onSubmit="return checkform(searchform)" >
<input type="Text" name="Keyword">
<input name="Submit" type="Submit" value="SEARCH">
<input type="hidden" name="records_to_display" value="10">
</form>
</TABLE></div>
<div id="banner"><img src="css\banner5.jpg"></div>
<div id="header"><img src="css\newlogo2.gif"></div>
<div id="home"><a href="default.asp">HOME</a></div>
<br>
<div id="sidemenu">
<table width="100%" border="0">
<tr><td bgcolor="#006633">
<b><center><font color="white">PROTECTED AREAS</font color></center></b></tr>
<tr><td>
<a href="Org_pa.htm">Protected Area Information</a>
</tr>
<tr><td bgcolor="#006633">
<b><center><font color="white">BIODIVERSITY</font color></center></b></tr>
<tr><td>
<a href="biocons/pollin.doc">Pollinators and Agriculture</a> (document)<br>
<a href="Org_geospatial.htm">Geospatial Data Standards and Protocols</a><br>
<a href="biocons/biodivact.pdf">Biodiversity Act</a> (Sept 2004)
</tr>
<tr><td bgcolor="#006633">
<b><font color="white"><center>STAFF</center></font color></b></tr>
<tr><td>
<a href="Org_ecodbn.htm">The Eco-Advice Marine Team</a><br>
<a href="Org_mhlongo.htm">Anti-Poaching Unit: Robert Mhlongo</a><br>
</tr>
<tr><td bgcolor="#006633">
<b><font color="white"><center>REPORTS</center></font color></b></tr>
<tr><td>
<a href="Org_coastrep.htm">Coast Monthly Report</a><br>
<a href="coast\yrbook.doc">Coast Annual Yearbook</a><br>
<a href="coast\_mcmrep.doc">Marine & Coastal Management Yearbook</a>
</tr>
<tr><td bgcolor="#006633">
<b><font color="white"><center>RELATED LINKS</center></font color></b></tr>
<tr><td>
<a href="Org_trust.htm">Conservation Trust</a></tr>
</table>
</div>
<h1>CONSERVATION</h1><p>
<table width="68%" border="0" align="left">
<tr><td>
<b>CHROMOLAENA CLEARING PROJECT</b><p>
The Project Leader was employed on 5 November 2003. The Project then started to procure items, employ staff and workers as well as clearing areas of Chromolaena odorata.<p>
<b>CLEARING PLAN</b><br>
We are entering the new financial year with a full staff compliment, and filled with motivation to try our best and make this project go from strength to strength.<p>
<img src='images/chro_lab1.jpg' align='left' width="200" height="150"><img src='images/chro_lab2.jpg' width="200" height="150"><p>
</table>
</body>
<div id="menu2">
<a href='Org_conservation.htm'>Conservation</a><p>
<a href='Org_ecotourism.htm'>Ecotourism</a><p>
<a href='Org_partnership.htm'>Partnerships</a><p>
<a href='Org_downloads.htm'>Support Services</a><p>
<a href='Policies_general.htm'>Policies</a><p>
<a href='News_bulletin.htm'>News</a><p>
<a href='phlist_general.htm'>Contacts</a><p>
<a href='guestbook/guestbook.asp?sign'>Guestbook</a><p>
</body>
</body>
</html>
As this seems to be a problem on every page I assume the cause is in the CSS layout?
I have added the css and one problem page.
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
background-color:white;
font-size: 11px;
font-style: normal;
font-variant: normal;
text-transform: none;
border: #000000;
padding-top: 96px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 190px;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:20px;
font-weight:bold;
color:#CC6600;
font-family: Arial, Helvetica, sans-serif;
}
q {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#FFFFFF;
font-size:11px;
text-decoration:none;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
a:link {
color:#003333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
}
a:visited {
color:#003333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}
a:hover {
color: #CC6600;
}
#Header {
margin:0px;
padding:0px 0px 5px;
letter-spacing: normal;
word-spacing: normal;
position: absolute;
border: none;
text-align: left;
vertical-align: text-top;
height: 105px;
width: 537px;
left: 5px;
top: 10px;
right: 10px;
bottom: 20px;
}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
#Content {
margin:0px 100px 50px 200px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
top: 140px;
}
#Menu {
position:absolute;
top:125px;
left:20px;
width:160px;
padding:10px;
background-color:#FFFFFF;
border:1px none #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #003333;
font-style: normal;
voice-family:inherit;
width:150px;
line-height: normal;
text-transform: none;
text-align: right;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
#Subhead {
padding:0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
margin: 100px 0px 0px;
height: auto;
width: auto;
}
.subhead {
margin:0px 100px 25px 250px;
padding:60px 0px 0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
}
#banner {
margin: 0px;
height: 44px;
width: 414px;
position: absolute;
left: 345px;
top: 20px;
right: 0px;
bottom: 0px;
padding: 0px;
}
.menu1 {
background-color: #FF9933;
color: #003333;
font-family: verdana;
font-size: 9pt;
line-height: normal;
zindex: 99;
layer-background-color: eae8e8;
border: thin;
padding: 5px 0px 5px 20px;
text-align: left;
font-weight: normal;
}.menu {
top:125px;
left:500px;
padding:10px;
background-color:#FFFFFF;
border:0px none #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #003333;
font-style: normal;
voice-family:inherit;
width:150px;
line-height: normal;
text-transform: none;
text-align: left;
}
A.white:hover {
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#search {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 8px;
font-weight: bold;
color: #000000;
position: absolute;
left: 542px;
top: 57px;
right: 0px;
bottom: 0px;
padding: 0px;
width: 238px;
}
#subheadhome {
padding:0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #000000;
margin: 0px;
height: auto;
width: auto;
position: absolute;
top: 90px;
}
#quote {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
padding: 1px;
width: 200px;
left: 545px;
top: 129px;
right: 0px;
bottom: 0px;
height: 100px;
border: 1px solid #999999;
position: absolute;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
#header2 {
margin: 0px;
position: absolute;
left: 550px;
top: 70px;
right: 0px;
bottom: 0px;
padding: 0px;
}
#menu2 {
position:absolute;
top:135px;
left:20px;
width:160px;
padding:5px 10px 5px 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #003333;
font-style: normal;
voice-family:inherit;
width:150px;
line-height: normal;
text-transform: none;
text-align: right;
border-top: 0px none #999;
border-right: 1px solid #000000;
border-bottom: 0px none #999;
border-left: 0px none #999;
}
#main {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
background-color:white;
font-size: 11px;
font-style: normal;
font-variant: normal;
text-transform: none;
position: absolute;
left: 170px;
top: 130px;
right: 0px;
bottom: 0px;
}
#home {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
left: 130px;
top: 112px;
position: absolute;
text-transform: uppercase;
}
#sidemenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
position: absolute;
width: 175px;
left: 600px;
top: 129px;
border: 1px solid #999999;
padding: 5px;
}
.sidebanner {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
position: absolute;
width: 200px;
left: 600px;
border: 1px none #999999;
padding: 5px 5px 5px 0px;
top: 129px;
right: 10px;
}
Page:
<html>
<head>
<title>KZN Wildlife - Biodiversity Conservation</title>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<META HTTP-EQUIV='Expires' CONTENT='-1'>
<meta name='keywords' content='History, information, information'>
<meta name='description' content='Interesting information about our organisation*Information and history on our organisation'>
<link rel='stylesheet' type='text/css' href='style/contentpage.css'>
</head>
<body>
<html>
<head>
<link rel='stylesheet' type='text/css' href='style/newstyle.css'>
</head>
<DIV ID="search">
<TABLE BORDER="0" ALIGN="RIGHT">
<TR><TD>
<script>
<!--
function checkform(form) {
//Check the keyword for an entry
if (form.Keyword.value == "") {
alert("Please enter a keyword to search for!")
form.Keyword.focus()
return false
}
}
//-->
</script>
<form method="post" action="search/default1.asp" name="searchform" onSubmit="return checkform(searchform)" >
<input type="Text" name="Keyword">
<input name="Submit" type="Submit" value="SEARCH">
<input type="hidden" name="records_to_display" value="10">
</form>
</TABLE></div>
<div id="banner"><img src="css\banner5.jpg"></div>
<div id="header"><img src="css\newlogo2.gif"></div>
<div id="home"><a href="default.asp">HOME</a></div>
<br>
<div id="sidemenu">
<table width="100%" border="0">
<tr><td bgcolor="#006633">
<b><center><font color="white">PROTECTED AREAS</font color></center></b></tr>
<tr><td>
<a href="Org_pa.htm">Protected Area Information</a>
</tr>
<tr><td bgcolor="#006633">
<b><center><font color="white">BIODIVERSITY</font color></center></b></tr>
<tr><td>
<a href="biocons/pollin.doc">Pollinators and Agriculture</a> (document)<br>
<a href="Org_geospatial.htm">Geospatial Data Standards and Protocols</a><br>
<a href="biocons/biodivact.pdf">Biodiversity Act</a> (Sept 2004)
</tr>
<tr><td bgcolor="#006633">
<b><font color="white"><center>STAFF</center></font color></b></tr>
<tr><td>
<a href="Org_ecodbn.htm">The Eco-Advice Marine Team</a><br>
<a href="Org_mhlongo.htm">Anti-Poaching Unit: Robert Mhlongo</a><br>
</tr>
<tr><td bgcolor="#006633">
<b><font color="white"><center>REPORTS</center></font color></b></tr>
<tr><td>
<a href="Org_coastrep.htm">Coast Monthly Report</a><br>
<a href="coast\yrbook.doc">Coast Annual Yearbook</a><br>
<a href="coast\_mcmrep.doc">Marine & Coastal Management Yearbook</a>
</tr>
<tr><td bgcolor="#006633">
<b><font color="white"><center>RELATED LINKS</center></font color></b></tr>
<tr><td>
<a href="Org_trust.htm">Conservation Trust</a></tr>
</table>
</div>
<h1>CONSERVATION</h1><p>
<table width="68%" border="0" align="left">
<tr><td>
<b>CHROMOLAENA CLEARING PROJECT</b><p>
The Project Leader was employed on 5 November 2003. The Project then started to procure items, employ staff and workers as well as clearing areas of Chromolaena odorata.<p>
<b>CLEARING PLAN</b><br>
We are entering the new financial year with a full staff compliment, and filled with motivation to try our best and make this project go from strength to strength.<p>
<img src='images/chro_lab1.jpg' align='left' width="200" height="150"><img src='images/chro_lab2.jpg' width="200" height="150"><p>
</table>
</body>
<div id="menu2">
<a href='Org_conservation.htm'>Conservation</a><p>
<a href='Org_ecotourism.htm'>Ecotourism</a><p>
<a href='Org_partnership.htm'>Partnerships</a><p>
<a href='Org_downloads.htm'>Support Services</a><p>
<a href='Policies_general.htm'>Policies</a><p>
<a href='News_bulletin.htm'>News</a><p>
<a href='phlist_general.htm'>Contacts</a><p>
<a href='guestbook/guestbook.asp?sign'>Guestbook</a><p>
</body>
</body>
</html>