Qu

[I, Brian]

I'm still new to CSS, and trying to mix a couple of styles from different sites.

For a new navigation menu for one of my (always non-commerical) sites, I'm using the attribute:

Width: 100%;

In IE, it makes the whole cell highlight - but in Mozilla Firebird it only highlights aross the text - leaving the right-hand side of the cell unaffected by hover colour changes.

It's hard to explain and my nav is not up - but if you check the following site, the left hand nav works on a similar principle - highlighting a left link in IE 6 and Firebird will show different:

http://www.ofpec.com/missions/view_type.php?type=1

Question is, is this a problem with the CSS or Firebird?

Any help much appreciated.

[yngwin]

Whenever there is a difference between IE and a Mozilla-based browser (such as Firebird), you can safely assume that Mozilla gets it right and IE is wrong.

For what you want you probably need to add a display:block to the a or li element in your css.

[blufive]

width on an inline element (like <a>) is meaningless. From theCSS2 spec:

'width'
[...]
This property specifies the content width of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements.

As yngwin said, you should apply "display:block;" to the <a> elements

[Paul O'B]

What they've already said above

a.leftlink{display:block}

Paul

[I, Brian]

Thanks for the replies - I'm not quite sure what "display block" means, though.

Do you mea

A.leftLink:hover {
BORDER-RIGHT: #999999 1px solid; etc
}

is the "display:block" or is "display:block" an actualy command?

Feel free to link to anything you useful - technical langage always goes over my head - I'm very much a trial and error person.

[yngwin]

Yes something like

a.leftlink {
   display:block;
   width:100%;
   color:#00c;
   }
a.leftlink:hover {
   background:#ccc;
   border: 1px solid #999;
   }

[I, Brian]

Thanks for all the help. I'm still having serious problems, though, so I'll get my files uploaded and start a new thread to try and work out what little thing in the code I've messed up on.

[xhtmlcoder]

Display block in CSS displays the styled contents much like an XHTML Block level element for example; <p>, <div> or <h1> essentially most block level elements leave vertical white space below themselves.