Re: [css-d] interesting nav issue - please help :)
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.
http://www.applegateelements.com/contact.shtml
http://www.applegateelements.com/agreement.shtml
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/
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.
--
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 :)
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 :)
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] CSS tooltip bug ONLY in FF and Chrome
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] CSS tooltip bug ONLY in FF and Chrome
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
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
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 h1 and div and so on, inside inline elements - notably a. You can't do that. So you need to replace stuff like: a href=something.htmlh1A heading/h1/a with something like: h1a href=something.htmlA heading/a/h1 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 input 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
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
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 h1 and div and so on, inside inline elements - notably a. You can't do that. So you need to replace stuff like: a href=something.htmlh1A heading/h1/a with something like: h1a href=something.htmlA heading/a/h1 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 input 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/
[css-d] OT: IE seems to be improving!
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. http://samples.msdn.microsoft.com/ietestcenter/ 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] interesting nav issue - please help :)
-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/
Re: [css-d] interesting nav issue - please help :)
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/
