...

View Full Version : three frames , styles and explorer 5.5



yaelbe
11-10-2002, 10:28 AM
:confused:
I need your help!!!!
I have a page with three frames where the top one is the menu , the second has several links that open the third frame.
I used an external css file where i defined the menu style as follow:
.headermenu {font-family:verdana; font-size:10pt; color: #EFEFEF; }
.headermenu:active{font-family:verdana; font-size:10pt; color: red; ; }
.headermenu:hover{font-family:verdana; font-size:10pt; color: red; }


Everything works properly on explorer 5. The problem starts in Explorer 5.5 and 6, when someone clicks on the links in the second or in the third frame the menu (in the first frame) looses the active style and it isn't anymore red.

What should i do?
Please hekp me!!!!!

MCookie
11-10-2002, 10:58 AM
This is the short answer:

.headermenu a:hover{font-family:verdana;font-size:10pt;color:red;}
.headermenu a:active{font-family:verdana;font-size:10pt;color:red;}

But that will only do the job with the classname in the element that surrounds the links. Also, don't you need a link color?

.headermenu a:link{font-family:verdana; font-size:10pt;color:blue;}

<edit> Changed link order. 'Hover' comes before 'active'..

yaelbe
11-10-2002, 11:28 AM
Thank for your help this is what i wrote
.headermenu {font-family:verdana; font-size:10pt; color: #EFEFEF;}
.headermenu a:link{font-family:verdana; font-size:10pt; color: #EFEFEF;}
.headermenu a:hover{font-family:verdana; font-size:10pt; color: red; }
.headermenu a:active{font-family:verdana; font-size:10pt; color: red;}

but nothing changed it works properly in Explorer 5 and it doesn't works in Explorer 5.5 and Explorer 6.

MCookie
11-10-2002, 11:37 AM
Did you link to your stylesheet from every page? Are the classnames at the right places? If you use CSS like this they should not be in the <A> tags.

joh6nn
11-10-2002, 11:44 AM
i think we need to see the code that you're using. there are two ways to interpret what's going on here, and it's going to be difficult to give the right answer, if we're interpreting it wrong.

yaelbe
11-10-2002, 11:51 AM
This is the code
<html>
<head>
<!--#INCLUDE file="style.htm"-->
</head>
<body topmargin="0" leftmargin="0" background="images/bgTop.gif" >
<table border="0" bordercolor="red" cellpadding="0" cellspacing="0" width="100%" >
<!-- tr-logo tr-->
<tr>
<td width="100%" height="55" >
<table border="0" bordercolor="yellow" cellpadding="0" cellspacing="0" width="100%" style="text-align:right">
<tr>
<td valign="top"><IMG SRC="images/Logo.gif" border="0" height="55" width="240"></td>
<td bgcolor="white"></td>
</tr>
</table>
</td>
</tr>
<!--end of the tr-->
<!--beginning of the menu tr-->
<tr height="21">
<td width="100%">
<table border="0" bordercolor="#D6CFD6" align="center" cellpadding="0" cellspacing="0" width="98%" height="21">
<tr>
<td id="TDLProv" onClick="javacript:SetActiveMenuItem(2)" height="21" class="headermenu"><a href="CreateCompany.asp" target="Screen" class="headermenu">Providers |</a></td>
<td id="TDLRooms" onClick="javacript:SetActiveMenuItem(4)" height="21" class="headermenu"><a href="CreateRoom.asp" target="Screen" class="headermenu">Rooms |</a></td>
<td id="TDLModer" onClick="javacript:SetActiveMenuItem(6)" height="21" class="headermenu"><a href="CreateModerator.asp" target="Screen" class="headermenu">Moderators |</a></td>
<td id="TDLAutoModer" onClick="javacript:SetActiveMenuItem(7)" nowrap height="21" class="headermenu"><a href="CreateAutomaticModerator.asp" target="Screen" class="headermenu">Moderator Policies |</a></td>
<td id="TDLPresenters" onClick="javacript:SetActiveMenuItem(5)" height="21" class="headermenu"><a href="CreatePresenter.asp" target="Screen" class="headermenu">Presenters |</a></td>
<td id="TDLConf" onClick="javacript:SetActiveMenuItem(1)" height="21" nowrap class="headermenu"><a href="CreateConference.asp" target="Screen" class="headermenu">Conference Scheduling |</a></td>
<td id="TDLConfTemp" onClick="javacript:SetActiveMenuItem(8)" height="21" nowrap class="headermenu" ><a href="CreateConferenceTemplates.asp" target="Screen" class="headermenu">Conference Templates</a></td>
</tr>
</table>
</td>
</tr>
<!--end of the menu tr-->
</table>
</body>
</html>

Thanks
Yael

MCookie
11-10-2002, 12:12 PM
Two ways to color you links.

1. For a group of links:

<style type="text/css">
.headermenu a:link {font-family:verdana font-size:10pt;color:blue;}
.headermenu a:active {font-family:verdana;font-size:10pt;color:red;}
.headermenu a:hover {font-family:verdana;font-size:10pt;color:red;}
</style>

The style will work for all the links in the cell with the '.headermenu' class.

<td class="headermenu">
<a href=""></a>
<a href=""></a>
<a href=""></a>
</td>



2. Every link apart:

<style type="text/css">
a.headermenu:link {font-family:verdana font-size:10pt;color:blue;}
a.headermenu:active {font-family:verdana;font-size:10pt;color:red;}
a.headermenu:hover {font-family:verdana;font-size:10pt;color:red;}
</style>

It will color for every link with the '.headermenu' class

<td><a class="headermenu" href=""></a></td>


If you use the first method, don't put the classnames in the link tag.
When using the second way, don't put the classnames in the cell..

yaelbe
11-10-2002, 12:29 PM
Thanks all

i tried both cases but it continues not to work in Explorer 5.5, i prefered to solve the problem by using Css but i think that i'll need to use javascript.

Thanks anyway
Yael

joh6nn
11-10-2002, 12:50 PM
MCookie's second suggestion, is the one that you want in this particular case Yael.

Yael, would you mind posting the code that you used to implement the styles? that is to say, can you show us the actual CSS code that you are now using, and the code ( if you still have it ) that you have been testing, in order to make this work. if you copied and pasted exactly what MCookie posted, please be sure to say so.

also, something that interests me about your code, Yael, is this:

<!--#INCLUDE file="style.htm"-->

i'm curious to know what the contents of style.htm are. would you mind showing us that, too?

MCookie
11-10-2002, 12:58 PM
Yes, I was wondering about the include too. Style.htm should contain this:

<style type="text/css">
<!--
all CSS here..
-->
</style>

or this:

<link rel="stylesheet" href="style.css" type="text/css">

anything else won't work.

yaelbe
11-10-2002, 01:46 PM
This is the style:

<style type=text/css>
<!--
BODY {font-family:verdana; font-size:9pt; color:#21204A; font-weight: normal; vertical-align:middle;}
td {font-family:verdana; font-size:9pt; color:#21204A; font-weight: normal; vertical-align:middle;}


a {text-decoration: underline}

SELECT
{font-family:verdana;
color:#413334;
font-size:8pt;
letter-spacing:2px;
text-align:left;
font-weight:normal;
BACKGROUND-COLOR: #D1CEC2;
vertical-align: middle ;
}

input
{
font-family:verdana;
background-color:#D1CEC2;
text-align:left;
font-size:8pt;
color:#413334;
letter-spacing:1px;
vertical-align:middle ;
font-weight:normal;
MARGIN: 0px;

}

.checkbox
{
text-align:left;
height:20;
width:20;
background-color:transparent;
color: #21204A;
vertical-align:middle ;
font-weight:normal;
}

.header
{
font-family:verdana;
font-size:10pt;
color: #EFEFEF;
font-weight: bold;
letter-spacing:1px;
text-align:left;
vertical-align:middle;
text-transform:capitalize;
}

.headerRooms
{
font-family:verdana;
font-size:10pt;
color: #21204A;
font-weight: bold;
letter-spacing:1px;
text-align:left;
vertical-align:middle;
text-transform:capitalize;
text-decoration: underline;
}

.presenterLog
{
font-family:verdana;
font-size:9pt;
color: #21204A;
font-weight: bold;
letter-spacing:1px;
text-align:left;
vertical-align:middle;
}

a.headermenu {font-family:verdana; font-size:10pt; color: #EFEFEF; font-weight: bold; letter-spacing:1px; text-align:center; vertical-align:top; vertical-align:middle; text-decoration: none}
a.headermenu:active {font-family:verdana; font-size:10pt; color: red; font-weight: bold; letter-spacing:1px; text-align:center; vertical-align:top; vertical-align:middle; text-decoration: none}
a.headermenu:hover {font-family:verdana; font-size:10pt; color: red; font-weight: bold; letter-spacing:1px; text-align:center; vertical-align:top; vertical-align:middle; text-decoration: none}

-->
</style>







This is the menu page:
<%@ Language=VBScript %>
<!--version 122a-->
<html>
<head>
<!--#INCLUDE file="style.htm"-->
</head>
<body topmargin="0" leftmargin="0" background="images/bgTop.gif" link="#000000" vlink="#000000" alink="#000000">
<table border="0" bordercolor="red" cellpadding="0" cellspacing="0" width="100%" >
<!-- tr-logo tr-->
<tr>
<td width="100%" height="55" >
<table border="0" bordercolor="yellow" cellpadding="0" cellspacing="0" width="100%" style="text-align:right">
<tr>
<td valign="top"><IMG SRC="images/Logo.gif" border="0" height="55" width="240"></td>
<td bgcolor="white"></td>
</tr>
</table>
</td>
</tr>
<!--end of the tr-->
<!--beginning of the menu tr-->
<tr height="21">
<td width="100%">
<table border="0" bordercolor="#D6CFD6" align="center" cellpadding="0" cellspacing="0" width="98%" height="21">
<tr>
<td id="TDLProv" onClick="javacript:SetActiveMenuItem(2)" height="21" ><a href="CreateCompany.asp" target="Screen" class="headermenu">Providers |</a></td>
<td id="TDLRooms" onClick="javacript:SetActiveMenuItem(4)" height="21" ><a href="CreateRoom.asp" target="Screen" class="headermenu">Rooms |</a></td>
<td id="TDLModer" onClick="javacript:SetActiveMenuItem(6)" height="21" ><a href="CreateModerator.asp" target="Screen" class="headermenu">Moderators |</a></td>
<td id="TDLAutoModer" onClick="javacript:SetActiveMenuItem(7)" nowrap height="21" ><a href="CreateAutomaticModerator.asp" target="Screen" class="headermenu">Moderator Policies |</a></td>
<td id="TDLPresenters" onClick="javacript:SetActiveMenuItem(5)" height="21" ><a href="CreatePresenter.asp" target="Screen" class="headermenu">Presenters |</a></td>
<td id="TDLConf" onClick="javacript:SetActiveMenuItem(1)" height="21" nowrap ><a href="CreateConference.asp" target="Screen" class="headermenu">Conference Scheduling |</a></td>
<td id="TDLConfTemp" onClick="javacript:SetActiveMenuItem(8)" height="21" nowrap ><a href="CreateConferenceTemplates.asp" target="Screen" class="headermenu">Conference Templates</a></td>
</tr>
</table>
</td>
</tr>
<!--end of the menu tr-->
</table>
</body>
</html>

Thanks

joh6nn
11-10-2002, 02:42 PM
i've noticed two things so far. first one is this:

a.headermenu {font-family:verdana; font-size:10pt; color: #EFEFEF; font-weight: bold; letter-spacing:1px; text-align:center; vertical-align:top; vertical-align:middle; text-decoration: none}

you have vertical align set twice. now, i don't think that's causing the problem, but you never know.

the other thing that i noticed, is that you're using the <!-- --> trick inside your <style> tags, in order to keep older browsers from misinterpreting the information. ok, but, it should look like this:

<style>
<!--
//-->
</style>

again, i don't think that's causing the problem. however, i didn't immediately notice anything else, so i figured, i'd just point out what i did see.

MCookie
11-10-2002, 03:06 PM
Except for the things joh6nn mentioned, it's a working page. Maybe the solution is as simple as adding a visited link style? If you don't set a color for visited links in your CSS the vlink="#000000" in your body tag is taking over?
In this order:
a.headermenu:link {
a.headermenu:visited {
a.headermenu:active {
a.headermenu:hover {

joh6nn
11-10-2002, 03:16 PM
geez. you hit it right on the nose, MCookie. i completely missed that.

yaelbe
11-10-2002, 03:22 PM
i deleted the in the body the vlink but if i add this line to the style:

a.headermenu:visited {font-family:verdana; font-size:10pt; color: red; font-weight: bold; letter-spacing:1px; text-align:center; vertical-align:top; text-decoration: none}

not only the active link but All the visited link became red and i don't want that.

joh6nn
11-10-2002, 03:35 PM
...wait a second...

i think we've been misunderstanding what you want.

what you're saying, is that you want it, so that when i click on your links, and the other frame changes, when they click on anything else, the link stays red. is that it?

if that's it, then it can't be done with CSS, that i know of. you'd have to use javascript.

if that's not what you want, then i'm not sure i understand what you're trying for, and you'll have to explain it again, as clearly as you can.

yaelbe
11-10-2002, 03:57 PM
this exactly my problem.
I'm sorry if i wasn't clear.
Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum