473,289 Members | 1,743 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

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

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.

Dec 24 '05 #1
14 1708
"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
Dec 24 '05 #2
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.

Dec 24 '05 #3
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.

Dec 25 '05 #4
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.

Dec 25 '05 #5
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)
Dec 25 '05 #6
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.

Dec 26 '05 #7
"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
Dec 26 '05 #8
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

Dec 27 '05 #9
> > 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.

Dec 27 '05 #10
> > 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.

Dec 27 '05 #11
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
Dec 27 '05 #12
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.
Dec 27 '05 #13
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

Dec 27 '05 #14
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.

Dec 28 '05 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Brian Hlubocky | last post by:
I'm have a fairly simple (in terms of COM) python program that pulls info from an Access database and creates Outlook contacts from that information. It uses wxPython for gui and works without...
10
by: amit.purohit | last post by:
hi, I have a very strange problem on my login Page. the Page was working fine a few days back, but now does not generate post back events for controls. this login page uses form based...
0
by: gh0st54 | last post by:
An update on my original message seens like virtual directory doesn't like page inheritance I have taken my form in my Secure folder and made a duplicate in the main site, it works fine from the...
0
by: mike.lerch | last post by:
I hope I can describe this in a way that someone can recognize it and help out. I have a page on an intranet which for certain users lists many many links and for other users lists a only a few...
9
by: tshad | last post by:
This is from my previous post, but a different issue. I have the following Javascript routine that opens a popup page, but doesn't seem to work if called from an asp.net button. It seems to work...
1
by: Ted | last post by:
In MS SQL I used the following to create a stored procedure. USE AdventureWorks; GO IF OBJECT_ID ( 'HumanResources.usp_My_Search', 'P' ) IS NOT NULL DROP PROCEDURE HumanResources.usp_My_Search;...
2
by: julie.siebel | last post by:
Google apparently ate my original post to this (grr) so this'll be a bit more vague than the initial post, but...*sigh*. Javascript is not my forte, and I apologize for the acky-ness of the...
4
by: asedt | last post by:
What do you think of my process model for small projects - "one person projects". Do you have any good ideas or improvements? Did anyone find it useful? This is a simple model that I used when I...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.