css - works fine one place, not the next

  tomleady 15:19 01 Jun 2004
Locked

Hi,
I've been experimenting with new designs for my new site and came up with a menu like this after some fiddling with css:

click here

as you can see the menu buttons are all the same size and the whole box is the link.

I'm working on another project at the moment and thought i'd try and implement that menu into it, and play around with it and see what i got. so i copied the EXACT stylesheet code, and put the same class on the links as done in my site and this is what i get:

click here

as you can see, they are quite different!

so, does anyone know why its doing this? i've probably missed something stupid out. but i'm getting angry with this now!

please ignore the colours, i was just putting in random colours!

so any help is great. i probably wont be aable to reply again until tomorow.
Thanks,
Tom

  Taran 18:12 01 Jun 2004

For a start you have different body margins. One is set with the following style snippet which should really be written into your main CSS file in the body section:

<style type="text/css">

<!--

body {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
}
-->

</style>

The other page has html coded margins, which is a bit of a no no:

<body leftmargin="2" topmargin="2" marginwidth="2">

Now, you've also used the table value of height="99%" which is not an acceptable attribute if you are chasing valid code, so that's one thing to look into.

You've used broadly similar HTML but both pages break on any browser other than IE. Your first link in Mozilla has the Home and About Me links on one line, slightly hidden by the Photos link on the next line, the wallpapers and links buttons are on the following line followed by Portfolio, then CV, each on their own line and then last there's a long gap of a line or two and your Contact link is all on its own. All the links are the same width as the text in them, so in the case of your CV button, the button is two characters wide.

I've only had a brief look at the actual CSS file but there are some issues with it.

To my knowledge there is no CSS value for border-align: but you have that included in your CSS file. You have a psuedo-class specified as A.menu:HOVER which is illegal.

Let's say you want link's on a menu to do certain things. You create your menu formatting first then you create you menu links, as follows:

.menu {CSS stuff in here}

.menu A:link {CSS stuff in here}

.menu A:hover {CSS stuff in here}

The whole point to CSS is in its name: the styles cascade and are inherited from the parent value, hence anything under the style of .menu will have its formatting controlled by whatever is in the .menu brackets, unless it is in a psuedo-class of .menu like the link examples I gave above.

Because links are an intrinsic part of web pages you can't just announce half way through a style sheet that you want to make a new psuedo-class of a global element, especially when you haven't declared a parent value.

Try rethinking your stylesheet before adjusting the HTML too much.

A stylesheet should flow and you should have a parent item with subclasses of it then another parent item with subclasses.

These three affect all hyperlinks on your page.

a:link {}

a:hover {}

a:visited {}

However, if you make an id called footer, for the sake of argument, like this:

#footer {}

you could then have different links on the footer to the main body by using this:

#footer a:link {}

#footer a:hover {}

And so on.

Your Breadcrumbs are a good example of where things did not follow this rule of CSS. Right in the middle of your sheet you have this:

.breadcrumb a:link
{
color: #0099cc;
letter-spacing: 1px;
}

.breadcrumb a:visited
{
color: #0099cc;
letter-spacing: 1px;
}

.breadcrumb a:hover
{
color: #A7A7A7;
letter-spacing: 1px;
}

You missed out specifying what .breadcrumb is, so you've asked the CSS to apply a style to a series of link effects that have no parent value.

If you're at all serious about CSS I strongly suggest that you download TopStyle Lite for free click here or even better, pay for TopStyle Pro which is one of the very best web code editors available and probably THE best CSS editor out there.

You've also used some odd values like:

font-family: Verdana;

Verdana is a single font, not a font family. At the very least you should add one or more alternative system fonts and a standby, like this:

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

The abridged version of the above is that your CSS has issues.

;o)

  Taran 18:16 01 Jun 2004

Your CSS may have a headache but my spelling stinks.

What the heck is a "psuedo-class" ?

I meant, of course, pseudo-class (sigh)

  tomleady 09:18 02 Jun 2004

cheers for that Taran.

I actually solved the problem early this morning, byt putting in

display: block;

and that seemed to do the trick.

so i'll work through your suggestions and have a look at that TopStyle.


ta for the help!

Tom

  tomleady 10:48 02 Jun 2004

far from resolved really.

anyway, Taran, or any other css guru's i'm having more problems with this flipping menu.

so if any one could help me explain what is happening (or not in this case) i'd be most grateful.

ok, this may be a long one.hope the links help explain:
click here

this is the desired effect i'm aiming to get. not neccesarily the colours, etc. but generally.

anyway, it seems to work fine.

but becuase of code validation and stuff i'm trying to get it sorted.

Now in the css,the code for the menu looks like:
.menu {
background: #E00025;
border-color: #000000;
border-style: solid;
border-width: 1px;
width: 160px;
height: 30px;
font-family: Verdana;
font-size: 95%;
color: #000000;
letter-spacing: 0px;
text-align: left;
text-decoration: none;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 5px;
display:block;
margin: 2px 0 0;
}

.menu:hover {
background: #BFE1FA;
border-color: #000000;
border-style: solid;
width: 160px;
height: 30px;
font-family: Verdana;
font-weight : normal;
font-size: 95%;
color: #000000;
letter-spacing: 0px;
text-align: left;
text-decoration: none;
padding-bottom: 2px;
padding-left: 5px;
padding-top: 2px;
}


now, as taran said previous, '.menu:hover' isnt correct. so i tried 'menu a:hover' and the rollover doesnt work!

sorry if this doesnt explain it very well, but i've been workin for ages on it, and i'm confused!

  tomleady 10:51 02 Jun 2004

that code appears terrible in that post. and i realise i've made mistakes in the code, but i'm confused as to why it besically doesnt work if i put in 'menu a:hover'

  Taran 11:39 02 Jun 2004

At first glance you haven't given the style any instructions on what the link state should be for the .menu class.

You've told it what to do on hover state, but it has nothing to base its active link state on first.

Remember what I said about the giveaway being the in the name of CSS ?

The word cascade says it all. The properties you declare cover every sub-element of its class unless otherwise stated, however, some sub-elements need to know what the previous sub-element details are to function properly.

Hyperlink states are a series of steps for the various states of the link. You have active, hover, visited and so on. If you don't have an active state defined your hover effect can go a bit loopy to say the least. It often depends to a degree what you're asking the links to do but remember that word 'cascade'. The .menu class is a series of formatting for that class. The varous states of hyperlinks should be declared or one state will not know what the other is and how it should differ from it. That's an oversimplification but it dies demonstrate the point that unles you tell the stages what to do they won't do it. Miss a stage out and the following stages scratch their heads wondering what to do.

Try something like this whic is a very rapid doctoring of your code:

.menu {
background: #E00025;
border-bottom: #000000 1px solid;
border-left: #000000 1px solid;
border-right: #000000 1px solid;
border-top: #000000 1px solid;
color: #000000;
display: block;
font-family: Verdana;
font-size: 95%;
height: 30px;
letter-spacing: 0px;
margin: 2px 0px 0px;
text-align: left;
text-decoration: none;
width: 160px;
}

.menu a:link {
background: #E00025;
color: #000000;
display: block;
font-family: Verdana;
font-size: 95%;
letter-spacing: 0px;
text-align: left;
text-decoration: none;
height: 100%px;
width: 100%;
line-height: 30px;
}

.menu a:hover {
background: #BFE1FA;
color: #000000;
display: block;
font-family: Verdana;
font-size: 95%;
letter-spacing: 0px;
text-align: left;
text-decoration: none;
height: 100%px;
width: 100%;
line-height: 30px;
}

  Taran 11:45 02 Jun 2004

Sorry, I forgot to format the code. It works nevertheless and you will see that the .menu class controls all items in that class while the .menu a:link and .menu a:hover each control a specific state of the hyperlinks.

The hover won't work properly without the a:link instruction since the link will simply inherit whatever you've set out in your CSS for links in general - the default is blue underlined text.

This is thr rouble when trying to control global page elements. Web pages have certain parts that make them up and hyperlinks are one of them. If youdon't format the hyperlinks in CSS then they all share the default blue underlined text. If you do format them for a CSS class you have to 'tell' the browser what to do with each state of the link or it will default to a common ground setting (blue unerlined text).

Your CSS has lots of unnecessary and repetitive settings in it regarding border formatting but let's not tackle that before we get your other problems sorted out ;o)

  tomleady 10:10 03 Jun 2004

my email account didnt let me know there had been more replies, is that becuase i clicked resolved?

i've been doing more work to it:
click here

cheers for the above, i tried that, but the rollovers didnt work. but they work in the above link.

I'm using css with tables at the moment becuase i feel i can control tables much morr than i can with layers. i'll move on to <div> tags when i feel more confident.

i put the css file through: click here


and it said no error found.

but at the moment its working as i like. so i'll try cleaning it up a bit more.

T

  Taran 10:33 03 Jun 2004

You won't get email notification of replies to your thread if you've ticked it resolved.

On its own the code I posted does provide rollover effects but I admit I didn't try it in with the rest of your CSS file so there may be a conflicting element that I overlooked. I was a bit pushed for time yesterday ;o)

It's looking cleaner now, that's for sure. Once you get your head around CSS it can open up all kinds of possibilities and has huge advantages in sitewide alterations and even reduced server load on very large sites.

Good luck with it.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

AMD Radeon Adrenalin release date, new features, compatible graphics cards

Inside the iMac Pro - Apple's most powerful Mac yet

iMac Pro release date, UK price & specs

Comment nettoyer Windows et optimiser son PC gratuitement ?