Small simple page validates, works fine in everything except IE - Can anyone help?

[Melanie Avids]

Hi, I'm tired of banging my head on the computer. I'm hoping someone
can help? I have a very small simple page that looks perfect in
Firefox, Safari, and Netscape. It's clean. The HTML and CSS both
validate. In IE/Mac, however, the container div is significantly
smaller, and the content overruns it. In IE/Windows, the content of the
right column only starts displaying after the contents of the left
column are completed. I have SCREENSHOTS to illustrate the 2 problems
here: http://resume.mle4hire.sent.com/bk/screenshots.html and I have a
minimal version of THE PAGE ITSELF with an internal stylesheet here:
http://resume.mle4hire.sent.com/bk/minimalbad.html. I really appreciate
your help. THANKS.

[Melanie Avids]

> > Remove "float:left " from #leftside, remove the left-margin from

#rightside, set "float:righ t" to #rightside instead.

And, in the HTML source, move the entire 'leftside' <div> AFTER the
'rightside' one.

Although this is far better structure, I'm still mystified as to why the
original version didn't work, unless (could it be?), there's a bug in IE.

Hm. Nope. Tried it, caused extra problems, fixed the extra problems,
original problem is still there. Except maybe in reverse? Content of
left column is dropped? At home without a windows machine, I forget.

Originally I used the layout found here:
http://www.nysfirm.org/documents/htm...umn/fixed.html
(how can I put that in so it just shows up as [link]??)

When I switched the float:left to the float:right, some wierd things
happened. The photo stuck out the bottom of the div. I added on the
original footer div with the navbar, and that solved the photo sticking
out just fine, but the navbar was on two lines. I needed to resort to
the html tag of 'br clear="all"' to get it to sit right, which I had
thought (??) was replaced by the 'clear:both' tag in the navbar div. It
cleared in the first version, but not in the second. And after all
that, as I said, the content is still sunk, so the same problem is
there. Oh yeah, and it looks insanely bad in IE/mac, but at this point
that's beside the point, because the original problem page is still
less flawed and needs fewer fixes than the new flawed page. Here's the
link if you're currious:
http://resume.mle4hire.sent.com/bk/badtest.html

CSS isn't new to me, but pure css layouts are. This is a frustrating
beginning, because it would be so easy to fix with a table. I want to
be converted to the other side. If I can't make such a simple layout
work, I'm terrified of bigger ones.

[Eric Lindsay]

In article <11************ *********@o13g2 000cwo.googlegr oups.com>,
"Melanie Avids" <me******@gmail .com> wrote:

Originally I used the layout found here:
http://www.nysfirm.org/documents/htm...umn/fixed.html
http://resume.mle4hire.sent.com/bk/badtest.html

CSS isn't new to me, but pure css layouts are. This is a frustrating
beginning, because it would be so easy to fix with a table. I want to
be converted to the other side. If I can't make such a simple layout
work, I'm terrified of bigger ones.

I feel the same, and also don't normally have access to Windows Internet
Explorer, which is where I run into the most problems.

On your layout, I am a little confused by your HTML. Given your side
text is the description, and your main content is the photo, why not
have your right side photo div below the leftside div in your HTML?
That would seem to me to be closer in structure to the original two
column layout you were using as a basis.

--
http://www.ericlindsay.com

[kchayka]

Melanie Avids wrote:

When I switched the float:left to the float:right, some wierd things
happened.
http://resume.mle4hire.sent.com/bk/badtest.html
Looks like you changed more than the float. Your DOCTYPE is triggering
quirks mode rather than standards mode, so results can be even more,
well, quirky. ;)
CSS isn't new to me, but pure css layouts are. This is a frustrating
beginning,

You will have a lot less frustration if you give up the notion of
pixel-perfect layouts and fixed-px-size elements (images excepted).
<URL:http://www.allmyfaqs.n et/faq.pl?AnySizeD esign>

There is no reason why your left column must be exactly 250px wide, or
the content area in general must be exactly 750px wide (or whatever).
Consider your visitors that use large windows and/or large text. Your
layout does not accommodate them at all. :(

BTW, IE's overflow behavior is very broken, both Win and Mac versions.
It often ends up doing exactly what you're complaining about (or
something even worse) if the content overflows its box boundaries by
even 1 pixel.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Chris Beall]

Melanie Avids wrote:

Remove "float:left " from #leftside, remove the left-margin from
#rightside , set "float:righ t" to #rightside instead.

And, in the HTML source, move the entire 'leftside' <div> AFTER the
'rightside' one.

Although this is far better structure, I'm still mystified as to why the
original version didn't work, unless (could it be?), there's a bug in IE.

Hm. Nope. Tried it, caused extra problems, fixed the extra problems,
original problem is still there. Except maybe in reverse? Content of
left column is dropped? At home without a windows machine, I forget.

Originally I used the layout found here:
http://www.nysfirm.org/documents/htm...umn/fixed.html
(how can I put that in so it just shows up as [link]??)

When I switched the float:left to the float:right, some wierd things
happened. The photo stuck out the bottom of the div. I added on the
original footer div with the navbar, and that solved the photo sticking
out just fine, but the navbar was on two lines. I needed to resort to
the html tag of 'br clear="all"' to get it to sit right, which I had
thought (??) was replaced by the 'clear:both' tag in the navbar div. It
cleared in the first version, but not in the second. And after all
that, as I said, the content is still sunk, so the same problem is
there. Oh yeah, and it looks insanely bad in IE/mac, but at this point
that's beside the point, because the original problem page is still
less flawed and needs fewer fixes than the new flawed page. Here's the
link if you're currious:
http://resume.mle4hire.sent.com/bk/badtest.html

CSS isn't new to me, but pure css layouts are. This is a frustrating
beginning, because it would be so easy to fix with a table. I want to
be converted to the other side. If I can't make such a simple layout
work, I'm terrified of bigger ones.

Melanie,

OK, here's what I did, starting with the URL you posted above:

1. Replace the obsolete Transitional DOCTYPE with (on one line):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

That (in IE 6) brought the picture back up alongside the text. It also
gave me an error in the HTML validator, so...

2. Deleted '<BR clear=all>'. That satisfied the validator, but, using
Netscape 7.1, caused the nav line to be stair-stepped onto two levels.

3. I removed 'margin-top: -8px' from the '#navcontainer UL' selector.
This fixed the stair-stepped navigation.

4. I removed 'position: relative' from the same selector, 'cause I
didn't understand why it was there. This had no apparent visible effect.

At this point the page looked clean, however the spacing between the
bottom of the image border and the double-line above the navigation was
much larger in IE than in NN (where the two actually touched). It
wasn't clear what you intended here, so I didn't feel confident trying
anything more.

[Whenever IE is different, I suspect an IE bug. If the difference is
tolerable, i.e. it doesn't prevent communication of the page content, I
let it go. I see no reason to exert effort to make IE look good when it
clearly is not.]

I do note a lot of pixel-specific properties in the CSS. That's seldom
a good idea, because what looks good in one user environment may look
horrible in another. You will be less stressed if you take a more
casual approach to the relationships between on-screen objects (Example:
'X should be to the right of Y, unless the window is narrow, in which
case X should follow Y', rather than 'X should be 4px to the right of Y').

Chris Beall

[Melanie Avids]

Hi, thanks to all for your combined help. The little page works as
intended now, solved by the problems of doctypes and pixels. Using the
correct doctype and increasing the width of the div holding the picture
just a bit on the original page did the trick. It would have been the
simplest thing to try first and I feel a little moronic. Still, the
experience of trying other fixes was valuable for the learning process.

I appreciate also the advice to avoid fixed-dimsension and pixel based
layouts. I had my reasons here, but still thank you for your advice.
Generally I am in agreement.

Chris and Spartanicus especially, thanks for taking the time to
redesign the floats and the flow looking for the solution. Flipping the
left and right floats never worked quite right -- Chris (only if you're
currious), removing the 'margin-top: -8px' and 'position: relative'
from '#navcontainer UL' broke the cute stolen navbar, and I couldn't
get that to fix without the totally redundant and bogus '<BR
clear=all>' tag. Also, the left and right divs went full-width and lay
one beneath the other in IE/Mac. Maybe more time and energy would have
gotten me through those problems, but it seems like a waste now that I
have the layout I was aiming for.

If you're currious to see the difference, the suggestions you made that
almost worked (1), and the final fix (2) are both availble:

http://resume.mle4hire.sent.com/bk/suggestion1.html
http://resume.mle4hire.sent.com/bk/suggestion2.html

Thanks again.