Have a look at the menu tutorial on my sig page. That menu is guaranteed cross-browser.
__________________ Frank
How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
Have a look at the menu tutorial on my sig page. That menu is guaranteed cross-browser.
Hi Frankie, thanks for your suggestion.
I'm checking it out right now and I've encountered two issues that you might be able to help me with.
The first is: in IE, the submenu doesn't seem to stay when I hover. It displays for a split second, then disappears. Any idea why?
The second: It seems like the top of the submenu is partially obscured by the main menu. I've tried setting the z-index to the submenus to a high value, but that doesn't change anything in IE.
Well for Cross-Browser computability - I almost always use a css reset.
Something that may be of interest to you is Normalize - http://necolas.github.com/normalize.css/
which helps things looking / acting the same cross browser.
For IE you almost always have to do conditional stylesheets for versions lower than IE9 - like the PNG fix for IE6, various padding / margin issues in IE7 and IE8 -
The thing that will make the most difference cross-browser, not mentioned above, is to ensure your html validates - see my signature for a link. Invalid code will cause a lot of cross browser differences.
Browsers have different standard settings on paddings and margins - so normalise these as suggested with:
Code:
*{margin:0;padding:0}
I prefer to test in Firefox - use Firebug (see signature again) to help you. Once it's OK and validated in Firefox, check other browsers. Mostly, if you've done it right, it should be OK in Opera, Chrome and Safari. Occasionally Safari and Chrome will handle clearing floated elements slightly differently.
IE9 should be OK as well.
In most cases, IE8 is probably going to be OK, as well. Don't think I've written a conditional statement for IE8 yet....and should really only be a last resort.
For IE7 it's a different ball game, and IE6 is even worse, if you need to support it. Conditional css is likely to be necessary here. If you need to worry about IE7 and under have a look at this now rather dated post.
Well for Cross-Browser computability - I almost always use a css reset.
Something that may be of interest to you is Normalize - http://necolas.github.com/normalize.css/
which helps things looking / acting the same cross browser.
For IE you almost always have to do conditional stylesheets for versions lower than IE9 - like the PNG fix for IE6, various padding / margin issues in IE7 and IE8 -
Possibly look into a css framework that is already "cross-browser" friendly. Bootcamp, Foundation, Skeleton, etc etc...
Other than that, all I can say is read up on some proper techniques in some blogs like "CSS tricks" and keep on learning.
Hope this helps
Cheers
Thanks AaronHockey! I will check those out.
Quote:
Originally Posted by SB65
The thing that will make the most difference cross-browser, not mentioned above, is to ensure your html validates - see my signature for a link. Invalid code will cause a lot of cross browser differences.
Browsers have different standard settings on paddings and margins - so normalise these as suggested with:
Code:
*{margin:0;padding:0}
I prefer to test in Firefox - use Firebug (see signature again) to help you. Once it's OK and validated in Firefox, check other browsers. Mostly, if you've done it right, it should be OK in Opera, Chrome and Safari. Occasionally Safari and Chrome will handle clearing floated elements slightly differently.
IE9 should be OK as well.
In most cases, IE8 is probably going to be OK, as well. Don't think I've written a conditional statement for IE8 yet....and should really only be a last resort.
For IE7 it's a different ball game, and IE6 is even worse, if you need to support it. Conditional css is likely to be necessary here. If you need to worry about IE7 and under have a look at this now rather dated post.
SB65, thanks for the suggestions. I have already validated my html and css. So those should okay. I will try resetting margins and padding.
How does this CSS resetting work? Do I include the reset file at the very beginning, then include my own css after?
The site largely works in IE, it just doesn't look great. Little things are out of place here and there, hopefully it's just a margin/padding thing.
Thanks for the suggestion of Firebug. It's definitely a useful add-on, I will for sure be using it now! In fact, it just helped me solve a problem where my drop down menus were being made visible when it made the transition from absolute to fixed.
Hi Frankie, thanks for your suggestion.
I'm checking it out right now and I've encountered two issues that you might be able to help me with.
The first is: in IE, the submenu doesn't seem to stay when I hover. It displays for a split second, then disappears. Any idea why?
The second: It seems like the top of the submenu is partially obscured by the main menu. I've tried setting the z-index to the submenus to a high value, but that doesn't change anything in IE.
The menu that my tutorial builds is absolutely cross-browser and error free. It has been tested over and over again, with every time the same result. Just make a new menu, start from scratch. It should take you no longer than half an hour. And your menu is a strange combination of javascript and html anyway. I wouldn't even know how to fix it.
__________________ Frank
How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
The menu that my tutorial builds is absolutely cross-browser and error free. It has been tested over and over again, with every time the same result. Just make a new menu, start from scratch. It should take you no longer than half an hour. And your menu is a strange combination of javascript and html anyway. I wouldn't even know how to fix it.
I did start from scratch. I took your original code and made some basic edits (changing width of submenus, adding some gradients, and changing the subitem names). My result was that the submenu would show correctly, but when I attempt to select a subitem, the submenu disappears.
I think it might have something to do with the way IE processes the onmouseover and onmouseout. I was able to fix my original menus, but I am having the same problem as your menu on mine. Perhaps it has something to do with the gradients? I don't know what the issue could be, but I appreciate your help regardless.
This is the source code including my edits:
Code:
body {
font: normal .8em Verdana;
}
#navDiv ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navDiv ul li {
float: left;
position: relative;
background: -moz-linear-gradient(top, #64dbf8, #00b3ee, #0095da, #008bc6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#64dbf8', endColorstr='#008bc6');
line-height: 1.9em;
}
#navDiv ul li ul li {
clear: left;
}
#navDiv ul ul {
display: none;
}
#navDiv ul li:hover ul,
#navDiv ul li.dynamicClass ul {
display: block;
position: absolute;
}
#navDiv a {
display: block;
padding: 0 10px 0 10px;
color: white;
text-decoration: none;
}
#navDiv #item1SubList a {
width: 7em; /* varies with main item width */
}
#navDiv #item2SubList a {
width: 7em; /* varies with main item width */
}
#navDiv #item3SubList a {
width: 7em; /* varies with main item width */
}
#navDiv a:hover {
color: white;
}
p {
width: 400px;
}
a img {
border: 0;
width: 88px;
height: 31px
}
</style>
</head>
<body>
<div id="navDiv">
<ul>
<li onmouseover="this.className+=' dynamicClass'" onmouseout="this.className=this.className.replace(' dynamicClass','')">
<a href="#">Clinical Trials</a>
<ul id="item1SubList">
<li><a href="#">Alzheimer's Disease</a></li>
<li><a href="#">Migraine Headaches</a></li>
<li><a href="#">Post-Herpetic Neuralgia (Shingles)</a></li>
</ul>
</li>
<li onmouseover="this.className+=' dynamicClass'" onmouseout="this.className=this.className.replace(' dynamicClass','')">
<a href="#">About Us</a>
<ul id="item2SubList">
<li><a href="#">Investigators</a></li>
<li><a href="#">Research Staff</a></li>
<li><a href="#">Facilities</a></li>
</ul>
</li>
<li onmouseover="this.className+=' dynamicClass'" onmouseout="this.className=this.className.replace(' dynamicClass','')"><a href="#">Contact Us</a>
<ul id="item3SubList">
<li><a href="#">Email Us</a></li>
<li><a href="#">Directions, Directions, Directions</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
</ul>
</div>
I did start from scratch. I took your original code and made some basic edits (changing width of submenus, adding some gradients, and changing the subitem names). My result was that the submenu would show correctly, but when I attempt to select a subitem, the submenu disappears.
The code you are now giving is indeed my code, but it is not what I'm seeing online, behind the site you linked. There I see the following code:
with the subMenu not being a child <ul>, but a separate div, not being a child of anything. That is the weirdest menu I've even seen.
However, assuming that you are now talking about a new menu that is not online yet, I tested your latest code, and indeed the filter seems to be the culprit. In IE7 there is no more dropdown, but if I outcomment the filter, everything work fine.
__________________ Frank
How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
That sounds like it might be a hasLayout issue with IE7.
That's what I thought, too. But neither zoom:1 nor a defined width solves the IE7 problem. Aren't those always supposed to work? Only taking the filter out works.
Last edited by Frankie; 02-07-2013 at 10:17 AM..
Reason: Removed signature
Well, those will set hasLayout on the element, not necessarily going to solve this issue, but it's always worth a try with IE7. The solution may be to provide a background image on the li, perhaps served just for IE7.
Well, those will set hasLayout on the element, not necessarily going to solve this issue, but it's always worth a try with IE7. The solution may be to provide a background image on the li, perhaps served just for IE7.
That will indeed be the solution. And it may be a good idea to stick with background gradient images anyway for a while longer, for all browsers, as I found out the last couple of days.
I had put a simple HTML5 web app online for my clients, with a CSS gradient in the <h5>, but even 2-year old Samsung smartphones (3G) will not render it with their default browser... And I've got 9 CSS background-related lines in the code...
Last edited by Frankie; 02-07-2013 at 04:55 PM..
Reason: 2-year old, not 2 year-old
That's Good point for website. Professional website should work in several web browsers like Chrome, Firefox, Safari & Internet Explorer. you use cross browser compatibility tool as CloudTesting tool that is widely used by web developer.
This tool will test your site on
Opera 9.6
Internet Explorer 6, 7, 8
Google Chrome Latest Version
Apple Safari 3.2, 4.0, 5.0
Mozilla Firefox 3, 3.5, 3.6
gives you all issue so that you can easily solve them.
with the subMenu not being a child <ul>, but a separate div, not being a child of anything. That is the weirdest menu I've even seen.
However, assuming that you are now talking about a new menu that is not online yet, I tested your latest code, and indeed the filter seems to be the culprit. In IE7 there is no more dropdown, but if I outcomment the filter, everything work fine.
I'm sure it's a pretty weird menu. I'm not a trained web designer. I learned some basic HTML/C++ when I was a kid, and I'm learning CSS and JS as I go on this project, so please excuse the noob.
Yes, your code was not yet implemented on the live site, sorry I should have made that clear. I was just running it off my own workstation. I'll upload it so you can see what I meant.
Before you post, read our: 
