Chapter 3: Rounded corners not working?

sarah_beach · July 29th, 2011, 01:17 PM

I'm fairly new to Joomla & CSS, so this is (no doubt) due to something I'm doing - but I can't get the rounded corner graphics to work (Chapter 3, pp 60-68). Can anyone help me with this?

The CSS to create the first div showing the top-left corner works - the top left corner of .moduletable is rounded. But the others remain stubbornly unround.

Here's the CSS and index.php code. I entered it myself, but I've also checked it over and over for errors using my eyes and Firebug, and can't find a problem that would cause this.

Here's the code:

PHP (index.php) -

Code:

<html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template
	?>/css/template.css" type="text/css" />
</head>

<body>

<jdoc:include type="message" />
<div id="logo"> </div>

<div id="colLeft">
    <jdoc:include type="modules" name="left" style="xhtml" />
    <div class="ArticleFooter"><p>&nbsp;</p> </div>
</div>

<div id="colCenter">
   <jdoc:include type="component" />
</div>

<div id="colRight">
   <jdoc:include type="modules" name="right" style="xhtml" />
   <div class="ArticleFooter"><p>&nbsp;</p></div>
</div>

<jdoc:include type="modules" name="debug" />
</body>
</html>

CSS:

Code:

/* Template Styles for the three column template */

/* Define the columns for layout with no visible borders */
#colLeft { float: left; width: 15%; padding: 5px;}
#colCenter {float: left; width: 60%; padding: 5px; }
#colRight { float: left; width: 15%; padding: 5px; }

/* Set the default font for body text */
Body {
font-family: Tahoma,Helvetica,Arial,sans-serif;
font-size: 0.7em/1.5;
}

/* Display the organizational logo */
#logo {
	width: 110%; height: 100px;
	margin-left: -10px;
	background: url(../images/logo.png) left no-repeat;
	border: 1px solid #244223 ;
	padding: 20px;
}

/* Create the first div that shows the top-left rounded corner */
.moduletable, .moduletable_menu {
	margin-top: 10px;
	background: #999   url(../images/topleft.gif)
	top left no-repeat;
	width: 90%;
}


/* Display the top-right rounded corner */
div.moduletable h3, .moduletable_menu h3, {
	background: url(../images/topright.gif)
	top right no-repeat;
	padding: 10px;
	border-bottom: 1px solid #fff;
	margin: 0;
	color: #FFFFFF;
}

/* Align the poll question correctly */
.moduletable table {
	margin-top: -1em;
}

/* Set the poll question parameters */
.poll td {
	font-size: 80%;
	margin-left: 5px;
	padding-left: 0px;
	margin-right: 5px;
	margin-top: 0em;
	padding-top: -10px;
{

.latestnews, .mainmenu, .keyconcepts, .othermenu {
	background: #ccc
	top right repeat-y;
	margin-left: 5px;
	padding-left: 0px;
	margin-right: 5px;
	margin-top: 0em;
}
					
div.moduletable li, .mainmenu li, .keyconcepts li, .othermenu li {
	background: #ccc
	top right repeat-y;
	margin-left: 1.5em;
	/*margin-top: -2em;*/
	padding: 5px;
	font-size: 80%;
}

.ArticleFooter {
	background: url(../images/bottomleft.gif);
	bottom left no-repeat;
	/* clear: both;*/
	margin: -14px 0px 0px 0px;
}

.ArticleFooter p {
	background: url(../images/bottomright.gif);
	bottom right no-repeat;
	display: block;
	clear: both;
	padding: 0 15px 15px 15px;
	margin: -0.8em 0 0 0;
}