devzero Posted August 21, 2006 Share Posted August 21, 2006 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 More sharing options...
S@m Posted August 21, 2006 Share Posted August 21, 2006 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 More sharing options...
devzero Posted August 22, 2006 Author Share Posted August 22, 2006 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 More sharing options...
Reg Edit Posted August 23, 2006 Share Posted August 23, 2006 The images are 200*40px. Any ideas to how i could solve this?Using your original code, adding width and height to this style solves it:.menulvl_0 { height: 40px; width: 200px; border: 0px; padding: 0px; margin: 0px; display: block; text-decoration: none;} Link to comment Share on other sites More sharing options...
devzero Posted August 23, 2006 Author Share Posted August 23, 2006 Jepp, that worked like a charm. Stupid of me not trying it tho Thank you so much for helping me. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now