Rollover effects style sheet 1

1todd1 · Feb 18, 2003

I have two files the style sheet "styles.ccs" and the html file (included). The problem is that if I use a tag to call the style sheet inside the html file it works - using the rollover. Yet if I use a class call to the external style sheet, it works yet fails on the rollover event using jscript. Any suggestions much appreciated thanks for your time Todd

the style sheet
input.menuBar{
font-family: Andale Mono;
font-size: 18;
color: rgb(48,100,136);
font-weight: bold;
text-align: left;
background-color:transparent;
border: 0;

the html file - try the rollover event on the second button
<html>

<head>
<style>
.start {
color:#ABCDEF;
text-decoration:underline;
background-color:transparent;
class="menuBar";
}
.end {
color:#0000FF;
text-decoration:none;
background-color:transparent;
}

#BttnStyle{
font-family: Andale Mono;
font-size: 18;
color: rgb(48,100,136);
font-weight: bold;
text-align: left;
background-color:transparent;
border: 0;
}

</style>
<script language="JavaScript">
</script>
<script ID="clientEventHandlersJS"
LANGUAGE="javascript">


</script>

<title>dddddddd</title>
<link rel="stylesheet" type="text/css" href="styles.css" title="docProperties">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>

<body>

<form method="POST" action="ProcessType.asp" NAME="highlightInstructions"
onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<p><input ID="BttnStyle" TYPE="submit" VALUE="instructions"
onClick="location.href='

http://www.htmlgoodies.com'"></p>

</form>

<p> </p>

<p> </p>

<p><input class="menuBar" type="button" value="Button" name="B1" size="20"
onMouseover="highlightButton('start')" class="menuBar" onMouseout="highlightButton('end')"
class="menuBar"></p>

<p> </p>

<p> </p>
</body>
</html>

RISTMO · Feb 19, 2003

When I open that, I get a link just like the first for the input, and when it is mousedover, it becomes a button with changing colors of text for mouseover.

What is desired?

Rick -----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

cian · Feb 19, 2003

There's a couple of mistakes in your CSS, start by fixing those and see if it affects the behaviour. It'll make it easier then to work out the solution to your problem.
Run the CSS through the validator.

É ::

http://www.endamcg.com

1todd1 · Feb 19, 2003

RISTMO Thanks for your replies much appreciated.

When I open that, I get a link just like the first for the input, and when it is mousedover, it becomes a button with changing colors of text for mouseover.

That is the delima the first link calls the internal HTML style sheet and works with rollover. The second link calls a CSS style sheet and works but fails (turns into a button) with a mouse rollover. The second link (button) should appear the same as the first (a link). The difference – the second link calls an external CSS and uses class (fails with rollover). The first link works and uses ID and an internal style sheet.
Thanks once again - Todd

1todd1 · Feb 19, 2003

Thanks for your reply Cian
There is something wrong with the style sheet? I would be interested to know what that is, as the external CSS works – hence the second button looks like a link - but fails with the rollover. It is likely there is probably something wrong with the way it is being called from the HTML and the impaction of calling the jscript on the style sheet. Im not sure what it is though. I what both links to work the same – one calls internal HTML style the other an CSS file but fails with the rollover.

Thanks for replaying and sorry for repeating the problem as appears that Im unclear with specifics .

Todd

RISTMO · Feb 19, 2003

There ya go:

<html>
<head>
<style>
.start {
color:#ABCDEF;
text-decoration:underline;
background-color:transparent;
class="menuBar";
}
.end {
color:#0000FF;
text-decoration:none;
background-color:transparent;
}

#BttnStyle{
font-family: Andale Mono;
font-size: 18;
color: rgb(48,100,136);
font-weight: bold;
text-align: left;
background-color:transparent;
border: 0;
}
</style>
<script language="JavaScript"></script>
<script ID="clientEventHandlersJS"
LANGUAGE="javascript">

</script>

<title>dddddddd</title>
<link rel="stylesheet" type="text/css" href="styles.css" title="docProperties">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>

<body>

<form method="POST" action="ProcessType.asp" NAME="highlightInstructions"
onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<p><input ID="BttnStyle" TYPE="submit" VALUE="instructions"
onClick="location.href='

http://www.htmlgoodies.com'"></p>

</form>

<p> </p>

<p> </p>

<p><input ID="BttnStyle" class="menuBar" type="button" value="Button" name="B1" size="20"
onMouseover="highlightButton('start')" onMouseout="highlightButton('end')"></p>

<p> </p>

<p> </p>
</body>
</html>

The problem was that the id="BttnStyle" wasn't included in the second button.

Rick
-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

1todd1 · Feb 19, 2003

Rick Thanks once again for your reply

There seems to be confusion on the interpretation of the question. I realise that an id tag can be used to reference the internal style sheet – this is what is achieved in the first button (working with rollover). I’m trying to have an external CSS which is referenced using the class="menuBar" – yet doesn’t work with the rollover. Another question - do you know how to reference an external CCS using the ID tag?

Thanks for your reply time and patience. Todd

We will keep banging our heads into the wall to finally break through.

cian · Feb 19, 2003

From your original post there are a few errors in the CSS

External style sheet
input.menuBar{
font-family: Andale Mono;
font-size: 18pt or px;
color: rgb(48,100,136);
font-weight: bold;
text-align: left;
background-color:transparent;
border: 0;
};

Your other css

start {
color:#ABCDEF;
text-decoration:underline;
background-color:transparent;
class="menuBar"; REMOVE
}
.end {
color:#0000FF;
text-decoration:none;
background-color:transparent;
}

#BttnStyle{
font-family: Andale Mono;
font-size: 18pt or px;
color: rgb(48,100,136);
font-weight: bold;
text-align: left;
background-color:transparent;
border: 0;
}

I'd recommend you put all css into the external style sheets, it will make it easier on you.
There's no difference using the ID in the HTML document or in the external style sheet, usage is the exact same.

É ::

http://www.endamcg.com

1todd1 · Feb 24, 2003

Thank everyone for your help and speedy reply

Cyan you hit the nail on the head, and answered my problem. I ended up by correcting the style sheets, although was working with errors. Using an ID Tag to call the external style sheet solved the problem. Yes Cyan, I agree it is good practice to bundle all css into the external style sheet/s (what im endeavouring to do).

Thanks once again everyone Todd

The working output

The style sheet called “styles.css”

#BttnStyle{
font-family: Andale Mono;
font-size: 18px;
color: rgb(48,100,136);
font-weight: bold;
text-align: left;
background-color:transparent;
border: 0;
}

The HTML file

<html>

<head>
<style>
.start {
color:#ABCDEF;
text-decoration:underline;
background-color:transparent;
}

.end {
color:#0000FF;
text-decoration:none;
background-color:transparent;
}

</style>
<script language="JavaScript">
</script>
<script ID="clientEventHandlersJS"
LANGUAGE="javascript">


</script>

<title>dddddddd</title>
<link rel="stylesheet" type="text/css" href="styles.css" title="docProperties">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>

<body>

<form method="POST" action="ProcessType.asp" NAME="highlightInstructions"
onMouseover="highlightButton('start')" onMouseout="highlightButton('end')">
<p><input ID="BttnStyle" TYPE="submit" VALUE="instructions"
onClick="location.href='<

http://www.whateveries.com>'"></p>

</form>

<p><input ID="BttnStyle" type="button" value="Button" name="B1" size="20"
onMouseover="highlightButton('start')" class="menuBar" onMouseout="highlightButton('end')"
class="menuBar"></p>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Rollover effects style sheet 1

1todd1

Programmer

RISTMO

Programmer

cian

Technical User

1todd1

Programmer

1todd1

Programmer

RISTMO

Programmer

1todd1

Programmer

cian

Technical User

1todd1

Programmer

Similar threads

Part and Inventory Search

Sponsor