Is their a more efficient way of coding this in css?

[mobotech]

I was looking at this pixel border tutorial here: http://www.stockvault.net/tutorials/pixelborders_from_photoshop_to_dreamweaver.php

I've turn that pixel border into a working css version. But my way of doing it seems like its more than it should be.

Is their a better way of creating this pixel border in css without using as many div's and css coding as I have?

Here's my version: http://htmlnewbie.x10hosting.com/pixelmenu/

[djr33]

Do you want it to look exactly like that, or is something very close possible?

I'm not sure about the "best" way to do it, but I don't see why you can't use one of these options:

1. Just place one div inside another and give each an (outer) border of 1px. That should make almost exactly what you have.

2. If you want to avoid the "border" property entirely, you could layer a few divs inside each other, each as a slightly larger rectangle, that way creating a "border" around them. It might be slightly less code than what you have currently.

However, what you have now is not really that complex.

The real problem would be if it doesn't display the same way in every browser, in which case the method in (1) is probably more likely to do that-- but not guaranteed as browsers do strange things. You could probably adjust it so that it is fairly consistent though.

[mobotech]

I see what your saying, but I need the border to be images like in the tutorial, I'm new to CSS/HTML, so I'm trying to figure out if theirs another way of doing it using those border images.