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" <melavids@XXXXXXXXXX> 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

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/listama...ut-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" <melavids@XXXXXXXXXX> wrote in message
news:1135425035.820904.141770@g47g2000cwa.googlegroups.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.
>

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.

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.

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.

"Melanie Avids" <melavids@XXXXXXXXXX> 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

> > Remove "float:left" from #leftside, remove the left-margin from 
>
> 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/ht...lumn/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.

> > Remove "float:left" from #leftside, remove the left-margin from 
>
> 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/ht...lumn/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.

In article <1135702033.760093.95430@o13g2000cwo.googlegroups.com>,
"Melanie Avids" <melavids@XXXXXXXXXX> wrote:

> Originally I used the layout found here:
> http://www.nysfirm.org/documents/ht...lumn/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