CSS not working properly

sourabh.coder · 02-26-2013, 06:19 PM

Please take a look at this code, CSS file attached

Code:

<html>
<head>
	<title>MDU</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="main">
		<div class="border"></div>

		<div id="image">
			<img src="logo.gif">
			<h4>
				<p>Maharishi Dayanand University, Rohtak</p>
				<p>(A State University Estabilished under Haryana Act No. XXV of 1975)</p>
			</h4>
		</div>

		<div class="center" class="resdata" ><h3>Result</h3></div>

		<div class="decdate">Date of result Declaration: 20/09/2012</div>
		
		<div class="heading">Student Details</div>

		<div  id="detail_table">
			<table>
				<tr>
					<th>Reg.No.</th>
					<td>1173300294</td>
					<th class="padright">Roll No.:</th>
					<td>1136635116</td>
				</tr>
				<tr>
					<th>Student Name:</th>
					<td>Student</td>
					<th class="padright">Father Name:</th>
					<td>Father</td>
				</tr>
				<tr>
					<th>Course Code:</th>
					<td>Bachelor Of Technology</td>
					<th class="padright">College Code:</th>
					<td>F266</td>
				</tr>
				<tr>
					<th>College Name:</th>
					<td colspan="3">Manav Rachna College of Engeneering</td>
				</tr>
			</table>
		</div>

		<div class="heading">Obtained Maks Details</div>
		
		<!-- <div id="bottomtable"> -->
			<table id="markstable">
				<tr><th>Subject</th><th>Marks</th><th>Total</th></tr>
				<tr><td>1004:</td><td>056 033</td><td>089</td></tr>
				<tr><td>1006:</td><td>054 036</td><td>090</td></tr>
				<tr><td>1008:</td><td>046 032</td><td>078</td></tr>
				<tr><td>1011:</td><td>021 018</td><td>039</td></tr>
				<tr><td>1013:</td><td>020 017</td><td>037</td></tr>
				<tr><td>1015:</td><td>023 021</td><td>044</td></tr>
				<tr><td>1017:</td><td>040 030</td><td>070</td></tr>
				<tr><td>1019:</td><td>078 032</td><td>110</td></tr>
				<tr><td>1020:</td><td>050 034</td><td>084</td></tr>
				<tr><td>1021:</td><td>023 020</td><td>043</td></tr>
				<tr><td>1022:</td><td>40</td> <td>040</td></tr>
				<tr><td>EVN:</td> <td>C</td>  <td></td></tr>
				<tr><td></td><td>Total</td><td>724</td></tr>
			</table>
		<!-- </div> -->
		
		<div class="resdata">
			<h3>Result: Pass</h3>
			<p>
				<h4>
					<u>NOTE:</u>
					In R.L.A./R.L.E. cases (Result Late due to non-receipt/non-eligibility of awards) the student concerned should submit details viz: name of examination center, date of examination, name of subject (where A.W. has been indicated) along with 	a copy of the downloaded result to the concerned Result Branch within 10 days positively, failing which he/she will be treated ‘Absent’ in the said paper and the result will be finalized accordingly.
				</h4>
			</p>
		</div>
		<div class="border">
		</div>
	</div>
</body>
</html>

For second table, with #markstable, when i apply border on td, th ,it also gets applie on upper table too, why is this happening?
Also, there's no border when I add border only on th or td. Please explain why.

And this is my second CSS file so i might've followed many bad practices, any tips for improving my HTML/CSS are welcome

teedoff · 02-26-2013, 09:18 PM

To reference id's in CSS, you would use the # sign, classes would be the "."

You reference it correctly in your description above, but in your actual CSS file, you reference a class of "markstable".