Click to See Complete Forum and Search --> : Image Pop-Up on Hover Not Working in IE
TrickyFingers
02-27-2008, 07:22 AM
Hi Guys,
I am building a relatively simple site project for my school, but I've come across a problem that of course is occurring in Internet Explorer.
My site appears to work properly in Firefox, Safari, and Opera, but in Internet Explorer, I've just discovered, the below page looks absolutely horrible and there are strange breaks in between page elements and hover image pop-ups are not at all working correctly:
http://ruesleuth.com/medina_portfolio/portfolio.html
Could anyone out there please offer me some clarity as to why this is happening and how I can fix it? I don't even have IE on my computer, I had to use a screenshot that a friend sent to me to discover how horrible this looked... :0(
Thank you in advance for your help...
Tricky
turboraketti
02-27-2008, 08:21 AM
First of all, I would put the page in standards mode by specifying an appropriate doctype. I suggest:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(A great page on doctypes and how they affect browsers' mode: http://hsivonen.iki.fi/doctype/)
Second, it doesn't look too bad in MSIE... The main problem is element-level related and affects MSIE6. It should be solvable with some z-index in the CSS.
Third, If you want MSIE to behave like a standards compliant browser, have a look at Dean Edward's compliance patch: ie7-js.googlecode.com (http://ie7-js.googlecode.com) -- a javascript that corrects most of the annoyances, only by inserting three lines in your html document header.
Cheers
EDIT: Forgot to mention that image hover seems to work in MSIE6, at least on my computer...
TrickyFingers
02-27-2008, 09:24 AM
It appears that the problem is that I didn't use the clear tags, I think?
I just checked the IE7 Renderer and it shows that there is a break just beneath the banner, a break next to the right border, and a break just beneath the left-hand photo...
Does anyone know how I can fix this with the clear tag? I've tried randomly placing it just about everywhere and saving/refreshing the page to no avail. :(
WebJoel
02-27-2008, 09:40 AM
Not part of the requested assist ,but this:
<img src="images/port_thumb_1.jpg" width="90px" height="90px" border="0" alt="Poster 1">
Won't work. "px" is CSS and cannot be used in "html".
Width="90" is HTML.
style="width:90px;" is CSS.
turboraketti
02-27-2008, 09:59 AM
You say you don't have MSIE on your machine. It might be worth to try this:
ipinfo.info/netrenderer/index.php (http://ipinfo.info/netrenderer/index.php)
It renders any public page as the MSIE version of your choice. It doesn't seem to parse conditional comments, though, so beware if you use such things.
If you're on linux, intel mac or bsd you can always go IEs4linux (http://www.tatanka.com.br/ies4linux/page/Main_Page).
EDIT: One drawback of IEs4linux is that the Microsoft Alpha Image Loader and the filter CSS property currently does not work in it. Just so you know.
TrickyFingers
02-27-2008, 10:25 AM
Not part of the requested assist ,but this:
<img src="images/port_thumb_1.jpg" width="90px" height="90px" border="0" alt="Poster 1">
Won't work. "px" is CSS and cannot be used in "html".
Width="90" is HTML.
style="width:90px;" is CSS.
WebJoel, thanks a bunch for that...I've added that to my mental registry, too, lol. I didn't realize px is not used in HTML.
TrickyFingers
02-27-2008, 10:27 AM
You say you don't have MSIE on your machine. It might be worth to try this:
ipinfo.info/netrenderer/index.php (http://ipinfo.info/netrenderer/index.php)
It renders any public page as the MSIE version of your choice. It doesn't seem to parse conditional comments, though, so beware if you use such things.
If you're on linux, intel mac or bsd you can always go IEs4linux (http://www.tatanka.com.br/ies4linux/page/Main_Page).
EDIT: One drawback of IEs4linux is that the Microsoft Alpha Image Loader and the filter CSS property currently does not work in it. Just so you know.
Turbo, I've been using the first netrender that you mentioned, but I didn't know about the other one...I'll save that in my bookmarks.
It looks like the problem really appears in IE6. Since it's for school, I can't use a Javascript hack. :( Any suggestions?
turboraketti
02-27-2008, 11:07 AM
I insist that you should use a decent doctype. The one you use currently puts browsers in quirks mode, which will eventuelly lead to problems. A standards doctype will e.g. fix the centering of the container div in MSIE6 and possibly other problems you see with the page.
Since I'm a standards freak :) it's hard for me to make any further suggestions if the page is in quirks mode...
TrickyFingers
02-27-2008, 11:11 AM
I insist that you should use a decent doctype. The one you use currently puts browsers in quirks mode, which will eventuelly lead to problems. A standards doctype will e.g. fix the centering of the container div in MSIE6 and possibly other problems you see with the page.
Since I'm a standards freak :) it's hard for me to make any further suggestions if the page is in quirks mode...
Turbo, I thought it's best to use Transitional instead of Strict, no? I thought we were supposed to stay away from strict, but I could be wrong...
turboraketti
02-27-2008, 11:19 AM
Transitional is fine (but strict is finer :) imho), but then use this transitional doctype that triggers standards mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Not that it makes it the right thing, but I nowadays always use strict doctypes and find webmaking easier (and possibly future proofer) ever since.
(EDIT: the doctype above actually triggers quirks mode in Konqueror web browser, but if you can live with that...)
WebJoel
02-27-2008, 02:45 PM
....didn't realize px is not used in HTML. Fortunately, browsers by default assume you implied "px", but if you were doing something else like "pc", "pt", "cm", "em", "ex" etc... in html it would be rendered as "pixels" and become a page-busting event, -even though it might validate. It would look wrong if "px" is what you wanted/needed, but there is a big difference between say, height="90" and height:90em
I spend some 30-minutes one night trying to clean a client's code of one just such an occurance (although not quite as large as 90em!)... I could NOT figure out why there was this huge massive 'gap' in their layout and it finally hit me like a brick... :mad: