Hello, i have a "small" problem when i try to do something with <div> tags and css, please take a look at what i got : http://www.searchsubmit.org/tmepo/ Im not sure why, but as you can see there is some white space below those images, i dont want that white space , what i want is that the bottom borders are just below the images. I get the same for Firefox and IE. Thanks for helping. David.
Assuming those buttons will be links, give this a try <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style> #wrap { width: 599px; margin: auto; } #imgmenu { width: 599px; border: 1px solid #F60; clear: both; display: table; list-style: none; height: 63px; margin: 0; padding: 0; } #imgmenu li{ float: left; margin: 0; padding: 0; list-style: none; height: 63px; } li a{ display:block } a img{ border:none } </style> </head> <body> <div id="wrap"> <ul id="imgmenu"> <li><a href=""><img src="http://www.searchsubmit.org/images/header_01.gif" width="81" height="63" /></a></li> <li><a href=""><img src="http://www.searchsubmit.org/images/header_01.gif" width="81" height="63" /></a></li> </ul> </div> </body> </html> Code (markup):
Thank you for replying, this does the trick, but since the "display" is set to "table", i think you dont need to specify the height, this way you can change the pictures and put some with different height and wont affect the design, am i correct?
I believe you're right. I was just playing around with height before I added block-level links (which sorted the issue) and I didn't bother removing the height specification's I'd added before I posted the markup Feel free to remove them