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%
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.
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'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.
I have the following layout:
https://dustinhendricks.com/breastfest/index.html
In ie7 (or ie8 in Compatibility View mode) whenever I mouse over one of the menus items, the browsers gains a horizontal scrollbar going far out to the right. All that happens when you mouse over one of the menus items is, the menu item gains 2 pixels in height, and it's top margin becomes -2px, which is why it is so strange that this would cause a seemingly unrelated scrollbar to appear.
I have ever put colored borders around the ul, li, and a tags to see if something got unexpectedly large, but still found nothing out of the ordinary. Any ideas as to why this is happening?
note that the link is for a festival benefiting breast cancer and is suitable for work
Can't figure out why it is happening but i can tell you that if you set your #main #header ul li a elements to display:inline-block instead of display:block it works fine. Initially thought it is probably an issue attributed to IE's Negative Margin Bug but that should not be affecting IE8, though it might be due to IE8's compatibility mode engine...who knows, its IE, whats up its down with and left is right this browser.
on this site, http://dncminneapolis2012.com/new2 the content (where it says Minneapolis 2012 Democratic National Convention) is hidden beneath another div in IE7.
Can anyone tell me how to fix this?
Everything works great in Chrome, Firefox, and Safari
I don't have IE7 atm and this is just a tip not an answer, but there's a bug in which if you have an absolutely positioned element that has floated siblings, the AP element gets completely hidden.
I notice you have a ton of floats/AP'd elements so that may be the case.
Things to do when debugging:
remove all elements that aren't vital
use overflow:hidden to make sure elements arent being overly expanded and float drop occurs
apply zoom:1; all over the place through say, *{ zoom:1 } to trigger hasLayout.
I might take a look at this in the morning when I have IE7 available # work
Looks to be the <div class="main_content_wrapper">, as far as the IE developer toolbar can tell. The mysterious transluscent overlay randomly disppears as you click around in the DOM the toolbar displays, so not sure why it's there. Possibly something borking on the jquery fade-in routine?
Since they were in separate main divs (not nested under one main div), I had to rearrange my html to get the content to be in front of the container.