Safari on iOS6 appears to treat display:table differently (compared to Safari on iOS5 and Safari on my PC).
On iOS5, display:table forces a div into box-sizing: border-box mode, and ignores any attempt to override the box-sizing.
On iOS6, display:table forces a div into box-sizing: content-box mode, and also ignored any attempt to override.
The outcome is that DIV DISPLAY:TABLE WIDTH 250px PADDING-LEFT: 50PX will be 250px wide on iOS5 and 300px wide on iOS6.
My question: Is my understanding of this correct? Is there a simple way of getting a div with DISPLAY:TABLE and a left padding to be the same width on iOS5 and iOS6.
FYI the reason I am using DISPLAY:TABLE is because it allows simple vertical centering of my content, which has variable height.
Just in case it helps someone in future, this answer solved the issue for me. I moved the padding from the element styled with display: table; to the one styled with display: table-cell;.
I ran into this same issue and couldn't find any documentation other than this posting. Fortunately for me, it turned out that the container in question didn't need the table: display property.
However, I did test to see if display: table-cell applied the padding the same way as display: table, and it turns out it doesn't. So maybe try applying the display:table property to the parent container (free of padding, of course) and try display: table-cell on the div in question.
Did you try adding
box-sizing: border-box
This wont have any effect on the iOS5 but will probably fix the display on iOS6 if what you're saying is correct. Sorry no chance to test on iOS6
Related
I have a DIV in a table. This code is generated by GWT, so I don't have a lot of control over the elements that are used (which is to say that I know tables are usually not the best element for layout, but this is not something that I have direct control over).
In Firefox, a DIV with 100% height spills out below the table, while in Chrome the DIV are sized as I would expect. What is going on?
So this one had my pulling out my hair for a while, but it turns out that the DIVs in Firefox were defaulting to box-sizing: content-box setting, while in Chrome they were defaulting to the box-sizing: border-box setting. Because I was using padding in the DIV, this was causing Firefox to display the DIV with a height of 100% plus the padding.
The solution was to just specify -moz-box-sizing: border-box in the CSS for the div.
It seems Chrome is the only browser rendering my code the way I want.
If you notice my position:absolute is changing as the border size increases (in FF and IE) however is unaffected in chrome (which is exactly what I want).
Here is a demo Please try it in chrome/ie/ff to see the difference
The primary purpose of all of this black magic is simple, I need the .thumb:after to always be in the center of .thumb . If you know a better way let me know.
Edit: Fixed -- Checked in FF and Chrome (Don't have newer versions of IE)
http://jsfiddle.net/AyCKU/8/
Took out margin: 0 auto, just left it at using %'s for top and left and negative margins.
Basically: Used one of the methods for Vertical centering in CSS (Using 50% and negative margins) and applied it to both vertical and horizontal centering.
I messed around a little in Chrome + FF and noticed if you change:
.item .thumb:after
If you change the positioning to fixed and center it properly it will work in both browsers.
Give it a shot in IE and let me know if it works ..
i have a nested display table in a display table cell and i doesnt seem to apply the 100% height to IE 8 or 9 (even a extra containing div wont work), works fine in all other major browsers, here the jsfiddle it should explain everything.
http://jsfiddle.net/bDm4d/12/
try that in firefox/chrome/safari to see how it should look and check in ie8/9 youll understand the issue. Both columns should be equal height, since they are both with in a display table cell. The center (green in the right, pink in the left) have height to auto so it "should expand" like it does in webkit/ff.
A work around for ie would be great conditional or not.
Unfortunately, display: table-cell isn't supported by IE. Luckily, there are several workarounds to get divs with display: block to fill the height of their parents, creating the 'equal height' effect. I found this article to be very helpful when I was faced with a similar layout challenge. Good luck!
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.
I have a table rendered inside a div. Following styles are applied to the outer div.
width:auto;
background-color:white;
overflow:auto;
height: auto;
scrollbar-face-color:#E0EEEE;
scrollbar-arrow-color:#33ccff;
scrollbar-track-color:#EEFFFF;
scrollbar-shadow-color:#EEFFFF;
scrollbar-highlight-color:#EEFFFF;
scrollbar-3dlight-color:#EEFFFF;
scrollbar-darkshadow-Color:#EEFFFF;
In IE8 the outer div appears perfectly fine with a horizontal scrollbar but in IE7 both scrollbars are shown and the outer div is not adjusting the height automatically. I want this to look the same as in IE8. Can somebody suggest something?
Following is a link to the screenshots in both versions of IE:
http://img692.imageshack.us/img692/6374/81306247.png
Since you only what the overflow happen in one direction set overflow-x: auto instead of overflow: auto.
Different browsers have different ideas on default margins and padding, etc. Try adding a reset stylesheet before your stylesheet to normalise the browsers and see if that solves the issue for you. You may need to make subtle adjustments to your existing stylesheet to incorporate this but they should be minor and will reflect equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/