...

View Full Version : CSS help



krs2000
03-22-2005, 02:33 PM
Hi, can someone help me with this css. I am new and learning this css. When open this file, after photos and news list links, whatever i do it doesn't seem to work in both IE and Mozilla. Can somebody tell me what was wrong in my doing.
Appreciate your help. Krs :mad: :mad: please find the attachment.

ronaldb66
03-22-2005, 02:49 PM
I can't open zips (company firewall...); any chance of supplying a link to the page online? It works much better anyway when people can view the actual page in their browser.
Also, could you decribe in a little more detail what is "not working" between the two browsers? It'll help people zooming in onthe problem at hand.

Ranger56
03-22-2005, 03:37 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>test1</title>

<style type="text/css">
<!--
html, body {
margin: 0px; padding: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
}
#wrapper {
background: #ffffff;
margin: 0 auto;
padding: 0px;
position: relative;
height: 100%;
width: 760px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
}
#header {
background-color: #61943a;
height: 90px; margin: 0px; padding: 0px;
background-image: url "images/top_banner.jpg";
background-repeat: no-repeat;
border-bottom: 1px solid #ffffff;
}
#logo {
margin: 10px 0px 0px 10px;
padding: 0px;
width: 180px;
height: 62px;
float: left;
}
#flags {
width: 50px; height: 24px; float: right; margin: 12px 12px 0px 0px;
}
#navigBox {
margin: 0px; padding: 0px; background-color: #ffcc00;
height: 32px; width: 100%;
}
#nav {
background-color: #99cc66;
width: 556px;
height: 32px;
line-height: 32px;
margin-left: 10px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
list-style-type: none;
border-left: 1px solid #ffffff;
}
#nav li a {
display: block;
width: 110px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: White;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav li a:hover {
display: block;
width: 110px;
font-size: 10px;
font-weight: bold;
color: black;
text-align: center;
text-decoration: none;
text-transform: uppercase;
background-color: #ffcc00;
}
#homeTxtBox {
margin-top: 12px; padding: 0px; float: left; height: 120px; width: 100%; position: relative;
}
#photoBox {
margin: 0 auto; background-color: #f2f2f2; width: 520px; height: 160px;
position: relative; float: left; padding: 6px;
border-left: 6px solid #ffffff;
background-repeat: no-repeat;
}
#newsBox {
margin: 0 auto; background-color: #f2f2f2; width: 198px; height: 160px;
float: left; border-left: 6px solid #ffffff; padding: 6px;
}
.mylist {
font-family: Arial, Verdana, Tahoma; font-size: 11px; margin: 0px; padding: 0px;
}
.mylist ul {
margin: 0px; padding: 0px; list-style-type: none;
}
.mylist li a {
margin: 0px; padding: 0px; list-style-type: none; text-decoration: none;
display: block; width: 190px; color: #000; border-bottom: 1px solid #fff;
}
.mylist li a:hover {
margin: 0px; padding: 0px; list-style-type: none; text-decoration: none;
display: block; width: 190px; color: #FF7F50; border-bottom: 1px solid #fff;
}
#mainContent {
clear: both;
width: 750px; margin: 0 auto; padding: 0px; float: left;
background-color: #D5DCE3; border-top: 6px solid #666;
}
#footer {
clear: both;
width: 752px;
height: 26px;
background-color: #66ccff;
border-top: 6px solid #ffffff;
bottom: 0px;
position: absolute;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px; padding: 6px 2px 2px 6px;
}
a {
text-decoration: none; color: #ffffff;
}
a:hover {
text-decoration: underline; color: #000000;
}


-->
</style>
</head>

<body>
<div id="wrapper"><!--page container-->
<div id="header"><!--Topmost header begins-->
<div id="logo"><img src="images/logo.gif" height="62" width="180"></div><!--Logo goes here-->
<div id="flags"><a href="#"><img src="images/flgenglish.gif" height="13" width="20" alt="Englsih" border="0"></a> &nbsp;<a href="#"><img src="images/flgthai.gif" height="13" width="20" alt="Thai" border="0"></a></div>

</div><!--Topmost header ends-->
<div id="navigBox"><!--navigation background-->
<div id="nav"><!--Main navigation begins-->
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">Objectives</a></li>
<li><a href="#">News / Events</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div><!--Main navigation ends-->
</div><!--Navigation background ends-->

<div id="homeTxtBox">
<div id="photoBox"><img src="images/homeimg.jpg" height="150" width="516" align="Friends Photos" border="0"></div><!--Photo container-->
<div id="newsBox"><div class="mylist">
<ul>
<li><a href="#">This is to test how it works. This is to test how it works. This is to test how it works.</a></li>
<li><a href="#">This is to test how it works. This is to test how it works. This is to test how it works.</a></li>
<li><a href="#">This is to test how it works. This is to test how it works.</a></li>
<li><a href="#">This is to test how it works. This is to test how it works. This is to test how it works.</a></li>
</ul>
</div>
</div><!--News list container-->
</div><!--homepage text/news/photos container-->
<div id="maincontent">This is main content.</div>

<div id="footer">All Rights Reserved to TAFS Thailand | Design & Development by <a href="http://www.nzonebkk.com" target="_blank">NZONE Bangkok</a></div>
</div><!--main container ends here-->
</body>
</html>


Try that it worked for me. I couldn't see the link to the arrow anywhere in the code...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum