SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Mathias B's Avatar
    Join Date
    Jul 2004
    Location
    Arboga, Sweden
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Guestbook entry layout problem

    Hi,

    I'm currently working on a guestbook in ASP.NET and decided to create a tableless layout. The guestbook is almost done but I have a problem with the entry box. You can see the entry layout at this place -> Entry Layout

    To be able to easily customize the width of the guestbook, the entrybox width is specified in percent. This causes some gaps in different browsers. In Firefox it displays nicely but in IE I get a gap at the bottom of the vertically border and in Opera the horizontal border leaves a gap at the right. The problem I have is to figure out what percent the width attributes should have and how to get rid of the gap at the bottom in IE.

    Below is the HTML and CSS code.

    HTML Code:
    <div id="guestbox">
    	<div class="content">
    		<div class="left">	
    			Name
    		</div>
    		<div class="right">
    			<div class="row">
    				<span class="entry">
    					Entry number
    				</span>
    				<span class="date">
    					Date time
    				</span>
    				<div class="spacerborder"></div>
    			</div>				
    			<div class="row">
    				<span class="message">
    					Message <br />...<br />...
    				</span>
    				<span class="edit">
    					<img src="./comment.gif" />
    				</span>
    				<div class="spacer"></div>
    			</div>				
    		</div>
    		<div class="spacer"></div>
    	</div>
    </div>
    Code:
    #guestbox {
    	font-family: verdana;
    	font-size: 69%;
    	color: #333333;
    	width: 550px;
    	background-color: #e7e3db;
    	border: 1px solid #000000;
    	margin: 5px auto 0 auto;
    	padding: 0;
    }
    
    .content 
    {
    	float: none;
    	width: 95%;
    	border: 1px solid #555555;
    	padding: 0;
    	margin: 5px auto 5px auto;		
    	background-color: #e7e3db;
    	text-align: left;
    }
    
    div.left {
    	float: left;
    	border-right: 1px solid #555555;
    	width: 24.4%;
    	padding: 1px 0 1px 2px;
    	margin: 0;
    	overflow: hidden;
    	position: relative;
    }
    
    div.right {
    	float: left;
    	width: 75%;
    	padding: 0;
    	border-left: 1px solid #555555;
    	margin-left: -1px;
    	position: relative;
    }
    
    div.row {
    	float: none;
    	text-align: left;
    	padding: 0;
    	margin: 0;
    	width: 100%;
    	position: relative;
    }
      
    div.row span.entry {
    	float: left;
    	text-align: left;
    	color: #777777;
    	padding: 1px 0 1px 2px;
    	margin: 0;
    	width: 49%;
    	position: relative;
    }
    
    div.row span.date {
    	float: right;
    	text-align: right;
    	color: #777777;
    	padding: 1px 2px 1px 0;
    	margin: 0;
    	width: 49%;
    	position: relative;
    }
    
    div.row span.message {
    	float: left;
    	text-align: left;
    	color: #555555;
    	width: 90%;
    	overflow: hidden;
    	padding: 1px 0 0 2px;
    	position: relative;
    }
    
    div.row span.edit {
    	float: right;
    	text-align: right;
    	color: #555555;
    	width: 9%;
    	padding: 1px 2px 1px 0;
    	position: relative;
    }
      
    .spacerborder 
    {
    	clear: both;	
    	border-bottom: 1px solid #555555; 
    }
    
    .spacer {
    	clear: both;		
    	height: 1px;
    	line-height: 1px;
    	overflow: hidden;
    	margin-top: -1px;
    }
    Best regards,
    Mathias
    www.mathiasbartoll.com - Mp3 Musician and Software Developer

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can loose the gap at the bottom in ie by taking out the line height from your spacer.
    Code:
    .spacer {
     clear: both;  
     height: 1px;
     overflow: hidden;
     margin-top: -1px;
    }
    I suspect that the only answer for opera will be to use padding and borders on inner elements as I can make it work in either firefox or opera but not in both at the same time. (without using a hack)

    Paul

  3. #3
    SitePoint Member Mathias B's Avatar
    Join Date
    Jul 2004
    Location
    Arboga, Sweden
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    without the line height attribute it now works fine in IE.
    www.mathiasbartoll.com - Mp3 Musician and Software Developer


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
  •