CSS - Navigation Issue. Rollover Ul

Hi,

Could someone please help me to fix this error in my code.

I created this website for my school,
http://www.rit.edu/~cie/
but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this.

Thanks in advance

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

Hello,

If you visit: http://tombraiders.net/katie/jsquared/ecad_working.shtml

User: letme
Pass: in

and view it in FireFox, IE7 you'll see the intended results (a few of the ASIC slots have rollovers, this is important to see)

In IE6 when I rollover the boxes that are supposed to have popups, it doesn't work.

Now I know it's conflicting with a style in my stylesheet on this line:

.content li a { background:url(images/list_bull.gif) center left no-repeat; margin:0; padding:0 0 0 19px; color:#434343; line-height:2em;}

Also, the list_bull.gif controls the bullets, so I need this to still function. However, on the specific page with the rollover diagram you'll see they're sitting beside the boxes that have a rollover, and I will need a fix for this as well.

Any help would be GREATLY appreciated! Thanks

Hi guys I am trying to place a top menu on the side of my site, I can't seem to get the rollover to work. This is what I have on my css. Thanks in advance

#topmenu ul {
list-style: none;
margin: 20px;
padding: 0;
}

#topicons {
width: 76px;
position: absolute;
left: 800px;
background: url(../images/top-icons.gif);
margin: 0px;
padding: 50px;
height: 146px;
}


#topicons li {
list-style-type:none;
margin: 0;

}

#topicons li a {
background-image:url('../images/top-icons.gif');
background-repeat:no-repeat;
margin: 0;
padding: 0;
display: block;
height: 44px;
text-indent: -9999px;
overflow: hidden;
}

#topicons li a.item1 {background-position:0px 0px;}
#topicons li a:hover.item1 {background-position:0px -49px;}

#topicons li a.item2 {background-position:0px -90px;}
#topicons li a:hover.item2 {background-position:0px -144px;}

#topicons li a.item3 {background-position:0px -188px;}
#topicons li a:hover.item3 {background-position:0px -280px;}

hi, yeah I got a rollover menu working on my comp (localhost), but when I view it from outside my LAN (MSIE v6) my rollover events are not working; the menu item text is not changing colour on rollover, and my sub menu is not coming up either. does this ring any bells?

help much appreciated!

Hi Everyone,
I'm new to Dev Shed so appologises if I miss anything vital!

I'm also quite new to CSS, but do have some experience.

I am trying to develop a rounded corners, drop shadow solution for a header:


Here it is so far, now the problem occurs when I have added the navigation bar, if you roll the mouse over any of the nav links a small chunk of border appears on the bottom right of the header??

The hoover div tag is:
a.nav:hover {background-color: #99CDFF;}

The nav images are gifs that do not change on rollover just the back ground color.

If I remove the hover div tag the strange chunk of border does not occur.

Can anyone advise why this may be happening? Or what I could do to improve this?

I am having this issue in IE6.0 firefox 2.0 seems fine.

I appreciate any help!

Thanks in advance,

Jon

I have converted this site from HTML to CSS/XML but there is an issue with the navigation. PC's using Firefox and Mac's using IE have the right of 2nd level navigation cut off, while Mac's using Safari does not display 2nd level at all.

The site validates for both CSS and XML.

The url for site is...http://www.forteinformation.com/Ideas/index.shtml

and the style sheet is...http://www.forteinformation.com/Ideas/fortestyle.css

Thanks in advance for any suggestions.

When I change pages on my website, my navigation buttons don't change color like they should. I keep going through the code and just can't figure it out. I had somebody else write the code, and they are no longer around. I would sure appreciate any help anybody could offer.

Is it ok if I post the website here? Or if someone is knowledgeable, I can PM them the website for a quick look?

Any help would be greatly appreciated!

I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile

Site Link:staging.phantasea.net/cpi/
CSS I added:
Code:

#navigation-menu ul.sf-menu > li > a {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #ffffff;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}

#navigation-menu ul.sf-menu > li > a > span {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}

#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png) top right no-repeat;
    padding: 0 26px 0 0;
}

#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
    padding: 10px 0 10px 0;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}

ORIGINAL CSS:
Code:

/* Begin Main Navigation Menu */
#navigation-menu {
    position:absolute;
    right:20px;
    top:5px;
    font-size:14px;
    height:40px;
}
.navigation-menu {
    position:relative;
    z-index:22;
}
#main-menu {
    background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
    width: 100%;
    position:relative;
    z-index:101;
    height:56px;
    margin-bottom:-6px;
}
#dropdown-holder {
    display: block;
    position:relative;
}
#navigation-menu > ul {
    padding-top: 7px;
}
#navigation-menu > * {
    padding:0;
    margin:0;
    font-size: 1em;
}
#navigation-menu ul.sf-menu {
    padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
    background:none;
    list-style: none;
    float: left;
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
    cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
    background: url(../images/menu-btn_r.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #E8E8E8;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}
#navigation-menu ul.sf-menu a {
    line-height: 1.2em;
    padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
    top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
    top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
    background: url(../images/menu-btn_l.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}
#navigation-menu ul.sf-menu > li {
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #FFF;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #6A6A6A;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}


/* End Main Navigation Menu */

I cant seem to get it to work with IE7 or IE9. It works fine in every other browser.

Code:

http://www.sdindependentplumbing.com/

This my [ if IE ] CSS code for IE 8 & 9:

.l-triangle-top { }

.l-triangle-bottom {}

.r-triangle-top {}

.r-triangle-bottom {}

Thanks in advance for any help or comments.

Having specific issue with my code. Page is 800px width, centered and I'm using absolute positioning to fix the specific elements, divisions in this case, to insure the page looks the same no matter what. html first, css second:

Code:

<html> <head><title>Matthew Flashner's Website</title> <link href="Flashner.css" rel="stylesheet" type="text/css"> </head> <body background="flashner_background.jpg" style="repeat"> <div id="header" align="center"><img src="Header.jpg"></div> <div id="navP"> <div id="navigation"> Nav Bar<br> Nav Bar<br> Nav Bar<br> Nav Bar<br> Nav Bar<br> Nav Bar<br> Nav Bar<br> Nav Bar<br> Nav Bar<br> </div>					 </div> <div id="contentPosition"> <div id="content">This area shall be the content area.  Everything that will be displayed in regards to content shall go here. content <br> content <br> content <br> content <br> content <br> content content content content content </div> </div> <div id="footer">This is the footer</div>  </body> </html> 

Code:

body {  margin: 0px; width: 800px; margin: auto; }  #header { height: 100px; }  #footer { padding-left: 1px; background-color: #8A9499; }  #contentPosition {  padding-left: 20%;   } #navP {    } #navigation { z-index: -1; 	top: 100px; 	left: 100px; 	padding: 10px 0px 10px 11px; 	background-color:#FFFFFF;   }  #content { z-index: 100; min-width: 1px; width: 580px; 	background-color: #FFFFFF; 	border: 5px solid #FFFFFF; 	padding: 10px 10px 10px 40px; 	float: right; }  

The navigation seems to be screwed up, its like its floating and isn't fixed. Any help to fix this would rock.

Edit: first post, why is the code staying as one line? freaky!

Hi there, I am in the process of making a website to purchase tickets for Cannon and Ball's show in Morecambe, and I've tried to make it as standards compliant and usable as possible. I've made a nav bar using a UL tag. This works fine in opera and mozilla, but the hover effect doesn't kick in in IE until you are actually on the text.

I've tried using the IE7 patch and that helps none.

Can anyone tell me what I'm doing wrong?

The site is: http://cannonandball.1stmorecambe.net/
Style sheet: http://cannonandball.1stmorecambe.net/style.css

Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox.

Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible)



I'd like it to appear in firefox the same as IE..

Heres the html code:

Quote:
<div id="Navigation">
<ul>
<li><a href="main.htm"><b>Homepage</b></a></li>
<li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br>
<li><a href="home.html">Cool Sites</a></li>
<li><a href="home.html">My Opinions</a></li>
</ul>
</div>


Css code thats formatting the <div> and its contents.

Quote:
#Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; }

#Navigation ul { list-style: none; margin: 0; padding: 0; border: none; }

#Navigation li { border-bottom: 1px solid #202020; margin: 0; }

#Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; }

#Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; }


I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.>

Thank you for your help

My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css:
Code:
css

a { text-decoration: none; }
a:link { color:  #0000FF; }
a:active { color:  #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
  color:  #0000FF;
  border: 1px solid #0000FF;
  padding: 5px;
  width: 190px;
  background-color: #ffffff;
}
body
{
 color: #ffffff;
 background-color: #2F4F4F;
}
div
{
  margin-top: 50px;
  margin-bottom: 50px;
}

Thx for your help =)

EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions?

Hi,

q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text.

q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image?