9 replies [Last post]
kinsman_34
Offline
newbie
las vegas
Last seen: 12 years 32 weeks ago
las vegas
Joined: 2008-09-25
Posts: 6
Points: 0

any suggestion or advice is greatly appreciated.

thank you.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 12 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Insufficient data for a

Insufficient data for a meaningful answer.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Dunno how one can check for

Dunno how one can check for anything in Nutscrape, where can you download such a browser if you don't already have it?

a:active will not work correctly in IE6. Possibly there's a Javascript out there that can fix that.

The rest of the browsers should act correctly regarding :active, including IE7, FF2 and 3, Opera 9+, Saffy (though surely Safari does it in some Aqua-Teen-Manga-kawai style)/Chrome and Konqueror.

a:active for IE6 means "focus" as it does not support :focus, but thinks that :active styles apply to :focus.

IE7 does not support :focus either but it correctly works with :active.

I'm no expert, but I fake one on teh Internets

kinsman_34
Offline
newbie
las vegas
Last seen: 12 years 32 weeks ago
las vegas
Joined: 2008-09-25
Posts: 6
Points: 0

stomme, you mean there's no css for that?

well if that's the case, i should start learning javascript too. and it is not so easy to learn that.
that is one thing i dont get, why did they have to do such differences regarding compatibility on browsers, thanks anyways.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Well, now, remember that IE6

Well, now, remember that IE6 is pretty old, and IE doesn't go through quick developement cycles like FF and Opera do.

When did IE6 come out? 1998 or maybe earlier?? That's a long time ago, and it just didn't support stuff, nor did any browsers at that time. IE7 made improvements but I think they were rushed and there are just not all the fixes needed.

In general, most things work mostly the same way in all modern browsers. They differ on things either because of bugs, CSS3 things not yet implemented, or sometimes the specs leave something undefined, meaning the browser vendors could just do what they wanted.\

Instead of trying to write a Javascript, there's likely one already out there.

There's a whatever:hover .htc file which sits on your server that you can get from Peterned (google Peterned whatever:hover) which may also have a fix for focus... and who knows, maybe also fixes active.

But someone somewhere has likely already written an IE6 active script. There are scripts to make IE6 do position: fixed, show the alpha channel on semi-transparent PNGs, and support min and max width. Some of these scripts are called "CSS expressions" which sit in your CSS file (and are invalid, btw because they are proprietary but they work) and affect only IE. There may be one for :active as well.

I'm no expert, but I fake one on teh Internets

kinsman_34
Offline
newbie
las vegas
Last seen: 12 years 32 weeks ago
las vegas
Joined: 2008-09-25
Posts: 6
Points: 0

the reason i posted this was

the reason i posted this was because our programmer wants me to learn first the basic css. i know just a very little about it, and when he asked me something about a:active, i didnt know what to answer. what i did was i made a simple css code and tested it on IE 4, IE5, IE 5.5, IE 6, Opera, Firefox 3.0.2, Safari, Netscape, and the result differs on some of them. what i have in mind right now is set the button that it looks like it's active for the specific page. somewhat like when i press the contact us button, and then goes to the contact us page with the contact us button is set to active image. isn't that somewhat like cheating? thats the best thing i can think off. but that would be a dumb answer i know.

by the way, he kept saying something like on/off for the button, i dont know what he meant. is that css or javascript?

kinsman_34
Offline
newbie
las vegas
Last seen: 12 years 32 weeks ago
las vegas
Joined: 2008-09-25
Posts: 6
Points: 0

here is the html, and ill

here is the html, and ill send the links too for you to see how it looks on a browser.

http://www.theweatherreporter.com/index3.html#

<!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>
<style type="text/css">
<!--
 
body, tr, td {
background-color:#F1F1F1;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0 0 0 0;
    padding:0 0 0 0;
}
 
body {
    margin:12px 0 0 0;
}
 
#wrapper {
	position:relative;
	margin:0 auto 0 auto;
	width:1024px;
	height:768px;
}
#topnav {
    display:block;
    float:left;
	width:1024px;
	height:36px;
}
 
.nav {
    color:#000000;
    margin:10px 0 0 6px;
    padding:5px 9px 5px 9px;
    border:1px #CCCCCC solid;
    font-size:12px;
    display:block;
    float:left;
	background:url(images/btnbg.jpg) repeat-x;
}
 
.nav:hover {
    color:#000000;
    margin:10px 0 0 6px;
    padding:5px 9px 5px 9px;
    border:1px #CCCCCC solid;
    font-size:12px;
    display:block;
    float:left;
	background:url(images/btnbgover.jpg) repeat-x;
}
 
.nav:active {
    color:#000000;
    margin:10px 0 0 6px;
    padding:5px 9px 5px 9px;
    border:1px #CCCCCC solid;
    font-size:12px;
    display:block;
    float:left;
	background:url(images/btnbgover.jpg) repeat-x;
}
 
 
 
 
#leftnav {
	margin:6px 0 0 6px;
	display:block;
	width:200px;
	height:436px;
	border:1px solid #CCCCCC;
	height: 446px;
}
 
ul {
    margin:0 0 0 0;
    padding:0 0 0 0;
    list-style:none;
}
 
li {
    padding:5px;
    border-bottom:1px #CCCCCC solid;
    display:block;
}
 
h3 {
    font-size:14px;
    margin:0 0 0 0;
    padding:5px 0 5px 0;
    border-bottom:3px #CCCCCC solid;
}
 
a {
    color:#000000;
    text-decoration:none;
}
 
#insidewrap {
	background-color:#FFFFFF;
	border:1px #CCCCCC solid;
	display:block;
	float:left;
	width:1024px;
	height:732px;
}
 
-->
</style>
</head>
 
<body>
<div id="wrapper">
 
  <div id="topnav">
  <a href="#" class="nav">DAILY SHEETS</a> 
  <a href="#" class="nav">FUTURE SHEETS</a> 
  <a href="#" class="nav">SET UP</a>
 
  <a href="#" class="nav">MORE BUTTONS</a>
  <a href="#" class="nav">MORE BUTTONS</a>
  <a href="#" class="nav">MORE BUTTONS</a>
  </div>
 
 
   <div id="insidewrap">
   <div id="leftnav">
 
 
  <h3><img src="images/sports.jpg" width="25" height="25" align="absmiddle" />FOOTBALL</h3>
 
  <ul>
  <li><a href="#">National Football League</a></li>
  <li><a href="#">College Football</a></li>
  <li><a href="#">Arena Football</a></li>
  <li><a href="#">Canada Football</a></li>
  </ul><br />
 
 
  <h3><img src="images/sports.jpg" width="25" height="25" align="absmiddle" />BASKETBALL</h3>
  <ul>
  <li><a href="#">National Basketball Association</a></li>
  <li><a href="#">College Basketball</a></li>
  <li><a href="#">Women's National Basketball</a></li>
  </ul><br />
 
  <h3><img src="images/sports.jpg" width="25" height="25" align="absmiddle" />BASEBALL</h3>
 
  <ul>
  <li><a href="#">Major League Baseball</a></li>
  </ul><br />
 
  <h3><img src="images/sports.jpg" width="25" height="25" align="absmiddle" />HOCKEY</h3>
  <ul>
  <li><a href="#">National Hockey League</a></li>
  </ul>
 
    </div>
   </div>
 
</div>
 
</body>
</html>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

:active means, the event of

:active means, the event of either the mouse, keyboard, or other user agent input thingie clicking/selecting the element. And to be honest, I don't see many sites doing anything different with :active. I don't usually see a difference between the :hover and the clicking.

So if you are using pseudo elements like :active, :hover, :focus, etc then you need to know exactly what they are supposed to affect. Also, browsers differ in what they do AFTER the element has been clicked. Usually before clicking something, the focus has to be on that element first (either keyboard focus or the mouse hovering over it). After clicking, FF and IE leave the focus there, while Safari and Opera take the focus back to the top of the page (or somewhere). If you click on a thing and keep holding the button down, you can move the mouse around the page: FF and IE hold the focus, while Opera loses focus but will bring it back if the mouse goes back over the element before the button lets up.

You can see this with a funky submit button I made for a site here (not the real site, just my build of it). The tomato called "Zoek" should have three states: normal, hover, and active. I think this was built back when I didn't know anything so there may not be a :focus with :hover like there should be, I forget. There is no :visited or :link state. IE6 and 7 differ on how they can work with that button. Clicking on the tomato with Opera and moving the mouse away and back while never letting up on the mousebutton shows you what Opera does.

Quote:

what i have in mind right now is set the button that it looks like it's active for the specific page. somewhat like when i press the contact us button, and then goes to the contact us page with the contact us button is set to active image.

What you can do instead is, if this is on your navigation buttons, only mention normal and focus/hover states. Do not mention an :active state at all-- since you are by default hovering or focussing on the button in order to click it, :active will simply be the same as focus/hover.

You can add a class to the navigation item which is supposed to represent the current page, and simply give it the same styles as focus/hover.

Your menu should be a list as menu is in general considered a list of links:

  <ul id="topnav">
    <li><a href="#">DAILY SHEETS</a></li> 
    <li><a href="#">FUTURE SHEETS</a></li> 
    <li><a href="#">SET UP</a></li>
    <li><a href="#">MORE BUTTONS</a></li>
    <li><a href="#">MORE BUTTONS</a></li>
    <li><a href="#">MORE BUTTONS</a></li>
  </ul>

A ul is a block like a div is, so they can be styled the same.

The anchors can remain floated, although IE7 wants some declaration for the li's. I usually tell it display: inline since it doesn't matter what they do in a horizontal menu.

But anyway, you are currently listing an :active state but I don't see any difference between :active and :hover. So right now, you are only getting a single benefit: IE6 thinks :active means :focus, so you are getting a nice focus in IE6. But you can simplify the code (my comments in bold):

#topnav {
    display:block;<span style="font-weight:bold">/*no, divs and ul's are already blocks, this is talking to yourself!*/</span>
    float:left;<span style="font-weight:bold">/*besides, even if it wasn't a block to being with, floating things makes them blocks anyway*/</span>
	width:1024px;
	height:36px;
}
<span style="font-weight:bold">#topnav li {
  display: inline;
}
/*because I added li's to your first menu, and later you have display: block for your other li's, I made this one specifically different so they don't conflict.</span>
 
/*.nav*/
<span style="font-weight:bold">/*in HTML and CSS, we do not need classes on every child of a parent.  Instead, mention the parent, and use classes for the single or few children who are DIFFERENT from their siblings-- everyone else does default*/</span>
#topnav a {
    color:#000000;
    margin:10px 0 0 6px;
    padding:5px 9px 5px 9px;
    border:1px #CCCCCC solid;
    font-size:12px;
    display:block;<span style="font-weight:bold">/*again, all you need is the float: left;*/</span>
    float:left;
	background:url(images/btnbg.jpg) repeat-x;
}
 
<span style="font-weight:bold">#topnav a:focus</span>, #topnav a:hover, <span style="font-weight:bold">#topnav a:active, #topnav a.current /*wherever you have :hover, you likely should add :focus for those visitors who cannot or do not use mice to navigate pages... it tells them where they are.  :active here is for IE6 to do :focus and as far as I know nothing in CSS can be done for IE7*/</span> {
    color:#000000;
    margin:10px 0 0 6px;
    padding:5px 9px 5px 9px;
    border:1px #CCCCCC solid;
    font-size:12px;
    display:block;
    float:left;
	background:url(images/btnbgover.jpg) repeat-x;
}

Here, the last item listed is #topnav a.current. You can either stick this on the pages needing it by hand if this is a static page, or you can give the body of every page its own id or class (I guess id makes more sense) and use that esp if you have a dynamically generated page:

the daily sheets page where the first link goes to
meanwhile
the nav on this page is

  <ul id="topnav">
    <li><a<span style="font-weight:bold"> class="current"</span> href="#">DAILY SHEETS</a></li> 
    <li><a href="#">FUTURE SHEETS</a></li> 
    <li><a href="#">SET UP</a></li>
    <li><a href="#">MORE BUTTONS</a></li>
    <li><a href="#">MORE BUTTONS</a></li>
    <li><a href="#">MORE BUTTONS</a></li>
  </ul>

because it has the "current" class, and because we listed that in the css as having the same properties as hover, focus, and active, it can indeed help show people that they are on that page. Some developers even go so far as to change the href of the current link to nothing (#) or even remove the anchor if the li's were the ones getting all the styles-- rendering it not a link at all. I don't go that far. Let people keep clicking it if it makes them happy-- people seem to know better.

Browser differences can be a real pain in the butt but usually they can be reasonably worked around, and then in some instances you just leave it. People who use one browser are used to it working however it works and aren't going to be super surprised by its behaviour on your page. At least, that's your goal.

If you're going to be the CSS-guy for your programmer to work with, you've got a steep learning curve but it's worth it, esp when you can eliminate scripting with certain neat-o css tricks : )

CSS generally follows its rules and the slowest part is learning each browser's quirks within the CSS rules. IE's are actually the easiest to find because everyone hates them and has run into them so there are many pages explaining IE's quirks and problems.

I'm no expert, but I fake one on teh Internets

kinsman_34
Offline
newbie
las vegas
Last seen: 12 years 32 weeks ago
las vegas
Joined: 2008-09-25
Posts: 6
Points: 0

thanks stomme

you are a CSS-GOD. :thumbsup: keep helping beginners like me! Now, im learning a lot.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:you are a

Quote:

you are a CSS-GOD.

That's an illusion. Just wait til you've been pulling your hair out for a few more months.

Kinda like, if someone can bake an egg or boil water without making the kitchen explode, to me they are Bam! Emeril.

I'm no expert, but I fake one on teh Internets