IE7, Moz, FF looks great, IE6 not. Xhtml strict doctype

On the site w w w dot plungjan dot name

Using XHTML glish 3 column css plus a vertical menu - looks great except in IE6 where the vertical menu messes with the left margin on the center content.

Also I cannot for my life give my banner more height

Thanks for your assistance

Michel
LVL 75
Michel PlungjanIT ExpertAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

xberryCommented:
Well, the absolutely positioned box in my IE6 looks as if
it could do with 20px less in width (for IE6 only)
and then certainly would be a fit.

One would wonder to see a IE6 box model bug
here, but if you click on your validation button on your right
and then check the warning result from the validation page
one would be lead to the conclusion that incorrect mime types
would mess with your client there, thus dropping
your IE into quirks mode
(http://en.wikipedia.org/wiki/Box_model_bug)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertAuthor Commented:
Drat! Yes I see the 20 pixels too for IE6 only

I do not want to change the server to serve xhtml headers

So you suggest not to use xhtml at all and see what happens?

Or perhaps mail Glish who actually has both the css for the page markup AND the css for the pretty vertical menu that messes it up...
0
JezcentralCommented:
I wouldn't absolutely position a column in the way you have done. You should float elements for this, not poisition them.

In #leftcontent, get rid of the postion: absolute; and put in float: left;
In #centercontent, put in float: left; (You MAY have to put in a width too, as a floated element can default to 100% width, but first try it without).
In #rightcontent, take out the postion: absolute; and put in float: left;

Then after <div id="rightcontent"> is closed, put:
<div style="clear: left;"><!-- clear --></div>
as you should always clear your floats.

J

P.S. Ideally, you would also have a containing div round all three, with a clearfix class added to it (just google for more info), but the above code will work.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

JezcentralCommented:
Sorry, I forgot to mention you should also take the margin off #centercontent.

There will be a few small margin or padding adjustments to get the elements back where you wanted them positioned, but this is the cross-browser way to set out a page column in CSS. :)
0
Michel PlungjanIT ExpertAuthor Commented:
I was convinced that glish was THE preferred way for 3 column setup - so thanks for telling me this.
I guess alistapart would have a better one then...

The center column is not fixed width and that is how I want it
0
Michel PlungjanIT ExpertAuthor Commented:
So I tried
http://www.alistapart.com/articles/holygrail

but that is not super when resized - the left column disappears in IE6 when resizing from bottom and the right column drops when resizing to narrow in FF...

Is there a better one out there?
0
JezcentralCommented:
Do you have a URL I could look at?

A containing div may well be the way to go, and float the #rightcontent right rather than left. Change the clearing div to both, now that you are floating to the left AND right, (and you are not using Clearfix).

<div class="clearfix">
    <div id="leftcontent"><!-- content --></div>
    <div id="centercontent"><!-- content --></div>
    <div id="rightcontent"><!-- content --></div>
    <div style="clear: both;"><!-- clear --></div>
</div>

J
0
Michel PlungjanIT ExpertAuthor Commented:
Here is a version of my about page using the listapart version

www dot plungjan dot name slash about_broken dot html

It is ALMOST ok online, IE6 again does not like the vertical menu

I have a reload onresize to handle the disappearing left part for IE.

If you can clearfix it or such then I would be very happy

I have some mistake or misunderstanding where the left part is not flush against the left edge and the left part overlaps the center by 5 px or so...
0
JezcentralCommented:
If for nothing other than accessibility, the columns should be coded left to right, as they appear on screen:

    <div id="leftcontent"><!-- content --></div>
    <div id="centercontent"><!-- content --></div>
    <div id="rightcontent"><!-- content --></div>

However, if you are desperate, you could try:

    <div id="leftcontent" style="float: left;width: 200px;"><!-- content --></div>
    <div id="rightcontent" style="float: right;width: 200px;"><!-- content --></div>
    <div id="centercontent" style="margin: 0 200px;"><!-- content --></div>

You may have to increase the margin on #centercontent so it doesn't snag on either of the columns, and it can fit snugly inbetween them.

I think my first suggestion is still the best. Did it not work? Was the centercontent column too wide or something:

<div class="clearfix">
    <div id="leftcontent" style="float: left;"><!-- content --></div>
    <div id="centercontent" style="margin: 0;"><!-- content --></div>
    <div id="rightcontent" style="float: right;"><!-- content --></div>
    <div style="clear: both;"><!-- clear --></div>
</div>

0
xberryCommented:
0
JezcentralCommented:
Sorry, left out "float: left;" from the centercontent style, the ideal solution should be:

<div class="clearfix">
    <div id="leftcontent" style="float: left;"><!-- content --></div>
    <div id="centercontent" style="float: left; margin: 0;"><!-- content --></div>
    <div id="rightcontent" style="float: right;"><!-- content --></div>
    <div style="clear: both;"><!-- clear --></div>
</div>
0
Michel PlungjanIT ExpertAuthor Commented:
@xberry: The page itself has a direct link to the validtor...

JezCentral: I am not sure what you are posting - a complete solution?
E.g. just replace all my code with
<div class="clearfix">
    <div id="leftcontent" style="float: left;"><!-- content --></div>
    <div id="centercontent" style="float: left; margin: 0;"><!-- content --></div>
    <div id="rightcontent" style="float: right;"><!-- content --></div>
    <div style="clear: both;"><!-- clear --></div>
</div>
?

Because I want
1. a header
2. 3 columns left 200px, right:200px, center rest of the screen
3. a footer.

If I take your code and add the above widths, it does not work
0
Michel PlungjanIT ExpertAuthor Commented:
Ok guys - I have changed the whole thing to code I got from TANFA

Have a look at my homepage and feel free to comment

Michel
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.