PDA

View Full Version : DW/CSS problem



neo_philiac
10-22-2007, 05:39 PM
Hi guys:

I have been working with CSS in DW for a while now but it always makes me mad when I cant Firefox and IE to look the page same. I guess its a problem with setting the width of the table. I have done it but somewhere I am missing the obvious . It works fine in FF but messes up in IE (Grrrrr). Please help! Here what I have been working on :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><head><title>MNTP</title>
<style>
<!--

* body {
background-color: #21B6AD;
}
.hr { background:#000; height:1px; font-size:1px; }
.bgimg { float:left; padding: 30px; margin: 10px; background: url(bgimg.gif) #CEDEA5; }
.width720 { width: 718px; margin: 0 10px 10px; }
.leftmenu150 { width: 150px; margin: 0 10px; }
.width300 { width: 300px; margin: 0 10px; }
.width80p { width: 80%; margin: 0 auto; }
#test { border:3px solid red; padding:1em; }
.element { background: gray; padding: 16px; }
/* #glow { border: solid 1px red; } */
.someclassContainer { width: 160px; float: left; margin:0 10px; height:160px; }
.someclass {
background: #3300ff;
border: solid 5px yellow;
padding: 22px;
height:100px;
}
.leftmenuContainer { width: 150px; float: left; margin:0 10px; height:160px; }
.leftMenu {
background: #FFEBDE;
border: solid 5px #FFEBDE;
padding: 5px;
height:100px;
}

.bottommenuContainer { width: 680px; float: left; margin:0 10px; height: 70px; }
.bottomMenu {
background: #ADB6A5;
border: solid 5px #ADB6A5;
padding: 5px;
height:50px;
}

.box_1_Container { width: 510px; float: left; margin:0 10px; }
.box_1_Menu {
background: #FFF7CE;
border: solid 5px #FFF7CE;
padding: 10px;
}

.left { width: 80px; float: left; }
.clear { clear: both; }
#onlyTop { background: #7B3; border: solid 3px yellow; border-bottom: none; padding: 20px; }
#onlyBottom {
background: #CEE3EF;
border: solid 3px #CEE3EF;
border-top: none;
padding: 5px;
text-align: left;
}
#onlyLeft { background: #7B3; border: solid 2px yellow; border-right: none; padding: 20px; }
#onlyRight { background: #362; border: solid 2px yellow; border-left: none; padding: 20px; }
#withbgimg1 { color: white; border: solid 1px #85ADC3; padding:3em;
background: url(gradient.gif) #003B62; background-repeat: repeat-x; }
#withbgimg1 * { color: white; }

#withbgimg2 {
background: #CEDEA5 url(bgimg.gif); background-repeat: repeat-x;
padding: 30px; color: black; }
#withbgimg2 * { color: black; }

//.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #F78618;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
color: #21287B;
}
.basestyle{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
}
.clearText{
font-family:Arial, Helvetica, sans-serif;
font-size:8px;
visibility:hidden
}
.leftmenuText{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#531560;
}

.bottommenuText{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#000000;
}
-->
</style>
<script type="text/javascript" type="text/javascript" src="cssquery2-p.js"></script>
<script type="text/javascript" type="text/javascript" src="ruzeeborders.js"></script>
<script type="text/javascript" type="text/javascript"><!--

RUZEE.Borders.add({
'#test': { borderType:'shadow', cornerRadius:10, shadowWidth:20 },
'#glow': { borderType:'glow', cornerRadius:4, glowRadius:5, glowColor:'white' },
'.someclass': { borderType:'simple', cornerRadius:20, height:100 },
'.leftMenu': { borderType:'simple', cornerRadius:12, height:100 },
'.bottomMenu': { borderType:'simple', cornerRadius:12, height:50 },
'.box_1_Menu': { borderType:'simple', cornerRadius:12 },
'#onlyTop, #onlyBottom, #onlyLeft, #onlyRight':
{ borderType:'simple', cornerRadius:12, shadowWidth:0 },
'#onlyTop': { edges:'lrt' },
'#onlyBottom': { edges:'lrb' },
'#onlyLeft': { edges:'ltb' },
'#onlyRight': { edges:'rtb' },
'#withbgimg1': { borderType:'simple', cornerRadius:20 },
'#withbgimg2': { borderType:'shadow', cornerRadius:10, shadowWidth: 10 }
});

window.onload=function(){
//alert("sd");
RUZEE.Borders.render();
};

//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','720','height','275','align','absmiddle','src','mntp_top_1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','mntp_top_1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="720" height="275" align="absmiddle">
<param name="movie" value="mntp_top_1.swf" />
<param name="quality" value="high" />
<embed src="mntp_top_1.swf" width="720" height="275" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object></noscript></td>
</tr>
<tr>
<td><div class="width720" align="center">
<div id="onlyBottom">
<!--//*******Inside Table***************Inside Table*************Inside Table************-->
<table width="720" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top"><strong><span class="style2">&nbsp;&nbsp;&nbsp;&nbsp;WELCOME </span> <span class="style3">TO THE MNTP WEBSITE !</span></strong><br />
<br /></td>
</tr>
<tr>
<td>
<!--//*******Inside Table***************Inside Table*************-->
<table width="680" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="160" valign="top">

<div class=" leftmenuContainer">
<div class=" leftMenu">
<span class="leftmenuText"><strong>
CNBC <br>
Graduate Program <br>
Link 1 <br>
Link 1 <br>
Link 1 <br>
Link 1 <br>
</strong>
</span>
</div>
</div>

</td>
<td width="520" valign="top">

<!--//*******Boxes********-->
<div class=" box_1_Container">
<div class=" box_1_Menu">
<span class="style2"><strong>StatsReader v2.1 HowTo:</strong></span> <br>
<span class="basestyle">
New in 2.0: if setting target size to "0" you can use StatsReader
to add keyframes in desired locations. Make sure to use a different
filename for the target file and set that file up in xvid as first
pass statsfile. Since the frametypes are gathered from the first
pass file, setting them only in a ... more
</span>

</div>
</div>

<!--//*******Break********-->
<p><span class="clearText">T</span></p>
<!--//*******Break********-->

<div class=" box_1_Container">
<div class=" box_1_Menu">
<span class="style2"><strong>TYPES OF LICENSES: </strong></span> <br>
<span class="basestyle">
In order to install and use the Software, You must obtain
one of the following two types of licenses: (1) Evaluation
License or (2) Commercial Use License.
If You would like to try using the Software before
purchasing a Commercial Use License, then You may wish to
obtain an Evaluation License. This will allow You to use
the Software for free for a period of up to thirty (30)
</span>

</div>
</div>
<!--//*******Boxes********-->

</td>
</tr>
</table>
<!--//*******Inside Table***************Inside Table*************-->
</td>
</tr>
<tr>
<td ><div class=" bottommenuContainer">
<div class="bottomMenu" align="center"><br><span class="bottommenuText">Number 1 in someclass where all have height:100px</span>
</div>
</div></td>
<td width="0"></td>
</tr>
</table>
<!--//*******Inside Table***************Inside Table*************Inside Table************-->
</div>
</div></td>
</tr>
<tr>
<td width="0"></td>
</tr>
</table>
</body>
</html>




Thanks!