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

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
0
Jahelka
Asked:
Jahelka
  • 5
  • 2
  • 2
  • +1
1 Solution
 
Gurvinder Pal SinghCommented:
use style
 text-align: left;

0
 
Gurvinder Pal SinghCommented:
I have tested the attached source code in IE8, and it is aligning to left

Thanks
abc1.html
0
 
JahelkaAuthor Commented:
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

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
JahelkaAuthor Commented:
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
0
 
JahelkaAuthor Commented:
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

0
 
kadabaCommented:
The document mode is in Quirks mode. You should be using IE 7 standards or IE 8 standards. try changing that and see.

however also have this as td[align='left']. This however will not work on IE6 in case the intended audience happen to use IE 6

0
 
vinkrinsCommented:
Hi Jahelka,

replace you style code with attache code

let me know :D
	table td{
		width:55;
		text-align: left; 
	}

Open in new window

0
 
vinkrinsCommented:
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

0
 
JahelkaAuthor Commented:
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...
0
 
JahelkaAuthor Commented:
Never received a complete answer, but kadaba clued me in on at least some stuff.  Thanks, and sorry for the delayed response.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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