I am making myself a little portfolio. On chrome, firefox and opera there is no problem with the footer and making it sticky to the bottom using
footer {
position: absolute;
left: 0;
bottom: 0;
}
However, IE is special and it doesn't work. The easiest fix I could think of was implying position: relative only to IE.
So I tried using:
<!--[if IE]>
<style type="text/css">
footer { position: relative; }
</style>
<![endif]-->
But my IE doesn't recognize it (also tried to link to iefooter.css, no result). However, if I remove the <!--[if IE]> all the browsers get the relative position so that must be a problem of IE? My version is the latest I believe - 11.0.9600.16521
The website is here: www.hrusov.eu.
The bugged footer on IE happens on "big" pages such as About me or Projects
From IE 10 and up IE conditional comments were dropped by Microsoft.
I suggest you rework your CSS that it will work with IE 10 and up.
Position absolute works fine in IE 11. I just tried it. Your code is position:relative, which causes it to display above the bottom. I changed it to position:absolute in the F12 tools, just right click on the target element and select Inspect Element. You can adjust the CSS from there.
I use position:absolute all the time to create fluid, responsive designs and it works great.
Related
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
The textboxes in my HTML forms have a height of 30px, and the entered text appears in the vertical center of the textboxes, just as I want in every browser - except IE.
I've checked it in Chrome, FF and Opera. IE8 shows the entered text higher than the center which looks really bad. I tried playing around with the padding, margin and line-height, but cannot get the text to budge from the top edge.
Any suggestions on what CSS property do I need to edit to center the text? I could add it as a IE specific style, if needed.
The website in question is lazydragonbooks.com. Two forms immediately visible are the 'Register' and 'Login' forms.
Chrome
IE 8
Well, messing with IE8 developer tools I found that setting padding-bottom: 0; and padding-top: 10px; aligned the text correctly.
You would have to use a conditional statement to avoid messing up proper browsers. I would recommend using a separate stylesheet:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
Within ie8.css..
input[type="text"] {
padding-top: 10px;
padding-bottom: 0;
}
This is of course specific to an input with the set height that you are using.
you can use margin or padding like this for IE
*padding-top:/*px*/;
*margin:/*px*/;
I've isolated a strange issue with IE8 regarding the CSS :before and :after pseudo elements. The issue occurs when you set one pseudo elements position to absolute and the other's to relative; see the following example:
<style type="text/css">
div:before { content: ""; position: relative; }
div:after { content: ""; position: absolute; }
</style>
<div>stuff</div>
IE8 crashes. Literally. No error, nothing helpful - just the dreaded "Internet Explorer has stopped working" and the Windows 7 attempt to relaunch it. To be clear, the error occurs when switching to the IE8 Browser and Rendering Mode of IE9. When i loaded the example in IETester's IE8 page, no error occurred.
I will test this in an actual IE8 asap, but my question is: why does this happen? Is it an IE8 bug? Maybe a side effect of some sort of position bug? Isn't IE8 supposed to render pseudo elements?
Yeah, that's weird. I was able to get it to work if you make it float:left; on the div:before
I know this question is old.. but I had the same problem and fixed it with "div::after" instead of "div:after"
Kindly visit the following website:
property.consultfinman.com
You must have seen the problem, if you are using IE 7 or IE 6. My page is loading fine in FF, IE8, Safari and Google Chrome. But in IE7 floats are not positioned where they are intended to be positioned. and in IE6 everything is shuffled.
Any solution for this problem (keeping in mind that i am not a css guru).
Thanks
Many of your IE6 bugs are caused by double margin bug which is when you use float and margin in same direction, ex { float: left; margin-left: 10px; }, IE6 magically double the value.
So you need to add *display: inline; where you need to use float and margin in same direction.
As for bottom of your design, I have no idea why you specify background-color: #000000; at .featured-content
This is the reason why you have black background on IE6 and IE7, I can't tell which bug but I'm pretty sure it's something to do with float.
Hope this helps.
You can check the browser using this
<!--[if lt IE 6]>
<style>
//your style
</style>
<![endif]-->
<!--[if lt IE 7]>
<style>
//your style
</style>
<![endif]-->
see http://www.quirksmode.org/css/condcom.html
http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
I'm working on a Wordpress site that is not showing quite right in IE7. All other browsers, including IE8 are OK.
First bug is in the top menu. IE7 is showing it to be a bit taller than it should be, and the hover images and search box are not aligned properly.
2nd is at the end of the post where additional page numbers are shown. The top border of the number boxes is being cut off.
Last is also at the end of the post. The text in the yellow bubble box is being pushed down into the bottom of the box.
http://www.archaeologyrevealed.com/another-test-post
Any ideas?
You have to add some IE7 specific styles
Embed style inside HEAD element
<!--[if IE 7]>
<style>
// your styles...
</style>
<![endif]-->
or link to external css file
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css"/><![endif]-->
For first bug try this:
#s {
position: relative;
top: -5px;
}
Other bugs can be fixed by adding some margin or padding properties.
EDIT
Create ie7.css stylesheet and put this code inside. Then link to it with code posted above. It fixes all bugs you have mention in your post.
#s {
position: relative;
top: -5px;
}
div.pagenumbers p {
margin-top: 4px;
}
div.bubble_bottom {
position: relative;
top: 15px;
}
I suggest trying a CSS reset stylesheet first, which will put different browsers on the same playing field.
That's helped me many times with padding/margin/alignment inconsistencies.