|
Hyrule19022 Posts
I've been having some issues with IE8, IE7, and Firefox 3.6.6.
Namely, applying overflow to part of a table (of tabular data, not a table used for layout...because that's bad).
In Firefox, Opera, and Chrome, you can apply a style, class, or id to any thead, tfoot, or tbody element, and the results are as expected.
In IE8, any style, class, and/or id styling rules are applied to each individual row within the section.
In IE7, everything goes to hell.
Example:
thead
{
border: 2px solid black;
padding: 3px;
}
tbody
{
max-height: 450px;
overflow: scroll;
}
applied to
<table>
<thead>
<tr>
<th>Col Header 1</th>
<th>Col Header 2</th>
<th>Col Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>col data 1</td>
<td>col data 2</td>
<td>col data 3</td>
</tr>
[ .. say...300 rows of similar .. ]
</tbody>
</table>
Behaves pretty much as expected in Firefox: only the tbody section scrolls while the column headers remain stationary (like freezing panes in Excel).
In IE8, partially due to another bug where max-height is treated exactly like height, the entire table scrolls (thead shouldn't!) and each row inside tbody is 450px tall.
In IE7, a similar result is seen as in IE8, but, mostly due to some totally rational and legit formatting before the table, the entire table winds up being shifted 1000px to the right of all other data on the page, and, due to IE7, all tbody items are crammed into the width of the first column header.
The result? I end up programming for at least 3 different browsers.
I fixed it in IE8 with a div and a bit of annoying styling that took a while to get right, and I gave up on IE7 for the day.
Does anyone know anything about these effects and what solutions may exist?
ps: damn you, Microsoft
[edit]
PPS - this is handy: http://gerrendesign.com/weblog/2008/05/ie7_css_hack.php
|
"The result? I end up programming for at least 3 different browsers."
Well, that's what you should be expecting when doing web design. Designing and coding websites that must work on various browsers as each reads css differently. That's the main reason why i quit web design
|
do you really have to use tables? div gives you way more options and everything...
if you can you should try using divs instead of tables.
|
On July 14 2010 05:29 tofucake wrote:
The result? I end up programming for at least 3 different browsers.
Incorrect. Instead, you learn to write code that works in all 3 browsers to begin with. It does take time to learn to write markup in this fashion, but cross-browser problems eventually become rare as you gain more experience in how to write markup.
PS: If you think the difference in browsers is bad now, try Internet Explorer 6 (still in use today, although most developers no longer support it). It was nearly impossible to write complicated markup for that browser, and even Wikipedia notes a few of its faults.
EDIT: The general idea of my post is that I found that I learned to avoid markup that causes problems in different browsers and focus on techniques that have a universal correct output (similar to how I learned one way to write mobile J2ME code that wouldn't mess up on various devices that each had their own implementation). In short, a style that is coded to one unwritten common standard rather than to multiple standards, if that makes any sense.
This post has been taken badly however - I apologize to the OP for any offense taken. For other readers, please disregard and skip this post. The general idea sounded better in my head. Sorry!
|
Hyrule19022 Posts
On July 14 2010 05:45 ilbh wrote:
do you really have to use tables? div gives you way more options and everything...
if you can you should try using divs instead of tables.
I'm tabulating data. In fact, the page is based off of an Excel sheet. It's tabular and therefore requires tables. I'm not going to muck with divs for tabular data when the end result is currently 43k lines long.
Anyway, this is the only time I've needed to do some serious workarounds. My other work for the past 7 years or so has been pretty consistent across all browsers.
|
Hyrule19022 Posts
On July 14 2010 05:52 [-Bluewolf-] wrote:Show nested quote +On July 14 2010 05:29 tofucake wrote:
The result? I end up programming for at least 3 different browsers. Incorrect. Instead, you learn to write code that works in all 3 browsers to begin with. It does take time to learn to write markup in this fashion, but cross-browser problems eventually become rare as you gain more experience in how to write markup.
INCORRECT. I've been making websites for years. The problems I've been experiencing today are due to IE7 behaving differently from IE8 which behaves differently from EVERY OTHER BROWSER. It's not a problem with my markup, it's a problem with IE.
[edit]
If you need more evidence, you can read plenty more about IE8 being dumb about overflow in general.
|
On July 14 2010 05:52 [-Bluewolf-] wrote:Show nested quote +On July 14 2010 05:29 tofucake wrote:
The result? I end up programming for at least 3 different browsers. Incorrect. Instead, you learn to write code that works in all 3 browsers to begin with. It does take time to learn to write markup in this fashion, but cross-browser problems eventually become rare as you gain more experience in how to write markup. PS: If you think the difference in browsers is bad now, try Internet Explorer 6 (still in use today, although most developers no longer support it). It was nearly impossible to write complicated markup for that browser, and even Wikipedia notes a few of its faults.
It's pretty hilarious that you insult him for writing bad code and then contradict your own insult in a "PS".
Also, if you really want help to fix that stuff I'd suggest stack overflow 
|
Internet Explorer is the devil for webdesigners. Usually everything works great in all browsers except IE. Of course, that means 3 separate css for IE8, IE7 and IE6. My professional opinion is that if people are still using IE6 they can suit their damn selves for having nothing work properly, maybe take it as an incentive for upgrading, but whatever...
|
I'm a webdesigner and I'll tell you there are some problems that are just not compatible across browsers. The only solutions i've done in the past is to either 1. recommend a different layout or design 2. Add conditionals for which css style sheet to use. Don't even get me started with chrome js either. Here's a fun js exception.
new_window = window.open( url, "new_window_underneath", params );
if (navigator.userAgent.indexOf('Chrome/') <= 0) {
new_window.blur();
}
else
{
window.blur();
}
window.focus();
|
Mantra for web designing cross-browser:
Work on web compliance first (generally using opera or FF works for testing this stage)
Then use conditional comments for each version of internet explorer. Does that not solve your problem, or is IE outright lacking some functionality?
There are some scripts you can use to add functionality to older versions of IE as well - put them in conditional comments of course.
Overall, there are many problems with different versions of IE like you mentioned. It is one of the many reasons why IE is such a bad web browser, and why things are done the way they are (conditional comments for each version)
|
Yes.
Stop using tables, and start using divs, you can even make them divs behave like tables by simple css.
:o
|
On July 14 2010 08:12 Xapti wrote:
Mantra for web designing cross-browser:
Work on web compliance first (generally using opera or FF works for testing this stage)
Then use conditional comments for each version of internet explorer. Does that not solve your problem, or is IE outright lacking some functionality?
There are some scripts you can use to add functionality to older versions of IE as well - put them in conditional comments of course.
Overall, there are many problems with different versions of IE like you mentioned. It is one of the many reasons why IE is such a bad web browser, and why things are done the way they are (conditional comments for each version)
I've done it the other way around. Program for IE first. Then worry about everything else after.
|
Hyrule19022 Posts
On July 14 2010 08:12 Xapti wrote:
Mantra for web designing cross-browser:
Work on web compliance first (generally using opera or FF works for testing this stage)
Then use conditional comments for each version of internet explorer. Does that not solve your problem, or is IE outright lacking some functionality?
There are some scripts you can use to add functionality to older versions of IE as well - put them in conditional comments of course.
Overall, there are many problems with different versions of IE like you mentioned. It is one of the many reasons why IE is such a bad web browser, and why things are done the way they are (conditional comments for each version)
The thing about this particular issue is that it's such an obscure bug that it's hard to fix (it took me many hours to find some information about how to work around it...and even then my solution only works in IE8 (I need to work on IE7 fix tomorrow).
On July 14 2010 09:32 funkie wrote:
Yes.
Stop using tables, and start using divs, you can even make them divs behave like tables by simple css.
:o
I've explained this repeatedly: the table in question is holding tabular data. I'm using a table for its intended purpose. I'm not going to recreate the table structure using divs and more styling when it's built in to the markup.
I'm asking for help here, people, with this obscure problem. I don't need people telling me to not use tables for tabular data. Tables shouldn't be used for layouts, I know that already. What they should be used for is tabular data. Whoever taught you to never use tables is dumb.
|
|
|
|
|
|
EPT
