Hi everyone!

So I have this webpage that renders fine in both Quirky and Strict
modes under Firefox.

Website HTML: http://www.telparia.com/layout_cross_platform_test.html
Website CSS: http://www.telparia.com/layout_cross_platform_test.css

This is how it should correctly render:
http://www.telparia.com/layout_cross...rm_correct.jpg

However under IE it does not render correctly.

My goal is to either alter the current CSS or come up with a new CSS
for IE that will allow the HTML to render correctly in both Firefox
and IE.

So if someone could explain what I'm doing wrong in the CSS or what I
should be doing differently to achieve the layout I'm after, I'd be
super grateful :)

Thanks.

sembiance@gmail.com wrote:
[color=blue]
> Hi everyone!
>
> So I have this webpage that renders fine in both Quirky and Strict
> modes under Firefox.
>
> Website HTML: http://www.telparia.com/layout_cross_platform_test.html
> Website CSS: http://www.telparia.com/layout_cross_platform_test.css
>
> This is how it should correctly render:
> http://www.telparia.com/layout_cross...rm_correct.jpg
>
> However under IE it does not render correctly.
>
> My goal is to either alter the current CSS or come up with a new CSS
> for IE that will allow the HTML to render correctly in both Firefox
> and IE.
>
> So if someone could explain what I'm doing wrong in the CSS or what I
> should be doing differently to achieve the layout I'm after, I'd be
> super grateful :)
>
> Thanks.[/color]

All I can tell you is that in konqueror it displays like you want it to. I
don't have convenient access to IE. Sorry,

Carolyn
--
Carolyn Marenger

So I've had this problem for several days now.

Well... I just fixed it :)

Basically I reduced the CSS/DIV's down to something much simpler then I
added one thing at a time and didn't move forward until I had that much
working.

Ended up being basically a float issue... they tend to like coming in
pairs :)

Oh, just in case anyone wanted to see what the final solution was, the
final HTML and CSS are available here:

http://www.telparia.com/final_layout...form_test.html
http://www.telparia.com/final_layout...tform_test.css

Have a nice day everyone :-)

sembiance@gmail.com wrote:
[color=blue]
> Oh, just in case anyone wanted to see what the final solution was, the
> final HTML and CSS are available here:
>
> http://www.telparia.com/final_layout...form_test.html
> http://www.telparia.com/final_layout...tform_test.css
>
> Have a nice day everyone :-)[/color]

I just went to take a look at it and it came up in a small window. There
are a few problems you might want to look into.

1. If the window isn't wide enough for the TOP HEADER line, it wraps onto
LEFT SIDE CONTENT and RIGHT SIDE TOP.

2. If the page isn't high enough, the LEFT SIDE CONTENT and RIGHT SIDE TOP
overlap into the TOP HEADER.

Why? Your columns are set to 97% of screen height. The size of the font
used in the TOP HEADER is larger than the remaining 3%, so it is
overflowing onto the content columns below. Also, since there is nowhere
else for it to go, when it is forced to wrap, it is much more noticeable.

Carolyn
--
Carolyn Marenger

Thanks for the info. The fonts used there are just for testing
purposes. The project in which I'm utilizing this layout will have
different things in each area.
I'll keep in mind those tips though and make sure if I see something
like it in the future that I correct it.

Thanks again :)