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.
Related
I have a problem with extra spacing after floated elements in Internet Explorer <= 9.
It is the only browser that renders this page with some extra spacing after the HEADER, if some floating is present within (If I remove floating - spacing goes away as well)
I know that I could use overflow: hidden and yes, it solves the problem, but in this particular case I cannot use it, because I have a drop-down menu in the header. Otherwise, I would have used it already.
I tried using this "clearfix" solution: http://nicolasgallagher.com/micro-clearfix-hack/, but it didn't work.
Is there any simple solution without dirty hacks that would fix the issue ?
Fiddle: http://jsfiddle.net/kkg8z/
P.S I'm only interested in supporting IE9 as the lowest version. Everything less can just go to hell
P.P.S
For those, who didn't notice any difference.
Turns out that since #content has display: table attribute, #header should also have one, according to IE :)
Crazy stuff.
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.
site in progress: http://www.modernfuture.net/wordpress
my site is finally looking and behaving as expected in Firefox 23!
However if I view the site in Chrome 29, or Safari 5, my social div, logo image, and featured post image are positioned differently than expected.
Any thoughts on what's causing this?
Also this site looks completely different than expected on my Galaxy S3 but I should probably save this question for a different thread. Either way not sure if it has something to do with this cross-browser funkiness or not but thought I should mention it regardless.
Thanks for your help SO!!
Use a CSS reset and it will minimalize the differences between browsers.
Here is an example
The layout seems to be based on a really funky set of relative positioning without a solid base. For instance, the header's pieces could be made into inline-block elements and vertically aligned before fine-tuning with position:relative;
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.