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.

[Spartanicus]

"Melanie Avids" <me******@gmail.com> wrote:

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.

Read up on: http://www.google.com/search?q=doctype+sniffing

--
Spartanicus

[Viken Karaguesian]

Melanie,

Let me preface this by saying that I'm not a total expert. That being said,
I noticed that you haven't included a full Doctype declaration in the top of
your page. If you don't have a full Doctype, IE will default to "Quirks"
mode and not render the box model correctly. See
http://css.maxdesign.com.au/listamat...t-boxmodel.htm to see what I'm
taking about. The particular chart I'm referencing is at the bottom of the
page, but the whole page is useful to read.

Try using a full doctype and see if anything changes.
------------
Viken K.
http://home.comcast.net/~vikenk

--

"Melanie Avids" <me******@gmail.com> wrote in message
news:11**********************@g47g2000cwa.googlegr oups.com...

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]

Thank you both Spartanicus and Viken for the tip about doctypes.
Haven't seen it in windows yet, but it fixed the glitch immediately on
the mac. I'm sure that having a better understanding of this will help
me loads in the future. Thanks!

M.

[Melanie Avids]

Thank you both Spartanicus and Viken for the tip about doctypes.
Haven't seen it in windows yet, but it fixed the glitch immediately on
the mac. I'm sure that having a better understanding of this will help
me loads in the future. I'm still a little confused about how to choose
the correct doctype, aside from grabbing one at random from the list
that triggers standards mode. Some must be right, others must be
wrong... I'm still missing something. But thanks a lot for putting me
on the right path!

M.

[Jim Moe]

Melanie Avids wrote:

[...] I'm still a little confused about how to choose
the correct doctype, aside from grabbing one at random from the list
that triggers standards mode. Some must be right, others must be
wrong... I'm still missing something. But thanks a lot for putting me
on the right path!

Unless there is some seriously compelling reason, use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Melanie Avids]

UPDATE: Thanks again for the tips about the doctype. As I mentioned, it
seems to make IE happy on the mac. But I discovered today that it makes
no difference in IE/Win: I still have the problem of the dropped
content in the right coulmn. I have updated the test page (link in
previous post) -- If anyone has any further ideas on why this is still
not working, I would be very grateful to hear them.

Thanks again.
M.

[Spartanicus]

"Melanie Avids" <me******@gmail.com> wrote:

UPDATE: Thanks again for the tips about the doctype. As I mentioned, it
seems to make IE happy on the mac. But I discovered today that it makes
no difference in IE/Win: I still have the problem of the dropped
content in the right coulmn. I have updated the test page (link in
previous post)

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

--
Spartanicus

[Chris Beall]

Spartanicus wrote:

"Melanie Avids" <me******@gmail.com> wrote:

UPDATE: Thanks again for the tips about the doctype. As I mentioned, it
seems to make IE happy on the mac. But I discovered today that it makes
no difference in IE/Win: I still have the problem of the dropped
content in the right coulmn. I have updated the test page (link in
previous post)

Remove "float:left" from #leftside, remove the left-margin from
#rightside, set "float:right" 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.

Chris Beall

[Melanie Avids]

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

#rightside, set "float:right" 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 Avids]

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

#rightside, set "float:right" 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*********************@o13g2000cwo.googlegroups. 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.net/faq.pl?AnySizeDesign>

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:right" 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.