Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS file clash?

  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    CSS file clash?

    Hello

    I have a table here:

    http://www.bayingwolf.com/display_records1.asp

    The relevant CSS behind this is as follows:

    Code:
    .headerRow td {
        font-family: 'News Cycle', arial, helvetica, sans-serif;
        font-weight: bold;
        background-color: #9999CC;
    text-align: center;
    }
    
    td {
        font-family: 'News Cycle', arial, helvetica, sans-serif;
        background-color: #9999CC;
    text-align: center;
    }
    
    body {
    	margin-top: 50px;
    	padding: 0;
    }
    I am fairly happy with the appearance of this display. However, I intend to add a modal feature underneath this table and the script for that is governed by a couple of CSS scripts. When I upload them with what I have above I see this:

    http://www.bayingwolf.com/display_recordsTEST.asp

    I imagine that some CSS attributes are clashing? And yet this
    Code:
    .headerRow td {
    from the code above does not appear anywhere in the 'css/demo.css' file:

    Code:
     body
    
    {
    
    background:#fff; 
    color:#333;
    font: 12px/22px verdana, arial, sans-serif;
    height:100%;
    margin:0 auto;
    width:100%;
    
    }
    
    h1
    
    {
    
    color:#3a6d8c;
    font-size:34px;
    line-height:40px;
    margin:0;
    
    }
    
    h3
    
    {
    
    color:#3a6d8c;
    font-size:22px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 8px 0;
    
    }
    
    img {border:0;
    
    }
    
    #logo {margin-bottom:20px; width:300px;
    
    }
    
    #logo h1
    
    {
    
    color:#666;
    letter-spacing:-1px;
    font-weight:normal;
    
    }
    
    #logo h1 span
    
    {
    
    color:#444;
    font-weight:bold;
    
    }
    
    #logo .title
    
    {
    
    color:#999;
    font-size:12px;
    
    }
    
    #container
    
    {
    
    margin:0 auto;
    padding-top:20px;
     width:800px;
    
    }
    
    #content
    
    {
    
    border-bottom:1px dotted #999; 
    border-top:1px dotted #999; 
    padding:20px 0;
    
    }
    
    #footer
    
    {
    
    clear:left;
    
    color:#888; 
    margin:20px 0;
    
    }
    
    #footer a:link, 
    #footer a:visited
    
    {color:#888; 
    text-decoration:none;
    
    }
    
    #footer a:hover
    
    {
    
    color:#333;
    text-decoration:underline;
    
    }
    Could anyone shed light on where I am going wrong, please?

    Thank you.

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    One stylesheet won't delete or clash with a previous one. It simply has priority over it. To put it as simply as possible, if one stylesheet makes a paragraph blue and another one makes it red, the more recent one takes priority.

    Code:
    .headerRow td {
    That is in "css/styleMDB.css". Not sure why you think it should be in the demo stylesheet.

    The reason why the second link looks nothing like the first link is because of incorrect (or different) HTML.

    The first link has one table. It's nice and simple. The second link has a table inside a table, which I think might be a typo. If you take a look, you'll see this in the second link:

    Code:
    <table width='100%' border='1'>
    <table>
    <tr class="headerRow">
                    <td>ID</td>
    		<td >First Name</td>
    		<td >Last Name</td>
    		<td >Wolf ID</td>
    		<td >Tel No</td>
                    <td >Address</td>
    		<td >City</td>
    		<td >Postcode</td>
    		<td >Items</td>
    		<td >Received</td>
    		<td >Dispatched</td>
        </tr>
    </table>
    My signature :)

  • Users who have thanked ttkim for this post:

    SteveH (09-13-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Thanks for that ttkim

    I see. Two <tables> - thanks for pointing it out.

    What I mean is that '.headerRow td {' displays correctly here:

    http://www.bayingwolf.com/display_records1.asp

    but not here:

    http://www.bayingwolf.com/display_recordsTEST.asp

    That's what I am confused about.

    Thanks for your time.

    Steve

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    I would fix the table coding issue first. But in the second example, it's also inheriting these properties from the body:

    Code:
    body {
    color: #333;
    font: 12px/22px verdana, arial, sans-serif;
    }
    You don't have that in the first example. The default font size is 16 pixels. The default font color is black. Therefore, the first example has reflects that. But in the second example, you set the body's font color to a dark gray and font size to 12 pixels. The .headerRow td is inheriting that.
    My signature :)

  • Users who have thanked ttkim for this post:

    SteveH (09-13-2013)

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Thank you for pointing that out ttkim

    I am enthused! I will go through all the CSS (and maybe HTML) code and see if I can identify further discrepancies.

    Much appreciated.

    Steve


  •  

    Posting Permissions

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