With the help of a CSS article, I've created a page that uses CSS and some DHTML to create rollovers w/submenus, and it's working great.
First off, here's the page's URL: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu.asp">http://www.douglas-county.com/Test_folder/cssmenu.asp</a><!-- m -->
Here's the code for IEmen.htc:<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the colour
element.style.backgroundColor = '#330066';
element.style.color = '#FFFFFF';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
}
}
function rollOff() {
//change the colour
element.style.backgroundColor = '#FFFFCC';
element.style.color = '#000000';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
}
}
</script>
Here's the code for Menu1.htc:<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the color
element.style.backgroundColor = '#330066';
element.style.color = '#FFFFFF';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
}
}
function rollOff() {
//change the color
element.style.backgroundColor = '#FFFFCC';
element.style.color = '#000000';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
}
}
</script>
Here's the code for Menu2.htc: <attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the color
element.style.backgroundColor = '#330066';
element.style.color = '#FFFFFF';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
}
}
function rollOff() {
//change the color
element.style.backgroundColor = '#FFFFCC';
element.style.color = '#000000';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
}
}
</script>
As you can see from the referenced URL, myy problem is that when you are not hovering over a linked rollover button, the link goes back to dark blue, which is the same color as the background. Does anyone see what I'm doing wrong? Any & all help is appreciated.First, the menu is a complete mess in Gecko.
Second, the htc code for IE is unnecesserily complicated.
See the demo I posted a number of times: <!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/CSSNav.html">www.vladdy.net/Demos/CSSNav.html</a><!-- w --> -
style the root li items as inline to have the appearance that you have on your page.Wow, that was quick. Thanks for the reference page. It looks like it does exactly what I need it to do, bu do you have a horizontal version?Hello Vladdy,
Thanks for the simpler CSS navbar. I used the code you forwarded to create a horizontal menu, which you can see at: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_new.asp">http://www.douglas-county.com/Test_fold ... nu_new.asp</a><!-- m -->
It works great in IE, but works strangely in Netscape. Do you see anything that's obviously wrong with this page? Thanks for any advice Vladdy.If you follow this thread:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=29429">http://forums.webdeveloper.com/showthre ... adid=29429</a><!-- m -->
you find an explanation why the original demo behaved differently in IE and Gecko and the easier work around I found that is currently reflected in the updated demo.I've taken Vladdy's suggestion, and created an alternative CSS stylesheet that was based on Netscape (NS). But when I viewed it in IE, it looked like crap.
So my questions are will I have to create 2 stylesheets, one for IE and one for NS & other browsers? If so, how would I go about the code to select one stylesheet over the other depending on the browser?
Or is it possible to create a stylesheet for a horizontal toolbar that's fully-functional in all browsers? If so, what am I missing?
I was able to create a stylesheet that looks great in IE, but crappy in other browsers. You can see it at: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_new.asp">http://www.douglas-county.com/Test_fold ... nu_new.asp</a><!-- m -->
I also created a stylesheet that looks pretty good in NS so far, but crappy in IE: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_ns.asp">http://www.douglas-county.com/Test_fold ... enu_ns.asp</a><!-- m -->
Any & all help & suggestions are appreciated. Thanks.Actually, if you follow the tread I referenced towards the end, I have found a solution that does not require separate margin definitions for IE (6.0 in compliant mode) and Gecko.
If talking about the big picture, It is next to impossible to have same style definitions work in all browsers for designs of medium and high complexity. You can either use hacks that allow to combine different declarations into a single stylesheet
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=30608">http://forums.webdeveloper.com/showthre ... adid=30608</a><!-- m -->
Personally, I find it easier to do browser detection server side and send it a stylesheet which is adjusted to its deficiences (compliant stylesheet is sent by default)Vladdy,
I'm starting to think that myself when it comes to creating different stylesheets depending on the browser, but how do you go about detecting the user's browser, and applying the correct stylesheet depending on that result? Is there an easy way to do this?
I'm just discovering that it's taking a lot more time in trying to get one stylesheet to behave the same in IE & NS. I'd rather have 2 good-looking options for users that one option that's ok, but had to be comprimised due to browser issues.when I link a stylesheet to my page I link to a server side script:
<link rel="stylesheet" media="screen,projection" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"styles/screencss.php" />
This script checks the user agent string and if it identifies a "dumb" browser it loads the corresponding stylesheet and sends it back. If not the compliant stylesheet is returned.
You need to make sure that you change the returned content type to text/css and add headers that prevent caching by proxies.
That is how my site works.
Also, you do not really have to create many stylesheets, as some opponents of this method say. You start with compliant stylesheet when you create your layout in Gecko; then save it as ... and start dumbing it down to the level IE6.0 can understand; then you save as... again and adjust for box model problems in IE5.5 ...Thanks Vladdy. I'll give it a try. I'm still in the process of trying to develop one stylesheet that works for all browsers. You can see my progress live at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_test.asp">http://www.douglas-county.com/Test_fold ... u_test.asp</a><!-- m -->
I don't know if it will work in the long run, but I figured that it wouldn't hurt to try. Thanks for all of your help & advice Vladdy. I've really appreciated it.Vladdy,
With your revised stylesheet, and your help & advice, I've been able to create one stylesheet that works pretty well in both browsers. You can see it at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_test.asp">http://www.douglas-county.com/Test_fold ... u_test.asp</a><!-- m -->.
I'm now going to add actual values into each button with URL's to see how the positioning holds up. I'll cross my fingers.
Thanks again for all of you help.Hello Vladdy,
I've come up with a working solution for a CSS Horizontal Navigation Bar. It works great in IE, NS & Mozilla. My only problem lies in how the individual buttons/links in NS & Mozilla don't display all the way across like IE does.
I thought that I came up with a good workaround by putting several spaces ( ) after each link to make the rollover go all the way across. This worked, but I don't think it looks as clean as it could. I would love your advice on my take of your original navigation. Here's the page I'm talking about: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_test.asp">http://www.douglas-county.com/Test_fold ... u_test.asp</a><!-- m -->
Do you see another way for me to accomplish this? Thanks for any & all advice.Adding spaces is certainly not a solution.
In compliant browsers (IE is not) inline elements take just enough space to fit the content, that is why in Gecko browsers the hover style did not extend the full width of the block.
What you want to do is make anchors a block element:
a
{ display: block;
}
and then make sure there no horizontal margins and paddings that prevent it from reaching the edges of the parent element.
This will also simplify positioning of child lists, because it fixes the IE bug with absolute positioning as I described in this thread:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=29429&perpage=15&pagenumber=2">http://forums.webdeveloper.com/showthre ... genumber=2</a><!-- m -->
First off, here's the page's URL: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu.asp">http://www.douglas-county.com/Test_folder/cssmenu.asp</a><!-- m -->
Here's the code for IEmen.htc:<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the colour
element.style.backgroundColor = '#330066';
element.style.color = '#FFFFFF';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
}
}
function rollOff() {
//change the colour
element.style.backgroundColor = '#FFFFCC';
element.style.color = '#000000';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
}
}
</script>
Here's the code for Menu1.htc:<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the color
element.style.backgroundColor = '#330066';
element.style.color = '#FFFFFF';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
}
}
function rollOff() {
//change the color
element.style.backgroundColor = '#FFFFCC';
element.style.color = '#000000';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
}
}
</script>
Here's the code for Menu2.htc: <attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
//change the color
element.style.backgroundColor = '#330066';
element.style.color = '#FFFFFF';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'block'; }
}
}
function rollOff() {
//change the color
element.style.backgroundColor = '#FFFFCC';
element.style.color = '#000000';
//change display of child
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == 'UL' ) { element.childNodes[x].style.display = 'none'; }
}
}
</script>
As you can see from the referenced URL, myy problem is that when you are not hovering over a linked rollover button, the link goes back to dark blue, which is the same color as the background. Does anyone see what I'm doing wrong? Any & all help is appreciated.First, the menu is a complete mess in Gecko.
Second, the htc code for IE is unnecesserily complicated.
See the demo I posted a number of times: <!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/CSSNav.html">www.vladdy.net/Demos/CSSNav.html</a><!-- w --> -
style the root li items as inline to have the appearance that you have on your page.Wow, that was quick. Thanks for the reference page. It looks like it does exactly what I need it to do, bu do you have a horizontal version?Hello Vladdy,
Thanks for the simpler CSS navbar. I used the code you forwarded to create a horizontal menu, which you can see at: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_new.asp">http://www.douglas-county.com/Test_fold ... nu_new.asp</a><!-- m -->
It works great in IE, but works strangely in Netscape. Do you see anything that's obviously wrong with this page? Thanks for any advice Vladdy.If you follow this thread:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=29429">http://forums.webdeveloper.com/showthre ... adid=29429</a><!-- m -->
you find an explanation why the original demo behaved differently in IE and Gecko and the easier work around I found that is currently reflected in the updated demo.I've taken Vladdy's suggestion, and created an alternative CSS stylesheet that was based on Netscape (NS). But when I viewed it in IE, it looked like crap.
So my questions are will I have to create 2 stylesheets, one for IE and one for NS & other browsers? If so, how would I go about the code to select one stylesheet over the other depending on the browser?
Or is it possible to create a stylesheet for a horizontal toolbar that's fully-functional in all browsers? If so, what am I missing?
I was able to create a stylesheet that looks great in IE, but crappy in other browsers. You can see it at: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_new.asp">http://www.douglas-county.com/Test_fold ... nu_new.asp</a><!-- m -->
I also created a stylesheet that looks pretty good in NS so far, but crappy in IE: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_ns.asp">http://www.douglas-county.com/Test_fold ... enu_ns.asp</a><!-- m -->
Any & all help & suggestions are appreciated. Thanks.Actually, if you follow the tread I referenced towards the end, I have found a solution that does not require separate margin definitions for IE (6.0 in compliant mode) and Gecko.
If talking about the big picture, It is next to impossible to have same style definitions work in all browsers for designs of medium and high complexity. You can either use hacks that allow to combine different declarations into a single stylesheet
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=30608">http://forums.webdeveloper.com/showthre ... adid=30608</a><!-- m -->
Personally, I find it easier to do browser detection server side and send it a stylesheet which is adjusted to its deficiences (compliant stylesheet is sent by default)Vladdy,
I'm starting to think that myself when it comes to creating different stylesheets depending on the browser, but how do you go about detecting the user's browser, and applying the correct stylesheet depending on that result? Is there an easy way to do this?
I'm just discovering that it's taking a lot more time in trying to get one stylesheet to behave the same in IE & NS. I'd rather have 2 good-looking options for users that one option that's ok, but had to be comprimised due to browser issues.when I link a stylesheet to my page I link to a server side script:
<link rel="stylesheet" media="screen,projection" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"styles/screencss.php" />
This script checks the user agent string and if it identifies a "dumb" browser it loads the corresponding stylesheet and sends it back. If not the compliant stylesheet is returned.
You need to make sure that you change the returned content type to text/css and add headers that prevent caching by proxies.
That is how my site works.
Also, you do not really have to create many stylesheets, as some opponents of this method say. You start with compliant stylesheet when you create your layout in Gecko; then save it as ... and start dumbing it down to the level IE6.0 can understand; then you save as... again and adjust for box model problems in IE5.5 ...Thanks Vladdy. I'll give it a try. I'm still in the process of trying to develop one stylesheet that works for all browsers. You can see my progress live at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_test.asp">http://www.douglas-county.com/Test_fold ... u_test.asp</a><!-- m -->
I don't know if it will work in the long run, but I figured that it wouldn't hurt to try. Thanks for all of your help & advice Vladdy. I've really appreciated it.Vladdy,
With your revised stylesheet, and your help & advice, I've been able to create one stylesheet that works pretty well in both browsers. You can see it at <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_test.asp">http://www.douglas-county.com/Test_fold ... u_test.asp</a><!-- m -->.
I'm now going to add actual values into each button with URL's to see how the positioning holds up. I'll cross my fingers.
Thanks again for all of you help.Hello Vladdy,
I've come up with a working solution for a CSS Horizontal Navigation Bar. It works great in IE, NS & Mozilla. My only problem lies in how the individual buttons/links in NS & Mozilla don't display all the way across like IE does.
I thought that I came up with a good workaround by putting several spaces ( ) after each link to make the rollover go all the way across. This worked, but I don't think it looks as clean as it could. I would love your advice on my take of your original navigation. Here's the page I'm talking about: <!-- m --><a class="postlink" href="http://www.douglas-county.com/Test_folder/cssmenu_test.asp">http://www.douglas-county.com/Test_fold ... u_test.asp</a><!-- m -->
Do you see another way for me to accomplish this? Thanks for any & all advice.Adding spaces is certainly not a solution.
In compliant browsers (IE is not) inline elements take just enough space to fit the content, that is why in Gecko browsers the hover style did not extend the full width of the block.
What you want to do is make anchors a block element:
a
{ display: block;
}
and then make sure there no horizontal margins and paddings that prevent it from reaching the edges of the parent element.
This will also simplify positioning of child lists, because it fixes the IE bug with absolute positioning as I described in this thread:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=29429&perpage=15&pagenumber=2">http://forums.webdeveloper.com/showthre ... genumber=2</a><!-- m -->