asked on

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.

asafadis

Try:

#theTableID {
    margin: 0 auto;
}

Open in new window

hielo

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

Shivtek

ASKER

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

Shivtek

ASKER

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

hielo

>>I am having trouble with this part:
I am having trouble with everything you posted! Sorry, I can't replicate your problem. Good luck.

Shivtek

ASKER

the code actually is a interface for a php script...

ASKER CERTIFIED SOLUTION

Shivtek

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial