LinuxQuestions.org
Go Job Hunting at the LQ Job Marketplace
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > General
User Name
Password
General This forum is for non-technical general discussion which can include both Linux and non-Linux topics. Have fun!

Notices

Reply
 
Search this Thread
Old 09-01-2006, 11:50 AM   #1
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Rep: Reputation: 121Reputation: 121
Help with XHTML/CSS rendering in IE


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?

Last edited by vharishankar; 09-01-2006 at 11:52 AM.
 
Old 09-01-2006, 12:54 PM   #2
reddazz
Guru
 
Registered: Nov 2003
Location: N. E. England
Distribution: Fedora, CentOS, Debian
Posts: 16,298

Rep: Reputation: 73
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.

Last edited by reddazz; 09-01-2006 at 12:56 PM.
 
Old 09-01-2006, 08:00 PM   #3
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Original Poster
Rep: Reputation: 121Reputation: 121
I was using IE 6. It validates correctly as XHTML Scrict. I'll post a screenshot. Thanks, reddazz.

Last edited by vharishankar; 09-01-2006 at 08:02 PM.
 
Old 09-01-2006, 11:57 PM   #4
reddazz
Guru
 
Registered: Nov 2003
Location: N. E. England
Distribution: Fedora, CentOS, Debian
Posts: 16,298

Rep: Reputation: 73
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.
 
Old 09-02-2006, 12:58 AM   #5
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Original Poster
Rep: Reputation: 121Reputation: 121
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.
 
Old 09-02-2006, 03:37 AM   #6
Mega Man X
Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 63
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...
 
Old 09-02-2006, 03:55 AM   #7
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Original Poster
Rep: Reputation: 121Reputation: 121
Thanks MegaMan X. Does it look as bad as that in IE 7? And I thought IE 6 was bad.

And happy birthday!

Last edited by vharishankar; 09-02-2006 at 03:57 AM.
 
Old 09-02-2006, 04:00 AM   #8
Mega Man X
Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 63
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 ^_^.
 
Old 09-02-2006, 12:49 PM   #9
reddazz
Guru
 
Registered: Nov 2003
Location: N. E. England
Distribution: Fedora, CentOS, Debian
Posts: 16,298

Rep: Reputation: 73
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.

Last edited by reddazz; 09-02-2006 at 12:50 PM.
 
Old 09-02-2006, 11:35 PM   #10
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Original Poster
Rep: Reputation: 121Reputation: 121
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.

Last edited by vharishankar; 09-02-2006 at 11:37 PM.
 
Old 09-03-2006, 02:23 AM   #11
Mega Man X
Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 63
@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
 
Old 09-03-2006, 04:37 AM   #12
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Original Poster
Rep: Reputation: 121Reputation: 121
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.
 
Old 09-03-2006, 04:54 AM   #13
Mega Man X
Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 63
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 ^_^

Last edited by Mega Man X; 09-03-2006 at 04:56 AM.
 
Old 09-03-2006, 05:06 AM   #14
vharishankar
Senior Member
 
Registered: Dec 2003
Posts: 3,142
Blog Entries: 4

Original Poster
Rep: Reputation: 121Reputation: 121
Thanks Mega man X. Now I can relax!
 
Old 09-03-2006, 05:07 AM   #15
Mega Man X
Guru
 
Registered: Apr 2003
Location: ~
Distribution: Ubuntu, FreeBSD, Solaris, DSL
Posts: 5,339

Rep: Reputation: 63
Awesome . I'm glad I could help ^_^
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
what browser for apache css rendering? rblampain Linux - Software 4 09-18-2005 10:41 AM
Numbered headings in XHTML vharishankar Programming 6 08-07-2005 01:12 AM
XHTML/CSS question: how to draw a curved box for a sidebar vharishankar General 5 08-04-2005 08:32 PM
HTML to XHTML conversion rjlee Linux - Software 3 01-10-2005 07:27 AM
do you use xhtml ? linowes General 0 01-14-2003 11:01 PM


All times are GMT -5. The time now is 01:19 AM.

Main Menu
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
identi.ca: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration