CSS driving me up the wall

SiD the Turtle · 21 Oct 2006 at 14:29

Decided to finally get to grips with CSS, and you know the story, IE is being a PITA. Please see this very basic page which I'm in the process of building to understand CSS:

http://www.sidtheturtle.co.uk/test/index.htm

In firefox it looks fine. In IE however, when you hover over the links it doesn't change colour properly. Firefox changes the whole background colour, but IE doesn't. Also at the start of the CSS if I put the styles for a:active and a:visited after a:hover it ignores the style completely. (All the CSS is in the page for the time being).

Help!

Slogan · 21 Oct 2006 at 15:33

Have you got the link properties in the right order within the CSS?

I'm new to CSS myself and my book

D) said it's a case of getting the order right (and them working) or not.

Apologies if you're a bit more advanced than that.

SiD the Turtle · 21 Oct 2006 at 15:53

I have no idea

Slogan · 21 Oct 2006 at 16:02

a:link {
color:black;
}

a:visited {
color: navy;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color: aqua;
background color: navy;
}

--

That's the order they should be in. Or so I'm led to believe.

Augmented · 21 Oct 2006 at 16:06

Slogan said:
That's the order they should be in. Or so I'm led to believe.

Indeed it is, and can be conveniently memorised with:

LoVe/HAte

SiD the Turtle · 21 Oct 2006 at 16:13

Thanks for that tip guys. Any reason why it must be in that order?

Mekrel · 21 Oct 2006 at 16:15

The problem is that Internet explorer and firefox handle anchor tags differently.

Firefox will let the anchor tag fill the space of its parent element. In other words firefox is making the anchor, the same size as the menuitem div. IE on the other hand makes it only apply to the size of the writting contained within it.

Firstly, you can't use menuitem with an ID (#) as id elements can only occur once in an HTML page, you need to make them classes and style them in the CSS with (.) and not (#).

Even then, using nested divs for this is messy. Use an inline unordered list.

Then what you have to do, is use padding on the anchor tags so that they make the 20px menu box. That way the anchor tag in IE will cover right up to the edge as you want it to.

LazyManc · 21 Oct 2006 at 16:21

As mekrel said, use an unordered list ( <ul> ) for your navigation, makes it much easier to handle and it's semantically correct.

see: http://css.maxdesign.com.au/listamatic/ for examples of how to do this.

Also, you're using the xhtml strict doctype but your line break tags aren't closed properly. Use <br /> not <br>

SiD the Turtle · 21 Oct 2006 at 16:31

Ah thanks guys. I did think going back to nested divs was a bit messy and almost layout table like. I'll investigate using lists.

Also yeah yeah I know about the <br/> tags I just threw them in so you can see the content div