...

View Full Version : Resolved IE 8 display bug (incorrect height used)



Jahren
05-20-2009, 09:49 PM
hi guys.

i've been throught this problem for the whole day and it drives me mad.

I want a basic menu that fits on a single line.



<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" align="right">
<img src="./cont/img/<?=$repertoire?>menu_01.gif" width="29" height="30" style="border:0;">
</td>
<td>
<div class="usernameplanification">blablablabla</div>
</td>
<td align="right">
//some more images aligned
</td>
</tr>


CSS


.usernameplanification { width:100%; height:23px; padding:0 3px 0 0;
margin:0; line-height:23px; background-color:#ce5d16; color:#FFFFFF;
font-size:15px; font-weight:500; white-space:nowrap;}



Works like a charm in Firefox but not in IE 8 (havent tested 6-7)

here's the result
http://i59.photobucket.com/albums/g311/maelia123/iebug.jpg

What I can tell :
Firefox sees the correct layout. cell height is 30px because of images
IE8 sets the clientHeight to 34px and I really don't know why.

quartzy
05-20-2009, 11:02 PM
Have you tried removing the line-height and just let the images control the height? You will also need to set the css for th table and td tr tags, else they will get default space.

Jahren
05-21-2009, 12:37 AM
Yeah I tried that, It will only affect firefox tho.

quartzy
05-21-2009, 12:44 AM
You don't need the width and height in the td's. And you have a line height of 23px and a height of 23px, you dont need both of them so remove the line height. IE has bugs with height and line height, I always use height: auto; there is a fix for it but I am not sure which one you need, you can only try.

Give your table an id in the css, then add the following to the top of the css.
* html #whatever {height: 1%;}/*give IE haslayout*/

Jahren
05-21-2009, 02:28 PM
Hi and thanks for the reply quartzy.

If I remove the td width:100%, The blablabla section gets cut out completely.

I removed the height and line-height and added table id and 1% height.



<table id="planificationtable" cellspacing="0">
<tr>
<td width="100%" align="right">
<img src="./cont/img/<?=$repertoire?>menu_01.gif" width="29" height="30" style="border:0;">
</td>
<td>
<div class="usernameplanification">blablabla</div>
</td>
//do stuff
</td>
</tr>




#planificationtable{border:0; height:1%;/*IE FIX */}
#planificationtable td{padding:0; height: auto;}
.usernameplanification { width:100%; padding:0 3px 0 0; margin:0; background-color:#ce5d16; color:#FFFFFF; font-size:15px; font-weight:500; white-space:nowrap;}


I seem to have the same problem with an added one.
IE is still a pixel down compared to Firefox and now both browser show an incorrect height. (tell me if you need a picture)

PS : (And IE is still showing a 34px high cell...)

quartzy
05-21-2009, 02:47 PM
Yes, you can remove the table width too as the images will set the size automatically.

There is what is known as the 2 pixel jog bug, most developers do not worry about it, but you can google for a fix for the bug.

If you know CSS have you tried displaying the images, in a list? in a div? That is often a better way.

http://css.maxdesign.com.au/listamatic/horizontal01.htm

You can then add the images to the li element as background images. I seldom work with tables and images, so I dont know what else to say, but I would remove the cellspacing and cellpadding too, and style the table complete in the CSS.
[CODE]

table#mytable {width: 600px; padding: 0; margin: 0;}
#mytable td {background: url('images/menu.gif') no-repeat top left;
padding: 0; margin: 0;}

[CODE]

quartzy
05-21-2009, 02:48 PM
If you use the table method, try putting the table in a div too. For easier layout use.

Jahren
05-21-2009, 03:26 PM
I've put my table into a div to see how it reacts.

Setting any height to the div sets it back to 34px. Otherwise, set to 0.
Here what i've noticed :

body
div containing a banner and the menu is automatically set to 124px (I cant fix the height)
the banner div has no height set either. It is 90px.
124 - 90 is 34 pixels for the menu div...

I can't set the height anywhere. :S

to sumarize :

<div bannerAndMenu> 124px
<div banner> 90px
<img banner> 72px
<br /> <br /> 18px
</div>
<div menu> 34px
<table> images in cells are 30px but the text cell is set to 34px for no apparent reason.
</table>
</div>
</div>

quartzy
05-21-2009, 03:56 PM
Set the height to auto after the width.
#div1 {width: 300px; height: auto;}
Set the width and height for any of the div's you use, it is not necessary to set the height anywhere else, except when you want a scrollbox for example.
Set the heights to auto, except for the banner, you should set the width and height for the banner/header, and have it position relative.

[ICODE]
width: 100%; float: left; height: 76px; position: relative;
[ICODE]

quartzy
05-21-2009, 03:58 PM
Post all of the code you have for the menu div.

Jahren
05-21-2009, 04:01 PM
Thanks for the help
I've found a way to patch my problem.

it doesnt fix that height bug at all..
But hell, it works for me!

I've created a 1 X 30 px image as a background instead of using background color.
That SPECIFIC cell is still 34px high but now both FF and IE are showing a flush menu.

I removed the div from the td have set a class for that td.

here's the result :



<div style="text-align:left;width:100%; border:0;">
<img src="<?=$logo?>" border="0"> <br/><br/>
</div>
<div class="test">
<table id="planificationtable" cellspacing="0">
<tr>
<td width="100%" align="right">
<img src="./cont/img/<?=$repertoire?>menu_01.gif" width="29" height="30" style="border:0;">
</td>
<td class="usernameplanification">
blablabla
</td>


#planificationtable td{padding:0; height: auto;}
.usernameplanification { width:100%; line-height:23px; padding:0 3px 0 0; margin:0; color:#FFFFFF; font-size:15px; background-image:url('../img/planification/fr/menu_03.gif'); background-repeat: repeat-x; white-space:nowrap;}

quartzy
05-21-2009, 04:02 PM
Glad you found a workaround.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum