Re: [css-d] Navigation bar
[snip]
I am looking for a slightly more 'elegant' way of vertically
centering text depending on whether there are one or two lines.
[snip]
I've also just noticed a problem in all browsers except IE7. What I
want to happen is for the currently selected item to show a different
background and to change text color, as in [ #navbar a:active ]
(below) and for this state to remain until another selection is made.
IE7 does what I want, but other browsers are inconsistent. Some will
show the correct state whilst the mouse button is down and it's
possible in at least one other to select an item and drag the pointer
away from the item whilst holding the button down and the active
state will remain. It's late at night and I've probably missed
something obvious!!
[snip]
/* Set background for current item */ #navbar a:active {
background-image:url(../images/buttons/navactive1x30.gif);
background-repeat:repeat; color:white; }
[snip]
Hi Alan.
I think other browsers are either shifting the focus or not recognizing
the :active state on your link. Try adding the :focus state into that
rule as well, like this:
/* Set background for current item */
#navbar a:active,
#navbar a:focus{
background-image: url(../images/buttons/navactive1x30.gif);
background-repeat: repeat;
color: white;}
It's difficult to fully test that on my local machine because of the
frames (as you mentioned), but I think that should at least get you
closer to a solution.
In terms of vertical centering, one solution is just to use padding and
not rely on pre-determined heights for the links. This also creates an
accessibility issue (overlapping the text when people [like me] have the
font size set too high for your site's setup).
If you create a background image which fades to a specific color, you
can just set the background of the link to that color, center the fade
gif/png/jpg and let any overflow in odd situations show up as a solid color.
Here's a basic ascii'd example:
solid white link background peaking through
white-blue-white vertical fade [one or two lines here]
solid white link background peaking through again
Throw a little padding in there, use a best guess measurement and
it'll look great on 80% of browsers, be accessible on all browsers, and
still look decent on the remaining 20% browsers with configurations
which differ from your local system.
Let me know how it all works out for ya.
Bill Brown
TheHolierGrail.com
MacNimble.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] Navigation bar
Alan K Baker wrote: Hi all. I'm in the process of converting an old frames/tables/JavaScript site to all CSS. There many billions of pages needing the same treatment. Please take a look at this screen shot. http://css-class.com/test/images/email-client.png The forth line down run 5 times a wide as my screen. For me to reply to you I first have to edit you message but not the simple way. My email client will wrap my replies at 72 characters length automatically. Discussion about Email clients are off-topic on this list but since your messages are very hard to reply to I have to mentioned them. Here is a good one to use. http://www.mozilla.com/en-US/thunderbird/ It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html I am looking for a slightly more 'elegant' way of vertically centering text Is this the fixed navigation where the lower parts are hidden outside the viewpoint. My screen is on 800px high. Is this navigation within frames? [snip] to save you wading through the dreaded frames maze. Remove the frames as it make it near impossible for anyone to help. At present my text is centered by [ .oneline a ] and [ .twolines a ]. OK, where do you mention that .oneline and .towlines is part of the navigation. Some on this list are good detectives since. We have to use our web developers toolbar [1] outline current element feature to locate these classes. I've also just noticed a problem in all browsers except IE7. That make sense. :-) I've probably missed something obvious!! Yes. When I check you source code all I see is. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes The good browsers are not framed challenged. They just don't use MS propriety garbage code. Help would be much appreciated. Regards, Alan. www.theatreorgans.co.uk So you have to make it easy. :-) Sometimes it is easier just to have un-style text to begin with. [1] https://addons.mozilla.org/en-US/firefox/addon/60 Alan http://css-class.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] Navigation bar
Hello all... I could not help picking up o a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew Alan Gresley wrote: Alan K Baker wrote: Hi all. I'm in the process of converting an old frames/tables/JavaScript site to all CSS. There many billions of pages needing the same treatment. Please take a look at this screen shot. http://css-class.com/test/images/email-client.png The forth line down run 5 times a wide as my screen. For me to reply to you I first have to edit you message but not the simple way. My email client will wrap my replies at 72 characters length automatically. Discussion about Email clients are off-topic on this list but since your messages are very hard to reply to I have to mentioned them. Here is a good one to use. http://www.mozilla.com/en-US/thunderbird/ It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html I am looking for a slightly more 'elegant' way of vertically centering text Is this the fixed navigation where the lower parts are hidden outside the viewpoint. My screen is on 800px high. Is this navigation within frames? [snip] to save you wading through the dreaded frames maze. Remove the frames as it make it near impossible for anyone to help. At present my text is centered by [ .oneline a ] and [ .twolines a ]. OK, where do you mention that .oneline and .towlines is part of the navigation. Some on this list are good detectives since. We have to use our web developers toolbar [1] outline current element feature to locate these classes. I've also just noticed a problem in all browsers except IE7. That make sense. :-) I've probably missed something obvious!! Yes. When I check you source code all I see is. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes The good browsers are not framed challenged. They just don't use MS propriety garbage code. Help would be much appreciated. Regards, Alan. www.theatreorgans.co.uk So you have to make it easy. :-) Sometimes it is easier just to have un-style text to begin with. [1] https://addons.mozilla.org/en-US/firefox/addon/60 Alan http://css-class.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-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] Navigation bar
Andrew. In the case of my [ :active ] problem, I believe that none of the browsers is actually at fault, and IE7 does actually do what I want and behaves in a way I'd logically expect, which is probably quite unusual for IE7. :-) It's simply a minor discrepancy in implementation between browsers - no big deal. I have far more problems with IE6 than all the other browsers! IE7 is a pussy cat, compared to IE6. g In the case of my vertical spacing on text, this is just my wish to improve my code. It's not a browser fault at all. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Andrew Doades To: Alan Gresley Cc: Alan K Baker ; css-d Sent: Saturday, April 12, 2008 11:48 AM Subject: Re: [css-d] Navigation bar Hello all... I could not help picking up on a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew __ 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] Navigation bar
I do see what you are saying, but since I went to IE7 I have had no end of problem why trying to develop, also a pain was moving to IE7 from IE6 when developing :) But why do IE and FF seem to have a constant fighting battle for developers? This is what I can't get, I can develop something that looks grate in FF but in IE, or vice versa. But some good points in your email :) Andrew Alan K Baker wrote: Andrew. In the case of my [ :active ] problem, I believe that none of the browsers is actually at fault, and IE7 does actually do what I want and behaves in a way I'd logically expect, which is probably quite unusual for IE7. :-) It's simply a minor discrepancy in implementation between browsers - no big deal. I have far more problems with IE6 than all the other browsers! IE7 is a pussy cat, compared to IE6. g In the case of my vertical spacing on text, this is just my wish to improve my code. It's not a browser fault at all. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Andrew Doades To: Alan Gresley Cc: Alan K Baker ; css-d Sent: Saturday, April 12, 2008 11:48 AM Subject: Re: [css-d] Navigation bar Hello all... I could not help picking up on a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew __ 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-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] Navigation bar
Alan. As there are a few issues here and interaction will be improved (IMO) I am replying to your message, by interspersing my replies within yours. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Alan Gresley To: Alan K Baker Cc: css-d Sent: Saturday, April 12, 2008 10:09 AM Subject: Re: [css-d] Navigation bar There many billions of pages needing the same treatment. Please take a look at this screen shot. Answered privately. Is this the fixed navigation where the lower parts are hidden outside the viewpoint. My screen is on 800px high. Is this navigation within frames? No, it's apparent on any button that's clicked. They all behave in the same way. Remove the frames as it make it near impossible for anyone to help. The frames will be removed, but the site is presented 'as-is' to allow you guys to see the problem, not for you to attempt to retrieve code from it. That's why I posted the relevant code in my message. OK, where do you mention that .oneline and .twolines is part of the navigation. Some on this list are good detectives since. We have to use our web developers toolbar [1] outline current element feature to locate these classes. It's mentioned in the line I've included the appropriate part of the stylesheet and the HTML below, to save you wading through the dreaded frames maze. At present my text is centered by [ .oneline a ] and [ .twolines a ] (below)., which you've edited out. :-) I've probably missed something obvious!! Yes. When I check you source code all I see is. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes The good browsers are not framed challenged. They just don't use MS propriety garbage code. 'Fraid I disagree. Frames have been around for a long time, along with all their faults. None of today's reasonably up-to-date browsers has a problem with the site as it is/was. M$ proprietary code is here to stay and the greater majority of browser public are using it, unfortunately for us, especially in the case of browsers below IE7, which itself is far from perfect. Not to labor a point, as we're getting off topic, but the frames will be removed soon and the problem will cease to exist. :-) So you have to make it easy. :-) Sometimes it is easier just to have un-style text to begin with. The only way I could make it any easier (as you say) is to remove the frames, but really this is totally unnecessary. I've already posted the relevant code in my message, for inspection. There's nothing 'hidden' on the live site that would affect it. I dumped the site to a test area, merely as an illustration for this forum, so that the effects can be seen. Hell, being a USA originated forum, I even spelled my message in 'American' and ignored the protests of my UK spell-checker. grin __ 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/
