p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Professional Joomla! ISBN: 978-0-470-13394-1 (http://p2p.wrox.com/forumdisplay.php?f=362)
-   -   Chapter 3: Rounded corners not working? (http://p2p.wrox.com/showthread.php?t=84529)

sarah_beach July 29th, 2011 01:17 PM

Chapter 3: Rounded corners not working?
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) -


<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" />


<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 id="colCenter">
  <jdoc:include type="component" />

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

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



/* 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;

All times are GMT -4. The time now is 10:58 PM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.