Check out the following:
http://jsfiddle.net/symposion/P8KBe/7/
in IE8 and then Chrome/Firefox/IE9+. You will notice that in IE8, the inner blue div is sliced off at the edge of the outermost #slicer div, despite the fact that it is only #outer that is overflow:hidden. If I change the min-height on #outer to an explicit height, the problem goes away.
The example may seem contrived, but only because I've simplified it right down here. I've encountered this in a real project and it's causing a headache because I have limited scope to change the layout principles being used - there are too many other dependencies. I'm looking for two things here:
Is this a known bug listed somewhere? What is the simplest statement of the issue? I still don't feel like I really understand the underlying error that is causing IE8 to get this wrong; it's still not a particularly simple test case.
Is there a workaround that doesn't involve changing the styles of #outer and #slicer? In my real world example these are part of a larger page framework that I'm going to have trouble changing, whereas the #inner bit is more readily under my control.
(Update) The original example is very contrived in an effort to be minimal. I have created a new JSFiddle here: http://jsfiddle.net/symposion/NDa6U/ that gives a slightly better view of the real-world problem. If you resize the html pane in IE8, you will notice that eventually the green inner content section starts getting cut off incorrectly. What I'm looking for is for this section to remain 100% of the height of the div it's contained in, ideally without having to make any significant changes to anything other than #innerContainer. But to be honest, I'd be interested in any solution that preserves the basic layout principle (a bottom section that expands from a defined pixel position to a defined distance from the bottom of the page, but has a min-height) that works in IE8.
How about http://jsfiddle.net/thirtydot/NDa6U/22/?
#innerContainer {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
Here's some (relatively) old background information about this technique: http://www.positioniseverything.net/articles/onetruelayout/combined
From personal experience, it works in all modern browsers with no problems.
Related
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
after 3-4 hours of searching with IE's "dev tools", I can't understand why.
This code: https://tinker.io/b2c10 produces the layout correctly in IE7 mode, Chrome, Firefox. In IE8 Standards mode, here's the result when you make the viewport smaller:
And here is how the layout should be / is in all other browsers (IE7 included):
Needless to say I experimented with all including:
reducing the max-width of the img
removing the Who's Who part with the display:inline-block's
removing the image completely from the middle column...
It seems there was a problem in how Sharepoint was converting my source html making it not valid...
In a not so clean way you can start by setting min-width on the divs with that content. That will also help to keep it from overlapping as it scales down. Also I think you might want to switch to spans for the div width. I feel like I am preaching Scaffolding to a lot of people but it really does help keep things scaling nicely.
.ms-WPBody {padding:0;overflow:visible;min-width:190px;}
http://jsfiddle.net/R8LEE/
http://twitter.github.com/bootstrap/scaffolding.html
p wich is block by default, with div using float: right, padding instead of margin....not sure how this is working, you need to improve your css a bit dude. I sugest you review it all.
i have problems with IE8 :
http://immobilien.la-via.ch/
Website header is not on the right position.
If you open it in chrome or FF it works.
2nd problem: white area is not 960 width....
You need to properly contain your content inside your #nav div, you can do that by triggering the hasLayout effect on it, like so:
#nav {
zoom:1;
}
Are you aware that you mix table-design with div-based design? Just a recommendation: your layout can quite easily be designed with divs only (no tables). Cleaning your code up will help you a lot more than just fixing some issues that occur now in maybe IE8... have you seen your site in Safari/Chrome as well? And IE9+? Probably you should have a look, as you can see the consequences of your (sorry, it is not meant offensive, just nicely in order to help) messed up HTML code...
Also, don't apply a fixed height to a table/div if possible, as you probably want it to automatically adapt the height to the amount of text. You have some parts of your code where you use divs anyway already, just my recommendation would be to design the whole site on divs...
My website has a footer overlap in IE7, while fine in all later browsers.
here's the link:
http://www.kindreviews.com
i have tried finding a solution via google, but answers seem so variant.
Please help!
Thanks,
zeem
You've got bad encoding in your copyright area: Markup Validation of kindreviews.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Fix that and then revalidate and see if there are other code errors.
And you have a low answer acceptance rate; see the FAQ https://stackoverflow.com/faq and accept answers to your old questions.
I have to say that the site layout is a bit messy: container DIVs with smaller widths and heights than the contents, too many negative margings, and the like..
For instance, the DIV #cuber_div containing the flash banner, having an height set to 515px, is overlapping the text, so the upper part of text isn't selectable.
Besides, the #footer DIV is outside of the #wrapper DIV, so relative positioning in buggy browsers such as IE < 8 gets messed up.
My personal suggestion would be to fix the mark-up and re-style the whole site from scratch.
It may take time, but far less than keeping the site like that and having it to break up every once in a while for seemingly no reason, and then go figure..
It's up to you to decide.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).