No replies
k397209
Offline
newbie
Last seen: 15 years 38 weeks ago
Joined: 2004-03-19
Posts: 1
Points: 0

hi,
HI, i am dead new to css and css layouts and so on... I have created a page that displays fine in IE but i can't get it to display correctly in Netscape or Opera. if anyone has any ideas at all i would love to hear... thanks loads for looking........

sam: html is first and css is right below.....thanks loads

html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet type="text/css" HREF="/css/new.css" >
</head>

<body>
<div class="total">
<div class="content1">

<div class="row">
<div class="left">
<h2>&gt; Welcome to Test <em>Test</em>Test.com &nbsp;::&nbsp;
</h2>
</div>

<div class="right">
<img src="test.gif" width="126" height="64">
</div>
</div>
</div>

<div id="container" align="center">
<DIV id="menu">
<p class="p3">&gt; Europe</p>
<p>England</p>
<p>Hungary</p>
<p>Ireland</p>
<p>Netherlands</p>
<p>N Ireland</p>
<p>Romania</p>
<p>Scotland</p>
<p>Wales</p>
</DIV>
<DIV id="menu2">
<p class="p3">&gt; Africa</p>
<p>Nigeria</p>
<p>S Africa</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</DIV>
<DIV id="menu2">
<p class="p3">&gt; Asia</p>
<p>Australia</p>
<p>Guam</p>
<p>Hong Kong</p>
<p>Pakistan</p>
<p>Singapore</p>
<p>Sri Lanka</p>
<p>Mauritius</p>
<p>&nbsp;</p>
</DIV>
<DIV id="menu2">
<p class="p3">&gt;Americas</p>
<p>Brasil</p>
<p>Chile</p>
<p>Argentina</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</DIV>
<DIV id="menu2">
<p class="p3">&gt; Middle East</p>
<p>Abu Dhabi</p>
<p>Brunei</p>
<p>Dubai</p>
<p>Oman</p>
<p>Iran</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</DIV>
<DIV id="menu3">
<p class="p4">&gt; Features</p>
<p><a href="http://www.test.com/" title="An overview of Test">About</a></p>
<p><a href="http://test.org/" title="Join our International forum">Forum</a></p>
<p><a href="http://test.com/" title="Meet young testers from around the world">Case Studies</a></p>
<p><a href="http://test.com/" title="Staying in touch with the global network: Test employees only">Intranet</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</DIV>

</div>

<div>
<div class="content1">
<p> &#169 test <em>test</em>test </p>
</div>
</div>

<div align="center" valign="bottom" id="back2"> <p class="p2" >test at test<br>

<a href="mailto:[email protected]" title="[email protected]">Mail
us here</a> </p>

</div>

</div>

<!-- TemplateEndEditable -->
</body>
</html>

CSS:
body {
color:Window, #FFFFFF;

font-family: Arial, Helvetica, sans-serif;
font-color: WindowText, #000000;
font-size: 70%;
}

.row { position: relative;
width: 100%;
vertical-align: center; }

.left { width: 70%;
float: left; }

.right { width: 10%;

float: right; }

#back2 {color:#000000;

align:left;
vertical-align:bottom;
width: 100%;
height: 5%;
}

#menu {
position: fixed;
display: inline;
line-height : 110%;
border-left: 0px;
border-right: 1px dotted black;
border-top:0px;
border-bottom:0px;
padding: 10px, 10px;
width: 16%;
top: 0;
right: auto;
bottom: auto;
left: auto;
text-align:left;
}

#menu2 {
position: fixed;
display: inline;
line-height : 110%;
border-left: 0px;
border-right: 1px dotted black;
border-top:0px;
border-bottom:0px;
padding: 10px, 10px;
width: 16%;
top: 0;
right: auto;
bottom: auto;
left: auto;
text-align:left;
}

#menu3 {
position: fixed;
display: inline;
line-height : 110%;
border-left: 0px;
border-right: 0px dotted black;
border-top:0px;
border-bottom:0px;
padding: 10px, 10px;
width: 16%;
top: 0;
right: auto;
bottom: auto;
left: auto;
text-align:left;
}

p { font-family: Arial, Helvetica, sans-serif;
font-color: WindowText, #000000;
width: 100%;
padding: 0px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 0px;
}

h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
color:#ffffff;
font-weight: bold ;
margin:0px 0px 5px 0px;
padding:0px;
}

.p3 {
font:12px verdana, arial, helvetica, sans-serif;
color:#5981CB;
font-weight: bold ;
margin:0px 0px 16px 0px;

}

.p4 {
font:12px verdana, arial, helvetica, sans-serif;
color:#F10707;
font-weight: bold ;
margin:0px 0px 16px 0px;

}

#container {
position: fixed;
align: center;
padding: 10px, 10px;
width: 100%;
margin:17px 170px 20px 167px;

border:1px solid black;
}

body>#container {width:80%;}

.content1 {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:17px 170px 20px 167px;
border:1px solid black;
background-color:#64A7F3;
color:#ffffff;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}