SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Table Height 100% beyond the bottom of page in IE

    Hello Friends

    I tried a lot of time fix these issue but I know not what do...

    I did a tableness layout (I know, I know, soon I will create some tableless, but for now I need fix the tableness first).

    Look my customer website:
    http://www.ovofertil.com.br

    The footer in Opera and Firefox appears correctly in the bottom of viewport, but in Internet Explorer (6 and 7) the footer goes beyond the end the page, generating one unnecessary scroll bar.

    I know not how to fix this... If I know what is wrong, I can in server-side (using asp.net) generate different CSS to Internet Explorer show the footer in correct position, like Opera and Firefox.

    Any help will be really very much appreciated.

    Regards

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    The only height="100%" you need is on the outer table.
    Remove all the other 100% heights on the nested tables and it will fix it.

    I urge you to consider basing your design on Pauls 100% high template here.
    http://www.pmob.co.uk/temp/2colum_sourceorder_image.htm

    I know that you specifically asked not for table-less design but if it's worth doing, it's worth doing the right way.

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thank you, worked very fine.

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Mark

    Please, check again the website. I have fixed the problem of the Footer as you suggested, and worked fine in Firefox, but Internet Explorer (again) does not accept my tr or td height in top row of the outer table, then layout is wrong again...

    Do you know what I can do?

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking your issues are not so much that you are using tables, as you are OVERUSING tables, and trying to style them in an XHTML document using HTML 3 techniques... that and (I think) you are going for a 100% model site without using any CSS on the body and 'general' html. -- edit -- oh wait, you are, sorry, the total lack of formatting in the ASP output CSS 'lost' me.

    You've got what? six or seven tables on a layout that could be done in two or less? You're styling DIV's inside TD's with no style on the TD (???) and you've got some stuff like giving the document head an ID which is just like... what the?

    AND THEN there's all that javascript which is currently not implemented - my advice, get it working as HTML/CSS FIRST before polluting your code with all that unused scripting, forms, etc.

    The best technique I've found for a columnar layout at 100% height is with a table - via CSS. You set the body and html to 100% height, put the header on the page at a fixed height with a bottom-margin equal to negative said height, then make the table 100% height for your columns, then the footer, again at a fixed height, with a top-margin equal to negative it's own height. Set padding-top and padding-bottom on the table to 'push down' their content so when the negative margins 'ride up' the header and footer, the content isn't overwritten.

    Hang on, I'll toss your site into my template for that so you can see what I mean.... of course it looks like you are stuck behind some asp based CMS, which could just **** anything you try to design beyond recognition.

    -- edit 2 --

    Ok, don't take this the wrong way - but <farooq>DAMN</farooq> that menu is a /FAIL/ hard. TALK about overthinking solutions to a problem.

    Oh, and for my example I'm switching those .jpg to .gif and/or .png... 800bytes for a 5x24 image is a bad thing.... as is not having both dimensions a multiple of 2 and having a repetative repeat-x tile that's more than 1 pixel wide for no discernable reason.
    Last edited by deathshadow; Nov 30, 2006 at 08:43.

  6. #6
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello deathshadow

    Really thank you for your post.

    Yes, you are correct, this page is generated via my ASP.Net CMS, then I need build the layout thinking what my customer can put anything in these columns. By example, the menu is generated by the "ASP.Net Menu Server Control", and my only worry is what generate valid XHTML (and it does).

    The javascripts not implemented, I will create code to not render this scripts yet when is not necessary, sorry

    Thank you too by the tip about image. I'm just a coder doing the job of a webdesigner

    About your technique, I will read carefully and check what I can do.

    --- edit ---
    Just to remember: The problems are only in Internet Explorer, Firefox and Opera renders correctly
    Last edited by ClickList; Nov 30, 2006 at 09:51.

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    MAN, you're calling a LOT of unneccessary javascript... Like the bit to make the .SWF transparent - which doesn't work in gecko BTW... all you need to do is add <param name="wmode" value="transparent"> and you can scrap most all the SWF javascripts.

    You've got a LOT of places where you are wrapping tables around single elements - like each and every menu item; What was the purpose of that?

    Anywho, here's how I'd have coded it. Uses one table to make the columns, and the content ride-up techniques.
    http://battletech.hopto.org/for_othe.../template.html

    as with all my examples, the directory:
    http://battletech.hopto.org/for_others/clicklist

    is unlocked so you can grab the files directly. I'm using .png for the backgrounds since they end up a touch smaller with no noticeable degredation (in fact there's less degredation since .png isn't lossy)

    You'll notice I downed the size of the fonts in the menu a notch - this was to make it so that when 'Century Gothic' isn't available (linux, OSX) the menu doesn't 'break' - same reason I increased the menu width to 128px. TECHNICALLY if you don't care about fixing the column width, I'd change the width declaration to 1%, then set the menu LI to white-space:nowrap; - making the column always shrink/expand to fit however wide the menu ends up.

    I also switched the content column to PT, so large font users aren't boned.

    Works 100% cross browser in Firefox 1+, Opera 8.5+, IE 5+ and Safari. I also went in and switched all the non-7 bit ASCII characters to HTML entities - 'as is' in browsers other than IE getting those letters to show as anything more than 'junk' was a craps shoot. Originally I was just going to save the files as unicode since you did choose UTF-8 as the filetype, but that made IE 5.2 choke. Doing it this way brings IE 5.2 mac and IE 5.0 into the fold.

    Hope this helps, or at least gives you some pointers.

    -- edit -- oh, my example is also XHTML 1.0 strict. You will likely have to drop it to tranny to work around the CMS.

  8. #8
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    deathshadow

    Really thank you very much. I will check all your guidelines and update my website.


Bookmarks

Posting Permissions

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