Archive for the 'CSS' Category

1px dotted border in IE

Thursday, December 16th, 2004

One more flaw in IE is that it does not render 1px dotted borders. What you get from IE are 1px dashed borders. 2px dotted borders are fine, however. One solution is presented by Adam Kalsey but that does not work if you want a dotted border on all 4 sides. A little modification is all that is needed, and no css parsing bug hacks are necessary. First you need is a 2×2 px image where the top left and bottom right pixel is one color and the top right and bottom left pixel is a different color. Then wrap the element inside a div with the following class :
.wrap{
background-image: url(2x2pxl.gif);
background-repeat: repeat;
padding: 1px;
width: 250px;
}

set the width to whatever value is appropriate.
Then assign a background color to the element you want the dotted border on so the 2 by 2 pixel image doesn’t show through
#elementWithDottedBorder{
background-color: #FFFFFF;
}

Put it together like this …
<div class="wrap">
<div id="elementWithDottedBorder">
Bla bla bla
</div>
</div>

And you’re done!

Top 3 css properties I wish Internet Explorer supported

Friday, December 10th, 2004

As some of us know, Internet Explorer’s CSS support is less than perfect. Not strange considering the latest version is 3 years old. There are however a few pretty basic CSS properties that, if IE supported them, would make it easy to make our websites just a little bit more elegant.

  1. Hover pseudo element on other elements than a. A cute visual effect ideal for making f.ex. menubuttons change color when you point your mouse at one. For menubuttons, the effect can be accomplished by making links behave like a block element and set width, height and/or padding on them. For other elements, Javascript is the only solution.
    a.hoverlink{
    display:block;
    }

    This technique is used on some menus on the Listamatic website. In my experience it’s one more source of browser inconsistencies. Javascript works too, but that’s far more work than what should be required.
  2. Fixed positioning. Want to make a menu stay in the same place when you’re scrolling down a page? You could by setting a fixed position on
    your menu but IE just ignores it. A little Javascript can simulate this behaviour but it should have been as easy as
    #menu{
    position: fixed;
    top: 100px;
    left: 10px;
    }
  3. min/max width/height. The CSS specification includes properties for setting minimum and maximum sizes on elements and they are supported by most modern browsers. The ideal solution for floating layouts that expands with the surfers browser window. With a min-width you can make sure that your layout doesn’t collapse completely on a small screen and max-width ensures that your textlines doesn’t become unreadably long.F.ex. :
    #page{
    min-width: 600px;
    max-width: 950px;
    }

Until Microsoft releases IE7 in a few years time it looks like the only solution besides a browser revolution is Dean Edwards’ IE7.