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

Posted on 2009-05-12
Medium Priority
Last Modified: 2013-12-08
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 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 class="bg2">
            <td height="1" colspan="5"><img src="images/spacer.gif" alt="" width="1" height="1"></td>
            <td height="2" colspan="5" class="bg4"><img src="images/spacer.gif" width="1" height="1"></td>

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?
Question by:dog_star
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
LVL 12

Expert Comment

ID: 24363313
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);
.bg4 {
    background:url(your image here);
.menu {
.menuLink { 
<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 style="clear:both;"></div>
<div class="bg4"></div>

Open in new window


Author Comment

ID: 24365255
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...

LVL 12

Accepted Solution

GuitarRich earned 2000 total points
ID: 24365416
what is your doctype set to?
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 24365613
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
LVL 12

Expert Comment

ID: 24365758
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.

Author Closing Comment

ID: 31580479
doctype seemed to solve the problem :)

Author Comment

ID: 24366525
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 :)

Featured Post

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question