DesignIt
06-24-2005, 02:39 PM
So I was able to fix my original layout to work in IE mac, I was sooo excited!! Then I powered up my pc notebook and tried it in IE pc...low and behold, there is a glitch!! grrr...
Can anybody figure out what might be the problem here? I built this based off of the templates in layoutomatic.com:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
height:558px;
border: 0px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#leathernav {
float: left;
width: 191px;
\width: 191px;
w\idth: 191px;
height: 558px;
margin: 0;
margin-right: 0px;
padding: 0px;
background-image:url(images/home_leftnav.jpg)
}
#leftnav
{
margin-left: 44px;
text-align: left;
text-decoration: none;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 197px;
vertical-align: top;
}
/*nav links*/
#leftnav a:link {color: #FFFFFF; text-decoration: none; height: 19px;}
#leftnav a:visited { color: #FFFFFF; text-decoration: none; height: 19px;}
#leftnav a:hover { color: #FFEEBB; text-decoration: none; height: 19px;}
#leftnav a:active {color: #FFEEBB; text-decoration: none; height: 19px;}
#toppics {
float: right;
height: 108px;
width: 569px;
margin: 0px;
padding: 0px;
}
#top1 {
float: left;
}
#top2 {
float: left;
}
#top3 {
float: left;
}
#content {
float: left;
margin: 0px;
padding: 0px;
width: 569px;
height:450px;
}
#mainpic {
float:left
height:309px;
margin:0px;
border:0px;
}
#footer {
clear: both;
padding: 0px;
margin-top: 0px;
background-color:#000000
}
</style>
</head>
<body>
<div id="container">
<div id="leathernav">
<div id="leftnav"> <a href="index_layers2.htm" class="nav_1">HOME</a><br/>
<a href="location_layers2.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">HOMES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a></div>
</div>
<div id="toppics">
<div id="top1"><img name="top1" src="images/home_top1.jpg" width="189" height="108" alt="" /></div>
<div id="top2"><img name="top2" src="images/home_top2.jpg" width="190" height="108" alt="" /></div>
<div id="top3"><img name="top3" src="images/home_top3.jpg" width="190" height="108" alt="" /></div>
</div>
<div id="content"><img src="images/home_headline.jpg" width="569" height="141"/>
<div id="mainpic"><img src="images/home_pic.jpg" width="569" height="309" /></div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
Thanks!!
Can anybody figure out what might be the problem here? I built this based off of the templates in layoutomatic.com:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
height:558px;
border: 0px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#leathernav {
float: left;
width: 191px;
\width: 191px;
w\idth: 191px;
height: 558px;
margin: 0;
margin-right: 0px;
padding: 0px;
background-image:url(images/home_leftnav.jpg)
}
#leftnav
{
margin-left: 44px;
text-align: left;
text-decoration: none;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 197px;
vertical-align: top;
}
/*nav links*/
#leftnav a:link {color: #FFFFFF; text-decoration: none; height: 19px;}
#leftnav a:visited { color: #FFFFFF; text-decoration: none; height: 19px;}
#leftnav a:hover { color: #FFEEBB; text-decoration: none; height: 19px;}
#leftnav a:active {color: #FFEEBB; text-decoration: none; height: 19px;}
#toppics {
float: right;
height: 108px;
width: 569px;
margin: 0px;
padding: 0px;
}
#top1 {
float: left;
}
#top2 {
float: left;
}
#top3 {
float: left;
}
#content {
float: left;
margin: 0px;
padding: 0px;
width: 569px;
height:450px;
}
#mainpic {
float:left
height:309px;
margin:0px;
border:0px;
}
#footer {
clear: both;
padding: 0px;
margin-top: 0px;
background-color:#000000
}
</style>
</head>
<body>
<div id="container">
<div id="leathernav">
<div id="leftnav"> <a href="index_layers2.htm" class="nav_1">HOME</a><br/>
<a href="location_layers2.htm" class="nav_1">LOCATION</a><br/>
<a href="*.htm" class="nav_1">COMMUNITY</a><br/>
<a href="*.htm" class="nav_1">PROPERTIES</a><br/>
<a href="*.htm" class="nav_1">HOMES</a><br/>
<a href="*.htm" class="nav_1">INFRASTRUCTURE</a><br/>
<a href="*.htm" class="nav_1">CONTACT US</a></div>
</div>
<div id="toppics">
<div id="top1"><img name="top1" src="images/home_top1.jpg" width="189" height="108" alt="" /></div>
<div id="top2"><img name="top2" src="images/home_top2.jpg" width="190" height="108" alt="" /></div>
<div id="top3"><img name="top3" src="images/home_top3.jpg" width="190" height="108" alt="" /></div>
</div>
<div id="content"><img src="images/home_headline.jpg" width="569" height="141"/>
<div id="mainpic"><img src="images/home_pic.jpg" width="569" height="309" /></div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
Thanks!!