Forum Moderators: not2easy
[w3.org...]
I've played a bit with it and do read the spec fuly, there are some unexpected things in there to me (like having extra backgrounds)
This is what works in safari:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
-webkit-border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 27 27 27 round stretch;
border-image: url('http://www.w3.org/TR/css3-background/border.png') 27 27 27 27 round stretch;
border: 20px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<p>Hello world</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam elit est, venenatis
eu, vulputate ut, semper at, pede. Mauris tempor vehicula velit. Nulla vel justo. Quisque erat nisi
, venenatis ut, convallis sit amet, bibendum ut, velit. Pellentesque non urna sed elit pharetra auct
or. Duis ac quam. Phasellus cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Morbi aliquet neque egestas lectus. Morbi a arcu. Curabitur nec mi dapibus a
ugue placerat malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cu
bilia Curae; Pellentesque vel diam ac leo dictum vestibulum. Phasellus felis erat, lacinia nec, vehi
cula nec, imperdiet eu, neque. Etiam dignissim. Vivamus varius diam eget lacus. Etiam a nisl. </p>
</div>
</body>
</html>
I used the w3c demo image, the "27" is the amount of pixels (without "px" added to it in the raster image, where it cuts the image in 9 parts.
Safari for now only honors hte -webkit- prefixed version (as it should). The second line is for if (and when) the CSS3 stuff become the real thing. Having the center act as background is scary sometimes.
note CSS3 also has rounded corers, so there's no need to create rounded corner images to be used in this manner unless you want them to be more "artsy".
[edited by: SuzyUK at 4:51 pm (utc) on Oct. 6, 2008]
[edit reason] fixed side scroll [/edit]
#outer
{
background-image: url(images/background);
background-repeat: repeat;
background-color: #cccccc;
width:90%;
padding: 1em;
}
#inner
{
background-color:#ffffff;
}
<div id="outer">
<div id="inner">
<p>The quick brown fox jumps over the lazy dog!</p>
</div>
</div>
Willy. That's a good idea and I like it, but there's one problem. It works good with internet explorer, but I tried it with Mozilla / Firefox, and with Firefox, the outer div goes off the screen and a scroll bar appears at the bottom of the page. I'm using the latest version of Mozilla / Firefox 5.0 / 3.0.3
Below is the code with the <html> tags. Would you see if you can get it working with Firefox so my Firefox viewers don't have to scroll.
<html>
<head>
<title>div test</title>
<style type="text/css">
#outer
{
background-image: url(test.jpg);
background-repeat: repeat;
background-color: #cccccc;
width:100%;
padding: 5em;
}
#inner
{
background-color:#ffffff; padding: 2em;
}
p {margin: 0px;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<p>
The quick brown fox jumps over the lazy dog!
</p>
</div>
</div>
</body>
</html>
width:100%; #outer
The reason is that IE6 uses a wrong box model.
Still a div starts out to be as wide as its parent. Setting it to 100% width and then adding padding means a standard box will end up to be wider than the parent. Standards compliant width sets the width of the content box. Not of any of the nested boxes around that.
See [w3.org...] for drawing and more explanations.
