HTML list problem?

Phaser · 21 Jun 2006 at 19:21

Hi all,

Seem to be having a problem with my lists on a new design im working on.

Can't get them to start from the left?

http://dzire-live.com/intense1/

CSS is here: http://dzire-live.com/intense1/screen.css

Only just started using <li>'s for navigation instead of tables so im pretty new to it.

Cheers.

Beansprout · 21 Jun 2006 at 19:29

Code:

div#nav ul{
padding:0;
}

<ul> has a default padding - just need to remove it

Phaser · 21 Jun 2006 at 19:32

Didn't know that mate, cheers.

Working fine now. Well, in FF anyway.

Phaser · 21 Jun 2006 at 19:45

Another quicky.

I've got it so that the text background goes white when you scroll over, how do I do this so that the whole <li> blue and the text color goes to white?

This is how I have it atm..

#nav {text-decoration:none;
width: 200px;
height: 200px;
float:left;
clear:none; }

div#nav ul{padding:0;}

#nav ul a{
width:165px;
font-size:100%;
text-decoration:none;
color:#49C2F7;}

#nav li
{line-height: 25px;
list-style-type: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
text-transform: capitalize;}

#nav li a:hover{color: #FFF; background-color: #FFF;}

Thanks.

Beansprout · 21 Jun 2006 at 19:53

What you do (or can do, rather) is force the <a> to take up all the width, then you change the <a>'s properties rather than the <li>'s, mainly because of the a:hover support.

First of all make the <a> use the available width:

Code:

html>body #nav li a {
width:auto;
}

Then change the font and background colour via a:hover:

Code:

#nav li a:hover {
background: blue;
color: #fff;
}

Also, add some padding to the a{} if you want to, er, um...pad it [the color] out a bit

Phaser · 21 Jun 2006 at 20:01

Still seems to be just highlighting the text mate and nothing else?

Phaser · 21 Jun 2006 at 20:12

Ignore.

Beansprout · 21 Jun 2006 at 20:12

Phaser · 21 Jun 2006 at 20:15

Sorry mate, it wasnt working! It only changed the text to white when I scrolled over that.

Really confused now, going to give up and have a bath!

#nav ul a{
width:200px;
font-size:100%;
text-decoration:none;
color:#49C2F7;}

#nav li
{line-height: 25px;
list-style-type: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
text-transform: capitalize;}

#nav li a {
padding-left: 5px;

width:auto;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-size: 11px;
color: #49C2F7;
}

#nav li:hover {
background: #49C2F7;
color: #fff;}

#nav li a:hover {
padding-left: 5px;
color: #fff;}

Thats the code.

Beansprout · 21 Jun 2006 at 20:23

Whoops, ignore me I talk rubbish. display:block is kinda crucial

Code:

#nav li a {
padding-left: 5px;
display:block;
width:auto;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-size: 11px;
color: #49C2F7;
} 

#nav li a:hover {
padding-left: 5px;
background: #49C2F7;
color: #fff;
}

Remove the #nav li:hover section - the reason you can't use it is because the ever-wonderful IE doesn't support :hover /etc on anything apart from <a>'s

Phaser · 21 Jun 2006 at 20:34

Thats great mate. Thanks a lot, appreciate it.

Phaser · 22 Jun 2006 at 07:10

http://dzire-live.com/intense1/index.php

Anyone know why the content div is not fixing to the right when viewed in IE?

Cheers.

Phaser · 22 Jun 2006 at 20:27

Can anyone help?

Fine in FF but all misaligned etc in IE.

Everyone always says FF causes problems but its always the other way round for me!