Forums

olison

Can anyone tell me how to fix this annoying positional problem I am having with my site

http://www.hannaford-forensic.com/

I want the side nav buttons to be aligned with the grey academy of experts box - they are fine in mozilla but unaligned in ie

this is the css I use



#buttons {
	float: left;
	width: 220px;
	vertical-align: top;
	background-image: url(images/images/icons2_03.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	border-bottom-color: #666666;
	left: 0px;
	top: 0;
	padding: 0px;
	position: relative;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}


#greybox {
	background-color: #FFFFFF;
	height: 90px;
	width: 220px;
	float: left;
	position: relative;
	left: 0px;
	background-image: url(images/law.jpg);
	background-repeat: no-repeat;
	background-position: center;
	top: 10px;
}

Any help would be much appreciated

apostrophe

I don't think I've ever seen so many unnecessary divs on one page. :D lol

You could try floating your list to the left.

#buttons ul {
background-color:#FFFFFF;
float:left;
list-style-type:none;
width:220px;
}

olison

tried that - no joy

apostrophe

You haven't tried it on the page you are linking to.

Lose this line:

ul {
list-style-position:inside;
}

mknibbs

i believe this is due to having both padding and width declared in the same section

you may want to try wrapping a div around it and giving that div padding

it way work for you

olison

bingo

thanks apostrophe

i thought that having buttons ul - display: block

would overide ul: inline

obviously not

many thanks

treehouse : what would you like to learn today?

Forums

IE positioning