I have a site at http://www.dellsvet.com/ which is being affected by a bug in IE6. The page will only show what will fit in the viewport, and you're unable to scroll down in IE6. I thought that I was dealing with the unscrollable content bug detailed here: http://www.positioniseverything.net/explorer/unscrollable.html -- but it's not a match as far as I can find. I've been tinkering with this for a while with no result.
Does anyone have any insight on this bug? I've got a feeling this is something simple staring me in the eye, but I'm missing it.
Thanks.
You should consider not caring about IE6 because it's becoming more and more rare. Nevertheless, you asked a question, so I'm going to answer it.
Simply remove position: relative and z-index: 1 from #container.
Doing that fixes IE6, and I did not notice any differences in IE7/IE8 or Firefox.
Bonus, because I'm nice:
To fix the menu buttons, add this to your CSS:
.ie6 #nav li a { zoom: 1; display: inline }
Thanks to your use of HTML5 Boilerplate, you have that nice easy way to feed CSS to IE6.
To get (the drop downs) ul#nav li:hover ul working in IE6, you can use Whatever:hover.
Other than the above issues, that page looks fine to me in IE6.
Related
So i have this weird behaviour in Internet Exlporer 9-11 and EDGE (Spartan).
In all browsers now i see my example like this (which is desired):
In Internet Explorers i see it like this:
Before i had this stuff pretty much everywhere except Firefox, until i added:
svg {
width: auto !important;
}
This fixed problem everywhere, except IE...
Here's working simplified example that you can tweak:
http://codepen.io/failure13/pen/waxaOx
For myself i have no idea, i absolutely have no idea how IE behave here and calculates width: auto; based on what values...
I always thought it should be parent or element height itself.
I tried everything that came in my head for now.
I see no logic, so this seem to be some nasty bug.
If so, maybe there's workaround?
I really need it, coz i really don't want to use fixed width values (of course it will fix problem, but it's not solution).
Thanks in advance to everybody who may help with it, let's make web better place!
in your class
.svg-flex {
width: auto;
height: 100%;
display: block;
}
change the width to max-width:72px;
this works in ie 11 anyway. I checked
here is a working codepen: http://codepen.io/anon/pen/aOjNrN
Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
my friend was helping me make a new design for my website but has since gotten a full time job. Web Design is not my strong suit and I can't get it to work across all browsers!
So right now, my website looks good in Chrome and Safari. But is broken in FireFox
http://dl.dropbox.com/u/22866203/sb%202/speedbump.html
http://dl.dropbox.com/u/22866203/sb%202/speedbump.css
I was researching/trying different CSS Resets to fix this problem (Meyers Reset) but this only seemed to break the page in Chrome and Safari as well.
Any suggestions would be much appreciated!
If you started without a reset then a reset is not going to help. You particular problem is that you're not clearing your floats. To solve it do this:
#social-media, hr { clear: both; }
Btw, you have a 404 error on an image and many other warnings. Check firebug or devtools.
As I was messing a bit with your site with firebug, I noticed that if you add to some divs the property float: left it arranges the site to look like it does in chrome.
Download FireBug for firefox (great tool) and arrange the floating divs exactly how you want them to be.
Hope it helps.
Give the #wrapper overflow:hidden and remove margin top from previous and after divs.
The problem is that you have floated elements in the body text (left) and the green box (right) but the parent isn't floated, meaning that the floated elements will not affects it's overall height. Also, don't use hr, instead, use borders.
http://dl.dropbox.com/u/33811812/stackoverflow/speedbump/Speedbump.html
The paths are now relative to my folder and you'll need to change them back.
IDs need to be unique(#wrapper) I see four ( 4 ) instances of it from the image above.
Use a class instead as it can be re-used.
.wrapper:after{
visibility: hidden;
height:0;
display: block;
clear:both;
*zoom:1;
content: '.';
}
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
Sometimes IE6 will render the text of a <ul> list the same color as the background color. If you select it, they show back up, or if you scroll the page up and back down.
It is obviously a rendering bug, but I was wondering if anyone knows of a workaround to make it reliable?
try giving it hasLayout with
zoom: 1
Have you tried explicitly setting a line-height? For some reason this seems to be the solution to a great many IE6 rendering bugs!
e.g.
.mylist {
line-height: 1.6em;
}