cannot shift menu left (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

GolfMad -> cannot shift menu left (6/2/2008 10:57:52)

Site in early stage of development

http://www.sitesoon.co.uk/mbj/index.html

I have been working on trying to solve this for a while and would be grateful if any of the css experts could solve it for me please.

I have a two column main content area and want a menu in the left column just to line up with the left side of the header and footer and also stop it running over into the main text area which is the second column.

I have tried margins and paddings everywhere, block to inline but just cannot get it right.

Thanks to anyone prepared to have a go.



Donkey -> RE: cannot shift menu left (6/2/2008 11:23:23)


This slight change seems to work:

#menu {
display: block;
height: 225px;
margin: 0 0 0 -13px ;
width: 210px;
}



GolfMad -> RE: cannot shift menu left (6/2/2008 12:02:27)

Thanks for that Donkey

It goes some way, in FF2 yes it lines up to the left but in IE7 its about 3 or 5 pixels out still.

Also in FF2 the hover shoots the image out over the text, whcih is not good but in IE it slips underneath which is quite acceptable.

I tried reducing 50 to 0 on the z-index, looking for quick fix by not using the image move but that did not seem to stop it moving right on hover, wherelse could that be coming from I wonder.



Tailslide -> RE: cannot shift menu left (6/2/2008 12:22:08)

If you change this rule: 

#menu ul  {
	margin: 0;
	padding: 0 0 0 0;
	list-style-type: none;
}


to this: 

#menu ul li {
	margin: 0;
	padding: 0 0 0 0;
	list-style-type: none;
}


It cures the first problem and possibly the second (try removing the new rule from above first though).




GolfMad -> RE: cannot shift menu left (6/2/2008 12:46:54)

Tailslide - you are a real star, where you come up with these gems from I do not know but I am very grateful that you do.

I also have a confession to make that was messing it up, the width sizes were 230px in those menu lines but the images were only 210px, hence the x repeat that gave another 20 pixels.

Sometimes you can look at your own mistakes and just not see them as I did for hours today, others, like your gem, I would never have found.

Thanks very much indeed.

www.sitesoon.co.uk/mbj/



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125