Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

can i define different styles for different browsers?

Status
Not open for further replies.
abbott567

abbott567

Technical User
Jun 18, 2007
38
GB
hello im currently making a a website...
and although ive just started ive already noticed a big snag...
is it possible to have two settings in your code and have it distinguish which browser you are using and therefore which styles to apply?

see...
i have a background image which is dark grey which fades out to light grey (#cccccc) which is called bg.png
the background colour of the body is also #cccccc so "in theory" the bottom of the gradient should blend with the background...

however what safari and internet explorer seem to distinguish as #cccccc is different from what firefox sees as #cccccc

so if i use the background colour of #cccccc on the body it looks smooth in firefox but i hav a distinct solid line where it should blend in safari...
alternatively if i use #c1c1c1 its smooth in safari but not firefox

if i could somehow get the code to load the body as #cccccc in firefox and #c1c1c1 in other browsers it would be great...

but can it be done?

here is the start of my site layout if you want to take a look to see what i am getting at...

 
Sort by date Sort by votes
You can, yes - but I doubt you need to do this.

My money is on the fact your PNG isn't a 32-bit one. If you save the PNG as 32-bit, chances are this issue will go away.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
And of course there is a useful FAQ on how you can, actually, target specific versions of IE (windows only) using the Microsoft proprietary conditional comments syntax:

faq215-6625

Having experienced your exact problem in the past, I concur that it's most likely your PNG is not saved as 32-bit.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Alternatively, you could add an extra <div> into your markup, within the <body> element and wrapping the whole page's contents.

You set up the div with the gradient background at the top, but no background colour - so it's transparent below the gradient bit.

You then make a little png that's a square of solid #cccccc. You make this the background image of the <body> (with a colour of #cccccc specified for those with images switched off).

That way, whatever monkeying about the browser does with the colours of your gradient image, it'll (hopefully) do to the solid image as well - so you should get a smooth result.

Before doing all that, though, try using a gif image instead of a png and see if it works any better. Gif support is a bit more mature than png support, so it may not have the same problems.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I'm not seeing that line in either Firefox or IE7 - and the PNG you are using is 32bit.

Problem solved?

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
it must just be safari thats doing it then... cuz im on a mac but my mate said he could see it in ie too but having a mac i dont hav ie! but i tested it in firefox and safari and the lines were like mentioned above...

ill hav a bash at your suggestions tho guys! i appreciate the help! thanks alot
 
Upvote 0 Downvote
the wrapper div tag and the extra image worked a treat

its just a square of colour 1px by 1px and now safari and firefox are fading it smoothly!

cheers again guys i appreciate it
 
Upvote 0 Downvote
I would still recommend using jpeg or gif over this solution. I've had problems with png colour matching across browsers before and none of those problems exist with other formats.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Vragabond said:
...I've had problems with png colour matching across browsers before...
Click to expand...
Were you using 32bit PNGs, Vragabond? I would be most interested to see an example of this problem when a 32bit PNG is used.

The more I think about it, the more I am convinced that the problem was something else (like a cached image for instance).

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
I've had several issues with colour matching against PNGs before - and in all cases, it's been down to the PNG not being saved as 32-bit.

I know there could be other solutions, but it'd certainly help my curiosity to know if the PNG in abbott567's case was or was not 32-bit (more 'proof' for this as a valid solution, etc).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Jeff, the PNG was 8-bit, because I wanted it to be 8-bit... I used 8-bit because of the filesize. I went with gif later on because it was the second smallest and had no problem with the colour matching. I did not test the 32-bit because gif worked perfect for me, so I will not rule out that using 32-bit would help the OP. But since I thought they went with the poorer option, I felt like suggesting other file types before using that.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
203
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
134
jason.lex
jason.lex
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
717
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top