Martin717
09-19-2013, 05:38 AM
Hello,
I'm not sure if CSS is the best room for this, but in my searches online for a fix for my problem I've seen various types of solutions (including CSS based), though none exactly like mine.
A little background so you can understand the method to my madness.
To implement text shadow in IE, I used a Javascript based solution. It worked to my satisfaction except if there is centered text (set with CSS), the writing would look horrible.
I came up with a solution of not using the CSS centering on the text, but instead using an image that is the same color as my background to do it. I placed this before the text, set it to the necessary width, and voila - centered text, with the Javascript based text shadow looking fine on those lines as well. I had designed the site with a container/header/etc. width of 960px, figuring on at least a 1024px width display resolution, with a coordinating color filling out the sides.
I tested the site today on a library computer that ended up not having these lines of text centered, where instead the text was slightly biased right. The odd thing was, one of the lines centered by this method still looked OK, but the other two were askew. Odd.
That led me to try and see if I can conditionally set the size of these "background" color images ONLY on the troublesome lines (not the whole page, or even anything else in it) to automatically resize if the display resolution is sensed to be is too low.
Is there some way to do this, so I can place whatever needed code just around these as needed, leaving the rest of my site's coding unaffected?
Thanks in advance - I hope I'm writing this clearly/correctly! :)
I'm not sure if CSS is the best room for this, but in my searches online for a fix for my problem I've seen various types of solutions (including CSS based), though none exactly like mine.
A little background so you can understand the method to my madness.
To implement text shadow in IE, I used a Javascript based solution. It worked to my satisfaction except if there is centered text (set with CSS), the writing would look horrible.
I came up with a solution of not using the CSS centering on the text, but instead using an image that is the same color as my background to do it. I placed this before the text, set it to the necessary width, and voila - centered text, with the Javascript based text shadow looking fine on those lines as well. I had designed the site with a container/header/etc. width of 960px, figuring on at least a 1024px width display resolution, with a coordinating color filling out the sides.
I tested the site today on a library computer that ended up not having these lines of text centered, where instead the text was slightly biased right. The odd thing was, one of the lines centered by this method still looked OK, but the other two were askew. Odd.
That led me to try and see if I can conditionally set the size of these "background" color images ONLY on the troublesome lines (not the whole page, or even anything else in it) to automatically resize if the display resolution is sensed to be is too low.
Is there some way to do this, so I can place whatever needed code just around these as needed, leaving the rest of my site's coding unaffected?
Thanks in advance - I hope I'm writing this clearly/correctly! :)