• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1391
  • Last Modified:

cell height in IE8 and Chrome much larger than IE7 or firefox

hi,
i have a problem with empty cells displaying much bigger in Chrome and IE8 than they do in other browsers....
here is a sample table :

<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr class="bg2">
            <td height="1" colspan="5" class="cell1"><img src="images/spacer.gif" width="1" height="1"></td>
            </tr>
          <tr class="bg2">
            <td width="163" height="12">&nbsp;</td>
            <td width="70" align="center" class="bg5"><a href="1.asp" class="link1">link 1</a></td>
            <td width="50" align="center" class="bg5"  ><a href="2.asp" class="link1">link 2</a></td>
            <td width="55" align="center" class="bg5"  ><a href="3.asp" class="link1">link 3</a></td>
            <td width="50" align="center" class="bg5"  ><a href="4.asp" class="link1">link 4</a></td>
              </tr>
          <tr class="bg2">
            <td height="1" colspan="5"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
          </tr>
          <tr>
            <td height="2" colspan="5" class="bg4"><img src="images/spacer.gif" width="1" height="1"></td>
          </tr>
        </table>

as you can see i have an empty first row which spans the width of the table... the  height is set to 1px, a 1px high spacer gif is there and it has been given a background style...

in all older browsers this displays fine... but in Chrome and IE8 this row is displayed as about 15px high.... if i use compatibility mode in IE8 it displays ok....

how can i display this correctly in newer browsers?
0
dog_star
Asked:
dog_star
  • 4
  • 3
1 Solution
 
GuitarRichCommented:
don't use a table to do the layout - its not what they were designed for - use CSS to do it. I'm not sure what the class BG2 has in it but I can guess it is an image or coloured back ground - so lay it out something like this:

<style type="text/css">
.bg2 {
    background:url(your image here);
    padding:1px;
}
.bg4 {
    background:url(your image here);
    height:2px;
}
.menu {
    margin-left:163px;
}
.menuLink { 
    float:left;
    width:60px;
    text-align:center;
}
</style>
<div class="bg2">
    <div class="menu">
        <div class="menuLink bg5"><a href="1.asp" class="link1">link 1</a></div>
        <div class="menuLink bg5"><a href="2.asp" class="link1">link 2</a></div>
        <div class="menuLink bg5"><a href="3.asp" class="link1">link 3</a></div>
        <div class="menuLink bg5"><a href="4.asp" class="link1">link 4</a></div>
    </div>
    <div style="clear:both;"></div>
</div>
<div class="bg4"></div>

Open in new window

0
 
dog_starAuthor Commented:
thanks for the reply GuitarRich... i'll bear that in mind for future sites..

the problem is that i'm working on a site currently built using tables which are now displaying incorrectly in IE8... it looks like IE8 handles colspan rowspan differently.... there is a fix to force pages to use IE7 compatibility mode

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

but this doesn't help with Chrome which also displays "incorrectly".... Firefox and IE7 it works ok...

0
 
GuitarRichCommented:
what is your doctype set to?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
dog_starAuthor Commented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0
 
GuitarRichCommented:
do you have any other styling rules in the css for tables? I've copied your code into a new html page and ran it in IE7 & Firefox and both are displaying very tall table rows.
0
 
dog_starAuthor Commented:
doctype seemed to solve the problem :)
0
 
dog_starAuthor Commented:
no other elements which should influence it...

i have found a solution though.... with your mention of doctype i tried changing it to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and now it displays fine... i'm not sure its the perfect solution but it now displays correctly in both IE and Chrome...

thanks for your effort with this :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now