A little feedback regarding CSS and design.

[ddoonie]

Hey everyone,

I have a couple questions i'm hoping you guys can help me sort out. I'm newish to CSS and am helping a friend code her site. The person i am coding with, likes tables so I had to use her tables with css to come up with something. haha. Please ignore the gaudy logos as the 'client' (friend's sister) insists on them.

First, here is the site. www.thespf.com/index2.php

1) My css was fine initially with regards to the text/content. But now none of the css is transferring through - ie. padding etc... I use to use text-align to center the text, but that didn't work anymore (so just put it in the table for now). Can you possibly tell me why its not working? Or what changed?? Its driving me nuts.

2) The site rendered fine on all browsers, now I am having issues between IE and all others. I design on a mac, so I know it works on all my browsers... but on MIE its not rendering the header and moving stuff around...

3) If you have any generic feedback, design tips, annoyances... please let me know so that i may learn.

take it easy on me. I learned this all on my own, so i'm sure i dont follow the typical rules.

Thank a lot.

 

[Darth.Titan]

Troubleshooting HTML for me begins with validating your code. You need to pick a doctype first though .

At first glance I can't help but notice that you placed your analytics script code after the closing HTML tag. That's just one no-no.

 

[ddoonie]

At first glance I can't help but notice that you placed your analytics script code after the closing HTML tag. That's just one no-no.

Thanks for your response. Unfortunately, i dont think i have control over the analytics. Its free webhosting, so they add it to the page on their own ( i believe).

 

[angelwatt]

The missing header may be due to a bad HTML comment ending.

</div>--!>

There's no ! on the end of a comment.

There will still be some spacing issues with IE after this fix though.

 

[ddoonie]

The missing header may be due to a bad HTML comment ending.

</div>--!>

There's no ! on the end of a comment.

There will still be some spacing issues with IE after this fix though.

Thank you! That took care of most of the issues. Any other feedback - coding practices would be much appreciated!

 

[ddoonie]

Can anyone spot why the CSS wont take? Like padding or centering is not appearing. This is only as of recent, so it must have been something stupid I did, BUT I can't find it... Once thats fixed, i'll be set for now.

So please let me know if you can see the issue.

ie. the left column should be centered, as well as the center and right - all using CSS (stylesheet.css)

 

[angelwatt]

Looks centered to me in IE8 and Firefox. You may want to clear your cache or at least do a forced refresh.

 

[ddoonie]

Everything is centered? Weird... Are the padding settings working too? I set a test so the right column background should be pink if the CSS is working. Did it show up pink on yours?

This is driving me nuts! I checked browsershots with the same issue. Did you happen to have a screenshot i could look at?

http://kttns.org/e5ztf

i hear it works on IE and some firefoxes... nothing on my mac yet.

if I cnt find a solution, i'll have to put the css inline then - cant spot the problem! - so please save me from a long and tedious fate!

 

[angelwatt]

You're missing an end } for your .admin block in the CSS. IE went past the error, but Firefox didn't. This is why I hate IE, it lets invalid code get through and the designer thinks everything is fine. Firefox wasn't centered for me anymore. I used the CSS validator the find the problem.

 

[ddoonie]

I owe you for that one.

Thank you so much!!!! I've now bookmarked the validator!