Forums
This topic is locked
What is going on? Site not right on other PCs
20 Jan 2007 01:59:08 tom kilbo posted:
I am nearly finished designing the basic layout for my webpage, using DW8 and previewing in IE6/7, FF, Netscape and Opera. It all looks great when I preview on my machine, but when I have been on two other machines using IE6 there are a few problems -
The Div called "bannerimage" should appear at the left of the screen, but appears on other machines about a third of the way along.
The Div called "chromemenu" (taken from Dynamic Drive) only appears on my machine.
The Divs called "left" and "right" should not be touching the div called "middletext"
As I said these above problems dont appear on my machine, only on the other two machines I have used to view the page.
Here is the code for my site -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tomkilbourn</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
background-color: #666666;
background-repeat: repeat-x;
}
#background {
background-color: #999999;
background-repeat: repeat-x;
min-width: 420px;
}
#middletext {
background-color: #FFFFFF;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-bottom-width: thin;
border-left-width: thin;
border-right-width: thin;
border-top-style: solid;
border-top-width: thin;
min-height: 500px;
margin-left: 185px;
margin-right: 185px;
margin-bottom: 20px;
margin-top: 20px;
}
#footer {
background-color: #CC66CC;
background-repeat: repeat-x;
height: 100px;
}
#banner {
background-color: #FFFFFF;
background-repeat: repeat-x;
height: 96px;
background-image: url(images/bg-header.gif);
}
#right {
float: right;
width: 145px;
background-color:#FFFFFF;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-width: thin;
border-left-width: thin;
border-right-width: thin;
margin-top: 20px;
border-top-style: solid;
border-top-width: thin;
margin-right: 20px;
height: 335px;
}
#left {
float: left;
width: 145px;
background-color:#FFFFFF;
border-bottom-style: solid;
border-bottom-width: thin;
border-left-style: solid;
border-left-width: thin;
border-right-style: solid;
border-right-width: thin;
margin-top: 20px;
border-top-style: solid;
border-top-width: thin;
margin-left: 20px;
height: 335px;
}
#topright {
float: right;
width: 200px;
background-color:#FFFFFF;
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-bottom-width: thin;
border-left-width: thin;
border-top-width: thin;
border-right-width: thin;
margin-left: 301px;
text-align: center;
}
#topmenu {
background-color:#996666;
border-bottom-style: solid;
border-bottom-width: thin;
border-left-style: none;
border-right-style: none;
border-right-width: thin;
border-top-style: solid;
border-top-width: thin;
height: 70px;
width: 100%;
}
#bottomtext {
background-color: #99CC33;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 10px;
margin-top: 10px;
height: 50px;
text-align: center;
min-width: 390px;
}
#bannerimage {
background-color: #00CCFF;
height: 96px;
width: 300px;
background-repeat: no-repeat;
text-align: left;
position: absolute;
background-position: left;
float: left;
}
#backgroundcontent {
background-color: #CCCCCC;
padding-bottom: 40px;
height: 100%;
}
#content {
background-color: #99FFFF;
}
#backgroundcontent2 {
background-color: #99FF66;
width: 1px;
height: 500px;
}
#date {
width: 250px;
float: right;
font-weight: bold;
padding: 5px 0;
background: url(images/chromebg.gif) center center repeat-x;
border: 1px solid #BBB;
font-size: 90%;
text-align: center;
margin-top: 20px;
margin-left: 580px;
}
#searchboxleft {
background-color: #0066CC;
margin-left: 12.5px;
margin-top: 20px;
width: 120px;
font-weight: bolder;
font-size: 90%;
text-align: center;
}
</style>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: www.dynamicdrive.com/style/ */
#chromemenu{
width: 45%;
font-weight: bold;
font-size: 90%;
min-width: 589px;
margin-top: 20px;
position: absolute;
margin-bottom: 20px;
}
#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(images/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
#chromemenu ul li a:hover{
background: url(images/chromebg2.gif) center center repeat-x;
}
#contactus {
background-color: #00CCCC;
width: 120px;
margin-left: 12.5px;
font-weight: bolder;
font-size: 90%;
}
#tellafriend {
background-color: #FFFF66;
width: 120px;
margin-left: 12.5px;
margin-top: 20px;
font-weight: bolder;
font-size: 90%;
}
</style>
</head>
<body>
<div id="background">
<div id="content">Content for id "content" Goes Here
<div id="banner">
<div id="topright">#Topright</div>
<div id="bannerimage"><a href="../../index.htm"></a>Content for " bannerimage" Goes Here </div>
</div>
<div id="topmenu">
<div id="date">Content for id "date" Goes Here</div>
<div id="chromemenu">
<ul>
<li><a href="www.dynamicdrive.com/">Test One </a></li>
<li><a href="www.dynamicdrive.com/style/">Test Two </a></li>
<li><a href="www.cssdrive.com/">Test Three </a></li>
<li><a href="tools.dynamicdrive.com/imageoptimizer/">Test Four </a></li>
<li><a href="tools.dynamicdrive.com/favicon/">Test Five </a></li>
<li><a href="tools.dynamicdrive.com/button/">Test Six </a></li>
</ul>
</div>
<br>
</div>
<div id="backgroundcontent">Content for id "backgroundcontent" Goes Here
<div id="right">Content for id "right" Goes Here</div>
<div id="left">Content for id "left" Goes Here<br>
<div id="searchboxleft">Search My Site >></div>
<p> </p>
<p><br>
</p>
</div>
<div id="middletext">
<p>Content for id "middletext" Goes Here</p>
</div>
</div>
<div id="footer">Content for id "footer" Goes Here
<div id="bottomtext"></div>
</div>
</div>
</div>
</body>
</html>
Its really doing my head in as I cant work out why different machines show things differently! Help!!