New Site - CSS Troubles

[Penguin]

Hey Guys,

I've been working on a new website recently, http://www.squashurl.com (URL Redirection service).

I originally used tables but then decided why not be exciting and try css (Only used CSS a little before).

Anyhoo, i switched to CSS with a few other changes too, all was looking lovely - Then i checked IE!

I've corrected a big problem with how IE handles padding incorrectly, that was the biggest problem (Corrected by adding padding to the text/form/images rather than the divides). Now i just face a few little things which are annoying me...

A) At the right end of the adsense block it seems the divide is not streching long enough.. (Theres a grey gap at the end)

B) I want to center the divides, without centering the content inside it.

C) At the top, theres extra space below the main banner and the border.

These errors are only in IE.. it's very annoying - Any help much appreciated!

- Penguin

 

[Furr]

edit that you've already done it.. hmmm

 

[Penguin]

Sorry Fur - Did you mean the padding fix or?

 

[Penguin]

Wow - Yet again, seems the silly little mistakes had me for a while there. Finally worked out that the grey gap was due to me defining the wrong class!

The extra space was a result of how i had indented the code, apparently IE didn't like it.

- Penguin

Edit:

Also, my work around for the center problem was to use center tags, and then define text-align for the text and other items.

 

[Shovel]

my work around for the center problem was to use center tags, and then define text-align for the text and other items.

I'm just doing this on the fly towards bed, but very quickly:

To centre blocks in IE6 set the parent element to text-align: center; and the immediate child to text-align: left;

Effectively that does the same as using the <center> element like you did, but without abusing defacto deprecated mark-up. For example, you should be able to do something along the lines of:

body { text-align: center; }
body * { text-align: left; }

In standards comp browsers, you just set a width for the body element and then set the margins to auto. Magic.

 

[Penguin]

I had used auto margins and a width origionally, unfortionately IE didn't like that very much. I'll replace the <center> tags with the body text-align, didn't think of that, cheers Shovel!

 

[~Yuckfou~]

Origional Link

Spellcheckers ftw!!

 

[Penguin]

Haha. Thanks ~Yuckfou~, my spellings not quite perfect no My brother is constantly checking over my websites telling me i've spelt everything wrong I'll check over them next,

- Penguin

 

[Furr]

yeh, i was going to do the auto thing, but for somereason i couldn't get it working on my system.. when i have other sites on my computer which work fine with it in IE.. ah well thats because IE is crap.

 

[Shovel]

margin: auto doesn't work in IE6 or less, but does work with IE7 iirc.

Doing the text-align: center; trick does work with IE6 or less but doesn't work in any other browser because it's actually a bug.