PDA

View Full Version : after opening in wysiwyg, page cant read stylesheet?



chen
Dec 15th, 2008, 06:09 PM
Hi guys,

this is a bugger and i cant figure out why after staring at the screen for 20 hrs!

ill try to make it simple. below are 2 codes, 1 for page and one for stylesheet.
when i open the page before editing it is fine. styles in tact. the moment i open page in a html editor and save it without changing anything, the page cant seem to link to the stylesheet anymore. All formatting is gone. No more style. What could be the issue here? Any help is appreciated greatly.

heres the page code


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/AboutUs+.jpg','images/Services+.jpg','images/Solutions+.jpg','images/ContactUs+.jpg')">
<center>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td width="682" height="700" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="263">
<!--flash begin-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="682" height="263">
<param name="movie" value="flash/flash.swf">
<param name="quality" value="high">
<embed src="flash/flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="682" height="263"></embed>
</object>
<!--flash end-->
</td>
</tr>
<tr>
<td height="353" align="center" valign="top">
<table width="669" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="399">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:28 ">
<tr>
<td height="30" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24" align="right" valign="top"><img src="images/Marker1000.jpg" width="17" height="17"></td>
<td height="30"><img src="images/Wellcome.jpg" width="382" height="29"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="14" background="images/BGLineDots.jpg" style="background-repeat:repeat-x "></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="156"><img src="images/Foto100.jpg" width="132" height="55" style="margin-left:4 "></td>
<td width="243" class="usial"><span class="usialBold">Lorem ipsum dolor</span> sit amet, conset eteturam sadipscing elitr, sed diamnon lab umy eirmod temp invidunt ut laboret <a href="#" class="red">eirmod tempor invidu. </a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="35" class="usial" style="padding-left:4 ">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidu ntut labore et dolore magna aliquyam consetetur sadipscing elitror invid.</td>
</tr>
<tr>
<td height="46" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="210" style="padding-left:4 "><img src="images/Marker200.jpg" width="3" height="3" style="margin-right:6 "><a href="#" class="red">Tempor invidunt ut labore et dolore</a></td>
<td width="189"><img src="images/Marker200.jpg" width="3" height="3" style="margin-right:6 "><a href="#" class="red">Sed diam nonumy eirmod temporv</a></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24" align="right" valign="top"><img src="images/Marker1000.jpg" width="17" height="17"></td>
<td height="30"><img src="images/LatestCompanyTest.jpg" width="382" height="29"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="14" background="images/BGLineDots.jpg" style="background-repeat:repeat-x "></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="198" height="54" class="usial" style="padding-left:4; padding-right:10 "><a href="#" class="redBold">22 June, 2007</a><span class="usialBold"> - Lorem ipsum do</span> amet, cons etetur sadip scinel sedia mnon umy eirmod temp invidunt uter labore atdolore magna erat.</td>
<td width="3" rowspan="2" bgcolor="CCCCCC"></td>
<td width="198" class="usial" style="padding-left:14; padding-right:6 "><a href="#" class="redBold">10 July, 2007</a> - <span class="usialBold">Sed diamy eirm</span> voluptua lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy voluptua sadipc.</td>
</tr>
<tr>
<td width="198" height="20" align="right" style="padding-right:14 "><a href="#" class="redBold">read more</a><img src="images/Marker300.jpg" style="margin-left:6 "></td>
<td width="199" align="right" style="padding-right:14 "><a href="#" class="redBold">read more</a><img src="images/Marker300.jpg" style="margin-left:6 "></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="23">&nbsp;</td>
<td width="247">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:28 ">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17" height="30" valign="top"><img src="images/Marker1000.jpg" width="17" height="17"></td>
<td valign="top"><img src="images/OurTestimonials.jpg" width="230" height="29"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="14" background="images/BGLineDots.jpg" style="background-repeat:repeat-x "></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="84" rowspan="2"><img src="images/Foto101.jpg" width="67" height="55"></td>
<td width="163" height="60" class="usial"><span class="redBold">Mr. Bruce Stivenson</span><br>
“Consetetur sadipscing elitr, sed eirmod tempor invidunt uterlabo dolore magna aliquyam erat”.</td>
</tr>
<tr>
<td height="41" align="right" valign="top" style="padding-right:10 "><a href="#" class="redBold">read more</a><img src="images/Marker300.jpg" style="margin-left:6 "></td>
</tr>
</table></td>
</tr>
<tr>
<td height="82" valign="top"><a href="#"><img src="images/247SupportService.jpg" width="245" height="71" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="images/SpecialPartnerProgram.jpg" width="245" height="71" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" align="center" background="images/HASSC.jpg" class="HASSC">HOME PAGE | <a href="index-1.html" class="HASSC">ABOUT US</a> | <a href="index-2.html" class="HASSC">SERVICES</a> | <a href="index-3.html" class="HASSC">SOLUTIONS</a> | <a href="index-4.html" class="HASSC">CONTACT US</a></td>
</tr>
<tr>
<td height="44" align="center" class="CR">Copyright © 2006. Company name. All rights reserved. <a href="#" class="CR">Privacy policy</a> | <a href="#" class="CR">Terms of use</a></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</center>
</body>
</html>

heres the stylesheet "style.css"


body{background-color:#FFFFFF; padding:0; margin:0}

.usial {
font-family: Tahoma;
font-size: 11px;
color: 575757;
}
a.usial {
font-family: Tahoma;
font-size: 11px;
color: 575757;
text-decoration: none;
}
a.usial:hover {
font-family: Tahoma;
font-size: 11px;
color: 575757;
text-decoration: underline;
}
.usialBold {
font-family: Tahoma;
font-size: 11px;
color: 575757;
font-weight: bold;
}
.red {
font-family: Tahoma;
font-size: 11px;
color: C00000;
}
a.red {
font-family: Tahoma;
font-size: 11px;
color: C00000;
text-decoration: underline;
}
a.red:hover {
font-family: Tahoma;
font-size: 11px;
color: C00000;
text-decoration: none;
}
.redBold {
font-family: Tahoma;
font-size: 11px;
color: C00000;
font-weight: bold;
}
a.redBold {
font-family: Tahoma;
font-size: 11px;
color: C00000;
text-decoration: underline;
font-weight: bold;
}
a.redBold:hover {
font-family: Tahoma;
font-size: 11px;
color: C00000;
text-decoration: none;
font-weight: bold;
}
.HASSC {
font-family: Tahoma;
font-size: 11px;
color: ffffff;
}
a.HASSC {
font-family: Tahoma;
font-size: 11px;
color: ffffff;
text-decoration: underline;
}
a.HASSC:hover {
font-family: Tahoma;
font-size: 11px;
color: ffffff;
text-decoration: none;
}
.CR {
font-family: Tahoma;
font-size: 11px;
color: 4B4B4B;
}
a.CR {
font-family: Tahoma;
font-size: 11px;
color: 7A7A7A;
text-decoration: none;
}
a.CR:hover {
font-family: Tahoma;
font-size: 11px;
color: 7A7A7A;
text-decoration: underline;
}
.Search {
font-family: Tahoma;
font-size: 11px;
color: 828282;
font-weight: bold;
}
.Keys {
font-family: Tahoma;
font-size: 10px;
color: 575757;
font-weight: bold;
}
a.Keys {
font-family: Tahoma;
font-size: 10px;
color: 575757;
text-decoration: none;
font-weight: bold;
}
a.Keys:hover {
font-family: Tahoma;
font-size: 10px;
color: 575757;
text-decoration: underline;
font-weight: bold;
}
.Form {
font-family: Tahoma;
font-size: 11px;
color: 333333;
font-weight: bold;
}


Cheers guys,

Cindy C

jerry62704
Dec 15th, 2008, 08:29 PM
It obviously has to do with the locations involved. Do you have a link?

You will hear about tables being a bad thing for positioning. They will be correct. #1 get the problem fixed, #2 look into changing from tables to correct positioning.

I like the styling of your css. But put a "#" before the hex number values in the color property. And you might want to add a default for the font-family of either san-serfit or serfit depending on your desires.