11 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 12 years 11 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Does anyone know of a JavaScript solution to IE's 1px dotted problem.

Getting a dotted underline is easy using a background-image with repeat. However, to get a dotted box, you would have to nest 4 layers and apply the image 4 times to one side of each layer. This is a major markup issue to satisfy IE.

A better alternative would be for JS to draw the dots around the box (if it could). Those viewers who don't have js enabled could enjoy the dashes and everyone else can enjoy the dots.

Question is, does this exist? If not, does anyone here have the capability to develop it and then announce in the develo-sphere and claim some fame (siting me, of course, as the inspiration)!

On a serious level though, this is much needed by us at this time.

Tags:
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 39 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi No java needed: /*

Hi

No java needed:

/* Hides from IE Mac \*/

html {background:url(fakeimg.gif);}

/* End Hack */

The image doesn't exist of course!

fambi
Offline
Enthusiast
Last seen: 12 years 11 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

ClevaTreva, I have no idea

ClevaTreva, I have no idea how that would solve the problem.

How would you achieve the following with your solution...

#element1 { border: 1px dotted #ccc; }

#element2
{
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}

#element2
{
border-right: 1px dotted #ccc;
border-left: 1px dotted #ccc;
}

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

Increase 1px to 2px then

Increase 1px to 2px then problem goes away but you do have a thick set of dots Smile

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

fambi
Offline
Enthusiast
Last seen: 12 years 11 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Hugo... i hope your joking.

Hugo... i hope your joking.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

I don't think there's

I don't think there's anything funny about Hugo's solution. Hey, it's IE6, nothing is funny.

IE≤6 does not support dotted for a 1px border. It does for ≥2px. IE7 does support the dotted border type for 1px, except for several of the form controls.

Solution: Use the * html hack to feed IE6 and below a 2px border, or let IE≤6 users suffer with the ugliness. You could desaturate the border color to make it appear not so strong. I usually make a solid border in light gray to simulate the dotted if IE users' æsthetic feelings are a concern.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fambi
Offline
Enthusiast
Last seen: 12 years 11 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

If a 2px width is triggered,

If a 2px width is triggered, then in addition to ugliness there is also a width issue which effects the box model. Dashes, at least, are just ugly without a width issue.

The question here, is a javascript solution. Is javascript able to draw dots? If so, then why can it not be told to draw dots around a layer completely seperate from css? Non-js users can suffer the ugliness of dashes and js users (majority) can enjoy the dots.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

To my knowledge, javascript

To my knowledge, javascript does not provide any drawing capability. It works against the DOM and uses available css properties.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

fambi
Offline
Enthusiast
Last seen: 12 years 11 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Thanks Gary. Shame though!

Thanks Gary.

Shame though!

fambi
Offline
Enthusiast
Last seen: 12 years 11 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Just to let you guys know, i

Just to let you guys know, i ended up using "1px solid #eee" and it gave the same aesthetic appeal.

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

So we chalk up another

So we chalk up another victory to IE design factory , clearly they considered that a 1px dotted border was bordering Smile on the absurd so to prevent us committing this design faux pa ensured that any 1px dotted border would become the much better looking 'dashed'

Have to admit I long ago gave up wasting energy on such problems hence my only slightly joking comment earlier. 1px dotted borders don't exist IE made sure of that.

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 39 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi U thougbt the problem as

Hi

U thougbt the problem as the dotted border/ dashed border smearing thingy (happens when you use a scroll muse in IE6). That image trick fixes it.