?
Solved

CSS overwrite parent style

Posted on 2011-04-26
4
Medium Priority
?
497 Views
Last Modified: 2012-05-11
Hi,

How do i overwrite the parent css style so that my table is always align to the left side of the screen?

And my table will indent base on the @style="margin-left:1.069444in;" and displaying the table without knowing the height of what i'm positioning

<html>
<head>
<style type="text/css">

.p1_1 {
	margin-top: 0.1in;
	margin-right: 0in;
	margin-left: 0in;
	text-align: justify;
	font-family: Times New Roman, Sans-serif;
	font-size: 13pt;
}

.pTxt{
	margin-right:0in;
	margin-left:0.75in;
	text-indent:0in;
	display:block;
}

.p1No{
	float:left;
	display: block;
	margin-left:-0.15in;
	margin-right:0in;
	text-align:right;
	width:0.75in;
}
</style>

</head>
<body>
	<div class="p1_1">
		<div class="p1No">(<em>b</em>)</div>
		<div class="pTxt">this is paragraph (b) &#8212;
			<div class="p1tbl">
				<table cellspacing="0" cellpadding="4" style="margin-left:1.069444in;">
					<tbody valign="top">
						<tr style="height:20pt">
							<td style="width:1in" valign="top">
								<div style="text-align: right;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >where A</div>
							</td>
							<td style="width:4in" valign="top">
								<div style="text-align: left;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >is the ..........;</div>
							</td>
						</tr>
						<tr style="height:20pt">
							<td style="width:1in" valign="top">
								<div style="text-align: right;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >B</div>
							</td>
							<td style="width:4in" valign="top">
								<div style="text-align: left;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >is the value of the .........; and</div>
							</td>
						</tr>
						<tr style="height:20pt">
							<td style="width:1in" valign="top">
								<div style="text-align: right;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >D</div>
							</td>
							<td style="width:4in" valign="top">
								<div style="text-align: left;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >is the value ........</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div>some text here</div>
			</div>
			</div>
</body>
</html>

Open in new window

0
Comment
Question by:xedge88
  • 2
4 Comments
 
LVL 2

Expert Comment

by:Gk
ID: 35465935
With this code, it indents based on the style="margin-left:0.069444in;" in IE,Chrome and firefox.   What you really need.
0
 

Author Comment

by:xedge88
ID: 35472192
Hi Gk,

but i would my table to start from the beginning of the left side of the screen without moving out the <table> out of <div>
0
 
LVL 5

Accepted Solution

by:
dnzone88 earned 1000 total points
ID: 35472710
Can u set the table's margin-left to negative value?
This way the table will be push out of the div and to the left side.

Here is an example of using jQuery to get the table's position and change it margin to negative value.
<html>
<head>
<style type="text/css">

.p1_1 {
	margin-top: 0.1in;
	margin-right: 0in;
	margin-left: 0in;
	text-align: justify;
	font-family: Times New Roman, Sans-serif;
	font-size: 13pt;
}

.pTxt{
	margin-right:0in;
	margin-left:0.75in;
	text-indent:0in;
	display:block;
}

.p1No{
	float:left;
	display: block;
	margin-left:-0.15in;
	margin-right:0in;
	text-align:right;
	width:0.75in;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	var table = $('#moveout');
	var position = table.position();
	table.css({"margin-left" : (position.left * -1)});
});
</script>
</head>
<body>
	<div class="p1_1">
		<div class="p1No">(<em>b</em>)</div>
		<div class="pTxt">this is paragraph (b) &#8212;
			<div class="p1tbl">
				<table id="moveout" cellspacing="0" cellpadding="4">
					<tbody valign="top">
						<tr style="height:20pt">
							<td style="width:1in" valign="top">
								<div style="text-align: right;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >where A</div>
							</td>
							<td style="width:4in" valign="top">
								<div style="text-align: left;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >is the ..........;</div>
							</td>
						</tr>
						<tr style="height:20pt">
							<td style="width:1in" valign="top">
								<div style="text-align: right;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >B</div>
							</td>
							<td style="width:4in" valign="top">
								<div style="text-align: left;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >is the value of the .........; and</div>
							</td>
						</tr>
						<tr style="height:20pt">
							<td style="width:1in" valign="top">
								<div style="text-align: right;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >D</div>
							</td>
							<td style="width:4in" valign="top">
								<div style="text-align: left;font-size: 13pt;margin-bottom:0.01in;margin-top:0.02in;" >is the value ........</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div>some text here</div>
			</div>
			</div>
</body>
</html>

Open in new window


Hope it help.
0
 

Author Closing Comment

by:xedge88
ID: 35743401
nil
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month14 days, 9 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question