#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    218
    Rep Power
    17

    Doc Type Breaks Positioning


    When I run the code below WITHOUT the doc type, it runs the way I want. But if I include the doc type (ant doc type) the image positioning is ignored. What am I doing wrong?

    Code:
    <html>
    <head>
    	<style>
    		.chartTable {
    				border-collapse: collapse;
    				background-color: white; 
    				border: 1px solid grey;
    		}
    		.chartTable td {
    				padding: 0em;
    				font-size: 0.7em;
    				width: 20px;
    		}
    		.textGrey {
    			font-weight: bold;
    			text-align: center;
    			background-color: grey;
    			color: white;
    		}	
    		.textRed {
    			font-weight: bold;
    			text-align: center;
    			background-color: red;
    			color: white;
    		}
    		.textWhite {
    			font-weight: bold;
    			text-align: center;
    			color: black;
    		}	
    	</style>
    </head>
    <body>
    <table class="chartTable">
    	<tr>
    		<td>Z&nbsp;Time</td>
    		<td class="textGrey">14</td>
    		<td class="textWhite">15</td>
    		<td class="textGrey">16</td>
    		<td class="textWhite">17</td>	
    		<td class="textGrey">18</td>
    		<td class="textWhite">19</td>
    		<td class="textGrey">20</td>
    		<td class="textWhite">21</td>
    		<td class="textGrey">22</td>	
    		<td class="textWhite">23</td>
    		<td class="textGrey">24</td>
    		<td class="textWhite">1</td>
    		<td class="textGrey">2</td>
    		<td class="textWhite">3</td>	
    		<td class="textGrey">4</td>
    		<td class="textWhite">5</td>
    		<td class="textRed">6</td>
    		<td class="textWhite">7</td>
    		<td class="textGrey">8</td>
    		<td class="textWhite">9</td>
    		<td class="textGrey">10</td>
    		<td class="textWhite">11</td>
    		<td class="textGrey">12</td>	
    		<td class="textWhite">13</td>
    	</tr>
    	<tr>
    		<td>Local&nbsp;Time</td>
    		<td class="textWhite">6</td>
    		<td class="textGrey">7</td>
    		<td class="textWhite">8</td>
    		<td class="textGrey">9</td>	
    		<td class="textWhite">10</td>
    		<td class="textGrey">11</td>
    		<td class="textWhite">12</td>
    		<td class="textGrey">13</td>
    		<td class="textWhite">14</td>	
    		<td class="textGrey">15</td>
    		<td class="textWhite">16</td>
    		<td class="textGrey">17</td>
    		<td class="textWhite">18</td>
    		<td class="textGrey">19</td>	
    		<td class="textWhite">20</td>
    		<td class="textGrey">21</td>
    		<td class="textRed">22</td>
    		<td class="textGrey">23</td>
    		<td class="textWhite">24</td>
    		<td class="textGrey">1</td>
    		<td class="textWhite">2</td>
    		<td class="textGrey">3</td>
    		<td class="textWhite">4</td>	
    		<td class="textGrey">5</td>
    	</tr>				
    	<tr>
    		<td>
    			Time Span
    		</td>
    		<td colspan='24'>
    			<div style='position: relative;'><img src='./images/red.jpg' style='position: relative; left: 220; width: 140; height: 20px;'></div>
    		</td>
    	</tr>
    </table>
    </body>
    </html>
  2. #2
  3. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,327
    Rep Power
    2063
    What is the actual doctype that you're trying to use?
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Arty Zifferelli,


    try it like this...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <style media="screen">
    #chartTable {
        border-collapse: collapse;
        background-color: #fff; 
        border: 1px solid #808080;
     }
    #chartTable td {
        min-width: 1.78em;
        padding: 0;
        font-size: 0.7em;
        font-weight: bold;
        text-align: center;
     }
    #chartTable tr:nth-child(1) td:nth-child(even), 
    #chartTable tr:nth-child(2) td:nth-child(odd){
        background-color: #808080;
        color: #fff;
     }
    #chartTable tr:nth-child(1) td:nth-child(18),
    #chartTable tr:nth-child(2) td:nth-child(18){
        background-color: #f00;
        color: #fff;
     }
    #chartTable tr:nth-child(1)	td:nth-child(1),
    #chartTable tr:nth-child(2) td:nth-child(1),
    #chartTable tr:nth-child(3)	td:nth-child(1){
        padding: 0 0.2em;
        background-color: #fff;
        font-weight: normal;
        text-align: left;
        color: #000;
     }
    #chartTable img {
        display: block;
        width: 100%; 
        height: auto; 
      }
    	</style>
    </head>
    <body>
    <table id="chartTable">
     <tbody>
      <tr>
        <td>Z Time</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>	
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>	
        <td>23</td>
        <td>24</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>	
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>	
        <td>13</td>
     </tr><tr>
        <td>Local Time</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>	
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>	
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>	
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>	
        <td>5</td>
      </tr><tr>
        <td colspan="12">Time Span</td>
        <td colspan="7"><img src="./images/red.jpg" alt=""></td>
        <td colspan="6"></td>
      </tr>
     </tbody>
    </table>
    </body>
    </html>
    

    coothead
    Last edited by coothead; January 12th, 2017 at 06:10 AM.
    ~ the original bald headed old fart ~
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi,

    Main Use for <!DOCTYPE> Below,

    The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
    declarations in HTML 4.01. In HTML5 there is only use <!DOCTYPE>

IMN logo majestic logo threadwatch logo seochat tools logo