SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Height not setting In IE?

    I am having a problem with IE, I just can't figure out how to fix it. In firefox it looks ok but in IE there is a problem as you can see. The blue image background (members info and change your password) should be set to 25px in height, but in IE it doesn't use that height. Any ideas?

    Here is my code html code for these tables:
    HTML Code:
    <center>
    <div class='member_wrap'>
    <form action='./password_proccess.php' method='post'>
    <div class='member_left'>
    		<table class='main_table_members' cellpadding='0' cellspacing='1'>
    		<tr>
    		<td width='100%' class='table_top'>Members Info</td>
    		</tr>
    		<tr>
    		<td class='column1' width='100%'><b>Welcome John Smith</b><br /><br />
    		 <a href='/customers/help.php'>Help Page</a><br />
    		 <a href='/customers/support.php'>Contact Support</a><br />
    		 <a href='/customers/order.php'>Products</a><br />
    		 <a href='/customers/email_edit.php'>Change my email</a><br />
    		 <a href='/customers/password_edit.php'>Change my password</a><br />
    		 <a href='/customers/logout.php'>Logout</a></td>
    		</tr>
    		</table>
    </div>
    <div class='member_right'>
    		<table class='main_table_members' cellpadding='0' cellspacing='1'>
    		<tr>
    		<td width='100%' colspan='2' class='table_top'>Change Your Password</td>
    		</tr>
    		<tr>
    		<td class='column1' width='50%' valign='top'><b>Your new password:</b></td>
    		<td class='column2' width='50%' valign='top'><input type='password' name='password_edit' /></td>
    		</tr>
    		<tr>
    		<td class='column1' width='50%' valign='top'><b>Confirm your current password:</b></td>
    		<td class='column2' width='50%' valign='top'><input type='password' name='password_edit2' /></td>
    		</tr>
    		<tr>
    		<td class='column1' width='50%' valign='top'><b>Confirm your current password:</b></td>
    		<td class='column2' width='50%' valign='top'><input type='password' name='password_confirm' /></td>
    		</tr>
    		</table>
    </div>
    <br /><br /><input type="submit" value="Save Changes" />
    </form>
    </div>
    </center>
    Here is the css used:
    Code:
    .member_wrap {
    	width: 98%;
    	text-align: center;
    }
    
    .member_left {
    	float: left;
    	width: 28%;
    	/*height: 100%;*/
    	text-align: center;
    }
    
    .member_right {
    	float: right;
    	border: 0;
    	width: 71%;
    	text-align: left;
    }
    
    .main_table_members { 
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 200px;
    	background-color: #FFFFFF;
    	border: 1px solid #000000;
    }
    
    .table_top { 
    	margin: 0;
    	padding: 5px;
    	height: 25px;
    	text-align: center;
    	background: #175299 url("/images/top_bg.gif");
    	color: #FFFFFF;
    	font-weight: bold;
    	border: 0;
    }
    
    .column1 { 
    	margin: 0;
    	padding: 5px;
    	text-align: left;
    	background-color: #dbdbdb;
    	border: 0;
    	vertical-align: top;
    }
    
    .column2 { 
    	margin: 0;
    	padding: 5px;
    	text-align: left;
    	background-color: #cbcbcb;
    	border: 0;
    }
    
    .column3 { 
    	margin: 0;
    	padding: 5px;
    	text-align: left;
    	background-color: #e3e3e3;
    	border: 0;
    }
    Thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of trying to fix what seems to be a bug in IE, I recommend you rewrite your HTML to use a <ul> for the left column and <div>s or <h#>s instead of <table>s for the headers.

    Also, you should not use the <center> element. Use CSS instead. Four ways to Center Elements with CSS (in IE5+/Win and other browsers)

  3. #3
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to use cellspacing for the headers though. I have seen many sites with set heights in IE with tables, surely someone can help me?

    Thanks

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    just as example
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.member-wrap{
    	width:98%;
    	text-align:center;
    	margin:1% auto;
    	}
    	
    	div{text-align:left;}
    	
    	.member-wrap h3,.member-wrap h2{text-align:center;}
    	.member-wrap h3,.member-wrap h2,.member-wrap p,.member-left ul{
    	font-weight:900;
    	padding:5px 5px 0 5px;
    	font-size:1em;
    	border:1px solid #ffffff;
    	}
    	
    	.member-left,.member-right{
    	background:#dbdbdb;
    	float:left;
    	width:28%;
    	border:1px solid #000000;
    	}
    	.member-right{float:right;width:70.8%;}
    	
    	.member-wrap h2{
    	height:25px;
    	background:#175299 url("/images/top_bg.gif");
    	color:#FFFFFF;
    	font-size:1.1em;
    	}
    	
    	.member-left h3{border-top:none;border-bottom:none;}
    	
    	.member-left ul{border-top:none;}
    	.member-left li{
    	margin-left:20px;
    	font-size:.9em;
    	line-height:1.75em;
    	font-weight:100;
    	}
    	
    	.l,.r{float:left;width:50%;}
    	* html .r{width:49.9%;}
    
    	.l p,.r p{border-top:none;height:3.4em;}
    	
    	.r p{background:#cbcbcb;border-left:none;}
    	
    	.member-wrap .x{clear:both;text-align:center;width:71%;float:right;padding:0;}
    	</style>
    </head>
    <body>
    <div class='member-wrap'>
    
    <form action='./password_proccess.php' method='post'>
    
    <div class='member-left'>
    <h2>Members Info</h2>
    <h3>Welcome John Smith</h3>
    <ul>
    <li><a href='/customers/help.php'>Help Page</a></li>
    <li><a href='/customers/support.php'>Contact Support</a></li>
    <li><a href='/customers/order.php'>Products</a></li>
    <li><a href='/customers/email_edit.php'>Change my email</a></li>
    <li><a href='/customers/password_edit.php'>Change my password</a></li>
    <li><a href='/customers/logout.php'>Logout</a></li>
    </ul>
    </div>
    
    <div class='member-right'>
    
    <h2>Change Your Password</h2>
    
    <div class="l">
    <p>Your new password:</p>
    <p>Confirm your current password:</p>
    <p>Confirm your current password:</p>
    </div>
    
    <div class="r">
    <p><input type='password' name='password_edit' /></p>
    <p><input type='password' name='password_edit2' /></p>
    <p><input type='password' name='password_confirm' /></p>
    </div>
    
    </div>
    <p class="x"><input type="submit" value="Save Changes" /></p>
    </form>
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot mate, that code works great. Just one thing though. How could I make both sections the same height, which class(s) should I put the min-height setting in?

    Thanks again

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    left adjust
    .member-left li{line-height:1.75em;

    right adjust
    .l p,.r p{height:3.4em;}

  7. #7
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't want my links in member left so spaced apart. Also now the left section is now longer than the right one. Is there anyway I can just use tables, their so much easier for this tabular-like content. Can't I just use tables for the 'table' like sections and then just a div header for the headers?

    Thanks

  8. #8
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry for now, I have worked it out how to just use a div header for the table header.

    Thanks

  9. #9
    Not yet perfect mattalexx's Avatar
    Join Date
    Oct 2005
    Location
    Taos, NM, US
    Posts
    441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wandered into this post looking for a solution to another problem, but it helped me understand that sometimes li height needs to be set to tame vertical lists in ie. Thanks, guys.
    Matt Alexander
    Alexander Site Design


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
  •