I'm having a problem with floating a container to the right in IE7. Everything looks fine in IE8+, Firefox, Chrome, and Safari but the elements within the container wrap for some reason in IE7.
I've set up a fiddle at http://jsfiddle.net/aagC9/. The problem I'm seeing is visible in the IE7 Browser Mode/Document Mode found in IE9 (it's also in IE7 on XP but I figured this would be easier for people to check out).
While it seems like many people have run into similar problems, their solutions haven't worked for me. I've tried adding overflow: hidden and overflow: visible to both the container and elements in various combinations. I also tried setting a fixed width on the .message container, but that didn't seem to have any effect either. While I could just use a fixed left margin on .message, it doesn't work 100% since the IE7 doesn't support the box-sizing model.
Does anybody know the secret to getting this to work in IE7 with the float?
Thanks!
It has to do with your reliance on display:inline-block; which IE7 supports, just not always correctly. Actually, fix for it is pretty gross. But, as in this updated fiddle, it works.
Related
I’ve got a flexbox problem that occurs in Safari and Opera (probably Chrome also, haven’t checked). In Firefox everything looks as it’s supposed to. Here is the link: http://corvinweber.de/download/v5/
When you scroll down to the bottom of the page you’ll find the reply form. I want the fieldsets “.message” and “.senderforms” to be displayed next to each other, just like Firefox does it. However in Safari and Opera “.message” expands in width and “.senderform” gets pushed to the next line. Strangely, if I set the width of “.message” to 50 px “.senderforms” still gets pushed to the next line. The developer tool indicates that there’s a margin added to the right, although “margin-right” is set to 0.
I have also tried to use the -webkit-prefixed version of flexbox, but it didn’t help.
It’s probably just a small adjustment in the css, to make it work, but I can’t figure it out. Can someone help, please?
Obviously the fieldset nested in another fieldset was the problem. I turned the outer one into a form and it worked.
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 recently just created a website for a company, http://visionaryminds.com/ , For the most part everything is good except for a few browser inconsistencies.
The reason I am posting is an inconstancy I noticed between Chrome and Firefox (IE also had this problem but I used conditional statements to fix them not realizing the problem bled into Firefox)
http://www.visionaryminds.com
When you open the page you will notice a section in the dark gray rounded container that says "Welcome!". In chrome, it is placed where it should be, creating a nice even margin around the entire container. However in Firefox and IE the margin is triple the size.
It appears that despite being in it's own container it's being pushed by the header container outside of it. Anyone have any ideas? I have been at this for days, playing with positioning and z-index with little luck.
Thanks to all who reply,
Spencer
Welcome to the world of negative margins.
In .content_container remove margin-top: -50px and use top: -50px instead.
I'm working on a project, I use the latest IETester, and I bumped into a IE7 specific alignment bug. view this in IE7 and then in any other browser, for example Firefox, IE8 and even IE6. Notice how the little "|" between the lower links is not visible in IE7, yet it looks fine in the other browsers. Removing the left:-100%; from on line 61 fixes the bug as seen here, but i need this "left" for positioning.
Any help on what is causing this bug, or potential ideas on how to fix it much needed.
I don't know exactly why you use the left:-100% trick but what you do can be achieved much more easily. You want to make the toplevel ul to be inline-block, Make "Forums" be block level and the other ul block level (and the li items in there be inline) then you can forego many of the big positioning commands, and don't do ill-defined things like left:-100%
I have been looking for a solution to an IE8 issue regarding padding on a div with overflow: auto. When the content is scrollable IE8 doesn't seem to honour the bottom padding. An example of the issue can be seen here http://jsfiddle.net/Gbp5U/ (issue only appears in IE8)
In IE8 when the content is scrolled to the bottom there is a bottom-padding of what appears to be 0px. All other browsers, that I have tested, show the bottom padding. The developer tool in IE8 reports the bottom-padding as 20px but to me that is clearly not the case.
Has anyone else come across this issue and found a solution. The only workaround I have for the moment is to force IE8 to compatibility mode which I would rather not do.
A suggested solution elsewhere was to place the div content within its own div with the appropriate padding as seen here: http://jsfiddle.net/Gbp5U/19/
I'm not a fan of it but I guess it works......