joshie76
msg:1202361 | 12:17 pm on Oct 24, 2001 (gmt 0) |
Just had a play around and it seemed to work fine (even though I couldn't see the menu1 link properly). One trick that I find helps me out of these sticky corners is to ensure I'm applying the class to the anchor tag and not it's parent, i.e.: Instead of: <td class="menu1"><a href="#">test</a></td> Try: <td><a href="#" class="menu1">test</a></td> Additionally I always specify my selector before the pseudo class:
:link -> a:link though I didn't have any problems with your stylesheet in IE5.5
|
kapow
msg:1202362 | 9:55 pm on Oct 24, 2001 (gmt 0) |
Hmmm
I'm on IE5.0 and get the problem. (yep, class in the href too).
|
joshie76
msg:1202363 | 9:10 am on Oct 25, 2001 (gmt 0) |
Damn, bit confused then. If you like, Stickymail me a url where I can get in and have a look at it all in it's full glory.
|
joshie76
msg:1202364 | 10:44 am on Oct 25, 2001 (gmt 0) |
Thanks for the sticky kapow. The CSS is working as expected with every browser I can throw at it (IE5.5, NN6.1, Opera 5.12, NN4.7) - Unfortunately I haven't got IE5.0 installed so I can't really attack this problem for you :( Sorry. Perhaps someone using IE5 fancies the challenge? Have you tried validating the HTML/CSS to see what that throws up - this might lead you to the problem. Sorry again. (when will we be able to install multiple versions of IE do you reckon ;))
|
ggrot
msg:1202365 | 12:53 pm on Oct 25, 2001 (gmt 0) |
>> when will we be able to install multiple versions of IE do you reckon Not until micro$oft figures out a way to charge you for multiple installations.
|
kapow
msg:1202366 | 1:58 pm on Oct 25, 2001 (gmt 0) |
Thanks Joshie
Perhaps its just me then. Can anyone tell me how to change the text size of bulleted lists in a .css file?
|
joshie76
msg:1202367 | 1:59 pm on Oct 25, 2001 (gmt 0) |
<style>
ul, li {font-size: xxpt}
</style>
|
David
msg:1202368 | 2:07 pm on Oct 25, 2001 (gmt 0) |
If you asign an id=menu1 to the block level tag of menu1 then in your style sheet. #menu1 A:hover{color:blue}
#menu1 A:hover{visited:red} I think that will work.
|
kapow
msg:1202369 | 3:15 pm on Oct 25, 2001 (gmt 0) |
< If you asign an id=menu1 to the block level tag of menu1 then in your style sheet.
#menu1 A:hover{color:blue}
#menu1 A:hover{visited:red} > Sorry - what is a block level tag? ps: Joshie - thanks, the bullet thing works now.
|
David
msg:1202370 | 6:18 pm on Oct 25, 2001 (gmt 0) |
It would be like a <div id="menu1"> or <p id="menu1">
|
kapow
msg:1202371 | 12:57 pm on Oct 29, 2001 (gmt 0) |
....It would be like a <div id="menu1"> or <p id="menu1"> .... Errrrm, er, where does that go exactly ?
|
David
msg:1202372 | 3:53 pm on Oct 29, 2001 (gmt 0) |
Hi Kapow,
If you take the html that your menu1 is in and wrap in a <div id="menu1"> tag you are telling the browser to treat it different. This goes in the <body>
<div id="menu1">
Your menu html goes here
</div> Then in your style sheet assign the rules to the id of menu1
like this #menu1 A:hover{color:blue}
#menu1 A:hover{visited:red}
|
kapow
msg:1202373 | 3:40 pm on Oct 30, 2001 (gmt 0) |
This is driving me mad :( I can't get a simple menu to show a different 'visited' colour to the 'visited' colour of the rest of the page. What am I doing wrong ??? HERE IS SOME OF THE FAULTY MENU HTML <p CLASS=menu1>
<a href="travel_destinations.htm">Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
<a href="hotels_travel_services.htm">Other Services</a>
</p> HERE IS MY .CSS FILE body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
:link { color:#000099 }
:visited { color:#000099 }
:active { color:#000099 }
:hover { color:#FF0000 } .menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; link:#FFFFFF;}
#menu1 A:hover{color:#FF0000}
#menu1 A:hover{visited:#FFFFFF}
|
joshie76
msg:1202374 | 3:48 pm on Oct 30, 2001 (gmt 0) |
Sorry Kapow - I don't mean to be a whining mother figure, but in the example you give above you have no class attribute in the anchor tags.
|
Eric_Jarvis
msg:1202375 | 3:51 pm on Oct 30, 2001 (gmt 0) |
it should read a.menu1:hover { etc} and so on
|
joshie76
msg:1202376 | 4:02 pm on Oct 30, 2001 (gmt 0) |
also try being more explicit with you standard link selectors in your CSS :link { color:#000099 }
:visited { color:#000099 }
:active { color:#000099 }
:hover { color:#FF0000 } becomes A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 }
|
David
msg:1202377 | 4:06 pm on Oct 30, 2001 (gmt 0) |
You need to have the... <p CLASS=menu1> read... I would rename your font style from .menu1 to maybe .menu1a
The ID will control the rollover the class will change the font stuff <p id="menu1" class="menu1a"> Style sheet ..
#menu1 A:hover{color:#FF0000}
#menu1 A:visited{color:#FFFFFF}
|
kapow
msg:1202378 | 5:34 pm on Oct 30, 2001 (gmt 0) |
Still stuck :( joshie76
- Your not whining, I need all the help I can get.
- Have added A:link { color:#000099 } etc
- And a class attribute to the first anchor tag David
- I'm not sure if I've understood you but have renamed items like so: HERE IS SOME OF THE REVISED FAULTY MENU HTML
<p id="menu1" class="menu1a">
<a href="travel_destinations.htm" CLASS=menu1>Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
<a href="hotels_travel_services.htm">Other Services</a>
</p> HERE IS MY REVISED .CSS FILE
body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 } .menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; link:#FFFFFF;}
#menu1a :hover{color:#FFFF00}
#menu1a :visited{color:#FFFFFF}
|
SmallTime
msg:1202379 | 6:37 pm on Oct 30, 2001 (gmt 0) |
HERE IS SOME OF THE REVISED FAULTY MENU HTML
<p id="menu1" class="menu1a">
<a href="travel_destinations.htm" class="menu1">Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
|
David
msg:1202380 | 6:54 pm on Oct 30, 2001 (gmt 0) |
This works
<head>
<title>Untitled</title>
<style>
body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 }
.menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; link:#FFFFFF;}
#menu1 :hover{color:#FFFF00}
#menu1 :visited{color:#FFFFFF}
</style
</head>
<body>
<p>
<a href="travel_destinations.htm" CLASS=menu1>Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
<a href="hotels_travel_services.htm">Other Services</a>
</p> <p id="menu1" class="menu1a">
<a href="travel_destinations.htm" CLASS=menu1>Destinations</a> ¦
<a href="city_travel_information.htm">City Travel Information</a>
<a href="otherservices.html"></a> ¦
<a href="hotels_travel_services.htm">Other Services</a>
</p> </body>
|
kapow
msg:1202381 | 8:49 pm on Oct 30, 2001 (gmt 0) |
:) :) DONE IT! :) :) Here is what finally worked:
It seems to have something to do with defining the font stuff again in the Link, Hover and Visited bits. Like so: body { color: #000000; background: #FFFFFF; }
strong { color: #000066 }
h1 { font-size: 120%; color: #000099; margin-bottom: 0em;}
h2 { font-size: 100%; color: #000099; margin-bottom: 0em;}
h3 { font-size: 100%; color: #000099; margin-bottom: 0em;}
p { font-family: Arial, Helvetica, sans-serif; margin-top:0em;}
body { font-family: Arial, Helvetica, sans-serif; }
h1,h2 { font-family: Arial, Helvetica, sans-serif; }
h3 { font-family: Times New Roman, Times, serif; }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
A:link { color:#000099 }
A:visited { color:#000099 }
A:active { color:#000099 }
A:hover { color:#FF0000 } .menu1 {font-size:12pt; font-weight:bold; text-decoration:none; color:#FFFFFF; }
A.menu1:visited { color:#FFFFFF; font-weight:bold; text-decoration:none }
A.menu1:link { color:#FFFFFF; font-weight:bold; text-decoration:none }
A.menu1:hover { color:#FFFF00; font-weight:bold; text-decoration:underline }
|
joshie76
msg:1202382 | 8:55 am on Oct 31, 2001 (gmt 0) |
Congrats!
|
|
