Help with XHTML/CSS rendering in IE

vharishankar · 09-01-2006, 11:50 AM

I've recently created my own CMS to drive my reviews site http://harishankar.org

I designed it with Firefox and Opera and things work great with them. Unfortunately with IE (6) the content block moves far too across the page.

Here's the CSS URL: http://harishankar.org/style.css

If anybody could be kind enough to check this out in IE as well as my style sheet and make any suggestions to correct it without breaking Opera or FF, I'd be much obliged. I can never figure out why IE CSS is so broken. Every new design has its own quirks in IE

I'm using percentage widths. Could this be an issue?

reddazz · 09-01-2006, 12:54 PM

Can you post a screenshot. The page looks the same for me using Firefox and IE, but the only Windows computer I have is running IE7.

vharishankar · 09-01-2006, 08:00 PM

I was using IE 6. It validates correctly as XHTML Scrict. I'll post a screenshot. Thanks, reddazz.

reddazz · 09-01-2006, 11:57 PM

Quote:

Originally Posted by Harishankar

I was using IE 6. It validates correctly as XHTML Scrict. I'll post a screenshot. Thanks, reddazz.

I've looked at it from one of the PCs at work and its shifted too much to the right when using IE6. I will tinker with your CSS when I get the chance and let you know if I manage to get it to look right.

vharishankar · 09-02-2006, 12:58 AM

Thanks Redazz. If you still need screenshots, I'll provide them.

However the site works well with Opera, Firefox and Konqueror. It's IE 6 which seems to be giving this issue.

Mega Man X · 09-02-2006, 03:37 AM

I've two screenshots. One from Firefox, and one from IE 7:

IE7:
http://goto.glocalnet.net/torch/temp/hari01.PNG

Firefox:
http://goto.glocalnet.net/torch/temp/hari02.PNG

I've been struggling a lot with CSS myself, even to the point of reconsidering tables to design pages...

vharishankar · 09-02-2006, 03:55 AM

Thanks MegaMan X. Does it look as bad as that in IE 7? And I thought IE 6 was bad.

And happy birthday!

Mega Man X · 09-02-2006, 04:00 AM

Thank you Harishankar. You are first person to wish me a happy birthday today (after my close family members), so thanks ^_^. I wish I had IE6 installed, but unfortunately I don't.

Anyway, good look with you review page. Looks promising ^_^.

reddazz · 09-02-2006, 12:49 PM

Happy birthday Megaman

Hari, have you edited the code coz I swear it looked ok in IE7 when I glanced at the site yesterday. One option available would be to wrap all of your content in a div and then align the div to the center of the page. An example, the body would be something like,

Code:

body{ 
margin: 0 auto; 
text-align: center;
}

and the wrapper would be something like

Code:

#page_wrapper{
width: 70%; 
margin: auto; 
text-align: left;
}

Tinker with that code and hopefully it'll help out. Also part of the problem seems to be that you have used a lot of left floats. Try clearing some of those floats or designing the page without them.

vharishankar · 09-02-2006, 11:35 PM

Quote:

Originally Posted by reddazz

Happy birthday Megaman

Hari, have you edited the code coz I swear it looked ok in IE7 when I glanced at the site yesterday. One option available would be to wrap all of your content in a div and then align the div to the center of the page. An example, the body would be something like,

Code:

body{ 
margin: 0 auto; 
text-align: center;
}

and the wrapper would be something like

Code:

#page_wrapper{
width: 70%; 
margin: auto; 
text-align: left;
}

Tinker with that code and hopefully it'll help out. Also part of the problem seems to be that you have used a lot of left floats. Try clearing some of those floats or designing the page without them.

Reddazz, thanks. Yes, I did tweak a small thing in the CSS yesterday, but it doesn't seem to have helped at all.

I guess I'll have to modify the CSS and the HTML a bit. The problem is I have to keep rebooting to WIndows to check out IE 6 rendering and I'm not at all sure that it will be guaranteed to work in all browsers when I make changes.

Is there like an IE rendering engine in Linux? It would help out a lot if I needn't keep switching OSes just to check out the site rendering.

At the moment, if you look at the code, I am using a "wrapper" like DIV to put all the other DIVs into. But I guess I need to make some changes there as well.

Mega Man X · 09-03-2006, 02:23 AM

@reddazz:

Thank you mate ^_^;;

@Harishankar:

Quote:

Is there like an IE rendering engine in Linux? It would help out a lot if I needn't keep switching OSes just to check out the site rendering.

It is possible to install IE under wine. I never did it myself, so I can't say how well it would run, but it would surely help you to debug your page. Even though it is IE 6, I doubt much has changed in the rendering engine used in IE6 to IE7. Even if it did, IE6 is still the most used webbrowser, so it would be of some help I suppose ^_^.
http://patrick.spacesurfer.com/ie_wine_install.html

vharishankar · 09-03-2006, 04:37 AM

Hurrah! Got it working properly in IE 6 now, as well as Opera, FF and Konqueror. Instead of using the 70% width for the content block, I made the body margins 14% left and 16% right so that the content block even if it's 100% occupies the central portion.

Now I just need somebody to make sure it works in IE 7.

Mega Man X · 09-03-2006, 04:54 AM

Quote:

Originally Posted by Harishankar

Now I just need somebody to make sure it works in IE 7.

It works fine in IE7. Here:

http://goto.glocalnet.net/torch/temp/hari_new.png

Congratulations Hari ^_^

vharishankar · 09-03-2006, 05:06 AM

Thanks Mega man X. Now I can relax!

Mega Man X · 09-03-2006, 05:07 AM

Awesome

. I'm glad I could help ^_^