...

View Full Version : DW CSS problem



neo_philiac
10-22-2007, 06:38 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','q uality','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

VIPStephan
10-22-2007, 07:35 PM
The obvious you’re missing is that Dreamweaver, as good as it is, is just a tool and can only be as good as the person that is using it. What I’m trying to say is that if you build real websites with advanced layouts you should know HTML and CSS enough to write/correct it by hand and not rely on any design mode of any WYSIWYG editor because that is only adding a lot of crap to your code and, as you see, will not help you get things straight across all browsers.

The first thing to know is that tables for layout is stupid (http://hotdesign.com/seybold/). Second thing to know is that writing semantic code (http://brainstormsandraves.com/articles/semantics/structure/) and validating (http://validator.w3.org) it frequently helps developing websites and spotting issues a lot since at least you know it’s not your wrong code that is causing an issue. Dreamweaver has a code validator as well.

Might not be the direct solution to your problem but I hope it gets you off on the right foot.

neo_philiac
10-23-2007, 02:22 PM
ok! I have been developing webpages for a while on DW now, but I guess I am not a super duper pro. I was expecting more credible solution ...

VIPStephan
10-23-2007, 07:21 PM
I’d have to write a huge essay to really solve your issue. The imminent problem is that your code is one huge mess and I can’t go to bed with a clear conscience if I only scratch the issue superficially because that’s just like painting over the crack in the wall, not really fixing it.

Write valid and semantic code and if you still have problems I’d certainly be glad to help you.

michael180
10-23-2007, 09:53 PM
ok! I have been developing webpages for a while on DW now, but I guess I am not a super duper pro. I was expecting more credible solution ...

Just start with a basic two col layout http://bonrouge.com/2c-hf-fixed.php, and go from there. Go into DR and establish a basic doc type, and hand code for a simple two col. layout.

If you use Firefox, and you certainly should, it has a wonderful HTML developer toolbar that is extremely useful.

And as stated "do not use tables for layout".

Once you get going, you can get all the help need here.

Good Luck

neo_philiac
10-24-2007, 07:40 PM
OK. here we go ! I have everything in div layout. But still doesnt work in IE.



<!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: #4286AD;
margin-left: 100px;

}
.hr {
position:absolute;
margin: 0px 0px 0px 0px;
width: 720;
z-index:2;
}
.bgimg { float:left; padding: 30px; margin: 10px; background: url(bgimg.gif) #CEDEA5; }

.width720 {
position:absolute;
z-index:1;
width: 718px;
height:400px;
margin: 275px 0px 0px 1px;
}

.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: #FFC329;
border: solid 5px #FFC329;
padding: 5px;
height:100px;
}

.bottommenuContainer {
position:absolute;
z-index:4;
width: 680px;
margin:200px 0px 0px 20px;
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: #CEEBF7;
border: solid 3px #CEEBF7;
border-top: none;
vertical-align: bottom;
padding: 5px;
text-align: left;
height:360px;
}
#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:#B52029;
}

.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, height:400 },
'#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>
<!--//*******Flash*************-->
<div class="hr" >
<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','src','mntp_top_1','quality','high','plug inspage','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">
<param name="movie" value="mntp_top_1.swf" />
<param name="quality" value="high" />
<embed src="mntp_top_1.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="720" height="275"></embed>
</object>
</noscript>
</div>
<!--//*******Base*************-->
<div class="width720">
<div id="onlyBottom">
<p>sdasdsd</p>
<p>asdasdasd</p>
<p>asdasd</p>
<p>&nbsp; </p>

<!--//*******Bottom Menu*************-->
<div class=" bottommenuContainer">
<div class="bottomMenu"><br><span class="bottommenuText">Number 1 in someclass where all have height:100px</span>
</div>
</div>


</div>
</div>



</body>
</html>

VIPStephan
10-24-2007, 09:23 PM
OK, since you are working with Dreamweaver you should be able to do the following: Click on “File” and then under “Convert” choose “XHTML 1.0 Strict”. You have a couple of errors in your code this will fix automatically. However, it’s not fixing all of them. In your script tags you have the type attribute twice (Dreamweaver will highlight the erroneous code and you forgot to set that same attribute for the style tag.

Then, when I’m previewing the page in Firefox and IE it looks the same in both. So what did you say is the problem?

neo_philiac
10-24-2007, 09:38 PM
OK i figured it out!!! I had some problem inside the class. But there is just one little problem. Between the flash and the div there is a small gap (look below where the 'base' comment starts). I had this problem before and it turned out to be a default padding issue. I tried setting the default padding to 0 for all/any div tag but didnt work in IE. It works fine for FF. Can anyone tell me what I need to change?


<div class="hr" >
<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','src','mntp_top_1','quality','high','plug inspage','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">
<param name="movie" value="mntp_top_1.swf" />
<param name="quality" value="high" />
<embed src="mntp_top_1.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="720" height="275"></embed>
</object>
</noscript>
</div>
<!--//*******Base*************-->
<div class="width720">
<div id="onlyBottom">
<p>sdasdsd</p>
<p>asdasdasd</p>
<p>asdasd</p>
<p>&nbsp; </p>

neo_philiac
10-24-2007, 10:08 PM
Never mind I fixed it ... Thanks for all your help....appreciate it!

neo_philiac
10-25-2007, 05:01 PM
Hey Guys:

I do have a tiny little problem. I cant get all of the page to align in center. I tried using <center> tag after <body> but cant get it to work. Is there a trick to doing it?

vtjustinb
10-25-2007, 05:04 PM
Most common way is to either wrap your content in a wrapper div with a specific width, or put a specific width on <body>, and then use "margin: 0 auto;"

The other way would be if you have a fixed width (of say 800px), you can relatively-position the body div to be left: 50%, and then set margin-left to be -400px to nudge it back to center (half of its width).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum