asked on

IE8 CSS text-align for TD not working

Hello Experts,

I'm at a complete loss... Using VS 2005/.net 2.0 GridView... Trying to get a TD to left or right text-align (default is center). Page works fine in Chrome and FireFox. Doesn't work in IE7 or IE8. IE Developer Tool even SAYS it is going to align left, and it STILL renders center. Check out attached image and let me know what the heck I'm doing wrong!
IE8-TD-text-align-bug.png

Gurvinder Pal Singh

use style
text-align: left;

Gurvinder Pal Singh

I have tested the attached source code in IE8, and it is aligning to left

Thanks
abc1.html

Jahelka

ASKER

Wish I could. You can't (at least as far as I know) set style in an asp.net GridView on a per column basis. .net thinks that using the align="left" attribute in the td tag is the way to do it, even though I see that this is depricated in the latest CSS recommendation. I'm using a work-around in my style sheet as noted in the code section below. You could also note that this is what the IE Dev Tool is seeing. But it STILL centers the text...

td[align=left] {text-align:left}

Open in new window

Jahelka

ASKER

I said: You could also note that this is what the IE Dev Tool is seeing.

To be more specific, LOOK at the screen shot and see that IE's OWN Dev Tool says it recognizes that it is over-riding the default "centering" and supposedly applying left alignment, but directly below that you can see that it is rendering on the page as centered.

PS: Default alignment is left alignment, so of course it looks right (er, correct) in your example HTML gurvinder. =)

Here, I'll make this more clear... Check out following code/file. Try this out in IE, then try it out in FF or Chrome.
abc1.htm

Jahelka

ASKER

Oops, code didn't make it.

Second line of rendered output in browser should be left justified...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
	td
	{
		width:55;
		text-align: center;
	}
	td[align=left]
	{
		text-align: left; 
	}
	.leftAlign 
	{
		text-align: left; 
	}
</style>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td align='left'>1</td>
			<td align='left'>2</td>
			<td align='left'>3</td>
			<td align='left'>4</td>
		</tr>
		<tr>
			<td class='leftAlign'>1</td>
			<td class='leftAlign'>2</td>
			<td class='leftAlign'>3</td>
			<td class='leftAlign'>4</td>
		</tr>
	</table>

</BODY>
</HTML>

Open in new window

ASKER CERTIFIED SOLUTION

kadaba

membership

This solution is only available to members.

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

Start Free Trial

Vinay Rajput

Hi Jahelka,

replace you style code with attache code

let me know :D

	table td{
		width:55;
		text-align: left; 
	}

Open in new window

Vinay Rajput

and here is full html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
	table td{
		width:55;
		text-align: left; 
	}
</style>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
	<table border="1">
		<tr>

			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td align='left'>1</td>

			<td align='left'>2</td>
			<td align='left'>3</td>
			<td align='left'>4</td>
		</tr>
		<tr>
			<td class='leftAlign'>1</td>
			<td class='leftAlign'>2</td>

			<td class='leftAlign'>3</td>
			<td class='leftAlign'>4</td>
		</tr>
	</table>

</BODY>
</HTML>

Open in new window

Jahelka

ASKER

Now we are getting somewhere! Key finding: I was in quirks mode and didn't realize it. Don't even know how I got there. Went back and checked defaults to try and make sure I don't end up there again somehow.

So changing document mode to IE8 standards and it works correctly!

Of course, I'm still having issue with the older IE browsers. I could really care less about IE6, I'm not going to waste any more time on that browser. But IE7 still has a decent share, and I would like it to work there. It's getting even more weird, if that is even possible... I change document mode to IE7 Standards (using IE8), and it LOOKS like it is actually going to work in IE7 (the text left aligns). Then I pop open my XP laptop that still has IE7 on it, and the left text-align DOES NOT WORK, everything is still centered... The developer tool recognizes that the attribute is set to align="left", but does NOT do the proper attribute matching with CSS and does not recognize the selector (td[align=left]). I thought the attribute was supposed to over-ride CSS anyway... Maybe I'm wrong there. Any other ideas to get this working in IE7?

Oh, and vinkrins, if I took your advice on changes, then everything would default to left justified. This page could potentially be fairly large. Most of the columns will need to be center justified, so I want to USE CSS for what it was designed for, to cascade. I wanted my default TD style to be centered, so I didn't have to specify anything special. Then, if I need left alignment, I could add in more to make that happen. Extremely frustrating that I can't specify a style for an individual column using an ASP.net GridView... Trying to find a work around...

Jahelka

ASKER

Never received a complete answer, but kadaba clued me in on at least some stuff. Thanks, and sorry for the delayed response.