SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    strange <table> in IE

    Hi All,

    I'm usually formatting my graphics on a web site with the help of <table> tags. I have the following code that displays correctly all the graphics in FF and Google Chrome, however in IE there's a white line/gap between the first and the second row, I simply cannot imagine what can I do to get rid of it......

    HTML Code:
    	<table width="1024px" align="center" cellpadding="0px" cellspacing="0px" border="0px">
    		<tr>
    			<td colspan="6">
    				<img src="graphics/banner_2.jpg" alt="Findyourself banner" />
    			</td>
    		</tr>
    		
    <!-- HERE IS THE GAP -->
    
    		<tr>
    			<td>
    			<table align="center" style="background:url(graphics/menu_1.jpg)" width="1024px" cellpadding="0px" cellspacing="0px" border="0px">
    				<tr>
    						<td width="235px" height="40px">
    							&nbsp;
    						</td>
    						<td valign="bottom" width="120px">
    							<img src="graphics/menu_about_1.jpg" alt="about" />
    						</td>
    						<td valign="bottom" width="125px">
    							<img src="graphics/menu_find_1.jpg" alt="find" />
    						</td>
    						<td valign="bottom" width="128px">
    							<img src="graphics/menu_join_1.jpg" alt="join" />
    						</td>
    						<td valign="bottom" width="123px">
    							<img src="graphics/menu_latest_1.jpg" alt="latest" />
    						</td>
    						<td valign="bottom">
    							<img src="graphics/menu_contact_1.jpg" alt="contact" />
    						</td>
    				</tr>
    			</table>
    			</td>
    		</tr>
    		<tr>
    			<td>
    				<img src="graphics/yoga_girl_1.jpg" alt="Yoga girl" />
    			</td>
    		</tr>
    	</table>
    Your help is appreciated!!!!

    Full time ADMIN - art community
    Part time coder - dsign

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Images are inline elements and generate inline boxes by default.
    Inline boxes are normally aligned so that their bottom edge lines up with the text baseline, which is a few pixels above the bottom of the line box.

    You'll need to use CSS to eliminate this, either by changing the vertical alignment or by changing the generated box type. Both of the following methods will work:
    Code CSS:
    td img {display:block}
     
    td img {vertical-align:bottom}
    BTW, width="1024px" is invalid. It should be width="1024". You can't specify units with the HTML width attribute, only per cents (width="50&#37;") or pixels (width="1024").

    That also applies for the cellpadding, cellspacing and border attributes and for the width and height attributes of table cells (which are deprecated, but so is using tables for layout).
    Birnam wood is come to Dunsinane

  3. #3
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Autistic!!!!

    I never thought it was so simple!!


    Full time ADMIN - art community
    Part time coder - dsign


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
  •