This is a follow-on question from this thread:
CSS Semi-fixed Element?
I implemented kelso's solution and it works perfectly on Firefox and Chrome. However, IE 8 is not playing ball.
I have rolled the code out so that you can see the problem I am having on a live website:
Gran Via hotels
IE is listening for scroll events but is not moving the div as the user scrolls down the page. It seems as though the following line is not doing anything in IE:
d.css({ position: "fixed", top: "0px" });
The first line is also evaluating to -2 in IE whereas in Firefox it's 377.
var scrollerTopMargin = $("#scroll-container").offset().top;
I am no CSS expert and have been pulling my hair out on this. There must be a simple solution! Please help!
Thanks
Ben
IE does not like your doctype and is running with quirks mode activated. this is why it does not work.
Try this one and see if it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To run IE8 in standard mode you need to choose a strict doctype, not a a transitional one
http://en.wikipedia.org/wiki/Quirks_mode
Related
I have a website here that works terrific and displays fine in IE 10 and IE 11 but anything below that takes the whole display and forces it to the far left of the screen instead of centering the content area. I can't seem to find where to adjust this in CSS. Can you please tell me a good way to fix this in IE 8 without "breaking" newer versions?
The main thing that catches my eye is that the should always be the very first line of your html. If you move this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to the very top... that should help with many of the errors.
You might also consider trying simply
<!DOCTYPE html>
Since I don't have anything that still uses IE8 on it, I can't say for sure if that will fix everything, but it's a good start. For what it's worth, I checked your site on Safari and Firefox, and it appears to work okay. So I'm guessing IE8 has issues with the doctype not being in the correct spot.
One more thing... there are three lines at the top of your page - title, and two meta tags. Those belong inside the <head>, not at the top.
I am getting lots of trouble with IE. The whole page is disarranged even though I have reset applied to all the tags initially. Mozilla and Chrome displays it correctly but IE is giving lots of tension. If anyone could help I would be very thankful.
Jquery is also not working fine. and div are disarranged
First see it in mozilla to get a look of what I have designed. then open it in IE to see the troubles.
See it here http://www.crawller.com/opal/
Thanks to everyone.
I solved the problem by including this line at starting before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This solved the problem and CSS and jquery codes are responding well in IE now.
You can check the modified version at
http://www.crawller.com/opal/new/
The old one is also available at http://www.crawller.com/opal/
For starters, it appears there are some incorrectly spelled attributes in your css, several references to 'bloc' where I assume you mean 'block'.
Make sure that your html and css validate.
You have a lot of Markup validation errors in your document. First try to fix those errors.
Check your site for w3c Markup Validation
I'm having some trouble with a site, and the hover state of the menu on the homepage with ie7 and ie8.
For some reason despite the z-index it hides behind the object flash box.
Can anyone take a look at my URL and see if you can suggest a fix. It's really got me puzzled. Only happens on the homepage because the menu seems to hide behind the flash video object.
url: http://yellowtulipcomms.com
Try adding the following to the flash embedding code:
<param name="wmode" value="transparent"/>
My first suggestion would be to use full doctype declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
IE is very sensitive when it comes to calculating positions and dimensions without a proper doctype. This is something I have learned the hard way.
Addendum:
Also try using zoom:1 value in css rules. I can't test it on your site but I remember it helped with positioning in IE.
According to this page, :nth-child should work in IE9, and I have tried it before and it worked fine, but on this page, it does not appear to be working. View the page in Chrome to see the intended behavior, and in IE, you'll see that it does not work. You can probably see this with a web inspector, but for your reference, the relevant lines of CSS are;
.ad_widget:nth-child(3n+2) { background: #efefef; }
.ad_mrow {background: #efefef;}`
I'm at a loss. Any ideas?
For some reason I cannot fathom, IE9 defaults to compatibility mode for looking at intranet sites, or an HTML page stored as a file on a PC. Compatibility mode means 'render stuff like a dumb old browser'. This means that when you're designing stuff for a website and you try to preview from your favourite IDE in IE9, none of the CSS3 stuff works. You have to click on Tools ->' compatibility view settings' in the IE9 menu and then unclick the pesky checkbox that says 'display interanet sites in compatibility view'. From then on the wretched browser works like any sane browser such as Safari. Why did they do it? Heaven only knows, but it has taken me ages to discover this simple fix due to the fact that I kept blaming my code.
They look the same here. You sure you're not in compatibility mode?
My version of IE9 was locked into IE8 rendering mode, which wasn't applying the following selector:
.parentClass > div:nth-child(n+2) .childClass
Here is where you can find the options to change it:
It appears to be working for me.
<!DOCTYPE html> won't stop quirk mode, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> does.
I am working on a project, in which I am particularly using the CSS with themes. I am facing a compatibility problem between IE7 and IE8. I have placed a ASP.Net menu on page in <div>. Applying CSS style on the div as follows.
.TopMenuPanel
{
background-color:#3783a9;
position:relative;
left:597px;
top:0px;
width:573px;
height:24px;
text-align:left center;
}
When I am seeing the page on IE7, the menu showing in one position whereas in IE8 it is showing in another position.
Specific talking, in IE7, on the position of Left:597px Top:0px it is showing in before the half page, and in IE8 it is showing after the half page.
Anybody else have any experience of such a problem, then please give me the expert solution on this problem.
If you know that your code works in IE7 you can force IE8 browsers to use IE7 standards by including the following tag inside
<meta http-equiv="X-UA-Compatible" content="IE=7">
IE 8 will behave exactly like IE7
position:relative alone doesnt really mean anything.
position:relative should be applied to parent of the div.
and you should put position:absolute instead of relative.
Make sure you have the standard DOCTYPE at the top of the document. IE7 will run in quirks mode without the DOCTYPE, but IE8 will run in standards mode regardless by default.
Try this one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Keep in mind this must be the first line in the file, before the <html> tag.