[css-d] Nav bar you are here color won't stick in 2nd level navigation bar
I have created a CSS website using Expression Web which has been on-line for several months. It behaves well enough, but there is one problem I have not found a solution for. I have two levels of navigation, called top-nav and vert-nav. (Both are actually horizontal). The you are here button colors stick properly, showing the active page, in the Top-Nav link bar, but do not stick in the Vert-nav link bar. This is true for both IE 7 and IE 8, Firefox and Opera. Curiously, both work levels work perfectly when the page is opened in Expression Web. Can someone please take a look at my working website and give me a clue as to how to get the second level nav bar to indicate the active page? The website is: www.dollchris.com I would appreciate any help I can get. __ 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] Nav bar you are here color won't stick in 2nd level navigation bar
David Christiansen wrote: [...] Can someone please take a look at my working website and give me a clue as to how to get the second level nav bar to indicate the active page? The website is: www.dollchris.com It looks like you are hoping that the a:active declaration targets the current page. It doesn't - it applies only to a link while it is being activated (pressed). FWIW - Older Internet Explorer versions have some bizarre behavior with this. First, it acts more like a:focus - but a:focus was not supported. Second, the :active state would often stick - which is what probably led you to believe that it targets the active page. Here are some ideas: http://www.websiteoptimization.com/speed/tweak/current/ Cordially, David -- __ 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] Help using div and CSS to display image rotators side-by-side
MarvinC wrote: I wonder if someone can assist me with a change I'd like to impliment in a WordPress theme? The name of the theme is Greed and info on it can be found at the following link: http://www.wpdesigner.com/2007/05/27/greed-wordpress-theme/ Support for the theme appears to dead so I'm scowering the net in search of ways to do what is probably basic. What I'm trying to do is simply display tow image rotator systems side-by-side. One way to put items adjacent to one another is with a horizontal list. See: http://css.maxdesign.com.au/listamatic/horizontal01.htm ~d __ 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] Why does this work?
I'm adding slightly rounded corners at the top and bottom of the central (content) div on a site. Since there's a repeating image (vertical only) background in the div, I set it up using the method where you put an extra wrapper div around the content, so you can insert non-repeating images (with the rounded corners) bracketing the content div. In IE there was a gap between the top rounded corner image and the beginning of the content div background. After browsing around some of the list archives I tried an idea from a sometimes I do this when nothing else works post (mine didn't happen on the bottom, so not just standard IE alternate box issue) and put br / after the top image with the rounded corners. Which worked its magic and the gap disappeared. My question is why? Why is that necessary and what exactly is it doing that eliminated the gap? I supposed that in a general way it must be setting boundaries between elements, but saying where the image element ends by just putting height and width in the tag doesn't do the same thing. Oh if you want to see the site it's http://shanghaigateboston.com/ (great food if you're in the area) Work in progress and sorry, layout is a hybrid of tables and CSS, which I realize is anathema to some of you, but I'm just experienced beginner with CSS while fairly expert with HTML and so constantly working to integrate more CSS vs whole hog switchover. BTW, thanks to all here for your part in my education - both the people who answer questions and the ones who ask them. I learn a lot from reading, even about stuff I'll probably never use myself. Thanks. Kim __ 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] Nav bar you are here color won't stick in 2nd level navigation bar
David Christiansen wrote: I have created a CSS website using Expression Web which has been on-line for several months. It behaves well enough, but there is one problem I have not found a solution for. I have two levels of navigation, called top-nav and vert-nav. (Both are actually horizontal). The you are here button colors stick properly, showing the active page, in the Top-Nav link bar, but do not stick in the Vert-nav link bar. This is true for both IE 7 and IE 8, Firefox and Opera. Curiously, both work levels work perfectly when the page is opened in Expression Web. Can someone please take a look at my working website and give me a clue as to how to get the second level nav bar to indicate the active page? The website is: www.dollchris.com Umm, I am probably missing something really important. Where in the html is #vert_nav ul ? __ 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] Why does this work?
Kim Malo wrote:
I'm adding slightly rounded corners at the top and bottom of the central
(content) div on a site.
Since there's a repeating image (vertical only) background in the div, I set
it up using the method where you put an extra wrapper div around the
content, so you can insert non-repeating images (with the rounded corners)
bracketing the content div.
In IE there was a gap between the top rounded corner image and the beginning
of the content div background. After browsing around some of the list
archives I tried an idea from a sometimes I do this when nothing else
works post (mine didn't happen on the bottom, so not just standard IE
alternate box issue) and put br / after the top image with the rounded
corners.
Which worked its magic and the gap disappeared.
My question is why? Why is that necessary and what exactly is it doing that
eliminated the gap?
Your top rounded corners image is an inline element, which means it
reserves space within it's bounds at the bottom for descenders
(typographic term for the dangly bit in letters like p, j, q). The
solution is to make your image a block element and zero out it's
margin/padding ( example: img {display:block;margin:0;padding:0;} ).
I'm not sure why a line-break fixed it in IE, but with the above
solution you won't need it.
--
//
Shawn Lawler
Research and Training Center on Community Living
Institute on Community Integration
University of Minnesota
__
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] IE8 Print Stylesheet question
Folks, I've been working on a print stylesheet to use with the following page: http://www.qvcc.commnet.edu/library/apa-old.asp Mostly I've got what I wanted except that while looking at the page with Print Preview using IE8 in standards mode there is a logo image that I wanted to appear once across the top of the first page that ends up appearing across the top of every page. This is a background image applied to the overall content container with no-repeat set. This works as I thought it would in Firefox and IE8 in compatibility mode. My question: Is this a bug in IE8 or is this expected behavior for paged media according to the most current spec? If this is expected behavior is there a rule which would control this effect? I tried using @page :first to insert the image but that didn't work. Thanks, Michael Lynch __ 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] Site Check
On Wed, 2009-10-07 at 00:49 -0400, Felix Miata wrote: On 2009/10/06 18:44 (GMT-0400) David McGlone composed: Hi all, Can I get a site check @ http://www.premierfirst.org I only have Firefox and Opera and IE 8. I am suspecting my images in the top left are going to be messed up in IE6, but I'm pretty confident the layout should be good across all browsers. Even in Firefox it needs some work to take it towards resolution independence. Here's a look at moderately high resolution, along with some context: http://fm.no-ip.com/SS/SC/sc-davmcg01.png image http://fm.no-ip.com/tmp/sc-davmcg01.html image source Do you have any pointers on how I can accomplish this? I've only been using CSS for about a year or a little more. I'm still learning. __ 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] Nav bar you are here color won't stick in 2nd level navigation bar
Thanks. I re-examined my code and found that I had 2 of my divs overlapping. Fixed that, but that wasn't the problem. Otherwise I believe my code stream for the two nav bars are identical, and also the css attributes are the same. Maybe I'm missing something in the subtleties or fine points of CSS behavior? -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso Sent: Thursday, October 08, 2009 11:23 AM To: David Christiansen Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Nav bar you are here color won't stick in 2nd level navigation bar David Christiansen wrote: I have created a CSS website using Expression Web which has been on-line for several months. It behaves well enough, but there is one problem I have not found a solution for. I have two levels of navigation, called top-nav and vert-nav. (Both are actually horizontal). The you are here button colors stick properly, showing the active page, in the Top-Nav link bar, but do not stick in the Vert-nav link bar. This is true for both IE 7 and IE 8, Firefox and Opera. Curiously, both work levels work perfectly when the page is opened in Expression Web. Can someone please take a look at my working website and give me a clue as to how to get the second level nav bar to indicate the active page? The website is: www.dollchris.com Umm, I am probably missing something really important. Where in the html is #vert_nav ul ? __ 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] Nav bar you are here color won't stick in 2nd level navigation bar
Thanks, David. I've looked at the website you suggested, and will now devote myself to some serious study. Thank you very much for your help. Dave -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Hucklesby Sent: Thursday, October 08, 2009 10:18 AM To: David Christiansen Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Nav bar you are here color won't stick in 2nd level navigation bar David Christiansen wrote: [...] Can someone please take a look at my working website and give me a clue as to how to get the second level nav bar to indicate the active page? The website is: www.dollchris.com It looks like you are hoping that the a:active declaration targets the current page. It doesn't - it applies only to a link while it is being activated (pressed). FWIW - Older Internet Explorer versions have some bizarre behavior with this. First, it acts more like a:focus - but a:focus was not supported. Second, the :active state would often stick - which is what probably led you to believe that it targets the active page. Here are some ideas: http://www.websiteoptimization.com/speed/tweak/current/ Cordially, David -- __ 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] Why does this work?
Makes sense. Thanks very much for the explanation.
Kim
On Thu, Oct 8, 2009 at 2:37 PM, Shawn Lawler lawl0...@umn.edu wrote:
Kim Malo wrote:
I'm adding slightly rounded corners at the top and bottom of the central
(content) div on a site.
Since there's a repeating image (vertical only) background in the div, I
set
it up using the method where you put an extra wrapper div around the
content, so you can insert non-repeating images (with the rounded
corners)
bracketing the content div.
In IE there was a gap between the top rounded corner image and the
beginning
of the content div background. After browsing around some of the list
archives I tried an idea from a sometimes I do this when nothing else
works post (mine didn't happen on the bottom, so not just standard IE
alternate box issue) and put br / after the top image with the rounded
corners.
Which worked its magic and the gap disappeared.
My question is why? Why is that necessary and what exactly is it doing
that
eliminated the gap?
Your top rounded corners image is an inline element, which means it
reserves space within it's bounds at the bottom for descenders
(typographic term for the dangly bit in letters like p, j, q). The
solution is to make your image a block element and zero out it's
margin/padding ( example: img {display:block;margin:0;padding:0;} ).
I'm not sure why a line-break fixed it in IE, but with the above
solution you won't need it.
--
//
Shawn Lawler
Research and Training Center on Community Living
Institute on Community Integration
University of Minnesota
__
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] Site Check
David McGlone wrote: On Wed, 2009-10-07 at 00:49 -0400, Felix Miata wrote: On 2009/10/06 18:44 (GMT-0400) David McGlone composed: Hi all, Can I get a site check @ http://www.premierfirst.org I only have Firefox and Opera and IE 8. I am suspecting my images in the top left are going to be messed up in IE6, but I'm pretty confident the layout should be good across all browsers. Even in Firefox it needs some work to take it towards resolution independence. Here's a look at moderately high resolution, along with some context: http://fm.no-ip.com/SS/SC/sc-davmcg01.png image http://fm.no-ip.com/tmp/sc-davmcg01.html image source Do you have any pointers on how I can accomplish this? I've only been using CSS for about a year or a little more. I'm still learning. The way it is accomplished is a matter of opinion. Some of us, myself among them, think honoring user default is a step in the right direction. In plain English, let the user decide if the fonts are just right, too big, or too small. Set color in like manner: easy to read text on landing. In addition, the criterion of success is often dependent on valid markup/css. Fwiw, please see: http://chelseacreekstudio.com/ca/cssd/normal.htm It's you call. Not mine. ~d __ 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/
