I have posted here a couple of times before. I'm overhauling a non-profit's table-based site to CSS. I've now posted my testing pages to their site: their old (and still "real") site is http://www.unemployedhelp.on.ca/clientswelcome.htm, while my version is http://www.unemployedhelp.on.ca/clientswelcome.html (the suffix ".html" is the only difference in the names). My (bloated) stylesheet is at /images/clientstyle.css.
My biggest headache is at http://www.unemployedhelp.on.ca/vrc/index.html. I wanted to make the h3 headers have a 46x46 px graphic on the left, then position the text of the "h3"s to the immediate right of their respective graphics. In Firefox, it works. In IE6, of course, it doesn't. The graphics show up in the right place, but the "h3"s get knocked down to the bottom of the page. Here is the relevant portion of the XHTML: <div id="vrcResumes"> > <h3><span>Résumés</span></h3> > </div> > > (Repeated for "vrcCoverLetters" and "vrcInterviews") > And here is the relevant portion of CSS code: #vrcResumes, #vrcCoverLetters, #vrcInterviews { > position: relative; > } > > #vrcResumes h3, #vrcCoverLetters h3, #vrcInterviews h3 { > height: 46px; > margin: 0 0 0 0; > } > > #vrcResumes h3 { > background: url('vrc_resumetitle.png') left top no-repeat; > } > > #vrcCoverLetters h3 { > background: url('vrc_covertitle.png') left top no-repeat; > } > > #vrcInterviews h3 { > background: url('vrc_inttitle.png') left top no-repeat; > } > > #vrcResumes h3 span, #vrcCoverLetters h3 span, #vrcInterviews h3 span { > display: inline; > font-family: 'Arial Narrow', Arial, Helvetica, sans-serif; > font-size: large; > position: absolute; > left: 46px; > bottom: 0; > padding-left: 5px; > vertical-align: middle; > letter-spacing: 2px; > height: 28px; > width: 90%; > color: #FFFFFF; > background-color: #0F3063; > border-top: 1px solid #4E688D; > } > I know it has something to do with my use of absolute positioning in the "spans", but I don't know how to go about it in another way. Any tips on how to whip IE6 into shape, or do I just bite the bullet and do a full image replacement on the entire h3 element? Thanks in advance. Darren Best ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/
