Jump to content

Stylesheet problem


Lonz

Recommended Posts

I'm by no means an expert on the CSS stylesheet front. So I'd like a few pointer over a small problem I'm facing. I'm trying to get a few borders in my template to tidy things up a bit. I've attached some screenshots to help illustrate my problem, as well as an extract from the stylesheet and template headers/footers.

 

I'm sure someone in the know will quickly find and solve the problem :)

 

Here is what the template looks like so far:

tcadmin.gif

 

Here is what it should look like according to Frontpage, without the actually panel interface:

frontpage.gif

 

In the TCAdmin Custom Header/Footer templates, I have put the following:

 

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
<!--
body         { background-image: url('images/bg.gif'); background-repeat: repeat-x }
-->
</style>
</head>

<body bgcolor="#242C31">

<div align="center">
 <center>
 <table border="0" width="750" cellspacing="0" cellpadding="0" class="overall_table">
   <tr>
     <td width="100%" style="background-image: url('images/table_bg.gif'); background-repeat: repeat-x; border: 1 solid #C0C0C0">
       <table border="0" width="100%" cellspacing="3" cellpadding="0">
         <tr>
           <td width="100%" style="border: 1 dotted #BBC5CC" height="75" class="overal_top">
             <table border="0" width="100%" height="75" cellspacing="0" cellpadding="0">
               <tr>
                 <td width="50%" style="background-image: url('images/inner_top_bg.gif'); background-repeat: repeat-x" bgcolor="#202A31" valign="top"><img border="0" src="images/logo_left.gif" width="278" height="75"></td>
                 <td width="50%" style="background-image: url('images/inner_top_bg.gif'); background-repeat: repeat-x" bgcolor="#202A31" valign="top"> </td>
               </tr>
             </table>
           </td>
         </tr>
         <tr>
           <td width="100%" style="border: 1 dotted #BBC5CC">
             <p align="center">

 

And for the footer:

 

          </tr>
         <tr>
           <td width="100%" style="border: 1 dotted #BBC5CC" class="overall_bottom">
             <p align="center"><font face="Verdana" size="1" color="#C0C0C0"><b>© Copyright
             CGZServers.co.uk - 2007.<br>
             All Rights Reserved.</b></font></td>
         </tr>
       </table>
     </td>
   </tr>
 </table>
 </center>
</div>

</body>

</html>

 

Notice I have added the "class" tags in myself, I assumed this was what was necessary to identify a seperate part of the stylesheet. So I continued to add the following lines of code on the bottom of my Styles.css in the /Default/ folder.

 

 

.overall_table
{
border: 1 solid #C0C0C0;
}

.overall_top
{
background-color: #202A31;
border: 1 dotted #BBC5CC;
}

.overall_bottom
{
border: 1 dotted #BBC5CC;
}

 

 

However, as you can see, no borders show up.

 

Any pointers as to where I'm going wrong? Apart from that, very happy with how it's coming along :). I shall be releasing it for public use very shortly after completion.

Link to comment
Share on other sites

What browser are you looking at this at? and which browser are you writing the css for? that could easily be the problem, IE and the others have big issues sometimes with frames compared to other similar software. Many frustrations over this across the industry hehe :)

Link to comment
Share on other sites

Borders should be doable in firefox as well. Try adding px to your code

.overall_table
{
border: 1px solid #C0C0C0;
}

.overall_top
{
background-color: #202A31;
border: 1px dotted #BBC5CC;
}

.overall_bottom
{
border: 1px dotted #BBC5CC;
}

 

Also from time to time when IE and firefox do want different codes in CSS to work, you can ussually put both codes in and have it work ;)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use