I hate to be a pedant but "descendant selectors" will return much better results.
-----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nick Gleitzman Sent: Saturday, 25 June 2005 7:21 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Picky, picky, picky On 25 Jun 2005, at 4:37 PM, Cole Kuryakin - x7m wrote: > I'm almost embarrased to ask this because it's such a minor detail, > but it's driving me crazy. > > First, the link: http://www.x7m.us/_testing/index2.htm > > This is a new design I'm just starting to build. If you look at it in > FF/Netscape/Opera it's perfect (the latest versions of those browsers, > anyway). If you look at it in IE6 the headline image (Quality. > Reliability. Reputation.) within the h1 sits about 6 pixels lower than > it should, which of course pushes everything else down as well. > > This head is suppose to align with the nav bar you see on the left. In > FF, Netscape, and Opera it does. Perfect. IE, of course, well... > > I've tried everything I can think of to correct this, and I've come to > the conclusion that it's something going on with the h1. But I've > tried everything there too, including zeroing the top margin and top > padding on the h1 without result. Besides, all of these things are > already zeroed at the top of the style sheet. > > Can someone spot the error of my ways when it comes to the IE > rendering? > > Cole Add this: div { border: 1px solid #f00 } to your css and look at the page in IE6, compared to FF. You'll see that the extra space is actually being generated by your div id="topEdgeH". Doesn't affect the logo placeholder, because it's positioned absolutely - but it does push the <h1> down. Fix? You could play with the div id="topEdgeH" to try and stop the extra space (height? line-height?), or simply add _margin-bottom: 290px; to it for IE6 - adjust to taste. Other comments: I realise this is a WIP, but your <h1><img></h1> format is completely inaccessible - you don't even have alt text. I suspect if you run your CSS through the validator, you'll find some errors - I noticed some instances of 'color: Black', and I don't think you can use upper case for color names (although I'll happily stand corrected). More generally - I really don't think CSS needs to be this complex. I believe you're creating more potential management headaches for yourself with your CSS than you need to. Try Googling 'descendent selectors' and learn how to get rid of that long list of classes. If they're in your CSS, they're cluttering your markup, somewhere (presumably on L2 pages). And what if you decide to change the colour of the elements you have styled by 'class='red' to another colour? Try to label CSS rules for function, rather than appearance. You'll sleep better somewhere down the line... And one design comment: your main headline (the one in question) has a LH border, imaged, of red. So do your links, on hover. I immediately presumed that the headline was a link as well... All the above just my 2c, but HTH - Nick ___________________________ Omnivision. Websight. http://www.omnivision.com.au/ ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
