14 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I've run out of ideas on this one.... :?

Background:
I have a 6px ridge border surrounding several parts of the page. The colour I want is #BE88B4 (a sort of dusky pink). However I discovered by accident in IE6 that because it sits on a background of #663399 (med/dark violet) I have to use #FFB6F1 (lavender) to achieve the dusky pink.

Problem:
Draw a vertical ridge border of #FFB6F1 on a background of #663399 – notice the pink is on the left and a darker tint is on the right in IE6. In FF2 the pink is on the right and a much lighter hue is on the left!

Not a solution:
I tried picking up the darker tint on the right (IE) and using it as the border for FF thinking it would then throw the correct pink colour to the left, and I would have the colour I want in FF – however it all just turns a murky grey.

Any ideas how I can manipulate this so that I get the equivalent of #BE88B4 on the left in FF2 please?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 4 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Could we have a link please

Could we have a link please Smile

Have YOU said Hello yet?
The CSSCreator Hello Thread

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I wish I could Burlster -

I wish I could Burlster - unfortunately I don't have any way of putting the site up at the moment. Sad

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 11 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, your description is

hi,

your description is quite good, but its quite confusing also. i dont think i can help unless i see what you want to say... can u put up atleast 2 jpegs?

mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Just had that idea

Just had that idea myself...I hope this works Smile

AttachmentSize
IE_border.png 2.98 KB
FF_border.png 2.83 KB

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

A clearer snapshot I hope..

...tried a different part of the page - this might give you a clearer idea. Thanks for having a look.

AttachmentSize
FFborder_v2.png 8.28 KB
IEborder_v2.png 8.45 KB

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 4 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

Could you post just the bit

Could you post just the bit of CSS code up where you've defined the colours?

Thank you

Have YOU said Hello yet?
The CSSCreator Hello Thread

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okay this is the main

Okay this is the main container bit...

#container { position: relative; background-image: url("images/viojewel140_2.gif"); background-repeat: repeat-y; margin: 0 13%; border: 6px ridge #ffb6f1; }

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 4 years 41 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

IE and FF render ridge,

IE and FF render ridge, inset and outset differently. there is no way around it.

However, you could, perhaps (if it is important enough) sit one div on top of another slighly bigger one and encase each with 3px borders of slighly different colours. Clumsy, but it should work.

Life's a journey. Enjoy the trip.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Although I do realise that

Although I do realise that it may be a requirement of your design, it is still worth noting that chasing after cross browser perfection is not considered a sensible game and one just has to except at times that there are differences and bugs that occur that make this impossible and that no one but us compares between two different browsers.

You simply can't do anything about miss-handling of borders; transparent, double or dotted, outset, inset etc one could go on and on listing all the problems.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Phreestyle wrote:IE and FF

Phreestyle wrote:
IE and FF render ridge, inset and outset differently. there is no way around it.

Yes, I had a feeling someone might say that Laughing out loud

Quote:
However, you could, perhaps (if it is important enough) sit one div on top of another slighly bigger one and encase each with 3px borders of slighly different colours. Clumsy, but it should work.

Eerm...I think I've got a few too many ducks to get in a row before I attempt this sort of thing, but I appreciate the suggestion - thanks Phreestyle.

Hugo wrote:
Although I do realise that it may be a requirement of your design,...

I put the ridge border in because it seemed to "finish" things a little more and has come in quite handy on another page (I've got 3 laid out because they have different requirements due to the content).

Quote:
...it is still worth noting that chasing after cross browser perfection is not considered a sensible game and one just has to except at times that there are differences and bugs that occur that make this impossible and that no one but us compares between two different browsers.

Oh! How true Smile However realising the limitations of this particular instance, I was hoping to find a way of getting a similar colour to the one I wanted (#BE88B4 in it's true state) that would render in a similar colour for both major(?) browsers. As they are, they're like chalk and cheese and simply won't do at all Sad

Oh well...put that one on the back-burner and maybe the answer will turn up by the time I'm up to page xx when I'll probably have to make the decision to ditch it!

Thank you to everyone who chipped in here, I really do appreciate it.

Vicki

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 3 years 4 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

If a fixed design, no sneaky

If a fixed design, no sneaky ways of having the border as a repeating background image in a new container with actual border images for the top and bottom set with margins to sit tightly against the top and bottom respectively? Do you know what I mean or do I make no sense?

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Do you know what I

Quote:
Do you know what I mean or do I make no sense?

Weeeell...it isn't easy Smile but I think I get the gist of what you're saying - unfortunately it would simply be too difficult because I have used it around divs/ids on the other pages in the "content" box as well as around the bits you see in the snapshots - so there are simply too many bits to cover with this sort of idea.

But many thanks for bending your brain to it for me!

Vicki

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 4 years 41 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

This is what you need. The

This is what you need.
The 'rendering-intent' property.

Just got to wait for CSS3 and you'll be sorted.

Life's a journey. Enjoy the trip.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 18 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

The way it's going, we'll

:thumbsup:

The way it's going, we'll be anticipating CSS4 by the time I'm sorted!!

Tongue Laughing out loud

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile