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/
Related
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
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.
My current layout is based on this:
http://www.cssplay.co.uk/layouts/body5.html
It involves three columns which are each independently scrollable and fluid. However my web app can only shrink in width so much, and at a certain point I would like for something like a min-width (where they will have to scroll horizontally to experience the site)
I tried putting a min-width on the body, but that did absolutely nothing. I also tried wrapping the columns in a containing div and giving it a min-width, this also did not work.
Does anyone else have any ideas on how to approach this.
Thanks
I'm basing my answer on the link you provided.
On html and body, remove overflow:hidden.
On body, add position:relative; min-width:960px.
Tested in recent versions of Chrome, Safari, Firefox.
This also works in IE7+ if you remove the comment at the top <!-- IE into quirks mode -->.
I've had quite a few problems with IE6 and our website.
http://www.sweetlets.com/w/solutions/click-stream/features/
At the very top the teaser boxes have scrollbars in IE6, but not IE7, IE8, FF or Chrome. Does anyone have an explanation for this?
Same effect in the footer with the 3 boxes in one row. Also scrollbars. Mathematically all fits into the row of 960px. I added up paddings, margins, borders and width and even kept some pixels left...
I simply don't know what is wrong. Any ideas?
Not sure if it'll fix it but I'd put a clear: both on #cf_content and remove overflow on the following:
#main
#content
#cf_content
#cf_content_teaser
You can set overflow:hidden; on the #cf_content_teaser to get rid of the scrollbars. Dunno if it's worth investigating further if that resolves the issue. You can apply the same to whatever other div it's happening on.
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg