I'm trying to figure out why content shows more to the center/right on IE 6 than on IE 7 or firefox. On IE 7 and firefox the content shows corretly, but on IE 6..the title and the image thumbnails appear towards the center/right of the page. This is where I have the page: http://absolute-studios.com/test/test.html CSS: http://absolute-studios.com/test/css.css Anyone please could suggest or guide me what I'm doing wrong. Thank you, Johan,
It just might be that, with all the bazillion nested divs you have (and you didn't close a bunch of them within #menu), IE6 might be adding your padding to every single div instead of just the outers possibly. Here's another way to do it, with the images still in the HTML since I'd consider it content and not background images. I have a > in the h1 which doesn't seperate content from presentation, but foo. <!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=UTF-8" /> <title>Estrellas</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <h1> > Estrellas</h1> <div id="menu"> <ul class="thumb"> <li><a href="barbara.html"><img src="images/estrella_1.jpg" alt="Barbara Achaval" />Barbara Achaval</a></li> <li><a href="leo.html" ><img src="images/estrella_2.jpg" alt="Leo Martin" />Leo Martin</a></li> <li><a href="marylin.html"><img src="images/estrella_3.jpg" alt="Marylin Russel" />Marylin Russel</a></li> <li><a href="luis.html"><img src="images/estrella_4.jpg" alt="Luis Gizman" />Luis Gizman</a></li> <li><a href="sasha.html"><img src="images/estrella_5.jpg" alt="Sasha Smith" />Sasha Smith</a></li> <li ><a href="charly.html"><img src="images/estrella_6.jpg" alt="Charly Loren" />Charly Loren</a></li> <li ><a href="monella.html"><img src="images/estrella_7.jpg" alt="Monella" />Monella</a></li> <li ><a href="rodrigo.html"><img src="images/estrella_8.jpg" alt="Rodrigo Baes" />Rodrigo Baes</a></li> <!--- there was a link here for santiago.html but no image for him/her--> <li><a href="camila.html"><img src="images/estrella_10.jpg" alt="Camila Victoria" />Camila Victoria</a></li> <li><a href="luciano.html"><img src="images/estrella_11.jpg" alt="Luciano Roggio" />Luciano Roggio</a></li> </div> </body> </html> Code (markup): Your css would have stuff like * { <---------- you didn't have the actual selector * margin:0; padding: 0; } img { border: none; <---- eliminates the need for border="0" in all your images width: widthofimageinpx; <---I dunno if this would work but all your images are the same size as they are thumbs... height: heightofimageinpx; } body { stuff... } h1 { text-transform: uppercase; font: normal Verdana, Arial, sans-serif; color: #fff000; margin and padding to taste; } #menu { stuff and width, or put a width in the ul } ul.thumb { position: relative and set a width so you can float stuff } ul.thumb li { text-transform: uppercase; <--so that if you change your mind and don't want all caps in the future, you can change via CSS!! height: whateverpx; width: whateverpx; <---big enough size for the images and the text. Also needed to float them; float: left; margin and padding to taste; } you'd set the size of your li's to whatever you want for the images, plus room for the text to sit underneath. Keep the background colour so you can see the sizes and where they end up. You could set the #menu div to a fixed width and float all the li's left, where they'll stay next to each other and then wrap below when they reach the width of #menu. Equal padding will make them sit like they are now. The thumb class of ul isn't necessary now, but I'm assuming you'll have more stuff on the site. Now, I dunno that a list is the best thing, but I think it's better than a div for every image, and there are probably thumbscripts out there, but it's an idea. Also, a cool CSS trick: on hover of the starlets' pictures, you can have a bigger one show up somewhere else on the page: http://www.pmob.co.uk/pob/disjointed1.htm *edit, just thought of something; I've never nested an image inside an anchor, dunno if you can do it that way...