Help regarding CSS and javascript

alokarora

Registered
Hi Friends,

I have a problem. Following is my CSS code:

.divhometext{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
position:relative;
height:225px;
width:325px;
overflow-y:auto;
word-wrap:break-word;
scrollbar-3dlight-color: #669999;
scrollbar-arrow-color: #669999;
scrollbar-base-color: #669999;
scrollbar-darkshadow-color: #669999;
scrollbar-face-color: #fbf8cf;
scrollbar-highlight-color: #6C7A7B;
scrollbar-shadow-color: #6C7A7B;
scrollbar-track-color: #669999;padding:0px 5px 0px 5px;
}

This works perfectly on IE but on Mac explorer and safari it gives problem as text is displayed elsewhere and table cells are elsewhere. Please help me , i am too frustrated.

Thanks in advance

Regards.
 
I think this is close to what you were looking for. Works in Safari and IE 6, minor issue in IE5-mac but that could be fixed with a little CSS trickery. Should be much leaner and doesn't have the JS included (what was the purpose of it?)
 

Attachments

  • new_ver.html.zip
    2 KB · Views: 5
Thank you sir for getting it working. Can you please modify following code and get it working for me for mac ie and safari. I would be very grateful


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Costa Rica :: Home-English ::</title>
<style type="text/css">
.fff {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: double;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #007E47;
border-right-color: #007E47;
border-bottom-color: #007E47;
border-left-color: #007E47;
color: #007E47;
}
.box {
border-top: 2px solid #007E47;
border-right: 2px solid #007E47;
border-bottom: 2px solid #007E47;
border-left: 2px solid #007E47;
color: #007E47;
}
.ddd {
border: 1px solid #007E47;
color: #007E47;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
font-weight: normal;
font-variant: normal;
text-decoration: none;
border-right-color: #007E47;
border-bottom-color: #007E47;
}
.rlb {
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: #007E47;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #007E47;
border-left-color: #007E47;
}
.underline {
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #C9C8C8;
color: #007E47;
}
.outline {
border: 1px solid #007E47;
}
.divtext{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
position:relative;
height:320px;
width:405px;
overflow:auto;
word-wrap:break-word;
scrollbar-3dlight-color: #669999;
scrollbar-arrow-color: #669999;
scrollbar-base-color: #669999;
scrollbar-darkshadow-color: #669999;
scrollbar-face-color: #fbf8cf;
scrollbar-highlight-color: #6C7A7B;
scrollbar-shadow-color: #6C7A7B;
scrollbar-track-color: #669999;padding:0px 5px 0px 5px;
}
/*.divhometext{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
top: 105px;
left: 51%;
position: absolute;
height:225px;
width: 325px;
overflow:auto;
word-wrap:break-word;
scrollbar-3dlight-color: #669999;
scrollbar-arrow-color: #669999;
scrollbar-base-color: #669999;
scrollbar-darkshadow-color: #669999;
scrollbar-face-color: #fbf8cf;
scrollbar-highlight-color: #6C7A7B;
scrollbar-shadow-color: #6C7A7B;
scrollbar-track-color: #669999;padding:0px 5px 0px 5px;
}*/
.divhometext{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
position:relative;
height:225px;
width:325px;
overflow:auto;
word-wrap:break-word;
scrollbar-3dlight-color: #669999;
scrollbar-arrow-color: #669999;
scrollbar-base-color: #669999;
scrollbar-darkshadow-color: #669999;
scrollbar-face-color: #fbf8cf;
scrollbar-highlight-color: #6C7A7B;
scrollbar-shadow-color: #6C7A7B;
scrollbar-track-color: #669999;padding:0px 5px 0px 5px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #fbf8cf;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.style2 {
font-size: 12px;
color: #000000;
}
.style3 {color: #000000}
.style4 {color: #007F48}
.style5 {
font-family: "Times New Roman", Times, serif;
font-size: 36px;
color: #2c3b7d;
}
.style7 {font-size: 14}
.style8 {color: #2c3b7d}
.style16 {font-size: 14px}
.style17 {color: #007F48; font-size: 14px; }
.style18 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #007F48; }
.style19 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #007F48; }
.style32 {color: #2c3b7d}
.style20 {font-size: 14px; color: #2c3b7d; }
.style21 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #2c3b7d; }
a:link {
color: #2c3b7d;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #2c3b7d;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #007F48;
}
.style22 {color: #007F48}
.style23 {color: #007F48}
.style24 {color: #007F48}
.style25 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #007F48; }
.style26 {color: #007F48}
.style27 {color: #007F48}
.style28 {font-size: 14px}
.style29 {color: #2c3b7d}
.style30 {color: #007F48}
.style31 {color: #FBF8CF}
</style>
</head>
<body>
<table width="850" height="571" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="571" align="left" valign="middle"><br>
<table width="100%" height="491" border="1" cellpadding="0" cellspacing="0" bordercolor="007F48">
<tr>
<td height="489" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="right"><span class="style1"><span class="style28"><span class="style30">English</span> <span class="style29">| <a href="index_espa.php">Espa&ntilde;ol</a></span>&nbsp;&nbsp;&nbsp;</span>&nbsp;</span><span class="style2">&nbsp;</span><span class="style3">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
</tr>
<tr>
<td align="center" valign="middle"><table width="728" height="423" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" background="http://www.eci.indiawebsolutions.com/costarica/images/bg.jpg"><table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="50%" height="252"></td>
<td width="50%" valign="middle"><table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>
<div align="justify" class="divhometext" id="HomeText"><table width="95%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><P>IMAGINE</P>
<P>Imagine with me for a moment.</P>
<P>You are leaning in the shade of a massive acacia tree, the morning spring-like air refreshing on your bare arms. Bunches of small yellow flowers cover the tree, hanging like Chinese lanterns. Hummingbirds by the dozen flit busily between them, while small green parrots snuggle in chattering pairs on the branches. A sloth, perhaps the slowest animal on earth, takes a full minute to consider his next careful step, apparently unconcerned by your presence. In the undergrowth, a fallen leaf moves. A bright red frog with blue hind legs, an inch or so long, is foraging for ants.</P>
<P>A small river tumbles its rocky course, gurgling happily toward the next waterfall and its plunge to the valley below. Curious monkeys add to the sounds of the busy old-growth rainforest, where trees climb 150 feet and more toward the perfect sky.</P>
<P>Your eyes find, as they do every morning, the purple mountain towering some miles away above the lush treetops, lacy shreds of cloud crawling lazily across its face.</P>
<P>For you, this is the most soothing place on earth. It is what has made all the scrabble in the rat race of modern corporate survival worthwhile. It is your reward. There are no discordant sounds here, unless it is that of one monkey swearing at another but this bears no similarity to that of a swearing human. There are no traffic noises, no sounds other than the busy sounds of nature. Much lives here, but not human stress. Leave CNN turned off, and the entire world is at peace.</P>
<P>You look around, take a deep breath of clean air, smell the scent of flowers on the 72&nbsp;degree&nbsp;breeze, and smile quietly to yourself. This must be what paradise is like.</P>
<P>And it is home. It is your home. You turn slowly and head through the familiar shrubs and trees. A monkey barks in alarm as you head toward your garden, admiring the exotic flowers along the way and open your front door.</P>
<P>Another miraculous day has begun.</P></td></tr></table></div></td>
</tr>
<script language="javascript" type="text/javascript">
/*var ScreenWidth= screen.width ;
alert(ScreenWidth)
if (ScreenWidth<=800)
{
document.getElementById("HomeText").style.left="440" ; //56%
}else if (ScreenWidth>800 && ScreenWidth<=1024)
{
alert("fsdf")
document.getElementById("HomeText").style.left="510" ;//510
}else if (ScreenWidth>800)
{
document.getElementById("HomeText").style.left="51%" ;//510
}*/
</script>
</table></td>
</tr>
<tr>
<td height="151" colspan="2" align="left" valign="top">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="710" height="155">
<param name="movie" value="http://www.eci.indiawebsolutions.com/costarica/flash/nav.swf">
<param name="quality" value="high">
<embed src="http://www.eci.indiawebsolutions.com/costarica/flash/nav.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="710" height="155"></embed>
</object>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="right"><span class="style1"><span class="style28"><span class="style29"><span class="style30">Home</span> | <a href="aboutmt.php">About Madre Tierra</a> | <a href="surroun_guapiles.php">Surrounding Area</a> | <a href="livingin_overview.php">Living In Costa Rica</a> | <a href="contactus.php">Contact Us</a> </span>&nbsp;</span>&nbsp;&nbsp;&nbsp;</span><span class="style2">&nbsp;</span><span class="style3">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
 
Back
Top