DIV Problems with Internet Explorer - Please Help

[thepixelguru]

Hope this is the right section - HTML's not strictly "programming," but I'm new here and couldn't find a better forum to post it in. And yes, I did search.

I'm somewhat new to DIV tags, and I'm trying to get my site to appear correctly in all browsers, but I'm having an issue with Internet Explorer 6. The site validates just fine according to w3c.org (and I used a wrapper for the main section), but as everyone knows that doesn't exactly mean a whole lot when it comes to IE.

You can see my site here:
http://imprinttestsite.x10hosting.com/

and the CSS file is here:
http://imprinttestsite.x10hosting.com/css/default.css

The transparency issues should be easy enough to solve - I think most of the images are saved as PNG-8, and while PNG-24 is larger, I believe it displays properly so I'll probably just end up using that.

The main one is the layout. I can't figure out how to get the main content section of the site to appear centered in IE like it does on every other browser I've tried. It really shouldn't be this difficult, but, like I said, I'm new to DIV tags. I know I could probably make a separate version of the page to serve to IE, but since some browsers that can handle DIV tags properly identify as IE (like Safari) I'd rather not serve them the dumbed-down version of the page.

Is there any way to use the same code to make the site appear properly in all browsers? Thanks in advance for any help or advice you can offer - and if you want to try my site on all your browsers and let me know if there are any other issues, that would be greatly appreciated as well!

 

[garrensilverwing]

for one of my pages i had to add text-align: center; to my body css and then text-align: left; to all the css for the divs which centered the wrapper but kept everything else right, and if you want something centered inside the wrapper you just dont put text-align: left; for that particular div, hope that made sense

 

[thepixelguru]

That did it. Somewhat ugly way of doing it (code-wise), but at least it's centered in IE now. I was so busy trying to get IE to handle the margins properly, I didn't even think of doing it as a text-align. Thanks - rep for you.

All that's left now are the transparency issues (though now that I look, one might be another margin issue). Wish me luck...

EDIT: No dice with the transparency under PNG-24. Anyone got any advice for that? Again, thanks in advance for any help.

 

[misson]

For IE <= 6, you'll need to use the proprietary "filter" CSS property with the AlphaImageLoader filter. Use conditional comments to target IE6. Ing Chao posted an article illustrating the technique, discussing the problems and their solutions.

 

[thepixelguru]

Thanks - good info, I just can't get it to work. I'm pretty sure I understand the theory, but I guess I'm a little clueless when it comes to the implementation. Here's what I have so far:

HTML:
http://imprinttestsite.x10hosting.com/test.html

CSS:
http://imprinttestsite.x10hosting.com/css/default.css
http://imprinttestsite.x10hosting.com/css/ie.css

Anyone got some help for me? Thanks for everything so far, guys - helpful forum you've got here. :biggrin:

EDIT: Nevermind, AlphaImageLoader won't work on background images, and that's my main problem. Time to look for something else...

EDIT2: Just tried SuperSleight - transparent, but now it's thrown off my layout once more. Writing pages for IE is such a pain in the butt... Any help?

 

[misson]

The images aren't really backgrounds, so (except for the skyline, which needs to tile) you could use normal <img> elements with the "filter: AlphaImageLoader" technique.

You could also redesign the site, using a smaller logo in the upper left corner, which means you wouldn't have to layer the images. As-is, the design pushes the content a fair distance down the page, which is a no-no in web design. I haven't seen any studies (or official figures), but the header should take up less than half of the initial page view. Your current design is somewhat appropriate for your business, otherwise I'd say definitely change the design.

 

[thepixelguru]

Yup - page has been redesigned, content isn't so far down the page, and nothing requires transparency anymore. Seems like every one of my pages eventually gets redesigned as a result of Microsoft's inability to adhere to web standards...

Thanks for the help, folks.

 

[vol7ron]

Seems like every one of my pages eventually gets redesigned as a result of Microsoft's inability to adhere to web standards...

Unfortunately, you've bought into the browser propaganda. While I predominantly use Firefox and Chrome, I will say in IE's defense, that there are many web standards out there. The W3C is just one consortium that publishes different standards and has only been getting attention [relatively] recently because of the other browsers basing a lot of their software on it.

Additionally, IE probably does conform to the standard better. The problem is that in quirksmode, it doesn't render the page as nicely. What this means is when a webpage isn't programmed correctly, the browser tries to guess how it should have been programmed. Firefox is very good at this; IE, not so much. In addition to this, the other browsers sort of tweak the standard. Microsoft might might comply completely with how an element should act in the browser, but FF and others sometimes tweak the rules to make it how the common-day programmer would interpret something. Sort of like "align:center."

 

[freecrm]

Just had a look at this from your opening link.

I do remeber this from your earlier post and this is an improvement.

Couple of points:

1) I note you're using a table layout as opposed to <div>'s - which, whilst OK in the sort term, is very awkward and inflexible.

You may find my basic css tutorial useful at http://forums.x10hosting.com/tutorials/97286-beginners-guide-css-styling.html

Apart from that, you may want to review your display width (currently set at 600px). Most browsers are now on 1024x768, with very few at 800x600. Again to get more info into the "fold" (viewable area without scrolling), increasing the width will help.

I wasn't sure about your background colour, which seems to clash witht he other colours you have.

Your default font type is a bit naff - what about changing it to arial or another simple to read text? (just put in body{} section in your .css)

Don't get too fired up about IE... IE6 and before can be a real pain but there are ways round them so you get true cross-browser compatibility.

Ideally, I try to code css around IE6 and then test in FF - and then back again.. and then forwards again - it's a common problem.

The centering issue could have been resolved easily with an envelope around the content..

#wrapper{
width: 950px;
margin-left: auto;
margin-right: auto;
}