last day (16 days later) » 
18:00 - 21:0021:00 - 00:00

6:41 PM
1
Q: Tableless Table Layout in IE8

nbouvretteIs there as way to replicate exactly this layout without table (using CSS and divs only, no Javascript) in IE8: http://jsfiddle.net/u0u7snh6/2/ I've tried multiple scenarios and IE8 seems to be either messing: Height of the content cell Either there height doesn't use 100% of the space avail...

 
IE8 is only there on Windows XP. A lot of companies are stuck with Windows XP and thus, IE8... that's why I need to support it for a specific project.
 
Tables should be used to present tabular data and not full website layouts - LINK
 
I have made several attemps - I tried to ask this other question and didn't manage to get any answers (based on my attempt): stackoverflow.com/questions/25583701/…. So I thought I would try to ask an open question instead.
I agree that using table for a layout is not ideal but I was unable to find a better solution, hence why I am here :)
 
In 2014 instead of table's layout use HTML5 (NEW) tags - <header> <nav> <footer> <article> <aside> and more... :)
 
I already use HTML5 in my other example (and HTMLShiv for IE8). The problem is really that the <div> doesn't not play nice in IE8, even if I pick 'display: table'. I've tried several options and got the problems mentioned in the top of my question :(
I'm fine with the concept of deprecation and all. Unfortunately for this specific project I need to support both IE8 users and Blackberries which makes it a bit tricky if you also want to implement a responsive design. Having this simple layout would solve a lot of problem... considering the responses I think I'll stick to the tables since it works perfectly :)
It's hard to explain... maybe check my original question from earlier today for details on the IE8 misbehaviors with "table divs": stackoverflow.com/questions/25583701/…
 
6:41 PM
TRY - DEMO and use min-width and max-width instead of width % values and use CSS @media-queries
Learn More: Mozilla MDN HTML & CSS and Good Luck! :)
 
Ok thanks for the demo but what I'm trying to do is actually have the following elements: header row (full row + content which is centered with the content), content row (again centered with the header), footer similar to the header... both the header and footer must be able to adjust their height dynamically while the content's height will always take the rest of the space. That's why a 9x9 table seems the easiest solution for this problem (HTML5 wasn't able to help)
 
tell me the min-width, max-width, height, background-color and position of each elements???
 
hey
So what info exactly do you need? I already did a mockup here : stackoverflow.com/questions/25583701/…
I didn't use HTLM5 to simplify the question since IE8 doesn't support HTML5 without a Polyfill
 
don't you need a responsive website?
 
yes my website is fully responsive
and supports IE8 and Blackberries
 
6:44 PM
you need css @media queries
 
I know all this :) all I'm trying to see if can I solve my table problem with CSS
 
I mean max-width or min-width
give me 2min...
 
the only way I'm investigating this is because I don't like tables
but I wasn't able to get the exact same layout with CSS
 
ok please wait
....
 
ok thanks
 
6:45 PM
2min.
now I'm using <div>'s for layout, ok
 
perfect.. you will quickly see in IE8 the problems they cause
mainly in regards of the height
and again this works well in other browers.. it's mainly glitchy in IE8 from what I could tell
 
tell me the height of your header and footer
???
 
idealy they need to adjust to the content
so height: 1px; but they can adjust if I add more content
which will also involve the height of the content to adjust as well..
 
ok then I think the min-height 50px is a better option for both footer and header
 
we could try that
 
6:52 PM
and they will adjust if you add more content
 
yep that works
 
trying
ok first challenge I was solving with the tables
how can you align the header/footer content with the content div
so that they start at the same place (left side)
 
use position: relative; and margin: 0px auto;
 
the other one is the content, how can I vertically align
 
6:58 PM
what do you mean by "vertically align"????
 
ok first problem, I mean that "this is header" should be aligner with "this is content" and "this is footer"
second problem is "this is content" should be vertically aligned (e.g. in the middle of the page. e.g. vertical-align: middle
but that won't work I think
 
ok, I think you should add some div's in the layout then tell me how to align them?
jsfiddle.net/7b686k17/4 - here
 
one sec I' trying to test in IE8
 
its working just fine in my ie8
 
so yeah that wont work
because you have set a fixed height on the content cell
I need the height to be dynamic
e.g. take 100% of the remaining space in the window
of course this will only apply is the content is smaller than the window height... but it's still an important case for the way the design looks
 
7:04 PM
that's min-height: 480px; and try to add some content div's inside it you will find out that its working fine :)
 
I know but that is what I'm trying to solve, when there is not enough content ;)
 
wait...
i'm trying
 
hehe thanks for trying, I spent a lot of time on this challenge
 
I'm a CSS expert....
wait
 
well you seem to be fluent indeed.. I know quite a bit as well but it's not my profession hehe
 
7:14 PM
wait 2 more min....
 
you can take your time I'm not in a hurry
and I know how difficult this one is (if possible at all)
 
7:26 PM
I think you must use min-height for #content, if you use or want 100% height of your webpage then you need to use position:absolute; that's will break the flow of docoment
and you want responsive website, right?
 
yeah I know
yep responsive
so you're suggesting me to keep the table then? it works fine with the table and height: 100% hehe
 
NO
that's very very bad idea
 
why not? honestly I know tables are old school but I cannot find arguments which outweights the technical limitation of not using it
 
what is your site about?
 
it's a new project.. it will be a transactional site
some of the customers will use IE8 and blackberries
so it's more important to keep them onboard than to lose oportunities
especially since I have a way to make it work
I could share my screen to show you the design.. you would probably be impressed
 
7:33 PM
don't you want SEO support for your site, I mean SEO will be very mad about your table layout... :-)
 
Yeah I know about SEO... are you sure it will be very mad about my table? we're talking about a single table.. not multiple tables
I was trying to find out more about this... I could always skip the table on the landing page since the heigh wont be an issue
 
don't you have enough content for your #content div? (to adjust the height of page)
 
honestly Amazon still uses table
well I will on some pages but
 
and you know WHY?
 
the idea of being truly responsive is that your content shouldn't dictate your design
why? :)
 
7:36 PM
wait...
only 1min....
 
yes take all your time
if you can find a solution you would be my hero
otherwsie I'm pretty sure I will use tables ;)
 
Amazon homepage html - jsfiddle.net/9e8ejmf6
frist tag is <header>
and
 
ok
yeah but don't get me wrong
 
and tables for products to display from Database
 
I will be using HTML5
and semantic ids on my table elements
but honestly we can only guess how much this will impct SEO right?
 
7:42 PM
In 2014 tables are use to display data from Database only
 
yeah I know, that what I wish I would use them for too
but IE8 doesn't want me to do this
 
Google's own Site - html5rocks.com/en
for new html5 tags and css3
and for SEO
moz.com best website
 
yeah
well that's all good, I mean most website could care less about IE8
other than the big players like Facebook, Amazon, Google
and most of these sites are not responsive
they have a mobile version
I want a IE8 responsive design
which I can get rid of later too of course
 
No the only problem you think that you have is the height of #content div, Right? but why???
 
because having a full width footer floating in the middle of a page will look very ugly
 
7:47 PM
Oops! that is your problem? wait a 5min... I will fix that...
 
the one I can think of right now, and then you will have the vertical-align: middle for the content div :)
 
wait please...
 
I'm working all day long on my project, I'm not in a rush :)
if you can sort this out I might have some oportunities for you who knows hehe
 
Thats not perfect but you need to put your footer inside the #content div and use position absolute jsfiddle.net/7b686k17/12 or can't you use position fixied???
it need some time to fix the problem
right now that's not working ....)
 
let me check
 
8:00 PM
can you see the footer of this site mashable - mashable.com
lol...
 
long one
 
and BTW "if you can sort this out I might have some oportunities for you who knows hehe" I don't need your opportunities ':K
 
hehe good then ;)
ok well anyhow it's still not sortd out
 
1min...
 
the content div needs to be 80% width.. I need to have spaces on both side
to get a background there
and some shadow effects and stuff
and there is no vertical-align: middle either in your last example (for the content)
 
yeah I don't want a fixed foot either ;) I tried that already
 
do you want a background for each 4 sides or 2 sides of content?
 
I also tried the "hack" with negative padding and fixed heigh which I thought was ugly
let me show you what I did
 
can you show me an example website?
something similar to your website
I mean any website you like on web
??
 
if you want to join screen share
I can you show the real projet in action
it's still offline so that would be the easiest way to show you
 
8:09 PM
no, just give me an example....
show me any website
similar to yours or you want
 
I don't have an example, I can send you a screen shot
 
okkk
send me a screen shot
use this site tinypic.com to upload
your screen shot
 
yeah sorry
there is some sensitive info on there
trying to figure out what I can send
 
use ms paint
to hide that info
 
yeah I know how to send a screen shot ;)
one sec
 
8:15 PM
I think the main problem is HTML, you should use something like webmatrix cshtml view microsoft.com/web/webmatrix
for better functionality and easy to use...
 
wow lots of junk on that site hehe
does that work?
 
webmatrix is similar to php but better
asp.net
 
did you get the url?
 
I remove the text
but it gives you an idea
 
8:22 PM
and what special about it? there is a form inside the content, I think that will cover the height of the #content div
and one more thing....
 
well that is just one example
 
let's say your submit the form and you get a small message, like "Welcome to our site blabla"
 
Statistics
 
let's say you have a huge screen
I know that ;)
again, this is because of a specific target of users
honestly I would be the first to jump in a use CSS
but I didn't find a way
 
8:24 PM
I don't like any IE version.....
 
and, I work for a big international company right now... they still use IE8 (+10k employees)
this is just one out many example of IE being used
 
just give me the name of your company????
 
you can look me up on Linkedin but it's nothing special
 
I'm asking for your company's name????
:)
 
I'm not saying people use IE8 for all browsing.. but it's the default browser installed on their machines
Not sure I'm allowed to talk too much about my company ;)
 
8:26 PM
That's very smart
 
no but belive me... I could give you tons of other examples
IE8 is still around
 
I can fix it by using webmatrix
 
and anyway we're just dodging the real question here... can we fix this issue or not? I found a way to fix it
which yes might impact SEO... and to which extend we don't know
 
how much time do you have to finish the layout???
for your project
 
I got all the time in the world, it's my project
I never heard of webmatrix before... not sure how it could solve my problem?
I don't like Microsoft solutions and I already have all my backend hosting stuff figured out
 
8:30 PM
Email: missmarymelody@gmail.com and my chat room chat.stackoverflow.com/rooms/59884/mary-melody
copy and save
 
so you're leaving?
 
I need to go to = slee:p
I'm NON-US
 
understood... well anyhow even while its my project I need to finish the layout
and will most likely pick the table option
 
one more thing
.........................
 
we'll see how bad it will impact SEO...
 
8:32 PM
"I don't like Microsoft solutions and I already have all my backend hosting stuff figured out" - which type of hosting account do you have?
 
right now I'm just self hosting my stuff... but I will probably go in the Cloud
again this is a new project still in inception
I have a full time job and working on this over the weekends/night
 
thats too much for a simple website
<dddd
 
my background is more with infrastructure/servers etc... then I went into dev, and anyhow, I've been in the IT world for a while ;)
it's not going to be simple
and Cloud is simple for me
 
I don't like Cloud
 
Why not?
 
8:35 PM
I'm an asp.net developer
mvc or
webmatrix's sites
 
oh yeah... well Windows and Cloud - I probably would not like cloud either hehe
I'm a Linux / PHP guys ;)
you can always go on Azure
but asp.net is a different beast
 
that the problem, I don't know about The L of linux
I like godaddy hosting
 
Find me a solution to my table, I can teach you linux basics hehe
but nowadays everything is so easy to find on Google
 
I already have a hosting there
 
other than very weird questions like the one I got right now
Yeah Godaddy is fine too
I got a few sites running there and on local hosts too
small Wordpress sites
anyhow thanks for your help
I wish we would have found some sort of definite answer.. but I think the lack of answer is the answer hehe
 
8:39 PM
no problem I like to help but my English grammar is very very bad for most people
 
I'm non-english as well and work mostly with people all over the world
so I didn't notice anything wrong with your english
probably just as good as mine hehe
 
hehehehe
are you french?
france I mean
 
French from Canada
you?
 
somewhere in this world
francais is on the right side of your image os I guess
 
yeah you have quite a suspicious profile
but that's all good because you are helping hehe
 
8:43 PM
I'm a girl I need my space
crazy
 
check this out, someone almost found the answer
 
and a writer
 
now the only problem is height..
so why are you helping out people online? honestly I find this cool but I'm more busy posting questions to have time to answer hehe
 
now the only problem is height.. for content?
 
yeah
but I've ran into this before... never been able to solve it in IE8
 
8:48 PM
What about using JavaScript???
 
oh yeah I did this also
but I think it's much worse than tables
 
why???
 
because then you need to do all kind of weird then when/if the content changes
if the viewport change
I try to avoid Javascript as much as I can
especially for critical display elements like that
*need to do weird exceptions
 
maybe only 0.01% users of IE8 have their javascript disabled
 
so what I would need to do then
 
8:51 PM
jQuery
 
is some kind of javascript that works only for IE8... gracefull fallback
I don't like jQuery either
 
yes
 
that's why I wrote stuff like this
you seem so convinced that table are evil
yet... we can't really quantify how evil they are
 
yes
table are evil
and .....
one thing
so why are you helping out people online?
 
I wish I could quantify their evilness hehe
 
8:54 PM
chat.stackoverflow.com/rooms/59884/mary-melody
go to that link
 
yeah
 
there is a guy, I've fixed his all website layout
 
that's great
 
I like to help
 
I like to help too but if I would spent my time helping I would not do my project ;)
but I'm sort of helping during my project anyway... mentoring a friend to code
 
8:57 PM
I will fix that tomorrow morning
 
so I'm not completely selfish hehe
 
no need to worry
sometimes I like to chat
 
I'll think about your IE8 idea.. you're sort of scaring me about the evil tables
yet my table solution is so responsive, it just works
 
yeah I couldn't find any decent solution for that...
there is some with Jquery or other heavy lifting stuff... I thought I would simplify it
 
18:00 - 21:0021:00 - 00:00

  last day (16 days later) »