Learn VBA & Macros in 1 Week!

CSS - Javascript Rollover Validation Problem

Full Excel VBA Course - Beginner to Expert

Javascript Rollover Validation Problem	View Content

Hi all,
I'm sure this is an easy fix, but I can't get it.
I have a javascript rollover image swap, and can only get it to validate if I don't use the border="0" attribute.
The site is to be pure css, but the course requires me to use some javascript to show understanding.
So it works fine, but showing a blue border in ie, and a red border in mozilla.
My question is, if you can help, how to hide/get rid of the border, and have validate at the same time. Cheers Solar.

html link http://darkspeed.atspace.com/Javascript.htm

css link http://darkspeed.atspace.com/speedstyle.css

the div is #roll, hope this makes sense.. thanks.

And if I'm doing it all wrong any advice would be appreciated..
Thanks again.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Rollover Effect With A Javascript Submenu

Another Ie6 Rollover Problem

Css Problem With Rollover Images

Css Rollover Text Problem In Ie

Css Trifecta Rollover Ie Problem

Ie Navigation Rollover Problem

Css Image Rollover Problem : Ie 6

Javascript Rollover To Change Background Color - Quirky In Ie 6 + 7

Critical Rollover Problem In Css/jscript

A Rollover List Using A:hover Problem

Rollover Menu Centering Problem

Rounded Corner On Rollover - Css Problem

Simple Css Rollover Images Menu Problem

Odd Shaped Vertical Rollover Nav Menu Problem

Dis Jointed Rollover Problem When Viewed In Explore And Firefox

Css Validation Doesn't Work Well With Javascript &&

Validation Problem (form)

Rollover In Ff But Not Ie

Learn VBA & Macros for Excel in 1 Week!

Rollover Effect With A Javascript Submenu

Similar Tutorials

I am having trouble getting the widths to work right. I got this code off the site and I am not sure what all it does. There are about 4 or 5 places that you can adjust the width. Can some one check out the CSS below and let me know what all it does.

Code:

body
{
	margin:50px;
	background-color:#ffffff;
	font:13px Arial;
}

#nav, #nav ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
}

/* now lets get rid of position:relative for IE */

* #nav, * #nav ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}


#nav a
{
	width: 82px;
	display: block;
	color: black;
	text-decoration: none;
	background-color: white;
	border: 1px solid #000000;
	padding: 5px;
	font:12px verdana bold; /* N6 needs this to cascasde the font style */
	background:url(menubg.jpg) no-repeat 0px 0px;
	text-align: center; 

}

/* BMH for IE 5 */

* html #nav a
{
  width: 95px;
  w\idth: 95px;
}
	
#nav li
{
    float: left;
	width: 90px; /* width of the individual bars */
	position: relative;
		
}
	
#nav li ul
{
	position: absolute;
	left: -999em;
	width: 95px;
	
}
	
#nav li a:hover
{
	color: #FFFFFF;
	background-color: #B40820;
	background:url(menubg.jpg) no-repeat 0px -40px;
	
}

#nav li:hover ul, #nav li.sfhover ul
{
	left: auto ;
}

#nav ul
{
text-align: center;
display: block;
}

Here is the site (Test Menu) it is on currently. I want to make it centered in the table any ideas?

Pretty much I am a newbie to CSS and JS and I was hoping someone could outline the CSS a little better and let me know what it does.

Thanks
James

Another Ie6 Rollover Problem

Similar Tutorials

i have a problem with my rollovers. they work fine in ff and safari, and shockingly do not work in ie6. i've been at it for a couple of days now, and can't seem to make headway on it.

i'm also new to this forum, so im hoping i do this right:

html:

<div id="banner"><img src="assets/banner.png" alt="xxx" width="450" height="145" border="0" />
<ol>
<li><a href="index.html" id="home">home</a></li>
<li><a href="about.html" id="about">Aboutx</a></li>
<li><a href="portfolio.html" id="portfolio">xPortfolio</a></li>
<li><a href="services.html" id="services">Servicesx</a></li>
<li><a href="news.html" id="news">Latest News</a></li>
<li><a href="contact.html" id="contact">Contact </a></li>
</ol>
</div>

css:

@charset "utf-8";
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: repeat-y;
}
div {
background-position: center;
}

#container {
width: 100%;
background-color: #0000000;
}
#containertopout {
width: 100%;
background-image: url(topbg.png);
background-repeat: repeat-x;
height: 300px;
}
#containertopin {
width: 900px;
margin-right: auto;
margin-left: auto;
}
#banner {
height: 245px;
width: 450px;
float: left;

}
#flash {
width: 450px;
float: left;
padding: 0px;
top: auto;
height: 228px;
margin-top: -0.7em;
margin-right: auto;
margin-bottom: -20px;
margin-left: auto;
}
#flashcontent {
margin: 0px;
padding: 0px;
height: 228px;
width: 450px;
}
#footer {
display: inline;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 850px;
}

#containermiddle {
width: 850px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-color: #000000;
float: none;
padding: 0px;
}
#body {
background-repeat: repeat-y;
background-color: #000000;
}
#containerbottomout {
width: 100%;
background-image: url(botbg.png);
background-repeat: repeat-x;
height: 120px;
clear: both;
overflow: auto;
}
#containerbottomin {
width: 850px;
margin-right: auto;
margin-left: auto;
clear: both;
float: none;
}

.col1 {
border-right-width: 2px;
border-right-style: ridge;
border-top-color: #071E3C;
border-right-color: #071E3C;
border-bottom-color: #071E3C;
border-left-color: #071E3C;
}
#navlinks li {
display: inline;
list-style-type: none;
margin-left: 0.25em;
padding-left: 0.5em;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #18457B;
}
#navlinks .first {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-left: -0.75em;
}
#navlinks a {
font-size: 10px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5;
color: #4480d5;
}
#navlinks p {
margin-top: -1.5em;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#navigation {
padding-top: 1em;
text-align: center;
}

.style1 {
font-size: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF9B21;
}
.style2 {font-size: 16px}

.style3 {
color: #4480d5;
font-size: 12px;
line-height: 20px;
}
.style4 {
color: #FF9B21;
font-size: 12px;
line-height: 20px;
}

a:link {
color: #4480D5;
font-size: 12px;
line-height: 20px;
text-decoration: none;
}
a:hover {
color: #FFC51B;
text-decoration: underline;
}
a:active {
color: #4480d5;
}
a:visited {
color: #FF9B21;
text-decoration: none;
}

#banner li{
float:left;
margin-top: -0.6em;
list-style-type: none;
}

#banner a{
text-decoration: none;
display: block;
float: left;
text-indent: -5000px;
}

#banner #home {
background-image: url(navbut/home.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
margin-left: -3.35em;
}

#banner #home:hover {
background-position: 0 -95px;
}

#banner #about {
background-image: url(navbut/aboutus.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #about:hover {
background-position: 0 -95px;
}

#banner #portfolio {
background-image: url(navbut/portfolio.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #portfolio:hover {
background-position: 0 -95px;
}

#banner #services {
background-image: url(navbut/services.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #services:hover {
background-position: 0 -95px;
}

#banner #news {
background-image: url(navbut/news.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #news:hover {
background-position: 0 -95px;
}

#banner #contact {
background-image: url(navbut/contact.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 75px;
height: 95px;
}

#banner #contact:hover {
background-position: 0 -95px;
}

free happy thoughts from me for whoever can help me out!

Css Problem With Rollover Images

Similar Tutorials

I am just learning CSS and I found this site and they have a step through example, but I am having problem where they use

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}

to select different parts of an image to display. Also, supposedly, you put in the body tag of the index.html file
<body class="about">

and it is supposed to use the about image, but I am unsure how to enable the others. Anyone have an idea. The code is too much to post here, but I could possibly email it if anyone needs it.

Css Rollover Text Problem In Ie

Similar Tutorials

I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text.

However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox.

However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML.

Is there a way to fix this or am I going to have to go back to JavaScript?

[code]
css:
body {
background: url(images/sips_menu.gif) no-repeat;
}

a.con {
z-index: 1;
}

a.menu {
z-index: 2;
}

/*set whole page as an invisible link*/

a.con:link,a.con:visited,a.con:hover,a.con:active {
background-color: transparent;
display: block;
border: none;
position: absolute;
top: 0px;
left: 0px;
width: 790px;
height: 540px;
text-decoration: none;
cursor: default;
}

/*set span for whole page as visible only when hovering over page*/

a.con span {
display:none;
}

a.con:hover span {
color: black;
font-weight: normal;
display: block;
text-decoration: none;
font-size: 11px;
font-family: arial, sans-serif;
text-align: left;
position: absolute;
top: 125px;
left: 580px;
width: 170px;
height: 150px;
}

/*menu links - when mouse is over these it is not over general page anchor*/

a.menu:link,a.menu:visited,a.menu:hover,a.menu:active {
background-color: white;
border: 1px solid black;
color: #617AB2;
font-size: 12px;
font-weight: bolder;
font-family: arial, sans-serif;
text-decoration: none;
text-align: left;
padding: 4px 6px 4px 6px;
}

a.menu:hover {
color: red;
}

/*menu link rollover text visible when mouse over*/

a.menu span {
display: none;
}

a.menu:hover span {
color: black;
font-weight: normal;
display: block;
}

/* Ids to position each of the menu links */

#one {
position: absolute;
top: 180px;
left: 20px;
}

#two {
position: absolute;
top: 250px;
left: 250px;
}

#three {
position: absolute;
top: 380px;
left: 220px;
}

#four {
position: absolute;
top: 320px;
left: 420px;
}

#five {
position: absolute;
top: 450px;
left: 565px;
}

/* Ids to position the span tags*/
#a {
position: absolute;
top: -55px;
left: 560px;
width: 170px;
}

#b {
position: absolute;
top: -125px;
left: 330px;
width: 170px;
}

#c {
position: absolute;
top: -255px;
left: 360px;
width: 170px;
}

#d {
position: absolute;
top: -195px;
left: 160px;
width: 170px;
}

#e {
position: absolute;
top: -325px;
left: 15px;
width: 170px;
}

xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<p><a class="con" href="#"><span>text</span></a></p>
<p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p>
<p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p>
<p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p>
<p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p>
<p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p>
</body>
</html>

Css Trifecta Rollover Ie Problem

Similar Tutorials

Hi there, well as i said i need some help from any CSS gurus.

I've been using the Trifecta rollever code ever since i found it in almost every page i've done. Just this week i found out that for some reason in IE when i use the vertical version of it, there's a 3px margin above the menu. I've tried changing every setting and resetting most elements margins, padding, and borders to 0 to no avail. I keep getting that ugly 3px margin.

Here's the latest example:

Example

You'll see the problem in the left and right hand menus, under Bussiness and under Client Zone, in both, the distance between the image and the first menu item should be zero. But IE shows an ugly 3 px margin ( btw, in the Bussiness side there's a bigger margin because i set it like that, but still there's an extra 3px..).

Here's the code used which is the exact code i took from the web and i just adapt it whenever.
This is from the menu on the right ( CLient Zone ), if you check it under IE, be it version 6 or 7 you'll see a 3 px margin on top of the menu...

Code:

#menu2{
			margin-bottom:6px;
			padding:0;
			border:0;
		}
		
		
		/* NAVIGATION BUTTONS 2*/
			.cssnav2	{
						position:relative;
						font-family: arial, helvetica, sans-serif;
						background-image:  url(../images/menus/menu2_on_1.gif);
						background-repeat: no-repeat;
						white-space: nowrap;
						display: block;
						width: 165px;
						height: 28px;
						margin: 0; 
						padding: 0; 
			}
			.cssnav2 a {
						display: block;
						color: #000000;
						font-size: 11px;
						width: 165px;
						height: 28px;
						display: block;
						float: left;
						color: black; 
						text-decoration: none;
			}

			.cssnav2 img {width: 165px; height: 28px; border: 0; }
			* html a:hover {visibility:visible}
			.cssnav2 a:hover img{visibility:hidden}

			.cssnav2 span {
						position: absolute;
						left: 40px;
						top: 0;
						line-height:28px;
						margin: 0px;
						padding: 0px;
						cursor: pointer;
						width: 118px;
						height: 28px;
						text-align: left;
						color:#646565;
						font-family:Arial, Helvetica, sans-serif;
			}

Thanks for any help.

Edit: I found something about a 3px bug with IE and floats, but i dont know if it applies in this case because first im not using floats and secondly that bug is supposed to be gone in IE 7.

Ie Navigation Rollover Problem

Similar Tutorials

i have set up my navigation menu like so:
PHP Code:
<style type='text/css'>
   div#nav {
      border:1px solid #000000;
      background-color:#F2F2F2;
      height:auto;
   }
   div#nav a {
      display:block;
      color:black;
      border:1px solid #FFFFFF;
   }
   div#nav a:hover {
      color:red;
      border:1px solid #000000;
      background-color:white;
   }
</style>

<div class='nav'>
   <a href='page1.html'>Page 1</a>
   <a href='page2.html'>Page 2</a>
   <a href='page3.html'>Page 3</a>
   <a href='page4.html'>Page 4</a>
</div>

the above works perfectly in Firefox, but doesnt in IE.
IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row.
Does IE not understand the display:block? as i think this is whats causing it...

Css Image Rollover Problem : Ie 6

Similar Tutorials

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL

This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

Javascript Rollover To Change Background Color - Quirky In Ie 6 + 7

Similar Tutorials

Hello all,

Working on this page:
http://gatehouse.graffetto.com/rollover.html

When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div.

Any ideas how to rig this up for IE? Here's the simple version of the code:

Code:

<div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';">
	<div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div>
	<div class="storyByline">1/7/07 - By Max Bowen</div>
	<div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div>
</div>

any help would be great, thanks!

Critical Rollover Problem In Css/jscript

Similar Tutorials

I'm having problems with a navigation system I'm trying to build, it is fairly simple,

Mouse over, menu drops down.
right side of drop down there are several categories.
hover over them and 4 options show up on the left side, and image updates to the correct image.

works great, problem is when you try to roll back over to another option on the right, it stays where it was, there is no update for your mouse actions.
Does anyone have an idea how this could be fixed?

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


<script type="text/javascript">


function showElement(aaa) 
	{
		document.getElementById(aaa).style.display="block";
	}

function hideElement(aaa)
	{
		document.getElementById(aaa).style.display="none";
	}
	
	
function showDDBoat(aaa) 
	{
		document.getElementById(aaa).style.zIndex="100";
	}

function hideDDBoat(aaa)
	{
		document.getElementById(aaa).style.zIndex="90";
	}
	
	
	
	
</script>


<style type="text/css">

#dd1 { position:absolute; top:70px; left:15px; display:none; }
#dd2 { position:absolute; top:70px; left:100px; display:none; }


/* -------------------------------------------------------------------------
*/
#boatsNav {position:absolute; top:45px; left:220px;}
#boatsNav a.bnav, 
#boatsNav a.bnav:link, 
#boatsNav a.bnav:visited, 
#boatsNav .chosen {	display:block; width:100px; height:25px; 
					background:none; 
					text-align:center; 
					text-decoration:none; 
					font-family:verdana, arial, sans-serif; 
					font-size:12px; 
					color:#fff; 
					line-height:25px; 
					overflow:hidden;
					float:left;
					}

#boatsNav a.bnav:hover {color:#fff; background:#000;}

#boatsNav a.bnav:active, 
#boatsNav .chosen {color:#fff; background:#c00;}
/* -------------------------------------------------------------------------
*/



.bdd_dropdowns {background: url(http://www.dnpinteractive.com/temp/newbdd/images/dd_bg1.png) no-repeat bottom right; height:190px; width:313px; position:relative;}

/* -------------------------------------------------------------------------
*/

.bdd_boats {position:absolute; top:5px; right:0px;}
.bdd_boats a.subnav, 
.bdd_boats a.subnav:link, 
.bdd_boats a.subnav:visited {
					display:block; width:100px; height:25px; 
					background:none; 
					border-bottom:1px solid #666; 
					padding:0 5px 0 0;
					text-align:right; 
					text-decoration:none; 
					font-family:verdana, arial, sans-serif; 
					font-size:12px; 
					color:#fff; 
					line-height:25px; 
					overflow:hidden;
					
					}

.bdd_boats a.subnav:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/






/* -------------------------------------------------------------------------
*/
.bdd_links {position:absolute; top:5px; left:6px; width:200px;}
.bdd_links a.ddlink, 
.bdd_links a.ddlink:link, 
.bdd_links a.ddlink:visited {
					width:98px; height:20px; 
					background:#990000; 
					text-align:center; 
					text-decoration:none; 
					margin: 0 2px 2px 0;
					font-family:verdana, arial, sans-serif; 
					font-size:10px; 
					color:#fff; 
					line-height:20px; 
					overflow:hidden;
					float:left
					}
.bdd_links .ddlink_OFF { 
					/*visibility:hidden; */
					background:#000;
					width:98px; 
					height:20px;
					text-decoration:none; 
					margin: 0 2px 2px 0;
					font-family:verdana, arial, sans-serif; 
					font-size:10px; 
					color:#000; 
					line-height:20px; 
					overflow:hidden;
					float:left
					}
					
.bdd_links a.ddlink:hover {color:#fff; background:#000;}
/* -------------------------------------------------------------------------
*/





</style>

</head>
<body>

<div id="boatsNav">
    <a class="bnav" href="#" title="page 1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">MONTAUK</a>
    <a class="bnav" href="#" title="page 2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')">OUTRAGE</a>
    <a class="bnav" href="#" title="page 3" onmouseover="showElement('dd3')" onmouseout="hideElement('dd3')">VENTURA</a>
</div>


<div class="bdd_dropdowns" id="dd1" onmouseover="showElement('dd1')" onmouseout="hideElement('dd1')" onmouseover="showDDBoat('boat1')">

    <div class="bdd_links" id="boat1" onmouseover="showDDBoat('boat1')" >
        <a class="ddlink" href="#">Custom Shop</a>
        <a class="ddlink" href="#">Build Mine</a>
        <a class="ddlink" href="#">Learn More</a>
        <a class="ddlink" href="#">Deckplan</a>
        <img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
    </div>
   
    <div class="bdd_links" id="boat2" onmouseover="showDDBoat('boat2')" >
        <a class="ddlink" href="#">Custom Shop</a>
        <a class="ddlink" href="#">Build Mine</a>
        <a class="ddlink" href="#">Learn More</a>
        <a class="ddlink" href="#">Deckplan</a>
        <img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="boat2" />
    </div>
   
    <div class="bdd_links" id="boat3" onmouseover="showDDBoat('boat3')" >
        <a class="ddlink" href="#">Custom Shop</a>
        <a class="ddlink" href="#">Build Mine</a>
        <a class="ddlink" href="#">Learn More</a>
        <a class="ddlink" href="#">Deckplan</a>
        <img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
    </div>
   
   
    <div class="bdd_boats">
        <a class="subnav" href="#" onmouseover="showDDBoat('boat1')" onmouseout="hideDDBoat('boat1')">150 Montauk</a>
        <a class="subnav" href="#" onmouseover="showDDBoat('boat2')" onmouseout="hideDDBoat('boat2')">160 Montauk</a>
        <a class="subnav" href="#" onmouseover="showDDBoat('boat3')" onmouseout="hideDDBoat('boat3')">170 Montauk</a>
    </div>
        
</div><!-- CLOSE class="dd1"  -->

<div class="bdd_dropdowns" id="dd2" onmouseover="showElement('dd2')" onmouseout="hideElement('dd2')" onmouseover="showDDBoat('2boat1')">

    <div class="bdd_links" id="2boat1" onmouseover="showDDBoat('2boat1')" >
        <a class="ddlink" href="#">Custom Shop</a>
        <a class="ddlink" href="#">Build Mine</a>
        <a class="ddlink" href="#">Learn More</a>
        <a class="ddlink" href="#">Deckplan</a>
        <img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat1.jpg" width="197" height="131" alt="boat1" />
    </div>
   
    <div class="bdd_links" id="2boat2" onmouseover="showDDBoat('2boat2')" >
        <a class="ddlink" href="#">Custom Shop</a>
        <a class="ddlink" href="#">Build Mine</a>
        <a class="ddlink" href="#">Learn More</a>
        <a class="ddlink" href="#">Deckplan</a>
        <img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat2.jpg" width="197" height="131" alt="2boat2" />
    </div>
   
    <div class="bdd_links" id="2boat3" onmouseover="showDDBoat('2boat3')" >
        <a class="ddlink" href="#">Custom Shop</a>
        <a class="ddlink" href="#">Build Mine</a>
        <a class="ddlink" href="#">Learn More</a>
        <a class="ddlink" href="#">Deckplan</a>
        <img src="http://www.dnpinteractive.com/temp/newbdd/images/dd_boat3.jpg" width="197" height="131" alt="boat3" />
    </div>
   
   
    <div class="bdd_boats">
        <a class="subnav" href="#" onmouseover="showDDBoat('2boat1')" onmouseout="hideDDBoat('2boat1')">150 Montauk</a>
        <a class="subnav" href="#" onmouseover="showDDBoat('2boat2')" onmouseout="hideDDBoat('2boat2')">160 Montauk</a>
        <a class="subnav" href="#" onmouseover="showDDBoat('2boat3')" onmouseout="hideDDBoat('2boat3')">170 Montauk</a>
    </div>
        
</div><!-- CLOSE class="dd2"  -->



<img id="placeholder_bg" src="http://www.dnpinteractive.com/temp/newbdd/images/placeholder_bg.jpg" height="424px" width="943px" alt="placeholder bg" />




</body>
</html>

A Rollover List Using A:hover Problem

Similar Tutorials

Rollover Menu Centering Problem

Similar Tutorials

Link: http://ajwells.org/mtmp/index.html

How do I get the menu there to center on the screen? Ive tried a number of things and nothings worked as of yet.

Or better yet, is there an easy way to make the menu on the left side going downward rather than left to right?

Either would be great.

thanks for the help.

Rounded Corner On Rollover - Css Problem

Similar Tutorials

I am developing a site that requires the navigation menu to have one rounded corner at the end on the home button. The default button state is created using a background image but I need it to also have a rollover effect on hover and also on focus (for the home page item only). I have tried to use CSS and curvy corners Javascript code to create the effect as I don't want to use images. However, I don't think the curvy corners script is picking up the div item that I want to apply the corner to.

The trouble is I have a number of div boxes on the site that also have rounded corners (3 rounded and 1 square). The CSS is working fine for these in all browsers apart from Opera but when it comes to the navigation it doesn't work properly in IE.

Here's the HTML for the menu:

Code:

<div id="menu">
	<ul>
	<li><a href="index.htm" class="home">Home</a></li><li><a href="#">Mortgages</a></li><li><a href="#">Life Assurance</a></li><li><a href="#">General Insurance</a></li><li><a href="#">Partnership Services</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li>
	</ul>
</div>
<br class="clearfloat" />

and here's the CSS:

Code:

#menu {
	background-image:url(images/menubg.png);
	height:24px;
	width: 100%;
	overflow: hidden;
	position:relative;
	float:left;
	}
	
#menu ul {font-size:11px; font-weight:bold; list-style:none;}
#menu li{ display: inline; margin: 0;}
#menu ul li a {float: left;
	display: block;
	text-decoration: none;
	margin: 0;
	padding: 6px 15px 5px 15px; /*padding inside each tab*/
	border-right: 1px solid white; /*right divider between tabs*/
	color: white;
}
#menu li a:hover, #menu li a.focus {display: block; text-decoration:none; color:#445671; background-color:#d9e021;} /*background of tabs for hover state, plus tab with "focus" class assigned */

#menu li a.home:hover, #menu li a.homefocus { width:auto; text-decoration:none; color:#445671; background-color:#d9e021; border-right: 1px solid white;
/* Do rounding (native in Firefox and Safari) */
     -moz-border-radius-topleft:12px;
   	-moz-border-radius-topright:0px;
  	-moz-border-radius-bottomleft:0;
  	-moz-border-radius-bottomright:0px;
  	-webkit-border-top-left-radius:12px;
  	-webkit-border-top-right-radius:0px;
  	-webkit-border-bottom-left-radius:0px;
  	-webkit-border-bottom-right-radius:0px;
}

The CSS is in an external stylesheet, although I have also added the CSS for the rounded corner items to the header code.

The class 'homefocus' seems to work when applied to the a tag on the home page but the other class 'home' which should work on hover won't work in IE.

I'm sure it's something to do with the hover. Any ideas how I can make it work?

Simple Css Rollover Images Menu Problem

Similar Tutorials

Hi ! Me again :P

So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself:

(view-source for xhtml and css)

http://fotoz.hit.bg/test/menu.html

The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ?

And most importantly why does it occur?

Thanks!

p.s

I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below.

It works but I get the flickering with visibility:hidden and even if i just move the img out of the way

Odd Shaped Vertical Rollover Nav Menu Problem

Similar Tutorials

i have a vertical rollover menu which has odd shaped boxes, i'd like these to rollover without hiding those parts of the image that protrude.

[IMG](URL address blocked: See forum rules)[/IMG]

basically they have to butt up underneath each other, but not loose the outside top edges on the rollover state. i also want the text aligned right, but have a negative indent of 10 or so pixels. you'll see what I mean upon viewing the example.
thanks in advance!

current CSS;

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
position: relative;
}

ul a {
display: block;
width: 141px;
height: 44px;
line-height: 58px;
text-decoration: none;
background: url(../images/gif/menuOverA.gif) no-repeat left;
}

#home #menu .home a,
#about #menu .about a,
#choose #menu .choose a,
#services #menu .services a,
#health #menu .health a,
#testimonials #menu .testimonials a,
#contact #menu .contact a {
background: url(../images/gif/menuOverA.gif) no-repeat right;
cursor: default;
color: White;
}

#menu a:hover {
background: url(../images/gif/menuOverA.gif) no-repeat right;
color: White;
}

#about #menu .about li {
background-color: Aqua;
}
and html;

<div id="menu">
<ul>
<li class="home"><a href="index.html">HOME</a></li>
<li class="about"><a href="aboutUs.html">ABOUT US</a></li>
<li class="choose"><a href="whyChoose.html">WHY CHOOSE US</a></li>
<li class="services"><a href="services.html">SERVICES</a></li>
<li class="health"><a href="healthSafety.html">HEALTH & SAFETY</a></li>
<li class="testimonials"><a href="testimonials.html">TESTIMONIALS</a></li>
<li class="contact"><a href="contactUs.html">CONTACT US</a></li>
</ul>
</div>

Dis Jointed Rollover Problem When Viewed In Explore And Firefox

Similar Tutorials

Hi, im having problems with disjointed rollovers. It works fine in explorer but wont work in firefox. It seems to be about 10px lower in firefox. Someone please help!!!!!!!!

Go to mediahost.aib.ac.uk/fdashow07/gibson/louise/coast.php
to see the page im having truble with.

This is my html code of the dis jointed rollovers,

<div class="projtitle"><h1>Coast, 2007</h1></div>

<div class="thumbnailscolumn">
<a class="thumbnail" href="coast.php"><img src="images/cliff1_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff1.jpg" border="none"/>
<div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a>
<a class="thumbnail" href="coast.php"><img src="images/cliff2_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff2.jpg" border="none"/>
<div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a>
<a class="thumbnail" href="coast.php"><img src="images/cliff3_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff3.jpg" border="none"/>
<div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a>
<a class="thumbnail" href="coast.php"><img src="images/cliff4_thumb.jpg" class="thumb" border="none"/><span><img src="images/cliff4.jpg" border="none"/>
<div class="picturename"><p>Bowleaze Cove, 2007</p></div><div class="description"><p></p></div></span></a>
</div>

This is my css,

.projtitle{
float: left;
width: 800px;
height: 20px;
padding-top: 27px;
}

.thumbnailscolumn{
float: left;
padding-top: 0px;
width:100px;
height: 456px;
margin-top: 24px;
}

.thumb{
margin: 0px 5px 5px 0px;
}

.thumbnailtwo{
margin: 0px 5px 5px 0px;
}
.thumbnailtwo:hover{
background-color: transparent;
}
.thumbnailtwo span{
position: absolute;
visibility: hidden;
text-decoration: none;
}
.thumbnailtwo:hover span{
top: 206px;
visibility: visible;
left: 610px;
}

Thanks Sam

Css Validation Doesn't Work Well With Javascript &&

Similar Tutorials

Hi all,

A simple problem he

http://ntcjapan.com/contactus_apply.php

The page validates under W3C, but CSS validation fails.

It's because of the following Javascript on the page:

Code:

					if (!(isWhitespace(form.from_email.value)) && !(checkEmail(form.from_email.value))) {
						alert("Please enter a valid email address.");
						form.from_email.focus();
						return false;
					}

The && is causing problems with CSS validation - any idea how I can bypass this?

Thanks in advance

Validation Problem (form)

Similar Tutorials

Hello every one, thanks for your help before hand,

I have validating my own website, so far so good, but I have this problem. I can not figure out why is not validating, the problem lies on this second line of code: <input type="hidden" name="cfgId" value="1" />

So part of the form looks like this:

<form action="/cgi-bin/ssecure/ssecure.pl" method="post" enctype="multipart/form-data">
<input type="hidden" name="cfgId" value="1" />

The Error message for validation says this:

Validation Output: 1 Error
Line 152, Column 49: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
<input type="hidden" name="cfgId" value="1" / >

<input type="hidden" name="cfgId" value="1" / >

The last haracter ">" of this last line are in RED. Then it says:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

------------------------------------------------------------------------

The question, what is that I am doing wrong?

Thanks,

Rollover

Similar Tutorials

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?

Rollover In Ff But Not Ie

Similar Tutorials

Hi,

I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE.

Dom.

Quote:

.nav-cell-main-nonsel {

font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva;
font-size: 10px;
font-weight: normal;
color: #333333;

vertical-align: middle;
text-align: left;
padding: 0px 0px 0px 5px;

background-image: url(../../images/[ps]triangle1.gif);
background-position: left;
background-repeat: no-repeat;

border-bottom: 1px solid #EDEDED;

padding: 0px 0px 0px 20px;

}
.nav-cell-main-sel, .nav-cell-main-nonsel:hover {

font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva;
font-size: 10px;
font-weight: normal;
color: #333333;

vertical-align: middle;
text-align: left;
padding: 0px 0px 0px 5px;

background-image: url(../../images/[ps]triangle2.gif);
background-position: left;
background-repeat: no-repeat;

border-bottom: 1px solid #EDEDED;

padding: 0px 0px 0px 20px;

}

Cheers, Dom.

Rollover

Similar Tutorials