Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    IE 8 display bug (incorrect height used)

    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.

    Code:
    <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
    Code:
    .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


    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.
    Last edited by Jahren; 05-21-2009 at 04:10 PM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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.
    Last edited by quartzy; 05-20-2009 at 11:04 PM. Reason: Add extra

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    Yeah I tried that, It will only affect firefox tho.

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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*/

  • Users who have thanked quartzy for this post:

    Jahren (05-21-2009)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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.

    Code:
    <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>
    Code:
    #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...)

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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]

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    If you use the table method, try putting the table in a div too. For easier layout use.

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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 :
    Code:
    <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>

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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]

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Post all of the code you have for the menu div.

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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 :

    Code:
    <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>
    Code:
    #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;}

  • #12
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Glad you found a workaround.

  • Users who have thanked quartzy for this post:

    Jahren (05-21-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •