IE puts content way down the page

[Martin Eyles]

I designed my new front-page of my personal page

http://www.martineyles.me.uk/

in firefox, and all looked fine. But in IE, the main content, which
should be to the right of the menu drops down below the menu. Any ideas
how to fix this.

Thanks,
Martin

PS. sorry that the HTML doesn't validate - I am new to magpie rss (and
also php in fact), and I'm not sure how to strip out the offending xml
namespace attribute from my atom feed. I don't think this is the problem
though, as I also get it on http://www.martineyles.me.uk/meblog/ which
/does/ validate.

--
Martin Eyles
ma**********@NOSPAMbigfoot.com

[Martin Eyles]

Martin Eyles wrote:

I designed my new front-page of my personal page

http://www.martineyles.me.uk/

in firefox, and all looked fine. But in IE, the main content, which
should be to the right of the menu drops down below the menu. Any ideas
how to fix this.

Thanks,
Martin

PS. sorry that the HTML doesn't validate - I am new to magpie rss (and
also php in fact), and I'm not sure how to strip out the offending xml
namespace attribute from my atom feed. I don't think this is the problem
though, as I also get it on http://www.martineyles.me.uk/meblog/ which
/does/ validate.

Can anyone help?

Martin

[Spartanicus]

Martin Eyles <ma**********@NOSPAMbigfoot.com> wrote:

Can anyone help?

http://www.spartanicus.utvinternet.i...s_help_you.htm

--
Spartanicus

[Gus Richter]

Martin Eyles wrote:

Martin Eyles wrote:

I designed my new front-page of my personal page

http://www.martineyles.me.uk/

in firefox, and all looked fine. But in IE, the main content, which
should be to the right of the menu drops down below the menu. Any
ideas how to fix this.

Thanks,
Martin

PS. sorry that the HTML doesn't validate - I am new to magpie rss (and
also php in fact), and I'm not sure how to strip out the offending xml
namespace attribute from my atom feed. I don't think this is the
problem though, as I also get it on
http://www.martineyles.me.uk/meblog/ which /does/ validate.

Can anyone help?

Martin

To get you started in fixing the page:

#main {/*width: 510px;*/ margin: 0px; margin-left: 210px}
#main div {/*padding: 5px;*/ margin: 0px}

#blog, #photos {/*width: 498px;*/padding: 5px;}

Funny thing is that I thought that in Standards Mode IE6 would not have
this problem.

--
Gus

[Martin Eyles]

Spartanicus wrote:

Martin Eyles <ma**********@NOSPAMbigfoot.com> wrote:

Can anyone help?

http://www.spartanicus.utvinternet.i...s_help_you.htm

Ok, try looking at:-

http://www.martineyles.me.uk/test.html

this validates, and has had the content stripped and css trimmed. Still
looks correct in firefox, but not in internet explorer.

Thanks,
Martin

[Martin Eyles]

Gus Richter wrote:

Martin Eyles wrote:

Martin Eyles wrote:

I designed my new front-page of my personal page

http://www.martineyles.me.uk/

in firefox, and all looked fine. But in IE, the main content, which
should be to the right of the menu drops down below the menu. Any
ideas how to fix this.

Thanks,
Martin

PS. sorry that the HTML doesn't validate - I am new to magpie rss
(and also php in fact), and I'm not sure how to strip out the
offending xml namespace attribute from my atom feed. I don't think
this is the problem though, as I also get it on
http://www.martineyles.me.uk/meblog/ which /does/ validate.

Can anyone help?

Martin

To get you started in fixing the page:

#main {/*width: 510px;*/ margin: 0px; margin-left: 210px}
#main div {/*padding: 5px;*/ margin: 0px}

#blog, #photos {/*width: 498px;*/padding: 5px;}

Funny thing is that I thought that in Standards Mode IE6 would not have
this problem.

Yes, in the stripped down case certainly, commenting out the widths of
the content works. Will test it on the full version later.

What is happening here? Does the browser just work out that it should
fit in the div and auto-calculated the width according whichever box
model it uses?

How about the bit where I have 3 divs side by side (in the main page). I
still want to specify the sizes, but want all 3 on the same line, and
not falling bellow the side bar.

Anyways,
Thanks.

Martin

[Spartanicus]

Martin Eyles <ma**********@NOSPAMbigfoot.com> wrote:

Can anyone help?

http://www.spartanicus.utvinternet.i...s_help_you.htm

Ok, try looking at:-

http://www.martineyles.me.uk/test.html

Not even close to a minimised test case as outlined in the quoted
resource.

This is what you should have created:
http://homepage.ntlworld.ie/spartanicus/test.htm

Minimizing it like that is, again as noted in the quoted resource, not
just for the group's benefit, you yourself are much more likely to spot
the problem or be able to work around it.

--
Spartanicus

[Gus Richter]

Martin Eyles wrote:

Gus Richter wrote:

To get you started in fixing the page:

#main {/*width: 510px;*/ margin: 0px; margin-left: 210px}
#main div {/*padding: 5px;*/ margin: 0px}

#blog, #photos {/*width: 498px;*/padding: 5px;}

Funny thing is that I thought that in Standards Mode IE6 would not
have this problem.

Yes, in the stripped down case certainly, commenting out the widths of
the content works. Will test it on the full version later.

Check out the times of the posts. I posted way before your submitted
reduced test case.
What is happening here? Does the browser just work out that it should
fit in the div and auto-calculated the width according whichever box
model it uses?
You have to read up on floats and the float box. Essentially what
happens is that a subsequent element(s) to a float will attempt to flow
beside and around floated element(s) (shrink wrap) as long as its width
fits into the remaining width (full width minus the width of the floated
element(s)). If the subsequent element does not fit, it will drop down
to where it will fit. IE calculates the provided fixed width wrongly. By
not defining the width of the subsequent element, the subsequent element
will use (fill) the remaining line width.
How about the bit where I have 3 divs side by side (in the main page). I
still want to specify the sizes, but want all 3 on the same line, and
not falling bellow the side bar.
OK as long as the accumulated width will fit, otherwise the overset
portion will look to position itself down where it will fit.
Anyways,
Thanks.

Anyways,
You're welcome.

--
Gus

[Martin Eyles]

Spartanicus wrote:

Martin Eyles <ma**********@NOSPAMbigfoot.com> wrote:

Can anyone help?

http://www.spartanicus.utvinternet.i...s_help_you.htm

Ok, try looking at:-

http://www.martineyles.me.uk/test.html

Not even close to a minimised test case as outlined in the quoted
resource.

This is what you should have created:
http://homepage.ntlworld.ie/spartanicus/test.htm

This is not a minimised version of my page - it behaves completely
differently.

My page is like

_______________________
| |
|______________________|
| | |
|_____|________________|

and your example is

___________________________
|______|_______|___________|

An explanation of how this particular minimisation can help me would
however be appreciated, Although I think that Gus's suggestions might be
the answer to my problem.

ta, m

[Martin Eyles]

Gus Richter wrote:

Martin Eyles wrote:

Gus Richter wrote:

To get you started in fixing the page:

#main {/*width: 510px;*/ margin: 0px; margin-left: 210px}
#main div {/*padding: 5px;*/ margin: 0px}

#blog, #photos {/*width: 498px;*/padding: 5px;}

Funny thing is that I thought that in Standards Mode IE6 would not
have this problem.

Does IE6 actually sometimes use the correct box model? Didn't realise that.
Yes, in the stripped down case certainly, commenting out the widths of
the content works. Will test it on the full version later.

Check out the times of the posts. I posted way before your submitted
reduced test case.

Sorry, out of practice reading threaded posts, and had posted to
Spartanicus's reply first, so lost track

What is happening here? Does the browser just work out that it should
fit in the div and auto-calculated the width according whichever box
model it uses?

You have to read up on floats and the float box. Essentially what
happens is that a subsequent element(s) to a float will attempt to flow
beside and around floated element(s) (shrink wrap) as long as its width
fits into the remaining width (full width minus the width of the floated
element(s)). If the subsequent element does not fit, it will drop down
to where it will fit. IE calculates the provided fixed width wrongly. By
not defining the width of the subsequent element, the subsequent element
will use (fill) the remaining line width.

Grand!

How about the bit where I have 3 divs side by side (in the main page).
I still want to specify the sizes, but want all 3 on the same line,
and not falling bellow the side bar.

OK as long as the accumulated width will fit, otherwise the overset
portion will look to position itself down where it will fit.

Ah, this sounds like I would have to make the boxes smaller to fit in
internet explorer. The problem with this is it will leave a 36px (
adding together the borders and padding, which I would have to
compensate for 3*(2*(5+1))px ) unsightly gap in Firefox. Would this be
an appropriate time to use a CSS hack to make the boxes smaller in IE6
than Firefox? If so, what would you suggest?

Thanks.

You're welcome.

Thanks again, (and thanks for helping rather than just telling me off
for not using minimised test cases),

Martin

[Spartanicus]

Martin Eyles <ma**********@NOSPAMbigfoot.com> wrote:

http://www.martineyles.me.uk/test.html
Not even close to a minimised test case as outlined in the quoted
resource.

This is what you should have created:
http://homepage.ntlworld.ie/spartanicus/test.htm

This is not a minimised version of my page

Irrelevant, it's about demonstrating the issue with as little
distraction as possible.
- it behaves completely
differently.
It behaves exactly like your design with regard to the issue you are
struggling with.
An explanation of how this particular minimisation can help me would
however be appreciated
It's an IE bug.
, Although I think that Gus's suggestions might be
the answer to my problem.

And since I saw his reply before I posted I didn't bother repeating it.

--
Spartanicus