IE doesn't align my text correctly

Question

I checked this website on Firefox and Chrome and the alignment in the "Releases" section looks correct: http://www.mysecretathens.gr/Sera/releases.html

But if you open the page in Internet Explorer for some reason some of the text, as you can see, is aligned in the center. I have been struggling with this and can't find the solution.

I was wondering if the pseudo elements I was using in the table formats was causing the problem

table td:nth-child(even) {text-align:center; }

but I think this isn't the case. Any ideas?

Answer 1

First of all your navigation anchors are floated - where is your clearing done to maintain a block like structure? This is why your navigation is broken in IE 7.

I don't think IE 7 supports nth-child in CSS - you may have to do this through Jquery or add a class on the table cell you want the content to be centred.

Hope this helps

Filth

/**UPDATED ANSWER HERE *****/

I think it's worth you reading up on "Clearing" floated elements here

Since IE 7 and 6 are a complete B&#@H at times you have to be able to develop what you want in other ways to accommodate for these scum like browsers. So, here is a Jsfiddle of what your "nav" css and html should look like according to current standards.

Also, I think you need to brush up on knowing when to use an "id" as opposed to a "class" - in this case you will / should only have one "nav" within your HTML therefore you want to give this an ID as it's unique.

If you want an in-line navigation, I find it's best to float the "li" elements and have your clearing done after the navigation by adding the class "clearfix" to the "ul" and style accordingly.

For a brief example on "clearing", I have a div after the nav which contains a paragraph. If you remove the class "clearfix" from the "nav" you will see the "paragraph" appear in-line with the "nav" as it should. So this is why it's important to clear all floated elements.

As for your table centring issue, the Jsfiddle I gave you is the route to take as it will accommodate all browsers and mobile devices.

Answer 2

You have malformed html on your page <center>cover: Poor Designers</></div> I assume its suppose to be <center>cover: Poor Designers</center></div>. Different browsers will render malformed markup in different ways, chrome threw the <center> away and ie wrapped it around a div

Answer 3

I'm thinking the table that it's inside of is defaulting to text-align center for some reason and that td is inheriting the value.

.text table{
    text-align:left;
}