jacourPremium
join:2001-12-11
Matthews, NC Reviews:
 ·RoadRunner Cable
·SureWest Cable
 ·AT&T Southwest
| Question on CSS I have my web site working and behaving the way I need it to (it was touch and go there for a while) but I have one remaining issue which is mainly cosmetic, but I would like to fix it if I can.
I have a vertical color gradient part running down the left margin of the screen, 25 pixels wide, that fades from a dark color to a light one as you scroll down. Some of my pages are short, just one screen vertically, while others are taller running up to 7-8 screens to reach the bottom. I would like to "stretch" the gradient bar so that it has a similar behavior regardless of the number of screens needed for a page.
I have tried playing with the CSS "height=100%" directive, but as far as I can tell I am always going to get 100% of the user's screen, and not the length of the rendered page. Since I am technically stretching an image, and not filling a container, I don't think I can used "inherit" either.
Is there any way to "measure" the fully displayed web page and get CSS to adjust accordingly, or is there anohter simple work-around? I guess what I need to know is whether there is a way to determine the height and tell CSS explicitly to use that as the dimension for the parent container. After browsing a few web sites I suspect it doesn't work that way! |
|
Reviews:
·AT&T Southwest
·Charter
| 'height=100%' would be invalid CSS if that's how you used it. Should be 'height:100%'.
Used that way, it would be 100% of the height of the parent container. If that height is set, then it should maintain the same height value but it could depend on positioning of the elements.
You might want to look into css gradients if you're not using them. |
|
|
|
jacourPremium
join:2001-12-11
Matthews, NC Reviews:
·RoadRunner Cable
·SureWest Cable
·AT&T Southwest
| reply to jacour
No worries about the syntax; that is why I use MS Expression since it bitch-slaps me every time I make an error and shows me how to fix it.  A great tool for the once a year web design set.
I think you answered my question, albeit not the answer I was hoping for. I did take a look at CSS gradients, but they do not seem to be supported in a lot of browsers. The web site I am designed is intended for an older and less tech savvy audience that may still be running on an older machine purchased in the last century to run AOL (remember when people still used 56K dial-up?). I think I need backward compatibility for those still using IE6 (forget Firefox, Chrome or any IE with a later release date).
However, CSS gradients are a splendid idea and I thank you for the education. |
|
Reviews:
·AT&T Southwest
·Charter
2 edits | said by jacour:I did take a look at CSS gradients, but they do not seem to be supported in a lot of browsers. Gradients have worked in all modern browsers for years. The only browser that doesn't support it is, of course, IE.
quote:
I think I need backward compatibility for those still using IE6
IE usage has dropped far below 5% and mostly corporate users. Microsoft has been pushing updates for quite a while. I doubt your users are using IE6.
In fact, if any of your users was ever prompted to upgrade their browser by a friend, it's more likely to beFirefox or Chrome or Opera because IE9 does not install on XP. Only modern browsers do. |
|
 cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:5
 ·Frontier FiOS
| said by howardfine:Gradients have worked in all modern browsers for years. The only browser that doesn't support it is, of course, IE. Gradients have been supported in IE for a long time through a filter, making it non-standard but easily implementable for simple horizontal or vertical gradients. Unless you being anal retentive and self-enforcing only 100% strict validation, just use the filter.
There are multiple cross-browser gradient generators such as this one that I've used in the past: »www.colorzilla.com/gradient-editor/
quote:
I think I need backward compatibility for those still using IE6
IE usage has dropped far below 5% and mostly corporate users. Microsoft has been pushing updates for quite a while. I doubt your users are using IE6. In fact, if any of your users was ever prompted to upgrade their browser by a friend, it's more likely to beFirefox or Chrome or Opera because IE9 does not install on XP. Only modern browsers do. |
|
| Microsoft, Twitter, Facebook and Google all no longer support IE6. The customer decides who to support but, if they don't support it, we won't either. In fact, we charge a premium for supporting IE more than two versions back. |
|
jacourPremium
join:2001-12-11
Matthews, NC Reviews:
·RoadRunner Cable
·SureWest Cable
·AT&T Southwest
| reply to jacour
Yeah, I hear you about browser versions but a lot of the users are elderly (70's+). If this was for corporate digestion, I would just tell them to lump it and upgrade to the 21st century.
Seriously, I have recently seen some of these folks using computers running on Win 98. |
|
Reviews:
·AT&T Southwest
·Charter
| You should be able to look at the log file of your host and see which browsers are being used to visit the site. Of course, it sounds like you can look at some of your users computers themselves to check for that, too.
IE6 is just so much of a different animal than the other IEs that it's just sad anyone has to deal with it....even when it was largely used. |
|
2 edits | reply to jacour
Hi Jacour,
Gradient can be managed with the modern CSS3 but most of the browsers including IE8 doesn't support all the CSS3 techniques. Better to use images or JavaScript for these issues so that all the browser can support the web page and website load smoothly. Otherwise, it will have a bad user experience and less ROI. Please forgive me, if I am wrong! |
|
