Jump to content

Images inside a tags with wrong height.


devzero
 Share

Recommended Posts

I have several pictures i want to stack verticaly without any space between them (for creating a menu). I have tried to get them to stack without any spacing between, but so far i have had limited luck. They show ok in IE 6 but not in firefox 1.5. The images are 200*40px. Any ideas to how i could solve this? I have removed some scripting on the images that produces a rollover effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head>	<style type="text/css">body {background-color:green;}.menuItemImage{	border: 0px;	padding: 0px;	margin: 0px;}.menulvl_0 {	border: 0px;	padding: 0px;	margin: 0px;	display: block;	text-decoration: none;}.menuContainer{	float: left;}.subMenuContainer{	width: 200px;	position: absolute;	top: 40px;	left: 200px;}	</style></head><body><div id="menuContainer" class="menuContainer">	<a href="#" onclick="MenuClicked(0);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Forside" /></a>	<a href="#" onclick="MenuClicked(2);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Min%20side" /></a>	<a href="#" onclick="MenuClicked(4);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Audun" /></a>	<a href="#" onclick="MenuClicked(6);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Granli" /></a>	<a href="#" onclick="MenuClicked(5);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Borgjalia%2016,%20B%C3%B8" /></a></div>		 <div id="subMenuContainer0" class="subMenuContainer">	<a href="#" onclick="MenuClicked(1);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Informasjon" /></a>	<a href="#" onclick="MenuClicked(3);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Forside" /></a></div></body></html>

Link to comment
Share on other sites

I would use a list to do that.Then you can control the spacing between the li's pretty easy.Here is a great resource for lists:http://css.maxdesign.com.au/IE will toss extra padding in the list elements though, so I would create 2 style sheets. 1 for IE and 1 for everyone else. Use conditional commenting to tell IE what to do.

<!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="style_IE.css" /><![endif]-->

Link to comment
Share on other sites

I would use a list to do that.Then you can control the spacing between the li's pretty easy.Here is a great resource for lists:http://css.maxdesign.com.au/IE will toss extra padding in the list elements though, so I would create 2 style sheets. 1 for IE and 1 for everyone else. Use conditional commenting to tell IE what to do.
<!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="style_IE.css" /><![endif]-->

I tried doing it within a list, with no diffrence in firefox, could you explain a bit more how you would suggest i do it to remove the spaces between the images?
#menuContainer ul { 	list-style-type: none; 	margin: 0;	padding: 0;	height:150px;	}	</style></head><body><div id="menuContainer" class="menuContainer">	<ul>		<li><a href="#" onclick="MenuClicked(0);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Forside" /></a></li>		<li><a href="#" onclick="MenuClicked(2);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Min%20side" /></a></li>		<li><a href="#" onclick="MenuClicked(4);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Audun" /></a></li>		<li><a href="#" onclick="MenuClicked(6);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Granli" /></a></li>		<li><a href="#" onclick="MenuClicked(5);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Borgjalia%2016,%20B%C3%B8" /></a></li>	</ul></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...