Michael Beaudoin wrote: >>> Would someone please go to http://www.mhinonline.com/dev and see >>> what I have missed, or didn't do? > >> 545 + 143 = 688, which is 18px too wide. >> Firefox just follows your orders and lets the image stick out. IE >> doesn't. It tries to fit it in somehow. (without real success, but >> by the gap you can see it tried ;-)) > > How would I best change this? I guess I could crop the image, but > it would take a bit of the orange bar away.
I would put the images inside subheadings (which incidentally is where they belong ;-)). That way they are outside the paragraphs, and do not have to sit within the paragraphs' paddings. Your code would look like this: <h2><img .....></h2> <p>bla bla etc. </p> <h2><img .....></h2> <p> ..... etc. The <h2> elements can be given the left padding but not the right padding, and that way they'll fit inside the #textarea div. I would also advise you to use proper HTML headings and other elements for the rest of your site. Looking at the homepage for example, I see you have a paragraph with inside it <span>s for bullets to emulate a list. Why not just use <ul> <li>....</li> <li>....</li> </ul> ? Then use CSS for the styling, and your page will make sense for visitors with or without CSS. Using proper headings (even if you use images with the title text in the alt attribute) will also give the site a better visibility in search engines, so that's one more reason to use semantic HTML. -- Els ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
