473,372 Members | 908 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

IE8 display: table-cell and max-width bug?

Atli
5,058 Expert 4TB
Hi.

I'm setting up a small photo-album-type thing, where I use PHP to set up a list of images for visitors to click through.
That's all simple enough.

However, I'm having a weird bug in IE8.

Because the images can all be of different sizes (nothing I can do about that... outside my control), I use a CSS trick to get them all centered both vertically and horizontally, and scaled down to a proper size.

Basically, I put the image tag inside two div tags, the first one to align the divs horizontally, and the second to align the image both horizontally and vertically.
Then the image tag scales down images that are to large using the max-height and max-width styles.

That all looks like this:
(Added the borders to see the exact position of the divs)
Expand|Select|Wrap|Line Numbers
  1. #GalleryPreview {
  2.     width : 400px;
  3.     height : 290px;
  4.     margin : 0 auto;
  5.     border : 1px solid #0000ff; /* For debuging */
  6. }
  7. #GalleryPreview_VerticalFix {
  8.     width: 400px;
  9.     height : 290px;
  10.     display : table-cell;
  11.     vertical-align : middle;
  12.     text-align : center;
  13.     border : 1px solid #00ff00; /* For debuging */
  14. }
  15. #GalleryPreview img {
  16.     max-width : 400px;
  17.     max-height : 290px;
  18. }
Expand|Select|Wrap|Line Numbers
  1. <div id="GalleryPreview">
  2.     <div id="GalleryPreview_VerticalFix">
  3.         <img src="PHP Generated" alt="Image Preview" />
  4.     </div>
  5. </div>
This works in all the standard supporting browsers. Everything is scaled down and centered perfectly. IE7 fails to do the vertical alignment, but that's good enough for IE.

IE8, on the other hand, does something much worse.

For images that scale down to less then the set max-width, this works perfectly to. It centers them both vertically and horizontally.

But when images scale down to exactly the max-width, the table-cell appears to forget it was scaled down, expanding itself until it reaches the width of the original image size. But it still centers the image correctly... just way out of place.
(See the images I attached. One is from Firefox, the other IE8)

I'm thinking this must be a bug in IE (shocking, I know). I mean, the image is scaled, but it's original width is being used by it's parent, which is not the case with the height.
Either this was the intended behavior and the height is bugged, or it's not and the width is.
(Edit: I found this bug report. Seems to be it)

In any case, does anybody know a workaround, or another method to center the images?
I'll keep looking, hopefully find something before I just drop IE support altogether :)

Thanks,
- Atli
Attached Images
File Type: jpg img_bug_ie8.jpg (15.9 KB, 4652 views)
File Type: jpg img_bug_firefox.jpg (13.8 KB, 3527 views)
Jun 9 '09 #1
22 60714
Have you found a solution for this problem? I am having the same trouble, but I can't seem to fix it. Any help/insight you can provide would be much appreciated. :)
Jun 25 '09 #2
Atli
5,058 Expert 4TB
I'm sorry to say that I did not find any way to work around this.

The cause of this is a bug in IE8's awesome new standards-supporting rendering engine (sarcasm intended) which, until fixed (if ever), will cause table-cell elements to scale out of proportion like that.

I suppose a JavaScript solution would be possible.
This only appears to happen when the contents (in my case, an image) with max-width set scales down to exactly the value specified.
If you were to catch those cases with JavaScript and shrink the image further, it should, in theory, circumvent the problem.
Or you could just have JavaScript dynamically scale the image, skipping the max-width scenario altogether.

I haven't tested this (I've abandoned my Windows partitions since I posted this), so I can't say for sure, but it at least sounds plausible.
Jun 26 '09 #3
drhowarddrfine
7,435 Expert 4TB
Have fun with these. Especially the last one:

The following regressions are present in IE 8:

* Min-width on new block formatting context beside a float is sometimes treated as width.
* Percentage width floats cause justified text to move.
* Max-width fails on floats with auto overflow.
* Scrollbar height is added onto max-height instead of subtracted from it.
* Max-height acts as height on elements with scrollbars.
* Combining max-height, float and overflow:scroll will cause the entire page to disappear.
Jun 26 '09 #4
Well, I think I figured it out! ...at least for my specific problem, which has to do with table cells. I noticed that when I tried using divs, the resize problem didn't happen...but using tables screwed up the formatting of the cells. (Normally I wouldn't use tables, but I needed a fixed grid-like layout, and divs just don't cut it for that.)

Anyway, I added the style "table-layout: fixed;" to my table's stylesheet, and it works in both IE 8 and IE 7. Not sure if this might help your div problem, but at least it's something...
Jun 26 '09 #5
drhowarddrfine
7,435 Expert 4TB
@AsraiLight
Oh? I normally think these people are incompetent but they do a pretty good job doing that without tables.
Jun 26 '09 #6
Of course...because it's not a grid. Your example is made to be more fluid. I've tried doing images of differing sizes with captions in boxes which are the same size and lined up side-by-side, but I can't get it to work across the board. Different instances need constant tweaking to get them to look right, which I'm not willing to do. The tables just work.

Plus, I'm not using them for my site layout, just for the content, which isn't going to be redesigned...so it doesn't really matter.
Jun 26 '09 #7
@AsraiLight
Thanks, man, it does work for divs. I simply added the "table-layout: fixed;" to my outter div (display: table;) and set its width to the max-width of inner img (previous I didn't set this as in firefox the original trick works perfect). This is necessary otherwise the fixed layout of table won't work. Here is what w3c says to fixed layout:

Fixed table layout algorithm:
•The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
Jul 10 '09 #8
drhowarddrfine
7,435 Expert 4TB
@AsraiLight
I don't think MSN.com is fluid, and it is set up as a grid. I would show you a couple personal examples online but I won't (personal reasons) and they work in all browsers though, yes, IE always causes problems.
Jul 10 '09 #9
adinas
3
I was able to solve this by putting the content in the td in a div. For example:

Expand|Select|Wrap|Line Numbers
  1. <td style="width:100px"><div style="width:100px"><img src="..." style="max-width:100px" /></div></td>
Apr 1 '10 #10
drhowarddrfine
7,435 Expert 4TB
Will that be your first and last post here?
Apr 1 '10 #11
adinas
3
Is there a problem with the content of the reply?
Apr 1 '10 #12
drhowarddrfine
7,435 Expert 4TB
Since that was your first post, I was curious whether we would hear from you again.

Tables should never be used for layout so your solution is a step backwards. The result is he already found a solution using CSS but the real problem is IE, as it almost always is. So crippling modern browsers just for IEs sake by using a table is just a bad idea.
Apr 1 '10 #13
adinas
3
Well, I think that saying tables should never be used is a bit harsh. I don't use tables to layout a page but if in your page you are showing tabular data. like a list of results with headings, wouldn't you use a table for that? And if one of those columns showed images then in order for it to work in IE (Which I would have to agree really sucks in this case) my solution would work. I went over the other solutions and thought that giving another option to choose from would be good. No?
Apr 2 '10 #14
drhowarddrfine
7,435 Expert 4TB
Well, I think that saying tables should never be used is a bit harsh. I don't use tables to layout a page but if in your page you are showing tabular data.
That's why I did NOT say that.

if one of those columns showed images then in order for it to work in IE (Which I would have to agree really sucks in this case) my solution would work.
IE is the worst browser on the planet. Inept at best.

There is never any reason to use a table to fix a layout problem.
Apr 2 '10 #15
There is never any reason to use a table to fix a layout problem.

Hmmm...how about the reason that CSS can be turned off?

Although I agree that tables are not the preferred method, they are reliable in certain situations. To state otherwise is just plain ignorant and not worthy of an 'Expert' tag.
Apr 22 '10 #16
Atli
5,058 Expert 4TB
Hmmm...how about the reason that CSS can be turned off?
That is not a reason, it's an excuse.

Granted, if you are designing your websites for the original release of the Netscape Navigator browser... sure, tables might make sense. In reality, assuming browsers have managed to implement the 12 year old core web design technology used by virtually every modern website designed since the turn of the century, is an extremely fair assumption. (Even for IE... up to a point.)

And those who deliberately turn CSS of are either are aware of how it might affect them and willing to accept it, or deserving of having modern webpages fall apart on them. You don't turn off the technology used to style webpages and walk away from it without it affecting the rendering of websites. Abandoning modern practices and reverting to the early 90's to accommodate these sort of users is just silly.

Perhaps it is best to phrase it as:
There is never any VALID reason to use a table to fix a layout problem.

And note that using a table to fix an IE bug is NOT a valid reason. If IE is buggy let the fallout fall on the users of IE, not the web developers. - We aren't helping anybody by continually covering up how buggy IE actually is.
Apr 23 '10 #17
drhowarddrfine
7,435 Expert 4TB
In addition, if CSS is turned off (and who would ever do that?), HTML pages should have been created to still work and be presented in a reasonable manner.
Apr 23 '10 #18
I just signed in, because I was pretty annoyed by the tone of drhowarddrfine comments. Anyway, it tricked me in to become a member.

I figured out that MS changed the rendering engine for the latest MS Outlook from IE to MS Word. This leads to a lot of problems concerning image AND div resizing. I haven't found a way to max-width pictures, table-cells or divs. Tried all of them.

My quick solution: All images are resized via php via a parameter in the source-url (...&width=150). If anybody knows a css solution, this would be appreciated!

Kind regards from Germany,
Wolf

PS: i use div's, so far...
Jul 28 '10 #19
JKing
1,206 Expert 1GB
@wolfgang abbas
Are you attempting to code html emails?
Jul 28 '10 #20
@JKing
That is right. My client wants it that way.
Jul 29 '10 #21
JKing
1,206 Expert 1GB
Okay, well I suggest starting a new thread about your topic, posting the code you are working with, explaining whats not working and explaining how it should work/look.

I have experience with HTML emails, and getting them to render in the majority of clients. You don't want to use divs at all. Infact you want to code your html emails like it is the 1990s using tables. Inline styles are also the way to go.
Jul 29 '10 #22
JIM LU
1
thanks JKing . thanks,you let me know that using your knowledge flexibly and don't stuck in your mind-set! So,I use the table to solve it.But,i'll
think the solution of the question about the "max-" and "table-cell" !Thanks,i'll warn myself don't stuck in my past!
Jan 17 '14 #23

Sign in to post your reply or Sign up for a free account.

Similar topics

4
by: Lachlan Hunt | last post by:
Hi, I was wondering if ::before and ::after pseudo-elements can apply to elements styled with the display: table-* properties. None of my tests worked in either Firefox or Opera, yet I could not...
7
by: Robert Blasius | last post by:
Hello, I've a problem displaying a header content in Internet Explorer. You can view the problem on www.robert-blasius.de The upperimage should be on the left of the middle "line" and the lower...
9
by: wparrott | last post by:
I have a table called tblPayScales. It has 5 fields: numRecID - record ID txtCLASSCODE - a 1 or 2 letter text value (A, B, C, BD, L, LT, etc.) numPAYSTEP - a number value 0-49 numSALARY - a...
1
letmeknow
by: letmeknow | last post by:
Do anybody know how to get the values from a display table
4
letmeknow
by: letmeknow | last post by:
can we use hidden fields in display table
10
by: removeps-groups | last post by:
How to display table and select next to each other? <html> <body> <table border=1 style="display:inline-table"> <tr><td>Hello1</td></tr> <tr><td>Hello2</td></tr> <tr><td>Hello3</td></tr>...
1
by: puT3 | last post by:
Hi, I'm trying to make a dynamic website using asp and javascript and access as my database. I'm wondering if the asp file able to display table from access where user can view and change the...
2
by: KusoYumi | last post by:
Hi everyone, I have met a problem here regarding the display table. Let me explain my problem 1st. Assume that I want to display a list of data in a table, each page contains 10 records. So when...
2
by: LuciaG | last post by:
Hello, I was trying to display table in vba form (excel 2003), but I was't successful. How can it be done? Thank you,
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.