Stylesheets - Small simple page validates, works fine in everything except IE

Author

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

Melanie Avids

2005-12-24, 6:58 pm

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

2005-12-24, 6:58 pm

"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

Viken Karaguesian

2005-12-24, 6:58 pm

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.
>

Melanie Avids

2005-12-24, 10:18 pm

Melanie Avids

2005-12-24, 10:18 pm

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.

Melanie Avids

2005-12-26, 6:50 pm

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

2005-12-26, 6:51 pm

"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

Melanie Avids

2005-12-27, 7:01 pm

> > 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.

Melanie Avids

2005-12-27, 7:01 pm

Eric Lindsay

2005-12-27, 7:01 pm

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

Melanie Avids

2005-12-28, 6:38 pm

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.