RE: [WSG] Picky, picky, picky
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 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 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
**
Re: [WSG] Picky, picky, picky
On 25 Jun 2005, at 8:20 PM, Cole Kuryakin - x7m wrote: The height of the div was already declared (although 10px instead of 9px like it should be - fixed that). Line-height, zero padding hasn't solved the problem. I actually had a similar problem - but only with 2px extra space - on a recent build. I fixed it by using a 12px high gif as the background to a 10px high div... maybe a variation on this technique is worth a try? Yep, that works, but now the CSS won't validate due to the "_". Complete validation - previous to deployment - is a must. Well, if 100% hack-free code is a requisite, then maybe you have to live with the extra space. After all, your code is correct - it's IE that's broken. You can't take responsibilty for that... N ___ 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 **
Re: [WSG] Picky, picky, picky
> 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".
Added the border to the divs and you're right. it is the topEdgeH that's
causing the problem.
> Fix? You could play with the div id="topEdgeH" to try and stop the
> extra space (height? line-height?)
The height of the div was already declared (although 10px instead of 9px
like it should be - fixed that). Line-height, zero padding hasn't solved the
problem.
>...or simply add
> _margin-bottom: 290px;
>
> to it for IE6 - adjust to taste.
Yep, that works, but now the CSS won't validate due to the "_". Complete
validation - previous to deployment - is a must.
I did validate the style sheet per your recommondation and it had one error
(didn't include "px" on one declaration) which is now fixed, but that
correction did not fix the issue of the bloated div.
Interestingly, as a test, I put the image directly into the html (within the
topEdgeH div) and the problem went away - no more bottom padding or what
appears to be bottom padding.
Your other general comments are well taken. I'm just building the structure
of this site just to get the design aspect solid - Accessibility, standards
and better semantic issues will follow.
Good point on the hover effect and the red border on the image headline
being potentially confusing.
Anyway, I'm still stuck with this bloated div in IE - this is the first time
I've encountered a problem like this.
Anyone else have any suggestions on how to fix it? I'd really rather not put
the image within the HTML.
Cole
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
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 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 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
**
[WSG] Picky, picky, picky
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
[WSG] Picky, picky, picky
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
