[css-d] IE not recognizing block level element in nav?
URL: http://www.studentremix.org/test/ms/index.htm CSS: http://www.studentremix.org/test/ms/ms.css Tested on WinXP Pro: FF3, Opera 9.52, and Safari 3.1.2 display the navigation correctly, but IE 6 and 7 do not show the hover state until the cursor is hovering over the nav link's text itself, rather than just being over the area of the block level element. This hasn't happened in other sites I've made, but in comparing the different stylesheets, I don't see what the difference is. Also, IE 6 and 7 seem to add an unnecessary pixel of margin between the bottom of the nav links and the nav div's bottom border. In other words, the white background of the "current" nav link should touch the green single-pixel bottom border of the nav area, but instead, IE 6 and 7 show a small amount of the lighter green background color of the nav div area below the white. Any help on either of these issues would be much appreciated. Thanks, Daniel __ 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/
Re: [css-d] Overriding Inline Styles w Attribute Selectors & !important
Elli Vizcaino wrote:
> I was experimenting with attribute selectors to override inline
> styles and it worked in FF but of course not in IE so I was
> wondering, if there was anyway to take control of inline styles and
> have it work across browserland.
>
> CSS in stylesheet - p[style] {color: #000 !important; float: left
> !important;}
>
> HTML - I like to write
> CSS.
Hi Elli--
You actually have two separate issues going on here. The first is
IE-lte-6's lack of support for the attribute selector in CSS. Your
second issue is one of specificity.
The values for specificity are calculated like this:
a,b,c,d,e
...where...
a = author !important styles (+2 for user !important styles)
b = inline styles
c = id styles
d = class and attribute styles
e = tag styles
("*" is 0, it has no value)
So, for example, the specificity in your examples:
Your CSS:
p[style] {
color: #000 !important;
float: left !important;
}
...has a specificity of 1,0,0,1,1 in normal browsers, 1,0,0,0,1 for IE6.
Your HTML:
...has a specificity of 0,1,0,0,0 in all browsers.
To make this work cross-browser (ahem IE6), you have to class or ID the
element which will allow IE6 to pick up the style sheet styles and not
the inline styles. Interestingly enough, I noticed in testing this for
you that IE6 will acknowledge the use of !important, but only if the
rule is not re-declared within the same style block.
For example:
p.special {
color: #000 !important;
float: left !important;
}
p.special {
color: #00f;
}
...works just fine in IE6, while:
p.special {
color: #000 !important;
color: #00f;
float: left !important;
}
...does NOT. IE6 seems to over-write the !important rule, rather than
applying both rules and using specificity. When the styles are broken
out into two blocks, IE6 seems to pick it up just fine and apply
specificity correctly.
I believe IE7 and all the modern browsers support attribute selectors,
so you should be fine cross-browser land, except for IE-lte-6.
I hope that helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - "From dot concept to dot com since 1999"
"The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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/
[css-d] Overriding Inline Styles w Attribute Selectors & !important
Hello,
I was experimenting with attribute selectors to override inline styles and it
worked in FF but of course not in IE so I was wondering, if there was anyway to
take control of inline styles and have it work across browserland.
CSS in stylesheet - p[style] {color: #000 !important; float: left !important;}
HTML - I like to write CSS.
TIA,
Elli
__
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/
Re: [css-d] which ie bug is this?
> -Original Message- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > discuss.org] On Behalf Of Rick Pasotto > Sent: Saturday, August 23, 2008 12:43 PM > To: css discuss > Subject: [css-d] which ie bug is this? > > http://acc-tm.org/history.php > > The page displays fine in gecko browsers but IE acts as though there > were a clear before the right hand table. I've increased the margin-left > way more than it should need to be and that doesn't help. The problem is the "width:100%" on the tables. -- Regards, Thierry | http://www.TJKDesign.com __ 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/
[css-d] which ie bug is this?
http://acc-tm.org/history.php The page displays fine in gecko browsers but IE acts as though there were a clear before the right hand table. I've increased the margin-left way more than it should need to be and that doesn't help. -- "Without bigots, eccentrics, cranks and heretics the world would not progress." -- Frank Gelett Burgess (1866-1951) Rick Pasotto[EMAIL PROTECTED]http://www.niof.net __ 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/
Re: [css-d] Wondering why this happens
> -Original Message- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > discuss.org] On Behalf Of Lesley Binks > Sent: Saturday, August 23, 2008 2:02 AM > Cc: css-d@lists.css-discuss.org > Subject: Re: [css-d] Wondering why this happens > > Thierry Koblentz wrote: > >> -Original Message- > >> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > >> discuss.org] On Behalf Of Keith DiSarno > >> Sent: Friday, August 22, 2008 12:58 PM > >> To: [EMAIL PROTECTED] > >> Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org > >> Subject: Re: [css-d] Wondering why this happens > >> > >> Bill, > >> > >> >From what I see, you can combine the two styles because of the same name, > >> but then you have display:inline-block and block in the same style. How > > can > >> this be? Are you working around something in IE? Inline-block possibly? > > > > afaik, the "display:inline-block/display:block" hack (to trigger hasLayout) > > works only if the two are *not* in the same block declaration. > > > > > Not too sure about any hasLayout relevance yet. The 'problem' showed > in FF. Hi Lesley, If you look at the rules Bill suggested - the ones with a /*** ADD ***/ comment in your styles sheet - you'll see that it has to do with hasLayout. These declarations are used here to contain floats, "overflow:hidden" is for good browsers and the switch of display triggers "hasLayout" in IE (note that "overflow" works in IE 7). -- Regards, Thierry | http://www.TJKDesign.com __ 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/
Re: [css-d]
On 23 Aug 2008, at 17:08, Marc Hilt wrote: > Hi, I am trying to use a separate css sheet for ie, it works in IE > but Fire > fox displays this in the upper left corner: > it > then shows > in the upper corner of IE6, this whole thing is driving me nuts. > What is the correct syntax? I searched the web and can not come up > with > anything addressing the firefox issue. > Here is the whole line which hides in IE but not FF: > The closing tag is malformed. Should be: Jonny __ 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/
[css-d]
Hi, I am trying to use a separate css sheet for ie, it works in IE but Fire fox displays this in the upper left corner: it then shows in the upper corner of IE6, this whole thing is driving me nuts. What is the correct syntax? I searched the web and can not come up with anything addressing the firefox issue. Here is the whole line which hides in IE but not FF: Thanks Marc __ 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/
Re: [css-d] Wondering why this happens
Thierry Koblentz wrote: >> -Original Message- >> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] >> discuss.org] On Behalf Of Keith DiSarno >> Sent: Friday, August 22, 2008 12:58 PM >> To: [EMAIL PROTECTED] >> Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org >> Subject: Re: [css-d] Wondering why this happens >> >> Bill, >> >> >From what I see, you can combine the two styles because of the same name, >> but then you have display:inline-block and block in the same style. How > can >> this be? Are you working around something in IE? Inline-block possibly? > > afaik, the "display:inline-block/display:block" hack (to trigger hasLayout) > works only if the two are *not* in the same block declaration. > > Not too sure about any hasLayout relevance yet. The 'problem' showed in FF. Here's the original : http://herlug.org.uk/gimping/test3.html Note how, in FF 2,x at least, the background graphic doesn't extend the height of the menu. Here's half a fix : http://herlug.org.uk/gimping/test2.html which seems to have the desired effect in FF 2,x. And here's the full fix : http://herlug.org.uk/gimping/test.html which is very similar to the half fix in FF2.x. The results are similar in IE7. Regards Lesley __ 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/
