Reputation: 443
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?
Upvotes: 0
Views: 223
Reputation: 3228
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.
Upvotes: 1
Reputation: 97727
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
Upvotes: 1
Reputation: 3959
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;
}
Upvotes: 0