Web Analytics Made Easy -
StatCounter table height in width differ in ff and ie - CodingForum

Announcement

Collapse
No announcement yet.

table height in width differ in ff and ie

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • table height in width differ in ff and ie

    Hello all,

    the table height and width differ in firefox and ie, I can't seem to find a solution for this, could someone help meout?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Pragma" content="no-cache">
    </head>
    <link rel="stylesheet" type="text/css" href="popeye.css">
    <style type="text/css">
    #Layer2 
    {
    	position:absolute;
    	z-index:1;
    	left: 5px;
    	top: 1px;
    }
    </style>
    
    <body onload="resolutie()" class="bodyclass"><div id="Layer2"><img src="afbeeldingen/popeyelogowit.gif" alt="" / c /></div>
    <script language="javascript" type="text/javascript">
    function resolutie()
    {
    	verticaal = screen.availHeight;
    	horizontaal = screen.availWidth;
    	window.resizeTo (horizontaal, verticaal);
    }
    function sluitAf()
    {
    	pagina = window.self;
    	pagina.opener = window.self;
    	window.open('','_parent',''); //in FF werkt het anders niet
    	pagina.close();	
    }
    function sluitBegin()
    {
    	popup = window.open('afsluitenConformatie.html','sluit','location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no');
    }
    </script>
    
    <table class="full-height">
    	<tr>
    		<td>
    			<table class="second" align="center" cellpadding="0" cellspacing="0">
    				<tr>
    					<td class="round-topLeft"></td>
    					<td class="round-top"></td>
    					<td class="round-topRight"></td>
    				</tr>
    				<tr>
    					<td class="round-left"></td>
    					<td class="hoofdgedeelte"> 
    				
    						<center><strong>Welkom bij POPeye</strong></center>
    						<%text%>
    					
    						<center><input type="button" value="volgende" onClick="volgende();"  class="knop"/> 
    						<input type="button" value="POPeye afsluiten" onClick="sluitBegin();" class="knop"/> </center>
    <!--						<script>//javascript:Popup1=void(window.open(\'v1p1.php\',\'Popup1\',\'scrollbars=1,fullscreen = yes \'))== origineel van he tonderdeel onclick van volgende knop</script> -->
    					</td>
    					<td class="round-right"></td>
    				</tr>
    				<tr>
    					<td class="round-bottomLeft"></td>
    					<td class="round-bottom"></td>
    					<td class="round-bottomRight"></td>
    				</tr>
    		  </table>
    		</td>
    			<td width="20%" bgcolor="#000066" align="center" valign="middle">	  
    				<table>
    					<tr>  
    						<td align="left"><center><font color="#FFFFFF"><b>Waar ben ik</b></font><br></center>
    						<font color="#FFFFFF"><b>Welkom</b></font><br />
    						<font color="#999999">Leeftijdsfasen<br>
    						<li>Leeftijdstyperingen</li><br>
    						<li>Overzicht<br></li></ul>
    						<br>Loopbaanfasen<br>
    						<li>Loopbaankenmerken<br></li>
    						<li>Overzicht<br></li>
    						<br>
    						Toelichting<br>
    						Persoonlijk Overzicht<br>
    						Ontwikkelacties</font><br></td>
    					</tr>
    				</table>
    			</td>
    			</tr>
    		</table>
    	
    </body>
    </html>
    Last edited by arvind; Oct 10, 2006, 09:37 AM.

  • #2
    the css

    Code:
    .bodyclass 
    {
    	background-image: url(afbeeldingen/pw.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-attachment:scroll;
    	overflow:hidden;
    }
    
    .anders 
    {
    	border:medium;
    	width: 75%;
    	height: 75%;
    }
    body 
    {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	font-family:Arial, 'MS Sans Serif', 'Sans Serif'; font-weight:normal; font-style:normal; text-decoration:none; padding:1 10 1 10; font-size: 12px; 
    }
    
    table
    {
    	font-family:Arial, 'MS Sans Serif', 'Sans Serif'; font-weight:normal; font-style:normal; text-decoration:none; padding:1 10 1 10; font-size: 12px; 
    }
    
    html,body 
    {
    	margin:0;
    	padding:0;
    	height:100%;
    	width:100%;
    }
    
    table.second
    {
    	height:53%;
    	width:67%;
    }
    table.full-height 
    {
    	height:100%;
    	width:100%;
    }
    table.info
    {
    	border-width: 0px; 
    	padding:2px; 
    }
    
    input.knop
    {
    	border: 1px solid #000000; 
    	padding:2px; 
    	background-color:#FF0033;
    	color:#FFFFFF;
    	width:110px
    }
    #Layer1 {
    	visibility: hidden;
    	position:absolute;
    	width:300px;
    	height:100px;
    	left: 33%;
    	top: 33%;
    	z-index:1;
    }
    .kop
    {
    background-color:#000066;
    color:#FFFFFF;
    font-weight:bold;
    }
    .antwoord
    {
    background-color:#FFFF88;
    color:#000000;
    }
    .hoofdgedeelte{
    background-color:#FFFF88;
    }
    .tabel
    {
    	border:1px dashed #000000; 
    	padding:2px;
    	padding:10px;
    }
    
    .titel{
    font-weight: bold;
    }
    ul{
    margin-top:-1px;
    margin-bottom:-2px;
    }
    
    table.round { align: center}
    td.round-top { height: 16px;  background-image: url(round/top.gif)}
    td.round-topRight { width: 16px; height: 16px; background-image: url(round/topRight.gif)}			 
    td.round-right { width: 16px; background-image: url(round/right.gif)}
    td.round-bottomRight { width: 16px; height: 16px; background-image: url(round/bottomRight.gif)}	
    td.round-bottom { height: 16px; background-image: url(round/bottom.gif)}
    td.round-bottomLeft { width: 16px; height: 16px; background-image: url(round/bottomLeft.gif)}	
    td.round-left { width: 16px; background-image: url(round/left.gif)}
    td.round-topLeft { width: 16px; height: 16px; background-image: url(round/topLeft.gif)}			 
    td.round-center { background-color:#FFFF88  }
    
    a:link {color: #0000FF; text-decoration: underline; }
    a:active {color: #000066; text-decoration: underline; }
    a:visited {color: #FF0000;; text-decoration: underline; }
    a:hover {color: #CC0000;; text-decoration: none; }

    Comment


    • #3
      i just use conditional comments for ie/ff issues similar to this, but it looks like you got your answer..........i'm just a n00b...........

      Comment


      • #4
        the second post is me, posting my css.

        Comment


        • #5
          I suggest you code so that it looks right in a web-compliant browser like FF, to some extent, Netscape, and Safari, and then use conditional comments in your CSS for IE (which is non-compliant).

          Comment


          • #6
            in firefox the code works good, only ie not so

            Comment


            • #7
              Make a separate css stylesheet for IE with the 'adjustments' and link to it with a conditional comment then, like:

              <!--[if IE]>
              <LINK REL="stylesheet" href="Secondstylesheet.css" type="text/css"> </style>
              <![endif]-->

              Comment

              Working...
              X