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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile some css & ie problems. Any helping hand? :D

    Hello all!

    I am currently developing a site using joomla.
    However, joomla has nothing to do with my problem.

    After trying my site for days in firefox, i guess it came as no surprise that ie shows some things differently.

    I managed to find and overcome 2 of the 3 problems i have, but one still remains.

    In the following code, i have a 2 column layout, where on the first column is a flash menu on top (totally top, 0 margin, so its top side is stuck on the border)
    , some content and a flash banner at the bottom (totally bottom, so the bottom side of the banner is stuck to the border). The second column has a flash banner again, which is narrow in width, but exactly as tall as the other column, so it fits nicely!

    the following code words flawlessly in firefox, but in internet explorer 6 & 7 it displays some white space between the flash files so they are not stuck on the border anymore.

    You can even copy & paste the code into dreamweaver or something and test it on both browsers. Although the links do not work, you can easily spot the white space. If its absolutely nessecary i will post the links but i think its easily spottable.

    Thanks in advance for any help.
    I am a css newbie and for this project i am forced to use inline css, so forgive me for the ugly code

    It might be something i just dont see, my brain is wrecked after hours of searching!


    Code:
    <table cellspacing="0" cellpadding="0" align="left" style="border: 0px none ; margin: 0px; padding: 0px; width: 819px; height: 544px;">
    <tbody>
    <tr>
    
    <td style="border: 1px solid rgb(153, 153, 153); margin: 0px; padding: 0px; width: 630px; height: 542px;">
    
    <div align="center" style="width: 630px; height: 431px;">
       <div align="center" style="width: 630px; height: 20px; margin-top: 0px; padding-top: 0px;">
    
           //FLASH MENU ON TOP
           <object width="630" height="20" align="top"    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"  id="menu">
           <param name="allowScriptAccess" value="sameDomain"  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"/>
           <param name="movie" value="http://www.somedomain.com/folder/images/stories/menu.swf" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="20" align="middle" src="http://www.somedomain.com/folder/images/stories/menu.swf" quality="high" salign="lt" bgcolor="#ffffff" name="menu" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
           </object>
    
    
          </div>
            <div align="left" style="margin: 0px; padding: 0px; width: 100%;">
              <div style="margin-left:8px !important; margin-left:4px;">
        
    
              some content here
    
    
             </div>
          </div>
     </div>
    
        
      <div align="left" style="border: 0px none ; margin: 0pt; padding: 0pt; clear: both; width: 630px; height: 111px;">
    
          //FLASH BANNER HERE
         <object width="630" height="111" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="footer 01">
         <param name="allowScriptAccess" value="sameDomain" />
         <param name="movie" value="http://somedomain.com/folder/images/stories/footer1.swf" /><param name="quality" value="high" /><param name="salign" value="lb" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="111" align="middle" src="http://somedomain.com/folder/images/stories/footer1.swf" quality="high" salign="lb" bgcolor="#ffffff" name="footer 01" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
         </object>
    
       </div>
     </td>
    
      <td valign="top" align="left" style="margin: 0px; width: 819px; padding-left: 7px; padding-top: 0px; padding-bottom: 0px;">
      <div align="left" valign="top" style="margin: 0px; padding: 0px; width: 176px;">
         
        //FLASH BANNER HERE
        <object width="176" height="544" align="left" id="footer" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
         <param value="sameDomain" name="allowScriptAccess" />
         <param value="http://somedomain.com/estelia/images/stories/column.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed width="176" height="544" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="footer" bgcolor="#ffffff" quality="high" src="http://somedomain.com/estelia/images/stories/column.swf" />
         </object>
       </div>
      <br />
    </td>
    </tr>
    </tbody>
    </table>

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    At one point you have a table cell having some left padding. This is definitely what is causing the problem. You should remove this padding. Dreamweaver has probably altered the width of other elements to compensate for this padding. So you should check for mismatches in width's other places.

    It may be a good idea to give some elements a background color while doing this. You can then clearly see where things go wrong.

    <td valign="top" align="left" style="margin: 0px; width: 819px; padding-left: 7px; padding-top: 0px; padding-bottom: 0px;">
    Let me know whether you succeed or not. Good luck with your CSS studies.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply.

    However, changing this one property didnt help at all.
    After all, my problem is with height, not width.
    If you want, i can post a sceenshot or the whole code.


  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Hmm... in Firefox no border appears on the bottom of the left part and it does have some padding because the body automatically has padding in both browsers so you'll need to set padding: 0 in the body of the page.

    As for this white gap... I can't spot it. The only difference I noticed was that in IE the left box was pushed down a few more pixels than in FF, which is fixed by the above!

    And WHY are you using div within tables? Surely it's best to use one or the other, and definitely best to use CSS to position and style everything. You may not have quite so many problems then!
    Last edited by ahallicks; 12-22-2006 at 11:50 AM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Put this into Dreamweaver and see what you get

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #wrapper {
    	width: 820px;
    	height: auto;
    }
    
    #leftpart {
    	width: 630px;
    	height: auto;
    	float: left;
    }
    
    #leftpane {
    	width: 630px;
    	height: 400px;
    	float: left;
    	border: 1px solid #000;
    }
    
    #rightpane {
    	width: 180px;
    	height: 546px;
    	float: left;
    	border: 1px solid #000;
    }
    
    #flashbanner {
    	width: 630px;
    	height: 144px;
    	float: left;
    	border: 1px solid #000;
    }
    
    .content {
    	padding-top: 20px;
    }
    
    </style>
    
    </head>
    
    <body>
    	<div id="wrapper">
    		
    		<div id="leftpart">
    		
    			<div id="leftpane">
    		
    		   //FLASH MENU ON TOP
    		  <!-- <object width="630" height="20" align="top"    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"  id="menu">
    		   <param name="allowScriptAccess" value="sameDomain"  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"/>
    		   <param name="movie" value="http://www.somedomain.com/folder/images/stories/menu.swf" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="20" align="middle" src="http://www.somedomain.com/folder/images/stories/menu.swf" quality="high" salign="lt" bgcolor="#ffffff" name="menu" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    		   </object> -->
    	
    			 <div class="content"> some content here   </div>
    			 </div>
    		  
      		<div id="flashbanner">
          //FLASH BANNER HERE
         <!--<object width="630" height="111" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="footer 01">
         <param name="allowScriptAccess" value="sameDomain" />
         <param name="movie" value="http://somedomain.com/folder/images/stories/footer1.swf" /><param name="quality" value="high" /><param name="salign" value="lb" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="111" align="middle" src="http://somedomain.com/folder/images/stories/footer1.swf" quality="high" salign="lb" bgcolor="#ffffff" name="footer 01" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
         </object> -->
    	 	</div>
    	</div>
    	
    	<div id="rightpane">
    	     
    		//FLASH BANNER HERE
    		<!-- <object width="176" height="544" align="left" id="footer" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    		 <param value="sameDomain" name="allowScriptAccess" />
    		 <param value="http://somedomain.com/estelia/images/stories/column.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed width="176" height="544" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="footer" bgcolor="#ffffff" quality="high" src="http://somedomain.com/estelia/images/stories/column.swf" />
    		 </object> -->
    	 
    	 </div>
    
      </div>
    
    </body>
    </html>
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the code you posted works great!
    Thanks for converting it all to div/css, however, when i applied the correct widths/heights and loaded the flash files, it seems the bottom flash banner is not aligned to the bottom. You ve seen my code, and its nothing close to yours, so i tried to make it align, but i am not sure how.

    i ve posted the code below with the links as well so you can see what i mean:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #wrapper {
    	width: 820px;
    	height: 544px;
    }
    
    #leftpart {
    	width: 630px;
    	height: 543px;
    	float: left;
    	border: 1px solid #999;
    }
    
    #leftpane {
    	width: 630px;
    	height: 410px;
    	float: left;
    }
    
    #rightpane {
    	width: 176px;
    	height: 544px;
    	float: left;
    	border: 0px solid #fff;
    	margin-left: 8px;
    }
    
    #flashbanner {
    	width: 630px;
    	height: 111px;
    	float: left;
    	border: 0px solid #000;
    }
    
    .content {
    	padding-top: 20px;
    }
    
    </style>
    
    </head>
    
    <body>
    	<div id="wrapper">
    		
    		<div id="leftpart">
    		
    			<div id="leftpane">
    		
    		   <object width="630" height="20" align="top"    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"  id="menu">
    		   <param name="allowScriptAccess" value="sameDomain"  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"/>
    		   <param name="movie" value="http://www.somedomain.com/folder/images/stories/menu.swf" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="20" align="middle" src="http://www.somedomain.com/folder/images/stories/menu.swf" quality="high" salign="lt" bgcolor="#ffffff" name="menu" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    		   </object>
    	
    			 <div class="content"></div>
    		  </div>
    		  
      		<div id="flashbanner">
    		<object width="630" height="111" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="footer 01">
         <param name="allowScriptAccess" value="sameDomain" />
         <param name="movie" value="http://triaexperience.com/estelia/images/stories/footer1.swf" /><param name="quality" value="high" /><param name="salign" value="lb" /><param name="bgcolor" value="#ffffff" /><embed width="630" height="111" align="middle" src="http://triaexperience.com/estelia/images/stories/footer1.swf" quality="high" salign="lb" bgcolor="#ffffff" name="footer 01" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
         </object>
    	 	</div>
    	</div>
    	
    	<div id="rightpane">
    	<object width="176" height="544" align="left" id="footer" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    		 <param value="sameDomain" name="allowScriptAccess" />
    		 <param value="http://triaexperience.com/estelia/images/stories/column.swf" name="movie" /><param value="high" name="quality" /><param value="#ffffff" name="bgcolor" /><embed width="176" height="544" align="left" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="footer" bgcolor="#ffffff" quality="high" src="http://triaexperience.com/estelia/images/stories/column.swf" />
    		 </object>
    		 
       </div>
    
      </div>
    
    </body>
    </html>
    Oh, have i said thanks you again?

    George


  •  

    Posting Permissions

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