Border Problems... [Archive]

DarkLightA

Mar 14th, 2009, 11:12 AM

My site is here: http://darklighta42.webs.com/testsites/gamesite.html

I've tried to create a square pattern effect along the edges by adding a dotted border in the colour of the background (black). This works in Chrome and Opera, but not in IE or FF. Is there a way to hack it for these browsers?

The code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My site.</title>

<style type="text/css">
body {
background: black;
font-size: 62.5%;
}

#entpage {
margin: 2em 3% 1.5em;
background: transparent;
}

#adheader {
padding: 2% 2.5% 2% 2.5%;
width: inherit;
background-color: #CC0000;
border: 5px dotted #000;
}

#mainpage {
margin: 2% 0;
overflow: auto;
background: transparent;
}

#leftcol {
width: 17%;
float: left;
background-color: #CC0000;
border: 5px dotted #000;
}

#leftcol div {
padding: 0;
}

#maincol {
width: 53%;
margin: 0 0 0 3%;
float: left;
background-color: #CC0000;
border: 5px dotted #000;
}

#rightcol {
width: 16%;
float: right;
background-color: #CC0000;
border: 5px dotted #000;
}

div.cont {
padding: 2% 3%;
}
</style>
</head>

<body>
<div id="entpage">
<div id="adheader">
ads go here
</div>

<div id="mainpage">
<div id="leftcol">
<ul>
<li>Stuff</li>
<li>Other</li>
<li>Stuff</li>
<li>Others</li>
<li>MEH.. -_-</li>
</ul>
</div>

<div id="maincol">
<div class="cont">
stufff.....
</div>
</div>

<div id="rightcol">
<div class="cont">
stuff...
</div>
</div>
</div>
</div>
</body>
</html>

effpeetee

Mar 14th, 2009, 05:08 PM

http://darklighta42.webs.com/testsites/gamesite.html

Works in FFox 3.1, Safari, Chrome and IE8 for me, both with the site and the code above.

(The site has two scripts in the body section of the code which I removed before running as my security told me that they were potentially risky.)

Frank

TinyScript

Mar 14th, 2009, 05:33 PM

here's some others
http://www.yourhtmlsource.com/stylesheets/cssborders.html

effpeetee

Mar 14th, 2009, 07:36 PM

Now added to my Sources program (http://exitfegs.co.uk/Sources.html). This program is self contained and you have my encouragement to download it for your own use.

Frank

Stardog

Mar 14th, 2009, 08:32 PM

I think each browser renders their dotted/dashed borders differently, so I'd advise not using them or using them at small sizes only.