SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opera and Safari - height issues

    Hi All,

    Opera and Safari are not being nice, and I don't know why. In a nutshell, the column is meant to stretch according to the browser window height.

    IE, FF, etc... seem to play nice, except Opera and Safari tread the divChatArea as having no height. In fact, it doesn't like the % based heights at all. Is there a solution?

    Thanks.


    I have the following HTML code:

    Code:
     <table id="searchbar">
     		<tr>
     		<td id="searchleft">
     			<div id="divChatForm">
     			<div id="chatwrap">
     			<!--Set Chat window-->
     				<div id="divChatArea"></div>
     				<textarea id="message" name="message" style="width: 99% !important; width: 100%; height: 70px; margin-top: 5px;" wrap="hard">Search Query here</textarea><br />
     				<input type="button" id="btnSend" name="btnSend" value="Send Message" style="margin-top: 5px;" onclick="WPSession_sendMessage($('message').value)" />
     			</div>
     			</div>
     		</td>
     		</tr>
     		</table>
    Then I have the following css:
    Code:
     html {height:100%; max-height:100%; padding:0; margin:0; border:0; background:#fff; 
     /* hide overflow:hidden from IE5/Mac */ 
     /* \*/ 
     overflow: hidden; 
     /* */ 
     }
    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; font-size: medium; color: #000000; font-family:arial,tahoma,verdana,helvetica;  }
     #divChatForm {height: 85%; background: #ebf9ff; width: 180px;border-top: solid 1px #c8e1ec;border-right: solid 1px #c8e1ec;border-bottom: solid 1px #c8e1ec;}
     div#chatwrap {height: 90%; padding: 10px;}
     #divChatForm #divChatArea {height: 47%; width: 100%; background: #fff; border: solid 1px #9cc3d3;}
     table#searchbar {height: 100%;}
     table#searchbar td#searchleft {width: 100%;height: 100%; vertical-align: top;}

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera and Safari are known to have issues when using min-height/width and max-height/width.

    Try declaring a value for the height this way so Opera (don't know about Safari since I don't have a Mac) can understand it.

    html>body #divChatArea {height: 47%;}

    (or whatver value you want to use).

    If that doesn't work, play around with it until you find a value Opera will accept.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I think you will need to use a nested table for opera to work.

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     /* hide overflow:hidden from IE5/Mac */ 
     /* \*/ 
    html {height:100%; 
     overflow: hidden; 
     }
     /* */ 
    body {height:100%;background:#ddd; overflow:hidden; padding:0; margin:0; border:0; font-size: medium; color: #000000; font-family:arial,tahoma,verdana,helvetica;  }
    table#searchbar,able#searchleft{
     vertical-align:top;
     height:100%;
     width:100%;
    }
    td#searchbar,td#searchleft{
     vertical-align:top;
     height:100%;
     width:100%;
    }
     #divChatForm {height: 85%; background: #ebf9ff; width: 180px;border-top: solid 1px #c8e1ec;border-right: solid 1px #c8e1ec;border-bottom: solid 1px #c8e1ec;}
     div#chatwrap {height: 90%; padding: 10px;}
     #divChatForm #divChatArea {height: 47%; width: 100%; background: #fff; border: solid 1px #9cc3d3;}
     table#searchbar {height: 100%;}
    </style>
    </head>
    <body>
    <table id="searchbar">
     <tr>
      <td id="searchleft"><table id="divChatForm">
    	<tr>
    	 <td><div id="chatwrap">
    	   <!--Set Chat window-->
    	   <div id="divChatArea"></div>
    	   <textarea id="message" name="message" style="width: 99% !important; width: 100%; height: 70px; margin-top: 5px;" >Search Query here</textarea>
    	   <br />
    	   <input type="button" id="btnSend" name="btnSend" value="Send Message" style="margin-top: 5px;" onclick="WPSession_sendMessage($('message').value)" />
    	  </div></td>
    	</tr>
       </table></td>
     </tr>
    </table>
    </body>
    </html>


Bookmarks

Posting Permissions

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