IE and CSS help

[clareto]

Hello. Im in the hard process of forgetting everything I know about tables and make everything with divs and stylesheets. But I still have some trouble getting what I want.



1)How can I center all the contents of the page? I want all the contents centered, but inside the contents in the div be left-aligned.

2)Can I use png files in my website? I mean, it seems that IE doesnt renders transparencies.

3) I have this div:

<div class="TopBanner">
<img src="Banner.png" width="800px" height="164px"/>
</div>

and the related css

div.main_TopBanner
{
 background: red;
 width: 800px;
 height: 164px;
 margin: 0px;
 padding: 0px;
 max-height: 164px;
}

but IE renders the layer 169px height, leaving a red line below the image. How Can I fix it? (it renders correctly in FF)

[Zenax]

I have to say now, that I have switched to FF, that IE sucks! It don't render correctly, and if it is done right in FF then there aint no problem with your site!

If you really wanna solve this problem. Try a browser detection script, that detects what browser you are using, then ahve it direct to a correct looking page!

As for the center, try this:

<div align="center">
content
</div>

[Woolie]

That isn't the way to think about it Zenax - "and if it is done right in FF then there aint no problem with your site!". Although IE has problems, it is still the most commonly used browser, so therefore you need to design for IE before Firefox.

Vertical centering in CSS is one of the problems CSS2 can have, it just don't work well. If I were you I would steer clear of vertical centering, but if you really feel the need to, have a look at this article. I've only skimmed it but it seems ok.

Horizontal centering is fine. If you are centering a DIV, use the left and right margins on auto. margin-right: auto; and margin-left:auto;. You can also set the parent div to have text-align: center; and then set text-align: left; in the others. Have a look at this.

About your red line problem, I couldn't tell you off by heart but Google to see if there is a hack for it.

Also, redirecting to different pages for different browsers is a very bad idea. If you really want to have different things for IE, and don't want to use CSS hacks. Use the IE conditional tags. Find more about them here.

[Zenax]

Fair enough!

I stand corrected!