Anyone care to critique my code below: <html> <head> <title>Title</title> <style tye="text/css"> .mainThickBoxContent { width:670px; height:505px; } .mainSampleImage { float:left; border:1px; width:450px; height:450px; margin-right:10px; margin-top:15px; } img.mainSampleImage { border:1px solid black; float:left; height:450px; margin:1px 0px 2px 0px; width:450px; } img { border:1px solid #393837; } div.float { float:left; width:80px; margin-top:10px; padding-right:8px; padding-left:8px; padding-top:7px; } div.float img { margin-left:7px; border:1px solid #393837; } </style> </head> <body> <div class="mainThickBoxContent"> <div class="mainSampleImage"> <img src="/images/bigplaceholder.jpg" class="mainSampleImage" width="450" height="450" /> <br /><p>picture caption</p> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> <div class="float"> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </div> </div> </body> </html> Code (markup):
What exactly is the problem? As far as I can see your CSS is coded correctly. A better explanation and maybe a link to your problem would be helpful.
Well, for starters you're not using a valid and complete DOCTYPE which is throwing your page into quirks mode. Semantically speaking, you have a list of images, so an unordered list instead of DIVs would be preferable. Then assign either a class (if the same styles will be used over and over again) or an ID (if the list will be unique), and then target the children directly (to cut down on the number of classes in the code).
OK, I've taken some of your advice and now I have the code below: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>_____ Sample</title> <style tye="text/css"> .mainThickBoxContent { width:690px; height:505px; } .mainSampleImage { float:left; border:1px; width:450px; height:450px; margin-right:1.8em; margin-top:.3em; } img.mainSampleImage { border:1px solid black; float:left; height:450px; margin:1px 0px 2px 0px; width:450px; } img { border:1px solid #393837; } .floatRight { float:right; } ul { float: left; width: 16em; margin: .4em; padding: 0; list-style: none; } li { float: left; width: 8em; margin: 0; padding: 0; padding-bottom:1.4em; } </style> </head> <body> <div class="mainThickBoxContent"> <div class="mainSampleImage"> <img src="/images/bigplaceholder.jpg" class="mainSampleImage" width="450" height="450" /><br /><p>picture caption</p> </div> <div class="floatRight"> <ul> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg" /> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg" /> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </li> <li> <img width="70" height="70" alt="thumbnail X" src="/images/placeholder.jpg"/> </li> </ul> </div> </div> </body> </html> Code (markup): Any idea why this code doesn't work well at all in IE, but in Firefox it works great? In IE, the div of thumbnails gets pushed below the main image div for some reason when this window is opened in a thickbox.
I tried that, but it changes nothing. The page that links to this page includes the thickbox css file which already has this style. I'm aware what it does - it removes the browser defined default padding and margin. Edit: Actually, what I just wrote is not true. It does do something, but it doesn't fix the problem.
I know you want to package this all into one block of code for the example. I'm assuming you are planning on using external stylesheets for the finished product. One thing that is a very common practice but kind of annoys me is the use of a class to float an object. It's not right or wrong but if I were going to float an object without adding any other style I would simply use style="float:right;" inline. I know a lot of people refuse to use inline style but this is roughly the same amount of code on the page and less code in your stylesheet. Ideally I would like to style most objects without adding a class or an id to the object. This can be accomplished like this. ------------------------ Stylesheet: #content p img{ float:right; } Html: <div id="content"> <p> <img alt="description" src="image" /> </p> </div> ------------------------ In that example you are applying float right to every image contained within a <p> tag that is within an element with id="content".