Solved

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

Posted on 2009-05-12
7
1,322 Views
Last Modified: 2013-12-08
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
Comment
Question by:dog_star
  • 4
  • 3
7 Comments
 
LVL 12

Expert Comment

by:GuitarRich
Comment Utility
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
 

Author Comment

by:dog_star
Comment Utility
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
 
LVL 12

Accepted Solution

by:
GuitarRich earned 500 total points
Comment Utility
what is your doctype set to?
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:dog_star
Comment Utility
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0
 
LVL 12

Expert Comment

by:GuitarRich
Comment Utility
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
 

Author Closing Comment

by:dog_star
Comment Utility
doctype seemed to solve the problem :)
0
 

Author Comment

by:dog_star
Comment Utility
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

771 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now