I need help figuring out why the menu I have created does not work properly in IE. I'm currently in a HTML/CSS class so my experience level is limited. I'm kind of just googling things and checking my book as I go.
I created this menu from a tutorial I found after googling "css drop down menu". I'm pretty proud of it but I can't figure out why it does not display properly in Internet Explorer. It seems to work great in Firefox and Chrome, and more importantly, on ipads. My company currently uses a java menu and I'd like to replace it with this.
Here is the link:
http://net.saddleback.edu/hyosafi0/CIM271A/random/menutest/menu.htm
I would appreciate any advice on why it does not work in IE or where I should start looking in my code for errors. I think it has something to do with declaring a doctype but I'm not sure.
Thanks ahead.
You are missing an <li> tag on the second Home link.
Also, try inserting <!DOCTYPE html> at the top of your html file. This will get IE out of Quirks mode, which can solve some problems in the future.
Related
Days of Internet research and worsening frustration lead me here. I cannot figure this out. Perhaps a wiser person can help.
Using web developer tools, every site page displays fine in every tested browser. However, when I check on an actual iPad and iPhone, no page displays correctly. What's wrong is that none of the CSS in style.css is executing on the iPad / iPhone.
I am using bootstrap, which it sees, but it does not see my style sheet (css/style.css). I have tested too many things to list, including absolute versus relative URLs, and rearranging the link tags in the header.
I tested inline and head-embedded styles and both work. But this is unacceptable to me.
I removed all code from the footer, leaving one div with a class from the external stylesheet, and that did not work. The iPad is blind to it.
I cannot debug the iPad from the iPad (I know Safari has instructions for this), but I have other bootstrap sites I coded that work fine and comparing them I cannot see what I am doing differently now.
I re-booted my iPad many times in case it was a cache issue.
I left out code in this question because I do not know what code to show. I can provide code or URLs or anything else if that helps. The pages are published.
I appreciate any assistance. Thank you.
I've posted an image of what my Chrome debug tools look like on a fairly standard JQuery Mobile page. I've already figured out that it actually isn't using the :visited style because none of the links are actually visited. I didn't have an :active style so the links were still blue. So I know what I need to do to fix it, but that's not my question. My question is why is it telling me that it is using that style when it is not? Is this a Chrome bug or am I reading the tool wrong?
You are looking at the total inheritence of all classes. To see what final properties are being applied clicked on "computed"
Also this looks like JQUERY mobile so I suspect you are going to run into some issues of very large class paths that are not easy to detect. I posted a few of these up here - one in particular about styling buttons.
For all those out there that claim FireFox to be the superior browser, why can't FireFox properly format a link when a vbscript is contained in the HREF?
Example:
<A HREF="<% =DEF_ROOT %>Products/category.asp?ID=1" CLASS="normal_link">
This link will not apply the formatting specified by the class until it has been clicked on at least once, however, the hover formatting will work. It seems as FireFox can't tell it is a link until the user actually clicks it. This is not a problem in IE.
If anyone knows a solution, I'd very much appreciate it.
Because Internet Explorer is the only browser that supports it.
I've been running into the age-old problem of cross-browser compatibility ever since I began making websites, but this time I'm stumped.
I have a pure-CSS and HTML menu that I used from CSSPlay. It works flawlessly in Firefox but not in Internet Explorer. Can somebody help me figure out why? It works fine in IE9 Compatibility Mode, ironically.
Edit: Forgot the link. http://jsfiddle.net/Xh9Kz/
Also, I've been running into a lot of trouble with percentage differences between webkit and Internet Explorer browsers in general. While Webkit browsers also percentages to add up to 100%, IE seems to not do so. Does anyone have a resource for this so I can code to avoid it?
Thanks in advance. Merry Christmas everyone!
Nothing is wrong with your code, it's just something common with the examples from CSSPlay, check the last question in the FAQ:
10.The demonstration/menu does not work in IE8
IE8 is very temperamental when it comes to multi-level demonstrations
and menus (not just mine). I will be
going through my demonstrations over
the coming months to get them to work
in IE8 but in the mean time the
easiest way is to switch IE8 into IE7
emulation mode which will cures all
problems.
To do this add the following meta tag immediately afer the tag:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
here's the same exact code but with the meta tag added :)
I'm stuck with a menu on a site I develop.
http://charlienutting.com
If you hover over the gallery at the top menu bar it should show you a drop down menu.
It works fine in Firefox but sucks in IE6 and IE7.
Really thankful if someone can help.
been about week now to fix this..
edit-
however if you can see there are drop down links which you can click, but those are not visible.
What happened when you debugged into it in IE? What error messages did you see and what have you tried?
I'm happy to help, but really, you haven't described a problem yet.
I guess transparency issue.
perhaps the line in js/dropdown.js that looks like
c.style.filter = 'alpha(opacity=' + ( 100 / c.maxh) + ')';
fire up the script debugger and see what the value of c.maxh is.
First let me say that you have talent as a designer :)
However, there are a few issues with the site's code as it is. I would recommend dropping that drop down code and implement your own using JQuery's effect library (I say this because you are already loading JQuery in your page). That is browser compatible so you wont have these issues with IE.
http://docs.jquery.com/Effects
Next, your header changes size between Gallery, resume and contact. You will probably want to get that fixed. Also, the resume page's links are positioned odd in FF 3.4... It would be best to make them without using absolute positioning. You can accomplish that by a mix of "float : right" and "position : absolute" (but not setting the "left" or "top" properties) :)
Your page is using a doctype, but doesn't validate.
Oh - and it's 2009 now, BTW :D (see copyright)
hint:
(C) 2008 - <?php echo date("Y"); ?>
Try setting a doctype. I know I've had issues in the past with hover events without a correct doctype. Your current page sets Internet Explorer to Quirks Mode.
Currently if, in IE9 I set my mode to IE7 and then switch the "Document Mode" from "Quirks Mode" to "Internet Explorer 7" mode, they show up correctly.
Put this at the top of your HTML files and see if setting your doctype will fix the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">