Hi,
OK, I give up. On this page: Paricon Sleds - Home, everything looks great in Firefox but in IE8 the slide show on the front page and the image below it have no separation. Can you point me in the right direction?
Thanks,
luciano
None of the versions of IE will show your page correctly so long as you have a bunch of code before the Doctype. Hit CTRL+u on your page if you don’t know what I’m talking about. That’s a mistake there. I don’t have IE9 but I wouldn’t be surprised if it also looks the same.
Second, the h1 is floated, and the div underneath it is sliding up underneath it in Firefox, but in IE it’s starting under the h1 entirely. The bottom margin is being applied but because the whole box is sitting higher than the slideshow images you see visually, that margin is invisible.
You can see all this going on I believe if you give everyone involved, from the td down to the divs holding the images, different ugly background colours.
You’re also using position: absolute on children and I don’t see any positioned ancestors. Is that position: absolute required for the Javascript? It’s not necessary from a pure CSS standpoint, so if Javascript doesn’t need it either you could remove it entirely and let those images stay in the flow.
But basically I’m expecting 99% of all problems you’re running into with IE come from the page being in Quirks mode (from the styles posted before the doctype)
Mr. Poes,
First of all, my deepest thanks for taking the time to give me some feedback on my problem. I have found it very useful in understanding the problem although a solution still escapes me.
I want to explain that I am using Joomla! as a development platform which is a content management system based in PHP. The styles which you see above the doctype are generated by a conditional PHP statement in the template which provides style “overrides” if you will for the front page. In this case it removes the blue border and white background present on the inner pages of the site.
Furthermore, the slideshow is a plugin module that uses its own stylesheet and javascript in order to work. I see that the slideshow’s stylesheet and javascript are combining to write some very interesting style code which appears in the rendered HTML above the reference to any other style sheets. This code is making some interesting references to absolute positioning as you point out.
Fortunately this code can be overwritten in the main stylesheet named default.css. I will look into this further.
It would appear that somewhere there is a “hack” or conditional IE statement that I can write in the main stylesheet that will help me overcome this problem.
Thanks again for taking the time to speak with me.
All the best,
Luciano
The styles which you see above the doctype are generated by a conditional PHP statement in the template which provides style “overrides” if you will for the front page. In this case it removes the blue border and white background present on the inner pages of the site.
That’s not unusual, but it’s placing those styles in the very wrong place. It must place them as one of the last items before the closing </head> tag… never before the Doctype declaration or outside the <head> at all!
I would need to see what happens when the page isn’t in quirks mode, but it wouldn’t surprise me if the problem was fixed simply by getting into Standards mode, simply by moving those generated styles.
You should not need any unusual hacks for IE, or at least, you certainly don’t want to start adding hacks simply because IE is running in quirks mode now. Get it into standards mode first and then see if the problem’s fixed. There are pretty safe ways around many real IE bugs so if the gap is still missing we can probably tackle that easily (I expect if there is still a gap, it will be limited to IE6 and 7 anyway… and be gone in 8 and 9).
Changing the mode of rendering from Quirks mode to Standards mode (Using the IE’s Developer tools) solves the problem. Tested with IE 9. So what you need to do is fix the errors on your page. Meaning don’t apply unless hacks to fix your own errors.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fwww.pariconsleds.com%2f
Gentlemen,
Thanks again, and yes you got it exactly right. That conditional PHP style statement should have been inside the <head> tags and moving it there solved all of our problems. I do so appreciate your feedback and your help. I’ll be more careful with my templates in the future and more attentive to HTML etiquette.
All the best,
Luciano