Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Arnaud Guéras]

I hope you will correct your HTML.

You have a lot of block level elements in inline elements like this : 
something

You can't do that kind of thing.

Please try to correct your HTML before to make your CSS. You will not have any 
problem as you have now.

And remove the comment line before the doctype. you can only have a xml prolog 
before the doctype.
And I thing if you have comment before doctype your IE browser version 7 and 8 
are rendering the website in quirksmode (IE 5.5 mode)

PS :  sorry for my bad english. I'm french and i'm trying to improve my english 
:D

On Jun 3, 2010, at 12:14 PM, Thierry Koblentz wrote:

>> I have a class with position:relative on the 'a' tag, then absolute  
>> on
>> the hover state. The positioning doesn't work correctly in either FF
>> or Chrome. Works fine in every other browser. Haven't been able to
>> find any possible reason in my Google searches thus far. Anyone else
>> experience something like this?
>> 
>> All relevant CSS has been placed in the head for debugging.
>> 
>> My only possible lead so far:
>> I've placed a border around the entire 'a' tag contents, and it's not
>> wrapping around any of it. So my assumption is that these two  
>> browsers
>> are not reading the correct positioning, if that makes sense??
>> 
>> LINK:
>> http://www.loctiteproducts.com/super-glues-debug.shtml
> 
> For the border to show around the element try:
> 
> a.tooltip {display:block;}
> 
> That may also fix the behavior you're looking for.
> 
> As a side note, you cannot have P (or any block-level elements) in  
> anchors.
> 
> 
> --
> Regards,
> Thierry
> www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

I've figured out a solution. Thanks for the replies, they are very  
helpful.

GS




> __
> 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/

__
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/
__
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/

Re: [css-d] interesting nav issue - please help :)

[Theresa Mesa]

> Hey, I'm loving this fix, too.

Theresa


> 
> PERFECT THANK YOU :)
> 
> This does create a space where the scroll bar would be but it makes sense to
> me to have an inactive scroll bar per se rather than a scroll bar that does
> not view additional page information. 
> 
> Cheers :)
> 
> 

__
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/

Re: [css-d] interesting nav issue - please help :)

[Matthew P. Johnson]

-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Thierry Koblentz
Sent: Thursday, June 03, 2010 9:28 AM
To: 'Theresa Mesa'; 'Matthew P. Johnson'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] interesting nav issue - please help :)

> How is it inefficient to add html {height: 100.1%} to your CSS, which
> immediately applies this to all pages without so much as a how-do-you-

I believe using overflow-y:scroll is a bit better as it does not create a
scroll bar per se.
 


PERFECT THANK YOU :)

This does create a space where the scroll bar would be but it makes sense to
me to have an inactive scroll bar per se rather than a scroll bar that does
not view additional page information. 

Cheers :)

__
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/

[css-d] OT: IE seems to be improving!

[Jay Tanna]

Just seen Microsoft's own "Cross-browser Test Results Summary" and it has 
scored 100% in everything!  Now this must be an improvement!  the test result 
is for IE9 so don't get carried away soon.



hth




  
__
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/

Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Greg Smith]

On Jun 3, 2010, at 12:23 PM, Peter Bradley wrote:

> Ar 03/06/10 20:09, ysgrifennodd Peter Bradley :
>>
>> The validator gives 117 errors, Greg.  I guess that this means that
>> different browsers are going to try to recover in different ways.   
>> They
>> don't look too hard to cure.  Many of them are to do with the product
>> table you've included as a comment.  Getting rid of that might get  
>> rid
>> of a lot of them.  Then there's the usual crop of missing alt
>> attributes, which I wouldn't think are affecting your layout; but
>> there's also a fair few where you appear to have used elements in  
>> places
>> where they're not allowed.
>>
>> I'd have a go myself, but I'm a bit busy at the moment.  If it was  
>> me,
>> though, that's where I'd start.  The worst that can happen is that  
>> it'll
>> give you a clean basis to work on.
>>
>> Cheers
>>
>>
>> Peter
>>
>>
> Couldn't resist a little play!
>
> Yeah.  Cutting out the commented product table reduces the errors to  
> 38
> or so.  Your main problem then is that you have block elements like  
> 
> and  and so on, inside inline elements - notably .  You  
> can't do
> that.  So you need to replace stuff like:
>
> A heading
>
> with something like:
>
> A heading
>
> This will likely mess up your CSS, so you'll have to mess with it to  
> get
> the look back to what it should be.
>
> After that it looks like all you'll have to worry about are some
> unclosed self-closing elements like  and some missing  
> attributes.
>
> Cheers
>
>
> Peter
>
> -- 
> http://www.peredur.net

Thanks Peter, I appreciate the input!

GS



> __
> 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/

__
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/

Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Greg Smith]

On Jun 3, 2010, at 12:14 PM, Thierry Koblentz wrote:

>> I have a class with position:relative on the 'a' tag, then absolute  
>> on
>> the hover state. The positioning doesn't work correctly in either FF
>> or Chrome. Works fine in every other browser. Haven't been able to
>> find any possible reason in my Google searches thus far. Anyone else
>> experience something like this?
>>
>> All relevant CSS has been placed in the head for debugging.
>>
>> My only possible lead so far:
>> I've placed a border around the entire 'a' tag contents, and it's not
>> wrapping around any of it. So my assumption is that these two  
>> browsers
>> are not reading the correct positioning, if that makes sense??
>>
>> LINK:
>> http://www.loctiteproducts.com/super-glues-debug.shtml
>
> For the border to show around the element try:
>
> a.tooltip {display:block;}
>
> That may also fix the behavior you're looking for.
>
> As a side note, you cannot have P (or any block-level elements) in  
> anchors.
>
>
> --
> Regards,
> Thierry
> www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

I've figured out a solution. Thanks for the replies, they are very  
helpful.

GS




> __
> 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/

__
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/

Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Peter Bradley]

Ar 03/06/10 20:09, ysgrifennodd Peter Bradley :
>
> The validator gives 117 errors, Greg.  I guess that this means that
> different browsers are going to try to recover in different ways.  They
> don't look too hard to cure.  Many of them are to do with the product
> table you've included as a comment.  Getting rid of that might get rid
> of a lot of them.  Then there's the usual crop of missing alt
> attributes, which I wouldn't think are affecting your layout; but
> there's also a fair few where you appear to have used elements in places
> where they're not allowed.
>
> I'd have a go myself, but I'm a bit busy at the moment.  If it was me,
> though, that's where I'd start.  The worst that can happen is that it'll
> give you a clean basis to work on.
>
> Cheers
>
>
> Peter
>
>
Couldn't resist a little play!

Yeah.  Cutting out the commented product table reduces the errors to 38 
or so.  Your main problem then is that you have block elements like  
and  and so on, inside inline elements - notably .  You can't do 
that.  So you need to replace stuff like:

A heading

with something like:

A heading

This will likely mess up your CSS, so you'll have to mess with it to get 
the look back to what it should be.

After that it looks like all you'll have to worry about are some 
unclosed self-closing elements like  and some missing attributes.

Cheers


Peter

-- 
http://www.peredur.net

__
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/

Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Thierry Koblentz]

> I have a class with position:relative on the 'a' tag, then absolute on
> the hover state. The positioning doesn't work correctly in either FF
> or Chrome. Works fine in every other browser. Haven't been able to
> find any possible reason in my Google searches thus far. Anyone else
> experience something like this?
> 
> All relevant CSS has been placed in the head for debugging.
> 
> My only possible lead so far:
> I've placed a border around the entire 'a' tag contents, and it's not
> wrapping around any of it. So my assumption is that these two browsers
> are not reading the correct positioning, if that makes sense??
> 
> LINK:
> http://www.loctiteproducts.com/super-glues-debug.shtml

For the border to show around the element try:

a.tooltip {display:block;}

That may also fix the behavior you're looking for.

As a side note, you cannot have P (or any block-level elements) in anchors.


--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
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/

Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Peter Bradley]

Ar 03/06/10 19:51, ysgrifennodd Greg Smith :
> I have a class with position:relative on the 'a' tag, then absolute on
> the hover state. The positioning doesn't work correctly in either FF
> or Chrome. Works fine in every other browser. Haven't been able to
> find any possible reason in my Google searches thus far. Anyone else
> experience something like this?
>
> All relevant CSS has been placed in the head for debugging.
>
> My only possible lead so far:
> I've placed a border around the entire 'a' tag contents, and it's not
> wrapping around any of it. So my assumption is that these two browsers
> are not reading the correct positioning, if that makes sense??
>
> LINK:
> http://www.loctiteproducts.com/super-glues-debug.shtml
>
> Thanks,
> GS
>
>
>

The validator gives 117 errors, Greg.  I guess that this means that 
different browsers are going to try to recover in different ways.  They 
don't look too hard to cure.  Many of them are to do with the product 
table you've included as a comment.  Getting rid of that might get rid 
of a lot of them.  Then there's the usual crop of missing alt 
attributes, which I wouldn't think are affecting your layout; but 
there's also a fair few where you appear to have used elements in places 
where they're not allowed.

I'd have a go myself, but I'm a bit busy at the moment.  If it was me, 
though, that's where I'd start.  The worst that can happen is that it'll 
give you a clean basis to work on.

Cheers


Peter

-- 
http://www.peredur.net

__
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/

Re: [css-d] CSS tooltip bug ONLY in FF and Chrome

[Greg Smith]

I have a class with position:relative on the 'a' tag, then absolute on  
the hover state. The positioning doesn't work correctly in either FF  
or Chrome. Works fine in every other browser. Haven't been able to  
find any possible reason in my Google searches thus far. Anyone else  
experience something like this?

All relevant CSS has been placed in the head for debugging.

My only possible lead so far:
I've placed a border around the entire 'a' tag contents, and it's not  
wrapping around any of it. So my assumption is that these two browsers  
are not reading the correct positioning, if that makes sense??

LINK:
http://www.loctiteproducts.com/super-glues-debug.shtml

Thanks,
GS


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/
__
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/

Re: [css-d] interesting nav issue - please help :)

[Matthew P. Johnson]

Matthew P. Johnson | Eco I.T.
320 Warwick Avenue Oakland CA 94610 | 415.254.1563 | ecoitsf.com
 Please consider the environment before printing this email.


-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Thierry Koblentz
Sent: Thursday, June 03, 2010 9:28 AM
To: 'Theresa Mesa'; 'Matthew P. Johnson'
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] interesting nav issue - please help :)

> How is it inefficient to add html {height: 100.1%} to your CSS, which
> immediately applies this to all pages without so much as a how-do-you-

I believe using overflow-y:scroll is a bit better as it does not create a 
scroll bar per se.

Please let me rephrase. I have been sick this week so my head is a little 
fuzzy. 

I did not mean inefficient, I meant to say that it would be nice design wise to 
only have the scroll bar when needed but have the nav stay positioned. 

:)

__
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/

Re: [css-d] interesting nav issue - please help :)

[Theresa Mesa]

I'll have to try this...

On Jun 3, 2010, at 9:28 AM, Thierry Koblentz wrote:
> 
> I believe using overflow-y:scroll is a bit better as it does not create a 
> scroll bar per se.
> 

__
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/

Re: [css-d] interesting nav issue - please help :)

[Thierry Koblentz]

> How is it inefficient to add html {height: 100.1%} to your CSS, which
> immediately applies this to all pages without so much as a how-do-you-

I believe using overflow-y:scroll is a bit better as it does not create a 
scroll bar per se.
 
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
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/

Re: [css-d] interesting nav issue - please help :)

[Alan Gresley]

Can we please bottom post or comment inline (like below).


Theresa Mesa wrote:

> How is it inefficient to add html {height: 100.1%} to your CSS, which 
> immediately applies this to all pages without so much as a how-do-you-do 
> (since you are using an external style sheet)? To me, if you like the 
> aesthetics of not having the nav jump back and forth horizontally, it seems 
> like the *most* efficient way of doing it. Either the scrollbar is there, or 
> it's not. If you are centering your page, you are going to have the problem. 
> You don't notice the scroll bar over there on the side unless the height of 
> the content makes scrolling necessary. Otherwise, you don't pay attention to 
> it.


Very true. The problems with these two pages.






is one, the very wide header image and two, the wish to have something 
centered. I would recommend to Matthew that he has the menu beginning 
from the left and remove all of this.

#menu, #menu a {
position:relative;
}
#menu {
border-bottom: 0;
float: left;
left:50%;
margin-bottom:-1px;
margin-top: 40px; /* added to push it well below the header */
padding-bottom: 0;
}
#menu a {
right:50%;
}
#menu a a {
right: 0;
}


> Now you could spend hours (since you are a professed n00b) trying to 
> absolutely position the nav


Theresa, wrong Matthew.


> Either that, or don't try to center the page in the browser window. Let it be 
> flush left. Then it's a non-issue.


Precisely. It is easy to center a navigation if there are only so many 
links.


> Theresa


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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/