How to opimze this code?

admin · Jan 11, 2008

I have a code that I'm using to create boxes that has round corners. The code is long and I'm sure there's a better way to make a box that will adjust by the amount of text and still, have 4 different coreners.

So this is the code:

.locationaBarTopCornersHolder {width: 400px; height: 11px; background: #E6E5F5;}
.locationaBarCornerTL {background: #E6E5F5 url('CornerTL.jpg') no-repeat; width: 11px; height: 11px; float: left;}
.locationaBarCornerTR {background: #E6E5F5 url('CornerTR.jpg') no-repeat; width: 11px; height: 11px; float: right;}
.locationaBarBody {width: 378px; padding: 0px 11px 0px 11px; background: #E6E5F5; font: 1.1em Verdana, Arial, Helvetica, sans-serif; line-height:1.6em; margin: 0px;}
.locationaBarBottomCornersHolder {width: 400px; height: 11px; background: #E6E5F5;}
.locationaBarCornerBL {background: #E6E5F5 url('CornerBL.jpg') no-repeat; width: 11px; height: 11px; float: left;}
.locationaBarCornerBR {background: #E6E5F5 url('CornerBR.jpg') no-repeat; width: 11px; height: 11px; float: right;}

Please let me know if there's any way I can make it shorter and still make it work on IE and FF OR maybe there's a better way to do what I'm trying to do here.

Thanks!try using backgrounds rather than floats - assuming you don't want a border.
If you have a fixed width you can make the whole horizontal stripe in one go.

Just for the backgrounds use white to hide the background color.Can I use two images as background for the top corners for example?
I'm not sure how to do that. I don't have a fixed width...

I'm not sure how to handle this...Hi Weee
I've attached a zip with a crude example of what I mean, built for someone else.
For fixed width you could take a peek at my site

DaveThanks man. It's working great. I love that code.
There's one thing I would like to ask you. As you can see I made a few adjustments so it'll work for my needs but there's something I'd like to fix.

I would like to have the text and the image to be always next to the top (of the "content" div). For some reason, there's an extra space there (from the top) and I don't know how to remove it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Page title</title>
<style type="text/css">

</style>

</head>
<body>
<div id="tl"><div id="tr"></div></div>
<div id="content">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image.jpg" width="100" height="54" alt="">
All content in this section All content in this section All content in this section All content in this section
All content in this section All content in this section All content in this section All content in this section
All content in this section All content in this section All content in this section All content in this section
</div>
<div id="br"><div id="bl"></div></div>
</body>
</html>

Thanks again DaveSW!Hi Weee
I've attached a zip with a crude example of what I mean, built for someone else.
For fixed width you could take a peek at my site

Dave

This code breaks in a standards compliant browser (ie: Firefox, Netscape, etc.)What do you mean by that?What do you mean by that?

Try it. Nothing lines up properly.r u sure?
It works fine here...works fine here (or it did)
I'll alter the original example tomorrow to get it to the top of the thing - basically it will be ll four nested divs in one block.thanksHi Weee
Here's the latest sample of delightful code for your delectation... well, a simple rounded corners page anyway!!
Dave

How to opimze this code?

admin

Administrator