PDA

View Full Version : Styles



Spider
10-16-2010, 04:55 PM
My HP laptop is slowly dying. Had a look at an Apple - lovely machine - I want one! Actually bought it and took some tutoring. Had to reneg. Too long a learning curve and I needed to get up to speed on a new machine, so turned it back in for a Toshiba A665 windows laptop.

In operating the Apple machine, I was reminded that Safari and Firefox do not recgognize the inline Styles code - STYLE="filter:shadow(color=#bbccdd)" and STYLE="filter:glow(color=#aaccdd)"


As I am using this code on every page of my soon-to-be-uploaded revamped website, could anyone tell me whether Safari and Firefox will render any inline styles and, if so, what they are? Or where I can find that information.

Thanks.

Harold Mansfield
10-16-2010, 05:51 PM
I think you need to use <div> tags for the formatting to work across all of the major browsers:


The <div> tag defines a division or a section in an HTML document.
The <div> tag is often used to group block-elements to format them with styles.
HTML div tag (http://www.w3schools.com/tags/tag_div.asp)

So for instance for a text box you would use (as an example) <div style="border: 1px solid grey; padding: 10px; width: 155px; height: 50px; background-color: #e6e6e6;"></div>

greenoak
10-16-2010, 06:22 PM
for me, DH PICKED ACER TRAVELMATE 5530 with windows 7.....it has a nice big keyboard and seems just fine....i have a wireless mouse......he got an acer with a keypad on it....
i hear good things about apple , especially on visuals and art, but he always says no....since everything is on the other system. and i know i would have trouble without him...

Spider
10-16-2010, 10:26 PM
Unfortunately, Harold, I have it all in a DIV - Safari and FF are responding to the width and borders but not to the shadow filter. IE is responding to all.

I believe FF and Safari are supposed to read this, aren't they? Any ideas?

billbenson
10-16-2010, 10:31 PM
I haven't tried it but take a peek at this:

Drop shadow with CSS for all web browsers - Robert&#039;s talk (http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/)

Spider
10-16-2010, 10:46 PM
Thank you for the link, Bill. Mr.Nyman is obviously very knowledgeable and I cannot understand him. In any case, I think he was talking about a shadow box, rather than shadow and glow to the text, which is what I am after - what I have, actually in IE but not in FF and Safari.

Harold Mansfield
10-17-2010, 01:15 AM
If you are using it inside of a <div> shouldn't it be <div style="filter:shadow(color:#bbccdd)"> Using ":" instead of "=" ?
Like is presented here:
How to make css drop shadow text. Drop shadow text. (http://www.hypergurl.com/cssdropshadow.html)

Spider
10-17-2010, 08:13 AM
I have seen both used, Harold ( = and : ) and both work in IE but neither seem to work in FF and Safari. Incidentally, it works with and without the brackets for IE but not the others - in fact the page to which you linked has filter:shadow;color: orange; in one place and filter:shadow(color:black); in another place.

I have to assume FF and Safari don't support this. Thanks for trying.


ADDED: I just realised that without brackets the shadow is grey only - the color designation is ignored. The brackets are needed to state a color and : works just the same as = (for IE - still nothing works for FF and safari.) Odd, eh?

Harold Mansfield
10-17-2010, 11:59 AM
That is strange. Usually I get it the other way around...works in FF, but not IE.
The only thing I can suggest is to run it through an HTML validator. It should at least highlight any conflicting or problem code and suggest a fix. There is a Firefox plug in https://addons.mozilla.org/en-US/firefox/addon/249/.

Sorry I couldn't help more.

billbenson
10-17-2010, 12:34 PM
Remember you should develop for FF first as it is the most standards compliant. Then fix it to work in IE. In this situation, has code that only works in IE. I'm sure it exists in FF, we just haven't found it yet. Maybe VG will come around. He's the css wiz here and hopefully shed some light on this.

Spider
10-17-2010, 08:37 PM
Bill, I don't develop FOR any browser in particular. I write in Notepad and save as .html, then I check it in IE principally because IE is my default browser and at intervals check myself with Safari and FF. Then I make changes to try to get the three browsers looking as similar as possible. When I cannot get them to look similar - as in this case with the filter style - I go with what looks best in IE because most of my visitors use IE.

I hope VG can offer alternative code that will work in all three browsers.

vangogh
10-17-2010, 09:42 PM
STYLE="filter:shadow(color=#bbccdd)" and STYLE="filter:glow(color=#aaccdd)"

filter: is Microsoft proprietary code. It will only work with Internet Explorer so you really shouldn't use it or rather you should use it with the understanding that no browser outside of IE will follow the code. Inline styles in general are bad practice. You always want to have your styles in a separate stylesheet.

Generally both shadow and glow are things you would do with an image. I'm actually not entirely sure what the glow effect is supposed to do, but the name itself tells me it's been the territory of images the last few years.

css3 does over ways to code shadows. And naturally it will work in everything except IE8 and below. It's coming in IE9 I think. The lack of IE support is why this is generally still done with images. Here's a site showing browser support (http://caniuse.com/) for different technologies. Uncheck everything in the first column (Category) except for css3 to make box-shadow easier to find. There's also text-shadow to apply a shadow directly to text.

There are two generally approaches when you want to use things like box-shadow. One is to offer it to those browsers that are capable of rendering it and don't worry about those that don't as long as the site still looks good without the box-shadow. This is called progressive enhancement. You build the site without all the extra effects so that it works in all browsers and then add more effects for those browsers that can render the effects. Many, myself included, will tell you your site doesn't need to look exactly the same to everyone. In fact that's never really been possible anyway.

The second approach is to server browser dependent code. Show IE the filter: stuff if you want and show everyone else the box-shadow stuff. An easy way to do this is through conditional comments (http://www.vanseodesign.com/css/conditional-comments/). Only IE reads conditional comments so you can place IE specific code inside them. Every other browser ignores what's inside the conditional comments.

I'd still stay away from filters though. Again IE only and because of that most web developers don't use them. As IE becomes more and more standards compliant it wouldn't surprise me if they dropped support for filters, especially as little by little css is offering the same effects.

billbenson
10-17-2010, 09:47 PM
What you are doing is developing your site to make it "work today" as opposed to making it standards compliant. Firefox tries to be standards compliant and is considered to be the most compliant browser. IE has taken steps to become more compliant, but does what they feel like doing at microsoft. What you want to avoid doing is using code that isn't standards compliant as browsers including IE may not support it tomorrow. What can happen, doing it the way you are is you get everything working and IE makes a change in a new version or an old version for that matter and it no longer works. You may not notice it when it happens because it may still look ok on your pc but a bunch of site visitors computers may show junk.

There is no problem in using notepad but you should always run it through a validator like the w3c code and css validator and fix any errors. It will save you headaches down the road.

Spider
10-18-2010, 02:14 PM
You are all being very helpful and I appreciate it. Okay - I think the last few posts tell me there's no way put shadow or glow (shadow all round) text in FF or Safari. The only browser that allows this is IE by way of their proprietory filter style.

Next question: Is there any way to make the div box width variable? So far, I have <div style="width:500px;filter:shadow(color.... and that width:500px fixes the box that contains the styled text at 500px wide - that is to say, it will not collapse or expand in accordance with the width of the user's window. If I use a table rather than div, I do not have to state a width and the text wraps as the user's window is expanded or reduced.

Is there a something like <div style="width:variable; .... ?

billbenson
10-18-2010, 02:18 PM
I'll defer to VG and others again, but you should be able to use em or percentages if you can use pixels.

Spider
10-18-2010, 02:26 PM
darn! I had forgotten percentages - I'll try that. Thanks --- but what is em? I know em as another way of saying <I> italic?

Spider
10-18-2010, 02:30 PM
Percantage works fine - thanks, Bill.

vangogh
10-18-2010, 08:56 PM
I think the last few posts tell me there's no way put shadow or glow (shadow all round) text in FF or Safari.

Not at all. There are ways to do what you want in all browsers. You've used filter which only works in IE.

You can create a shadow with css3's box shadow (http://css-tricks.com/snippets/css/css-box-shadow/).

I'm not entirely sure what glow looks like. The post above shows how to create an inner shadow as well as a regular shadow, which is maybe close to what you want. If you can show me an image of what it looks like I can probably come up with a way to make it work. Keep in mind that the code in the post above won't work in IE. You can create most any effect in any browser. The issue is that often IE needs it done in a way different than every other browser. Because of that you have to decide if the effect is important enough to your design that all browsers need to see it. If so you need to supply different sets of code to IE and to all other browsers. If it's not so important for everyone to see you can choose which browsers you want to support and only include the code that works for those browsers.

em is a unit of measurement based on the size of the letter 'm' of the font you're using. It's also a relative measurement and the one I prefer since it's based on the type itself. If you increase the size of the font then the letter 'm' naturally increases and hence an em is larger than it had been in absolute terms. Percents are fine to use though.

billbenson
10-18-2010, 10:07 PM
I might just add (correct me if I'm wrong on this steve) that a very standard way of setting widths, fonts etc is to do it in px in the body tag. For the rest of the page use percent or em. They will base themselves on the px setting in the body tag ie body tag as a font of 10px. A td later in the document of 1.2em will be 1.2 x 10px or 12px. Doing it this way allows you to change all of the font sizes and keep their relative size difference by changing only the body tag. If you don't set the font size in the body tag, it will default to the browsers default which may be different across browsers. All of this can be done in an external style sheet so you can easily change the appearance of an entire site in one place.

vangogh
10-19-2010, 03:00 AM
Yes, but you don't even need the initial px setting on the body since each browser supplies one by default. I think by default all browsers consider 1 em = 16px so you can just start with 1 em on the body. A trick some use is to set the body as 0.625 em, which is 10px. Then the rest of your math becomes easier.

Frederick two things I thought I'd mention. First it's nice to see you working with divs and css over tables. Hopefully it would be too much of a transition and we'll be able to help. Second is you want to ultimately move all your styles to an external stylesheet. What you want to do is add either an id or a class to different divs. An id is for something you only use once on a page and a class is for something you can use more than once.

Spider
10-19-2010, 10:59 AM
Not at all. There are ways to do what you want in all browsers. You've used filter which only works in IE.
You can create a shadow with css3's box shadow (http://css-tricks.com/snippets/css/css-box-shadow/).
I'm not entirely sure what glow looks like. The post above shows how to create an inner shadow as well as a regular shadow, which is maybe close to what you want....The page associated with that link talks about shadow to a box, if I am not mistaken. Like the writing is on a sheet of paper and the paper is casting a shadow. I want the writing to cast a shadow. See the title of the article here - Personal Coaching - RAISE YOUR STANDARDS - Frederick Pearce, Coach, Mentor (http://frederickpearce.com/raisestandards.html) (Be sure to use IE to see it.)

The shadow that "filter" provides is each character has a shadow, as if it was a sign of individual letters mounted on a wall with the sun shining on it. "Glow" is the same effect but shadow all around the characters as if they were backlit = glow.

So, if there are ways to do that, can you direct me to where I might find out about it? Thanks.

vangogh
10-19-2010, 12:20 PM
Oh, it's shadow on the text you're looking for. There's a css property for that. It's called text-shadow (http://css-tricks.com/snippets/css/css-text-shadow/) and it will work similar to the box-shadow except it works on the text.

There's also a text-stroke (http://css-tricks.com/adding-stroke-to-web-text/), which is probably what you want where glow is concerned, but it only works in webkit browsers so Safari and Chrome.

I don't have IE readily available so if you can grab a screenshot that would help. I can get to IE, but doing so slows up my computer a lot so I only load it when I absolutely have to.

billbenson
10-19-2010, 02:12 PM
I have heard, VG, that different browsers, particularly FF and IE have different default font sizes. This may not be true today, but was in older revisions.

Harold Mansfield
10-19-2010, 02:33 PM
I think it's interesting that Frederick said that most of his visitors are on IE, because I have seen a close in the amount of people that use FF. More than half..as much as 65 percent of my traffic is using FF now. I browse with it and work in FF.

I have Safari, Chrome, IE, and FF loaded to check compatibility, but I treat IE like a second class browser. I'll check to make sure that all looks the same, but I don't spend anytime working for or with IE at all.

vangogh
10-19-2010, 05:15 PM
I have heard, VG, that different browsers, particularly FF and IE have different default font sizes.

I'm not sure if that's still true, though people can always set their default browser font-size to whatever they want. I still set a font-size on the body just like you suggested. I see plenty of designers no longer doing that though. I guess it's not all that hard to test to see what the default size is across all browsers.


More than half..as much as 65 percent of my traffic is using FF now.

Firefox overtook Internet Explorer for my site as well. Keep in mind though that we both likely have a tech savvier audience than Frederick so it wouldn't surprise me if IE is still the dominant browser viewing his site.

billbenson
10-19-2010, 05:31 PM
I'm still at 10 to 15 percent on FF, the majority on IE. My visitor base is businesses so some IT guy sets it up the easiest way possible for him most likely.

Spider
10-19-2010, 05:55 PM
Oh, it's shadow on the text you're looking for. There's a css property for that. It's called text-shadow (http://css-tricks.com/snippets/css/css-text-shadow/) and it will work similar to the box-shadow except it works on the text...I wasn't able to get any of that to work, I'm afraid. Something odd is happening now, though. I am not getting "filter" to work on my new computer reading files off the harddrive. IE8, W7, exact same code as on the website. It will read the shadows on the page from the website but not the page with the same code exactly from the harddrive.

Anyway. I am giving up. The shadows are an adornment that makes titles look better but are still readable without them. The "glow" is a problem though - and that didn't look lie it was going to be available anyway. For my revamped site, I have some text placed over a background photo - this is unreadable without "glow" to separate it from the picture colors. For the time being, I will use span background color, which adds a block of color behind the text. It looks gruesome but at least it's readable.

Thanks for your efforts. I'll come back to it later.

vangogh
10-19-2010, 11:14 PM
Strange why it wouldn't work on your computer, but things happen. I'm sure there's an explanation for it. Let us know when you want to give it a try again. There are definitely ways to do what you want.

Spider
10-19-2010, 11:53 PM
I'll be back (as the man said!) I have to do something to pull the text off the photo and I've tried many different colors that didn't do the job. A dark "glow" did it nicely. The backgroundcolor highlight looks like a telegram message from the 1920s! But there are more pressing issues for now. Thanks for your help.

Spider
10-20-2010, 11:28 AM
For the record, my current visitors' browser usage is 68 percent IE, 15 percent FF, the remaining 17 percent a mishmash of Safari, Chrome, and some other odds and bobs of names I've never heard of.

vangogh
10-20-2010, 11:35 AM
I had a feeling your browser stats would look something like that. Tells you that when push comes to shove you want to defer to what looks best in IE. You can still do that with standards compliant code of course. It's the extras you add that will probably lean toward the IE side if things.