SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS tables and no border

    How Can I set my css so that if I add a class of noborder to a table tag then the table, and the th's and the td's and the tr's all ahve no border for that 1 table?

    Regards,
    Neil

  2. #2
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone help with this as i am sure there must be a simple solution?

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    . noborder, .noborder tr, .noborder th, .noborder td { border: none; }

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you just write down exactly what that means in english. I know that sounds strange but it would help me!

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give every element that has the class .noborder the style border: none (which is the shorthand for border-width, border-style, border-color).
    Then next is .noborder tr which does the same to every tr inside the element that has the class .noborder. The comma is just to separate one select statement from the next.

    Example:
    Code:
    <table class="noborder">
    <tr><th>Somethingr</th></tr>
    <tr><td>Something</td></tr>
    </table>
    Hope that helps.

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so, If I aplly class="noborder" to a table tag that will remove the border from the table tag the th tag the td tag and the tr tag for that particular table?

  7. #7
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it doesn;t seem to remove any borders at all

  8. #8
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your code look like?

  9. #9
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the relevent CSS:

    /* Table Styles */

    /* Default Table Style */
    #content table
    {
    border-collapse: collapse;
    border: solid 1px black;
    text-align: center;
    width: 90&#37;;
    margin-left: auto;
    margin-right: auto;
    }

    #content table td
    {
    border: solid 1px black;
    }
    /*End Default Table Style */

    .noborder, .noborder tr, .noborder th, .noborder td
    {
    border: none;
    }




    #content table tr th
    {
    border-collapse: collapse;
    border: solid 1px #012349;
    text-align: center;
    background-image: url(../img/site_graphics/bar_blend.jpg);
    background-repeat: repeat-x;
    color: #00ccff;
    background-color: #012349;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    }

    #content table th h1
    {
    text-align: center;
    }

    #content table th h2
    {
    text-align: center;
    }

    #content table tr td
    {
    padding: 5px;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
    }

    #content table tr td p
    {
    text-align: center;
    }

    #content table tr .newscell
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

  10. #10
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fredda View Post
    . noborder, .noborder tr, .noborder th, .noborder td { border: none; }
    Just noticed a space that should be there in the beginning.
    Code:
    .noborder, .noborder tr, .noborder th, .noborder td { 
        border: none;
    }

  11. #11
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post your html code as well please? Guessing its a specificity issue.
    Eg.
    Code:
    .noborder { border: none; }
    #content table { border: 1px solid #000000; }
    Code:
    <div id="content">
        <table class="noborder">
            <tr>
                <th>something</th>
            </tr>
            <tr>
                <td>something</td>
            </tr>
        </table>
        </div>
    Here the table will get a black border since the table rule is more specific than the .noborder one.
    Next try adding #content before .noborder and you'll see that the border is gone.
    More info here: http://reference.sitepoint.com/css/specificity

  12. #12
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still doesn;t work and I did notice that space and removed it last time.

  13. #13
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops, must ahve posted at same time, let me read your last post now

  14. #14
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by fredda View Post
    Could you post your html code as well please? Guessing its a specificity issue.
    Eg.
    Code:
    .noborder { border: none; }
    #content table { border: 1px solid #000000; }
    Code:
    <div id="content">
        <table class="noborder">
            <tr>
                <th>something</th>
            </tr>
            <tr>
                <td>something</td>
            </tr>
        </table>
        </div>
    Here the table will get a black border since the table rule is more specific than the .noborder one.
    Next try adding #content before .noborder and you'll see that the border is gone.
    More info here: http://reference.sitepoint.com/css/specificity
    I think this is what is happening. How do I get around it?

  15. #15
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #content .noborder, #content .noborder tr, #content .noborder th, #content .noborder td { 
        border: none; 
    }
    I'm terrible at explaining so I suggest you check out the css reference on specificity .

  16. #16
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would make more sense to post your entire HTML code as well as the CSS. That would help diagnose the problem.
    Todd Temple > T2 Design

  17. #17
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll ty and do that a bit later for you

  18. #18
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Here is the source code for the page:

    Code HTML4Strict:
    <!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>
     
    <!--Favicon Link-->
    <link rel="shortcut icon" href="favicon.ico" >
    <!--------------------->
     
    <!--Meta Tags-->
    <!--Meta Tags-->
    <meta name="classification" content="Entertainment" />
    <meta name="description" content="Alton Towers Mania, a great resource about the UK's number 1 theme park, Alton Towers." />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
    <meta name="keywords" content="alton towers, towers street, merrie england, katanga canyon, gloomy wood, forbidden valley, old macdonalds farmyard, storybook land, adventure land, x-sector, the towers, fountain square, ug land, the gardens, splash landings hotel, alton towers hotel, waterpark, cariba creek, teacups, the flume, splash kart challenge, congo river rapids, runaway mine train, duel, haunted house, thunderlooper, nemesis, blade, ripsaw, air, ribena berry bish bash, doodle doo derby, riverbank eye spy express, squirrel nutty ride, spinball whizzer, beastie, oblivion, enterprise, submission, black hole, hex, legend of the towers, rita, queen of speed, corkscrew, the, ug swinger, bone shaker, 1001 nights, charlie and the chocolate factory, toyland tours, peugeot, driving school, family days out, staffordshire, alton, jcb, farley, ride tracker, news, electric towers, chocolate towers, 207, Bolliger &amp; Mabilard, Intamin, Huss, Days out, extraordinary, flying machine, carribean, halloween, summer, lake, thrilling, adrenaline, hogs head, grill, ride tracker, forums, roller coasters, themeparks, amusement parks, days out, alton, towers, castle, ghost, hunt" />
    <meta name="robots" content="ALL" />
    <meta name="rating" content="Safe For Kids" />
    <meta name="author" content="Neil Tonge" />
    <meta http-equiv="reply-to" content="rctneil@aol.com" />
     
    <!--<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0);" />--><!--------------------->
     
    <!--Stylesheet Links-->
    <link href="stylesheets/reset_styles.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/layout.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/navigation.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/misc.css" rel="stylesheet" type="text/css" />
    <link href="stylesheets/tabs.css" rel="stylesheet" type="text/css" />
    <!--------------------->
     
    <!--Javascript includes for prototype tab script-->
    <script src="tabs/prototype.js" type="text/javascript"></script>
    <script type="text/javascript" src="tabs/fabtabulous.js"></script>
    <!--------------------->
     
    <!--Block of Javascript for drop down parts-->
    <script type="text/javascript">
    function toggle( targetId ){
    if (document.getElementById){
    target = document.getElementById( targetId );
    if (target.style.display == "none"){
    target.style.display = "";
    } else {
    target.style.display = "none";
    }
    }
    }
    </script>
    <!--------------------->
     
     
    <!--Block of javascript for hint boxes-->
    <script type="text/javascript">	
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link
     
    /////No further editting needed
     
    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
    var ie=document.all
    var ns6=document.getElementById&&!document.all
     
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
     
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
     
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
    if (whichedge=="rightedge"){
    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
    }
    else{
    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    }
    return edgeoffset
    }
     
    function showhint(menucontents, obj, e, tipwidth){
    if ((ie||ns6) && document.getElementById("hintbox")){
    dropmenuobj=document.getElementById("hintbox")
    dropmenuobj.innerHTML=menucontents
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (tipwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=tipwidth
    }
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    dropmenuobj.style.visibility="visible"
    obj.onmouseout=hidetip
    }
    }
     
    function hidetip(e){
    dropmenuobj.style.visibility="hidden"
    dropmenuobj.style.left="-500px"
    }
     
    function createhintbox(){
    var divblock=document.createElement("div")
    divblock.setAttribute("id", "hintbox")
    document.body.appendChild(divblock)
    }
     
    if (window.addEventListener)
    window.addEventListener("load", createhintbox, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createhintbox)
    else if (document.getElementById)
    window.onload=createhintbox
    </script>
    <!--------------------->
     
     
     
    <!--Set the page title-->
    <title>Alton Towers Mania - For everything Alton Towers! :: Download File</title><!--------------------->
     
    </head>
     
    <body>
     
    <div id="bigwrapper">
     
    <!--If live.txt exits then include live db connection code otherwise include localhost db connection code-->
    <!--------------------->
     
    <div id="container">
     
     
    <div id="header">
    	<a href="index.php">
    		<img src="img/site_graphics/header/header.jpg" alt="Alton Towers Mania" />
    	</a>
    </div>
     
     
    <div id="navigation">
    	<img src="img/headings/navbar_headings/navigation.jpg" alt="Navigation" class="heading" />
     
    <div id="navlinks">
    <ul>
    	<li>-&nbsp;<a href="index.php">Home</a></li>
    	<li>-&nbsp;<a href="guides.php">Guides</a></li>
    	<li>-&nbsp;<a href="featuresinfo.php">Features & Info</a></li>
    	<li>-&nbsp;<a href="multimedia.php">Multimedia</a></li>
    	<li>-&nbsp;<a href="map.php">Resort Map</a></li>
    	<li>-&nbsp;<a href="photokorn">Image Gallery</a></li>
    	<li>-&nbsp;<a href="#.php">Community Forum</a></li>
    	<li>-&nbsp;<a href="contactus.php">Contact Us</a></li>
    </ul>
    </div>
    <img src="img/small_graphics/menu_divider.gif" class="menudivider" />
     
    <img src="img/headings/navbar_headings/status.jpg" alt="Resort Status" class="heading" />
    <div id="status">
    	<p>Theme Park:<img src="img/small_graphics/park_status/open.gif" alt="The theme park is currently OPEN." /></p>
    	<p>Hotels:<img src="img/small_graphics/park_status/open.gif" alt="The hotels are currently OPEN." /></p>
    	<p>Spa:<img src="img/small_graphics/park_status/open.gif" alt="The spa is currently OPEN." /></p>
    	<p>Waterpark:<img src="img/small_graphics/park_status/open.gif" alt="The waterpark is currently OPEN." /></p>
    	<p>Golf:<img src="img/small_graphics/park_status/open.gif" alt="The golf is currently OPEN." /></p>
    	<p>Conf Centre:<img src="img/small_graphics/park_status/open.gif" alt="The conference centre is currently OPEN." /></p>
    </div>
     
    <img src="img/small_graphics/menu_divider.gif" class="menudivider" />
     
    <img src="img/headings/navbar_headings/daytip.jpg" alt="Day Tip" class="heading" />
    <div id="tip">
    	<p>
    		When staying at one of the two Alton Towers Hotels, use the Woodland Walk to your advantage. It's a quick and easy way to get to and from the park.	</p>
    	<br />
    </div>
     
    <img src="img/small_graphics/menu_divider.gif" class="menudivider" />
     
    <img src="img/headings/navbar_headings/randomride.jpg" alt="Random Ride" class="heading" />
    <div id="randomride">
    	<p>
    		<a href="ride_detail.php?ride_id=7">Spinball Whizzer</a>	</p>
    </div>
     
    <img src="img/small_graphics/menu_divider.gif" class="menudivider" />
     
    <!--Creates a bit of space at bottom of nav-->
    <br />
    <br />
    <br />
    <br />
     
     
    </div>
     
    <div id="content">
     
    	<div id="breadcrumb">
    			</div>
     
    	<div id="date">
    			</div><!--################################################# - START PAGE CONTENT - ####################################################-->
    <p>
    	Below are the details and download links for: Air - Your Day Film</p>
     
     
    <br />
     
    <table>
    	<tr>
    		<th width="30%">
    			<h2>
    				Name:
    			</h2>
    		</th>
    		<td>
    			Air - Your Day Film		</td>
    	</tr>
     
    	<tr>
    		<th>
    			<h2>
    				Description:
    			</h2>
    		</th>
    		<td>
    			A preview of the stock footage from a Your Day DVD purchase of Air. This footage is copyrighted to Your Day Inc.		</td>
    	</tr>
     
    	<tr>
    		<th>
    			<h2>
    				Filesize:
    			</h2>
    		</th>
    		<td>
    			<table class="noborder">
     
    											<tr><td><b>No Compression:&nbsp;</b>19.22 Mb</td></tr>
     
    									<tr><td><b>Zip Compression:&nbsp;</b>18.5 Mb</td></tr>
     
    									<tr><td><b>Rar Compression:&nbsp;</b>18.45 Mb</td></tr>
     
    			</table>
    		</td>
    	</tr>
     
    	<tr>
    		<th>
    			<h2>
    				Filetype*:
    			</h2>
    		</td>
    		<td>
    			.avi		</td>
    	</tr>
     
    	<tr>
    		<th>
    			<h2>
    				Preview:
    			</h2>
    		</th>
    		<td>
    			<small>
    				Please allow the preview to load fully.<br />
    			</small>
    								<div style="margin-left: 5px;">
     
    <script type="text/javascript" src="swfobject.js">
    </script>
    <div id="player">
    	Error locating file
    </div>
    <script type="text/javascript">
    	var so = new SWFObject('mediaplayer.swf','mpl','350','240','8');
    	so.addParam('allowscriptaccess','always');
    	so.addParam('allowfullscreen','true');
    	so.addVariable('height',"240");
    	so.addVariable('width',"350");
    	so.addVariable('file',"multimedia/videos/Air - Your Day Film.flv");
    	so.write('player');
    </script>
    					</div>
    					</td>
    	</tr>
     
    	<tr>
    		<th>
    			<h2>
    				Download:
    			</h2>
    		</th>
    		<td>
    									<a href="multimedia/videos/Air - Your Day Film.avi">[&nbsp;Normal Version&nbsp;]</a>
     
    								<a href="multimedia/videos/Air - Your Day Film.zip">[&nbsp;Zip Version&nbsp;]</a>
     
    								<a href="multimedia/videos/Air - Your Day Film.rar">[&nbsp;Rar Version&nbsp;]</a>
    							<br /><br />
    		</td>
    	</tr>
    </table>
     
    <br />
     
    <small>
    	* - Of un-compressed file.
    </small>
    <!--################################################# - END PAGE CONTENT - ####################################################-->
    <div id="insidefooter" style="text-align: center;">
    	<br /><br />
    	<hr />
    	<p><a href="#top">Top of Page</a> | Version 3.1 alpha</p>
     
    	<!--Code to remove the dotted line around ActiveX controls-->
    	<script type="text/javascript" src="swfobject.js"></script>
     
    	<br /><br />
     
    	<!--If live.txt exits then show infobox with link to admin panel-->
    			<div class="infobox">
    			<p style="text-align: center;">
    				<b>
    					DEVELOPMENTAL VERSION - <a href="admin/index.php" target="_blank">Admin Panel</a>
    				</b>
    			</p>
    		</div>
    		<!-------------end--------->
     
    <br /><br />
     
    </div><!--End Inside Footer-->
     
     
     
     
    </div><!--End Content-->
     
     
    <!--Pulls content div down around all the floats-->
    <div class="clearer"></div>
     
    </div><!--End Container-->
    </div><!--End Bigwrapper-->
     
    </body>
    </html>

    and the updated appropriate stylesheet:

    Code CSS:
    #content .infobox
    {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border: solid 1px #012349;
    background-color: #99CCFF;
    padding: 5px;
    text-align: center;
    }
     
    #content .averagebox
    {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border: solid 1px #012349;
    background-color: #FFFFFF;
    padding: 5px;
    text-align: center;
    }
     
    #content .averagebox img
    {
    padding: 3px;
    }
     
     
     
    #content .heading
    {
    display: inline;
    margin-bottom: 5px;
    }
     
    /* Links */
    #content a:link,
    #content a:visited,
    #content a:active
    {
    color: #000000;
    text-decoration: none;
    }
     
    #content a:hover
    {
    text-decoration: underline;
    }
     
     
     
    /* Headings */
    #content h1
    {
    font-size: 15pt;
    }
     
    #content h2
    {
    font-size: larger;
    }
     
    #content .centerimages
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
    #content .ride_heading
    {
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    text-decoration: underline;
    }
     
    #content .ride_header
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid #000000;
    }
     
    #content .tab_blend
    {
    display: block;
    margin-left: -15px;
    margin-top: +5px;
    background-image: url(../img/site_graphics/blend2.jpg);
    width: 620px;
    height: 30px;
    margin-bottom: 5px;
    }
     
     
    /* Table Styles */
     
    /* Default Table Style */
    #content table
    {
    border-collapse: collapse;
    border: solid 1px black;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
     
    #content table td /* Sets a border on all cells in tables within the content division */
    {
    border: solid 1px black;
    padding: 5px;
    }
    /*End Default Table Style */
     
     
     
    #content table .noborder, .noborder tr, .noborder th, .noborder td
    {
    border: 0px;
    }
     
     
     
    #content table tr th
    {
    background-image: url(../img/site_graphics/bar_blend.jpg);
    background-repeat: repeat-x;
    color: #00ccff;
    background-color: #012349;
    text-align: center;
    }
     
    #content table tr th h2
    {
    text-align: center;
    }
     
     
    /* List styles */
    #content ul
    {
    margin-top: -10px;
    margin-left: 0px;
    border: 0px solid red;
    }
     
    #content .styledlist li
    {
    /*background-image: url(../img/small_graphics/dotted_arrow.gif);*/
    list-style-type: none;
    margin-top: 10px;
    border: 0px solid blue;
    padding-left: 15px;
    background-image: url(../img/small_graphics/bul.png);
    background-repeat: no-repeat;
    background-position: left 5px;
    }
     
    #content .featuresinfo
    {
    padding-left: 170px;
    }
     
    #content .detailmultimedia
    {
    padding-left: 80px;
    }
     
    #content .stats
    {
    padding-left: 60px;
    }
     
     
    /* Box 1 and 2 */
    #content .box1
    {
    border: 0px solid red;
    width: 49%;
    float: left;
    }
     
    #content .box2
    {
    border: 0px solid blue;
    width: 49%;
    float: right;
    }
     
    /* Form Box 1 and 2 */
    #content .form_box1
    {
    border: 0px solid red;
    float: left;
    width: 48%;
    clear: both;
    }
     
    #content .form_box2
    {
    border: 0px solid blue;
    float: right;
    width: 48%;
    clear: both;
    }
     
    #content .form_container
    {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000000;
    padding: 10px;
    }
     
    label
    {
    width: 12em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
    }
     
    .label
    {
    width: 12em;
    float: left;
    text-align: right;
    margin-right: 0.5em;
    display: block;
    }
     
    #content .download_block
    {
    margin-left: 140px;
    }
     
    #googlemap
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
    .park_guide_box
    {
    background-color: #ccffff;
    overflow: hidden;
    }
     
    .inside_park_guide_box
    {
    padding: 5px;
    }
     
    /* Circle Corners */
    .tl
    {
    background-image: url(../img/circle.gif);
    width: 10px;
    height: 10px;
    float: left;
    font-size: 0;
    }
     
    .tr
    {
    background-image: url(../img/circle.gif);
    background-position: 10px 0px;
    width: 10px;
    height: 10px;
    float: right;
    font-size: 0;
    }
     
    .bl
    {
    background-image: url(../img/circle.gif);
    background-position: 0px 10px;
    width: 10px;
    height: 10px;
    float: left;
    font-size: 0;
    }
     
    .br
    {
    background-image: url(../img/circle.gif);
    background-position: 10px 10px;
    width: 10px;
    height: 10px;
    float: right;
    font-size: 0;
    }
     
     
     
    #content .park_de_area_logo
    {
    float: left;
    margin-right: 5px;
     
    }
     
    #content .park_gui_area_box
    {
    clear: both;
    background-color: #8FC6D3;
    padding: 5px;
    height: 90px;
    vertical-align: middle;
    cursor: hand;
    }
     
    #content .park_guide_area_box a:link
    {
    text-decoration: none;
    }
     
     
    /* Detail Page Styles */
     
    #content .ride_photo
    {
    float: right;
    padding: 4px;
    border: 1px solid #c0c0c0;
    margin-left: 10px;
    margin-bottom: 0px;
    }
     
    #content .image_center;
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
     
    /*  Speech Bubbles  */
    .sbl
    {
    background: url('../bl.gif') bottom left no-repeat #91BED8;
    width: 100%;
    text-align: center;
    min-width: 100px;
    }
     
    .sbr
    {
    background: url('../br.gif') bottom right no-repeat;
    }
     
    .stl
    {
    background: url('../tl.gif') top left no-repeat;
    }
     
    .str
    {
    background: url('../tr.gif') top right no-repeat;
    padding: 10px;
    }
     
    .sb
    {
    padding: 8px 0px 10px 50px;
    background: url('../b.gif') 30px top no-repeat;
    }
     
    .problem
    {
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border: solid 3px #ff0000;
    background-color: #FF9696;
    padding: 5px;
    text-align: center;
    }
     
    .success
    {
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border: solid 3px #00ff00;
    background-color: #ADFFAD;
    padding: 5px;
    text-align: center;
    }
     
    .bggametable
    {
    border-color: 5px solid #012349;
    }
     
    #hintbox
    {/*CSS for pop up hint box */
    position: absolute;
    top: 0;
    background-color: lightyellow;
    width: 150px; /*Default width of hint.*/ 
    padding: 3px;
    border: 1px solid black;
    font: normal 11px Verdana;
    line-height: 18px;
    z-index: 100;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    visibility: hidden;
    }
     
     
    /*
    .ride_heading
    {
    margin-left:							auto;
    margin-right:							auto;
    font-size: 								xx-large; 
    text-align:								center;
    color: 									#000000;
    background:								#ffffff url('../img/small_graphics/title_curve.jpg') center center no-repeat;
    background-position:					0px -0px;
    height:55px;
    width:416px;
     
    }
     
    .left_smaller_heading
    {
    font-size: 								x-large; 
    text-align:								left;
    color: 									#000000;
    }
     
    .tab_surround
    {
    border: 								1px solid black;
    width:									99%;
    }
     
    .no_table
    {
    border: 								0px;
    }
     
    .no_table th, td, tr
    {
    border: 								0px;
    }
    /*
    ul
    {
    list-style-type: 						none;
    padding: 								0;
    margin: 								0;
    }
     
     
    li
    {
    background-image: 						url(../img/small_graphics/dotted_arrow.gif);
    background-repeat: 						no-repeat;
    background-position: 					0 .3em;
    padding-left:							15px;
    }
    */
     
    /*
    .strikethrough
    {
    text-decoration: 						line-through;
    }
     
    .center_list
    {
    width: 									60%;
    margin-left: 							200px;
    margin-right: 							auto;
    }
     
    .black_border
    {
    border:									solid 1px #000000;
    }
     
    .photo
    {
    margin-left:							10px;
    margin-bottom:							5px;
    border:									solid 1px #000000;
    }
     
    .graphic
    {
    margin-right:							10px;
    margin-top:							5px;
    }
     
    .lighttext
    {
    color:									#00ccff;
    }
     
    .intro_table
    {
    text-align:								justify;
    }
     
    label
    {
    float:									left;
    }
     
    .form
    {
    float:									right;
    clear:									none;
    }
     
    .input_div
    {
    margin-left:							auto;
    margin-right:							auto;
    width:									50%;
    }
     
    .name_move_down
    {
    margin-top:								+50px;
    }
     
    .movedown-
      {
      position:								block;
      margin-left:							0px;
      margin-top:							0px;
      margin-bottom:						0px;
      z-index:								0;
      /*border: 							black solid 1px;*/
      }
     
    /*
    .detail_download_text
    {
    float:									left;
    margin-left:+100px;
    }
     
    .detail_download_tag
    {
    float:									left;
    }
     
    .left
    {
    text-align:left;
    }
     
    /*.clear
    {
    clear:									right;
    }
    */
    /*
    .treelist ul
    {
     
    }
     
    .treelist li
    {
     
    }
     
    .ie-png {
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’andrewsellick.png’,sizingMethod=’scale’);
        height: 50px; 
        width: 257px;
    }
     
    .ie-hide{
        border:0px solid #FFFFFF;
        _display:none;
    }
     
     
    .red_star
    {
    color:#ff0000;
    /*background-image:url(../img/small_graphics/red_star.jpg);
    background-repeat:no-repeat;
    }
    */
     
     
    /* Photo-Caption PZ3 CSS v080630 
    * copyright: [url]http://randsco.com/copyright[/url] 
    * [url]www.randsco.com[/url] 
    */
     
    .PZ3-l { float:left; margin-right:10px; }
    .PZ3-r { float:right; margin-left:10px; direction:rtl; }
      html>/**/body .PZ3-r { position:relative; }
     
    .PZ3zoom { border:1px solid #369; }
    .PZ3zoom a,.PZ3zoom a:visited { display:block;
      padding:0; overflow:hidden; text-decoration:none;
      height:100%; width:100%; }
      html>/**/body .PZ3-r a { right:0; }
     
    .PZ3zoom a:hover { position:absolute;
      z-index:999; padding:0; background:none; 
      cursor:default; height:auto; width:auto;
      overflow:visible; border:1px solid #369;
      margin:-1px 0 0 -1px; }
      html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }
     
    .PZ3zoom a img { border:0; height:100%; width:100%; }
    .PZ3zoom a:hover img { height:auto; width:auto;
      border:0; }
     
    a:hover .PZ3cap,
    a:hover .PZ31cap { display:block;
      direction:ltr; font:10pt verdana,sans-serif;
      margin-top:-3px; background:#369; color:#fff;
      text-align:left; }
    a:hover .PZ3cap { padding:3px 5px; }
    .PZ3inr { display:block; padding:2px 5px; }
     
    .noCap a:hover .PZ3cap,
    .noCap a:hover .PZ31cap { display:none; }
    .noBdr,.noBdr a:hover { border:0; }
    .Lnk a:hover { cursor:pointer; }
     
    /* End Photo-Caption Zoom CSS */

    I hope you can help here as it's a damn pain and I just wnat to get it sorted.

    Thanks

    Neil

  19. #19
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please can someone here help as thsi is rather desperate and needs to be fixed asap

    Thanks

    Neil

  20. #20
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    Sorry for not getting back to you earlier. Been busy .
    Okay, like I wrote in my previous post this is a specificity issue.
    Add #content before every statement.
    Code:
    #content table .noborder, #content .noborder tr, #content .noborder th, #content .noborder td
    {
    border: 0px;
    }
    #content table .noborder is a statement same is #content .noborder th. That's why you need to add #content before the other statements as well and not just the first.

  21. #21
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope, the borders are still there

  22. #22
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  23. #23
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it works there then why doesn;t it work for me?

    Sorted, My browser was gettinga cached version and not reloading.

    Thanks very much!

    Regards,
    Neil

  24. #24
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No idea . Tried copying the css from the page I posted? Sure your html and css code is the same?

  25. #25
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Read my last post


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •