CSS Forum

**cheesemaker** · 10:45 AM

I used the code generated from here: http://www.neuroticweb.com/recursos/...8&fondo=a7b6e3

It works fine whenever I place the code on it's own page, but whenever I place the code in my layout. The top of the box doesn't show up.

Layout code:

Code:

<!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>Arcade Demand - Free Online Games, Your Favorite Games at Your Demand!</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
<!--

function roll(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

//-->
</script>
</head>

<body>

<div id="wrapper">

<div id="header">
<div id="head1"></div><a href="#home"><div id="logo"></div></a></div><div id="head2"></div>
</div>

<div id="menu">
<div id="menu1"></div><a href="#home" onmouseover="roll('home', 'images/arcade_hover_05.jpg')" 
onmouseout="roll('home', 'images/arcade_05.jpg')"><div id="home"><img name="home" src="http://www.webmaster-talk.com/images/arcade_05.jpg" width="48" height="37" /></div></a><div id="spacer1">
</div><a href="#allgames" onmouseover="roll('allgames', 'images/arcade_hover_07.jpg')" 
onmouseout="roll('allgames', 'images/arcade_07.jpg')"><div id="allgames"><img name="allgames" src="http://www.webmaster-talk.com/images/arcade_07.jpg" width="84" height="37" /></div></a><div id="spacer2">
</div><a href="#action"onmouseover="roll('action', 'images/arcade_hover_09.jpg')" 
onmouseout="roll('action', 'images/arcade_09.jpg')" ><div id="action"><img name="action" src="http://www.webmaster-talk.com/images/arcade_09.jpg" width="59" height="37" /></div></a><div id="spacer3">
</div><a href="#strategy" onmouseover="roll('strategy', 'images/arcade_hover_11.jpg')" 
onmouseout="roll('strategy', 'images/arcade_11.jpg')"><div id="strategy"><img name="strategy" src="http://www.webmaster-talk.com/images/arcade_11.jpg" width="78" height="37" /></div></a><div id="spacer4">
</div><a href="#adventure" onmouseover="roll('adventure', 'images/arcade_hover_13.jpg')" 
onmouseout="roll('adventure', 'images/arcade_13.jpg')"><div id="adventure"><img name="adventure" src="http://www.webmaster-talk.com/images/arcade_13.jpg" width="88" height="37" /></div></a><div id="spacer5">
</div><a href="#sports" onmouseover="roll('sports', 'images/arcade_hover_15.jpg')" 
onmouseout="roll('sports', 'images/arcade_15.jpg')" ><div id="sports"><img name="sports" src="http://www.webmaster-talk.com/images/arcade_15.jpg" width="61" height="37" /></div></a><div id="spacer6">
</div><a href="#puzzle" onmouseover="roll('puzzle', 'images/arcade_hover_17.jpg')" 
onmouseout="roll('puzzle', 'images/arcade_17.jpg')" ><div id="puzzle"><img name="puzzle" src="http://www.webmaster-talk.com/images/arcade_17.jpg" width="60" height="" /></div></a><div id="spacer7">
</div><a href="#other" onmouseover="roll('other', 'images/arcade_hover_19.jpg')" 
onmouseout="roll('other', 'images/arcade_19.jpg')"><div id="other"><img name="other" src="http://www.webmaster-talk.com/images/arcade_19.jpg" width="56" height="37" /></div></a><div id="menu2"></div>
</div>

<div id="content">

<div id="submenu">
<div id="submenu1"></div><div id="submenu2">Welcome to Arcade Demand, the best place to play free online games!</div><div id="submenu3"></div>
</div>

<div class="rbroundbox">
	<div class="rbtop"><div></div></div>
		<div class="rbcontent">
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
		</div><!-- /rbcontent -->
	<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->

</div>

</div>

</body>
</html>

Stylesheet

Code:

body{
	background-color: #a7b6e3;
	margin: 0px;
}
#wrapper{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#header{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#head1{
	float: left;
	background-image: url(images/arcade_01.jpg);
	backround-repeat: none;
	width: 36px;
	height: 144px;
}
#logo{
	float: left;
	background-image: url(images/arcade_02.jpg);
	background-repeat: none;
	width: 334px;
	height: 144px;
}
#head2{
	float: left;
	background-image: url(images/arcade_03.jpg);
	backround-repeat: none;
	width: 630px;
	height: 144px;
}
#menu{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#menu1{
	float: left;
	background-image: url(images/arcade_04.jpg);
	width: 202px;
	height: 37px;
}
#home{
	float: left;
	background-image: url(images/arcade_05.jpg);
	width: 48px;
	height: 37px;
}
#allgames{
	float: left;
	background-image: url(images/arcade_07.jpg);
	width: 84px;
	height: 37px;
}
#action{
	float: left;
	background-image: url(images/arcade_09.jpg);
	width: 59px;
	height: 37px;
}
#strategy{
	float: left;
	background-image: url(images/arcade_11.jpg);
	width: 78px;
	height: 37px;
}
#adventure{
	float: left;
	background-image: url(images/arcade_13.jpg);
	width: 88px;
	height: 37px;
}
#sports{
	float: left;
	background-image: url(images/arcade_15.jpg);
	width: 61px;
	height: 37px;
}
#puzzle{
	float: left;
	background-image: url(images/arcade_17.jpg);
	width: 59px;
	height: 37px;
}
#other{
	float: left;
	background-image: url(images/arcade_19.jpg);
	width: 56px;
	height: 37px;
}
#spacer1{
	float: left;
	background-image: url(images/arcade_17.jpg);
	width: 60px;
	height: 37px;
}
#spacer1{
	float: left;
	background-image:url(images/arcade_06.jpg);
	width: 9px;
	height: 37px;
}
#spacer2{
	float: left;
	background-image: url(images/arcade_08.jpg);
	width: 9px;
	height: 37px;
}
#spacer3{
	float: left;
	background-image: url(images/arcade_10.jpg);
	width: 9px;
	height: 37px;
}
#spacer4{
	float: left;
	background-image: url(images/arcade_12.jpg);
	width: 9px;
	height: 37px;
}
#spacer5{
	float: left;
	background-image: url(images/arcade_14.jpg);
	width: 9px;
	height: 37px;
}
#spacer6{
	float: left;
	background-image: url(images/arcade_16.jpg);
	width: 9px;
	height: 37px;
}
#spacer7{
	float: left;
	background-image: url(images/arcade_18.jpg);
	width: 9px;
	height: 37px;
}
#menu2{
	float: left;
	background-image: url(images/arcade_20.jpg);
	width: 202px;
	height: 37px;
}
img{
	border: 0px;
}
#content{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#submenu{
	width: 990px;
	margin-left: auto;
	margin-right: auto;
}
#submenu1{
	float: left;
	background-image: url(images/arcade_22.jpg);
	width: 9px;
	height: 25px;
}
#submenu2{
	float: left;
	background-image: url(images/arcade_23.jpg);
	background-repeat: repeat-x;
	width: 971px;
	height: 25px;
	padding-top: 4px;
	text-align: center;
	font-family: Arial;
	font-weight: bold;
	font-size: 10pt;
	color: #FFFFFF;
}
#submenu3{
	float: left;
	background-image: url(images/arcade_25.jpg);
	width: 9px;
	height: 25px;
}
/* set millions of background images */
.rbroundbox { background: url(images/nt.gif) repeat; }
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 990px; }

Please help me fix this issue. It is really urgent! All the content for my website is going to be in the rounded corner boxes.

**edgray** · 12-04-2010, 10:50 AM

why not use CSS3 for this and accept that older browsers will see a square box?

**cheesemaker** · 12-04-2010, 10:55 AM

All the boxes need to be rounded, I don't really care about the older browsers. They are barely used nowadays. But this doesn't even work in the latest version of google chrome. Please explain more about CSS3? I don't read up much on improving my CSS, as I am mainly a PHP programmer, but money is tight, so I needed to code this layout myself.