Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: DW CSS problem

  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts

    DW CSS problem

    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="clsid27CDB6E-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
    Last edited by neo_philiac; 10-22-2007 at 07:44 PM. Reason: sd

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,875
    Thanks
    6
    Thanked 1,034 Times in 1,007 Posts
    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. Second thing to know is that writing semantic code and validating 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.

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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 ...

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,875
    Thanks
    6
    Thanked 1,034 Times in 1,007 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by neo_philiac View Post
    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

  • #6
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK. here we go ! I have everything in div layout. But still doesnt work in IE.


    Code:
    <!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','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">
        <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>

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,875
    Thanks
    6
    Thanked 1,034 Times in 1,007 Posts
    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?

  • #8
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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="clsid27CDB6E-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>
    Last edited by neo_philiac; 10-24-2007 at 10:40 PM.

  • #9
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Never mind I fixed it ... Thanks for all your help....appreciate it!

  • #10
    Regular Coder
    Join Date
    Jul 2006
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #11
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •