• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

CSS Help

Hey Guys,

I am trying to Center text/table and left justify the text in the table or div etc...

According to what I have till now all works well in every browser other than IE.

IE centers the table/div and centers the justification of the text as well.

Please guide.
0
Shivtek
Asked:
Shivtek
  • 4
  • 2
1 Solution
 
asafadisCommented:
Try:
#theTableID {
    margin: 0 auto;
}

Open in new window

0
 
hieloCommented:
use a div wrapper around your table. Use text-align:center; on the wrapper and margin:0 auto on the table itself
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<title>Untitled</title>
		<style type="text/css">
		#tableContainer{text-align:center;}
		#theTable{width:50%;text-align:left;margin:0 auto;border:1px solid black;}
		#theTable tr td{border:1px dotted #aaa;}
		</style>
	</head>
<body>
	
	<div id='tableContainer'>
	<table summary="" id="theTable">
		<tr><td>a</td><td>b</td><td>c</td></tr>
	</table>
	</div>
</body>
</html>

Open in new window

0
 
ShivtekAuthor Commented:
Attached is the Code.
I am having trouble with this part:

<div align="center">
<div align="left" class="txtheader">{lang.search_results}</div>
<div align="left" class="breadcrumbs">
<a href="#">{lang.home}</a> > <a href="store_locator.php">{lang.store_locator}</a>> {lang.search_results}</div></div>

I want to bring the text in the center of the page and align it with other tables (left justify)

I am attaching something similar to what I have....the text needs to be aligned with the white boxes...
Sorry the SS doesn't look the best...I have hidden the personal info.

Please guide.


<!-- BEGIN: main -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.1 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>{location} - {pageTitle}</title>
<meta content="{metaKeywords}" name="keywords">
<meta content="{metaDescription}" name="description">
<link href="skins/silver/style1.css" rel="stylesheet" rev="stylesheet" type="text/css">
{headScript}
</head>

<body onload="{bodyonload}" onunload="GUnload()">
<div class="background">
</div>
<table align="center" cellpadding="0" cellspacing="0" width="1004px">
	<tr>
		<td>


				
			<div class="background2">
			<div align="center">
						<div align="left" class="txtheader">{lang.search_results}</div>
				<div align="left" class="breadcrumbs">
					<a href="#">{lang.home}</a> &gt; <a href="store_locator.php">{lang.store_locator}</a> 
					&gt; {lang.search_results}</div>
				</div>
				<!-- BEGIN: errornotice -->
				<p id="errorDiv" class="error" style="display: none;">{lang.no_results_near} 
				{location}. {lang.please_redefine}</p>
				<script>changeColor2('errorDiv',0);</script>
				<!-- END: errornotice -->
				<table border="0" cellpadding="0" cellspacing="0" class="searchtable" style="width: 650px">
					<tr>
						<th class="tableheader" colspan="3">{lang.location_information}</th>
					</tr>
					<tr>
						<td width="40%">
						<form id="pcIsoform" action="{formAction}" method="{formMethod}">
							<input name="lat" type="hidden" value="" />
							<input name="lng" type="hidden" value="" />
							<table align="center" border="0" cellpadding="0" cellspacing="0" class="innersearchtable">
								<tr>
									<th>{lang.postcode}*</th>
									<td>
									<input message="{lang.enter_postal}" name="postcode" required="yes" size="10" type="text" validate="text" value="{postcode}" /></td>
								</tr>
								<tr>
									<th>
									<div class="alttxtsmalltxt">
										{lang.country}</div>
									</th>
									<td>
									<select name="countryIso" style="width: 145px; display: none;">
									<!-- BEGIN:countryisooption1 -->
									<option title="{country.name}" value="{country.iso}" {country.selected}="">
									{country.name}</option>
									<!-- END:countryisooption1 --></select>
									<span id="pcIso" class="alttxtsmalltxt">
									<script>document.write(document.getElementById('pcIsoform').countryIso.value);</script>
&nbsp;<a class="smalltxt altlink" href="javascript:ch('pcIso', 'pcIsoform');">Change</a></span>
									</td>
								</tr>
								<tr>
									<td>&nbsp;</td>
									<td>
									<img align="absmiddle" border="0" onclick="if(validateNs(document.getElementById('pcIsoform'))) postcodeLookUp(document.getElementById('pcIsoform'));" src="{skinLoc}/images/find_button.png" /></td>
								</tr>
							</table>
						</form>
						</td>
						<td width="10%">
						<div align="center">
							<img border="0" src="{skinLoc}/images/or_vbar.jpg" /></div>
						</td>
						<td style="width: 40%">
						<form id="tnIsoform" action="{formAction}" method="{formMethod}">
							<input name="lat" type="hidden" value="" />
							<input name="lng" type="hidden" value="" />
							<table align="center" border="0" cellpadding="0" cellspacing="0" class="innersearchtable">
								<tr>
									<th>{lang.location}*</th>
									<td>
									<input message="{lang.enter_location}" name="location" required="yes" size="20" type="text" validate="text" value="{location_field}" /></td>
								</tr>
								<tr>
									<th>
									<div class="alttxtsmalltxt">
										{lang.country}</div>
									</th>
									<td>
									<select name="countryIso" style="width: 145px; display: none;">
									<!-- BEGIN:countryisooption2 -->
									<option title="{country.name}" value="{country.iso}" {country.selected}="">
									{country.name}</option>
									<!-- END:countryisooption --></select>
									<span id="tnIso" class="alttxtsmalltxt">
									<script>document.write(document.getElementById('tnIsoform').countryIso.value);</script>
&nbsp;<a class="smalltxt altlink" href="javascript:ch('tnIso', 'tnIsoform');">Change</a></span>
									</td>
								</tr>
								<tr>
									<td>&nbsp;</td>
									<td>
									<img border="0" onclick="if(validateNs(document.getElementById('tnIsoform'))) locationLookUp(document.getElementById('tnIsoform'));" src="{skinLoc}/images/find_button.png" />
									</td>
								</tr>
							</table>
						</form>
						</td>
					</tr>
				</table>
				<!-- BEGIN: searchresults -->
				<table border="0" cellpadding="0" cellspacing="0" class="maptable" width="650">
					<tr>
						<td colspan="2"><a name="mapview"></a>
						<div class="txtsubheader">
							{lang.found} {totalRows} {lang.locations_near} {location}</div>
						<div style="margin-bottom: 5px;">
							<a class="smalltxt altlink" href="#tableview" style="text-decoration: none">
							{lang.table_view}</a>
							<!-- BEGIN: paging -->&nbsp;| <strong>{lang.page}:</strong> 
							{currentPage} of {totalPages}, {lang.showing} {pageTotalRows} 
							{lang.per_page}
							<!-- BEGIN: lastpage -->
							<a class="smalltxt altlink" href="store_locator_results.php?start={pdata.start}&amp;postcode={pdata.postcode}&amp;location={pdata.location}&amp;countryIso={pdata.countryIso}&amp;lat={pdata.lat}&amp;lng={pdata.lng}#mapview" style="text-decoration: none">
							« Previous Page</a><!-- END:lastpage--><!-- BEGIN:nextpage --> 
							|
							<a class="smalltxt altlink" href="store_locator_results.php?start={pdata.start}&amp;postcode={pdata.postcode}&amp;location={pdata.location}&amp;countryIso={pdata.countryIso}&amp;lat={pdata.lat}&amp;lng={pdata.lng}#mapview" style="text-decoration: none">
							Next Page »</a><!-- END:nextpage -->
							<!-- END: paging --></div>
						</td>
					</tr>
					<tr>
						<td class="resultsdisplay1" valign="top">
						<ol>
							<!-- BEGIN: resultsdisplay1 -->
							<li>
							<div id="{data.itemDivId}">
								<img border="0" src="{data.iconSrc}" /><a href="javascript:;" onclick="{data.onclick1}">{data.businessName}</a><br />
							</div>
							<div id="{data.hiddenDivId}" class="resultsdataitem" style="display: none">
								<img border="0" src="{data.iconSrc}" /><strong>{data.businessName}</strong><br />
								<a class="smalltxt altlink" href="javascript:;" onclick="{data.onclick2}">
								{lang.zoom}</a> |
								<a class="smalltxt altlink" href="store_info.php?store={data.id}">
								{lang.more_info_small} »</a><br />
								{data.address} {data.address2}<br />
								{data.city}, {data.state} {data.postal}<br />
								{data.phone}<br />
								<!-- BEGIN: websiteHTML -->
								<a class="smalltxt altaltlink" href="{data.website}" target="{data.websiteTarget}">
								{data.shownWebsite}</a><br />
								<!-- END: websiteHTML -->
								<!-- BEGIN: weeklyAdHTML -->
								<a class="smalltxt altaltaltlink" href="javascript:popUpWindow(&quot;ad_info.php?store={data.id}&quot;, 10, 10, 800, 600);">
								{lang.weekly_ad}</a><br />
								<!-- END: weeklyAdHTML -->
								<a class="smalltxt altlink" href="store_info.php?store={data.id}#directions">
								{lang.directions}</a> |
								<a class="smalltxt altlink" href="store_info.php?store={data.id}#hours">
								{lang.hours}</a> </div>
							</li>
							<!-- END: resultsdisplay1 --></li>
						</ol>
						</td>
						<td height="350" valign="top" width="350">
						<div id="mapDiv" class="map">
							<span class="alttxt">Loading map...</span></div>
						</td>
					</tr>
				</table>
				<div style="margin-bottom: 25px;">
				</div>
				<a name="tableview"></a><span style="margin-bottom: 10px;">
				<a class="smalltxt altlink" href="#mapview" style="text-decoration: none">
				{lang.map_view}</a></span>
				<!-- BEGIN: paging2 -->&nbsp;| <strong>{lang.page}:</strong> {currentPage} 
				of {totalPages}, {lang.showing} {pageTotalRows} {lang.per_page}
				<!-- BEGIN: lastpage -->
				<a class="smalltxt altlink" href="store_locator_results.php?start={pdata.start}&amp;postcode={pdata.postcode}&amp;location={pdata.location}&amp;countryIso={pdata.countryIso}&amp;lat={pdata.lat}&amp;lng={pdata.lng}#tableview" style="text-decoration: none">
				« Previous Page</a><!-- END:lastpage--><!-- BEGIN:nextpage --> |
				<a class="smalltxt altlink" href="store_locator_results.php?start={pdata.start}&amp;postcode={pdata.postcode}&amp;location={pdata.location}&amp;countryIso={pdata.countryIso}&amp;lat={pdata.lat}&amp;lng={pdata.lng}#tableview" style="text-decoration: none">
				Next Page »</a><!-- END:nextpage -->
				<!-- END: paging2 -->
				<table border="0" cellpadding="0" cellspacing="0" class="searchtable" width="650">
					<tr>
						<th class="tableheaderleft">{lang.store_address}</th>
						<th class="tableheaderleft">{lang.distance}</th>
						<th class="tableheaderleft">{lang.action}</th>
					</tr>
					<!-- BEGIN: resultsdisplay2 -->
					<tr class="resultsdisplay2 &lt;!-- BEGIN: altrow --&gt;altrow&lt;!-- END: altrow --&gt;">
						<td><strong>{data.businessName}</strong><br />
						{data.address} {data.address2}<br />
						{data.city}, {data.state} {data.postal}<br />
						{data.phone}<br />
						</td>
						<td>{data.distance}</td>
						<td>
						<a class="smalltxt altlink" href="store_info.php?store={data.id}">
						{lang.more_info} »</a><br />
						<!-- BEGIN: websiteHTML -->
						<a class="smalltxt altaltlink" href="{data.website}" target="{data.websiteTarget}">
						{data.shownWebsite}</a><br />
						<!-- END: websiteHTML -->
						<!-- BEGIN: weeklyAdHTML -->
						<a class="smalltxt altaltaltlink" href="{data.weeklyadHref}">
						{lang.weekly_ad}</a><br />
						<!-- END: weeklyAdHTML -->
						<a class="smalltxt altlink" href="store_info.php?store={data.id}#directions">
						{lang.directions}</a><br />
						<a class="smalltxt altlink" href="store_info.php?store={data.id}#hours">
						{lang.hours}</a> </td>
					</tr>
					<!-- END: resultsdisplay2 -->
				</table>
				<!-- END: searchresults -->
				<p class="searchfooter"><strong>{lang.having_trouble}</strong> {lang.contact_by_email}: 
				{siteEmail}, {lang.phone}: {sitePhone}</p>
				{lang.copyright} </div>
	
		</td>
	</tr>
</table>
{pageScript} {googleMapScript}

</body>

</html>
<!-- END: main -->

Open in new window

Picture1.jpg
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
ShivtekAuthor Commented:
Here is the CSS.

I have one image for the top...and there is another one which expands according to tables...

Please guide.

body {
	font-size: 14px;
	background-color: black;
	background-position: center top;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: -7px;
}
.background {
	background-image: url('back1.jpg');
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	background-position: center top;
	padding-bottom: 70px;
	padding-top: 100px;
}
.background2 {
	background-image: url('back.jpg');
	background-repeat: repeat-y;
	margin-top: 0px;
	background-position:center top;
	width:auto;
}
table {
	font-size: inherit;
	margin:0 auto;
}
input {
	border: 1px solid #C6C6C6;
}
a {
	color: #00008B;
}
.txtheader2 {
	font-size: 22px;
	font-weight: bold;
}
.txtheader {
	font-size: 22px;
	font-weight: bold;
	}
.txtsubheader {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 0px;
}
.txtsubheaderhr {
	font-size: 15px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #c6c6c6;
}
.breadcrumbs {
	font-size: 12px;
	margin-bottom: 0px;
}
.searchtable {
	border: 1px solid #C1C1C1;
}
.tableheader {
	background-image: url(images/silver_bgbar.jpg);
	border-bottom: 1px solid #C1C1C1;
	background-repeat: repeat-x;
	height: 23px;
}
.tableheaderleft {
	background-image: url(images/silver_bgbar.jpg);
	border-bottom: 1px solid #C1C1C1;
	text-align: left;
	padding-left: 2px;
	height: 23px;
}
.searchtable td {
	padding: 5px;
}
.innersearchtable td {
	padding: 2px;
}
.innersearchtable th {
	text-align: left;
}
.searchfooter {
	font-size: 12px;
	text-align: center;
}
.error {
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #CCFFFF;
}
.maptable {
	margin-top: 20px;
}
.maptable td {
	padding: 2px;
}
.txtsubheader {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}
.resultsdisplay1 ol {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
.resultsdisplay1 li {
	margin-bottom: 5px;
	font-size: 14px;
}
.resultsdisplay1 a {
	text-decoration: none;
}
.resultsdisplay2 td {
	font-size: 14px;
}
.resultsdataitem {
	padding: 2px;
	border: 1px solid #CCCCCC;
	background-color: #F2EFE9;
}
.mapwindow {
	color: #666666;
	font-size: 14px;
}
.map {
	border: 1px solid #CCCCCC;
}
.smalltxt {
	font-size: small;
}
.altlink {
	color: blue;
}
.altaltlink {
	color: purple;
}
.altaltaltlink {
	color: green;
}
.altrow {
	background-color: #F2EFE9;
}
.alttxt {
	color: #666666;
}
.alttxtsmalltxt {
	color: #000000;
}
.hide {
	display: none;
}

Open in new window

0
 
hieloCommented:
>>I am having trouble with this part:
I am having trouble with everything you posted! Sorry, I can't replicate your problem. Good luck.
0
 
ShivtekAuthor Commented:
the code actually is a interface for a php script...
0
 
ShivtekAuthor Commented:
This is what i was doing wrong:

background-position:center;

Fixed:
background-position:center top;
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now