When I place the following CSS in the head of my page it works pretty well in Netscape 4.7. when I insert it using
<link rel="stylesheet" href="Parker.css" type="text/css" />
it acts strangely
The page displays correctly if I use one image in the content layer like so
<img src="Images/BarnFrame.jpg" width="150" height="116" style="float:left;margin:18px 10px 10px 0px;" alt="Barn Frame" />
If I add a second Image the same way the layout falls apart. Very strange. Can anyone shed any light? Page can be viewed at
a {
color:red;
text-decoration:none;
}
a:hover {color:black;text-decoration:underline}
div {
border: none;
}
#header {
margin-left: 0px;
color: #000;
background-color:#ccc;
background-image: url(Images/Banner3BG.gif);
}
#rightcol {
position: absolute;
left: 80%;
top:120px;
width: 140px;
height: 300px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
background-color:#def;
border:1px solid #000;
}
#rightcol p {
font-size: 10px;
font-weight:bold;
}
#rightcol a{
line-height:24px;
font-size:10px;
}
#content {
margin: 0px 19% 0px 1%;
padding: 20px;
color: #000;
background-color:#ccc;
background-image: url(Images/BackgroundJoinery.gif);
border: 1px solid #000;
}
#footer {
clear: both;
width: 82%;
margin: 10px;
text-align: center;
font-size: 11px;
padding: 3px;
border-top: 1px solid #333;
color: #000;
}
#footer .date {
float: left;
text-align: left;
}
#footer .contact {
float: right;
text-align: right;
}
html, body {
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
background-image:url(Images/BGGoldLines.gif);
}
p, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Verdana, Arial, sans-serif;
margin-top: 0px;
}
#corner {
position:absolute;
height: 20px;
width: 56px;
left: 0px;
top: 100px;
z-index:30
}
<link rel="stylesheet" href="Parker.css" type="text/css" />
it acts strangely
The page displays correctly if I use one image in the content layer like so
<img src="Images/BarnFrame.jpg" width="150" height="116" style="float:left;margin:18px 10px 10px 0px;" alt="Barn Frame" />
If I add a second Image the same way the layout falls apart. Very strange. Can anyone shed any light? Page can be viewed at
a {
color:red;
text-decoration:none;
}
a:hover {color:black;text-decoration:underline}
div {
border: none;
}
#header {
margin-left: 0px;
color: #000;
background-color:#ccc;
background-image: url(Images/Banner3BG.gif);
}
#rightcol {
position: absolute;
left: 80%;
top:120px;
width: 140px;
height: 300px;
padding-left: 10px;
z-index: 3;
color: #000;
padding: 3px;
background-color:#def;
border:1px solid #000;
}
#rightcol p {
font-size: 10px;
font-weight:bold;
}
#rightcol a{
line-height:24px;
font-size:10px;
}
#content {
margin: 0px 19% 0px 1%;
padding: 20px;
color: #000;
background-color:#ccc;
background-image: url(Images/BackgroundJoinery.gif);
border: 1px solid #000;
}
#footer {
clear: both;
width: 82%;
margin: 10px;
text-align: center;
font-size: 11px;
padding: 3px;
border-top: 1px solid #333;
color: #000;
}
#footer .date {
float: left;
text-align: left;
}
#footer .contact {
float: right;
text-align: right;
}
html, body {
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
background-image:url(Images/BGGoldLines.gif);
}
p, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Verdana, Arial, sans-serif;
margin-top: 0px;
}
#corner {
position:absolute;
height: 20px;
width: 56px;
left: 0px;
top: 100px;
z-index:30
}