Email conversation
| From | Phil Turner |
|---|
| To | Me |
|---|
| Subject | css block positioning float bugs? |
|---|
| Date | 9 October 2006 13:52 |
|---|
Hello and thank you in advance
This is my first css site - This site works fine in Opera, Netscape,
Firefox, Camino and Safari
and moves boxes around in Internet Explorer - can you help me solve the
problem I think its the floating think which I am still trying to
understand.
I am close to going back to doing it the old way.... help appreciated
[URL]
Kind Regards
Phil Turner
| From | Me |
|---|
| To | Phil Turner |
|---|
| Subject | Re: css block positioning float bugs? |
|---|
| Date | 10 October 2006 23:24 |
|---|
Phil,
> This is my first css site - This site works fine in Opera, Netscape,
> Firefox, Camino and Safari
Looks good.
> and moves boxes around in Internet Explorer - can you help me solve the
> problem I think its the floating think which I am still trying to
> understand.
Well, IE sucks. That's the simple thing. IE 7 sucks a little less. It
actually looks almost right, with the exception of the "Jobs at ..." part
which is too far to the right. This is actually the cause of your problem.
IE has a broken float model, so it is allowing siblings to float beside each
other even though there is no space, as it does not recognise the right edge
of the parent as being a valid edge for a float to wrap against. IE 6 has a
broken overflow model, so it stretches the parent when this happens.
However, your design also does not hold up in standards compliant browsers.
If the main content is not long enough, the floats on the right wrap under
the main content, which is not a good effect.
There is an easy solution to all these problems.
* Do not float #midcopytop, #midcopycentre, or #midcopybase
* Instead, wrap another div around all of them together, and float _that_ to
the left.
Your main header image also has a gap below it in IE 6. This is because
images are aligned to the baseline of text. The gap is the size of the tails
of letters q, y, p, g, and j. In standards compliant browsers this does not
matter because you set a height on #header, and the overflow rules cause the
gap to tuck invisibly behind the navigation. IE 6 has that broken overflow
model, so it shows a gap. Use this rule to make the image be treated as a
block element instead of an inline element (you should have used this in the
first place ;) ), and the problem will go away:
#header img { display: block; }
Lastly, after fixing the other bugs, IE 6 gives you a big blank gap down the
right side of the page, and the footer is too far to the right. This is IE's
double margin bug:
http://www.positioniseverything.net/explorer/doubled-margin.html
It is caused by you applying a margin to the #footertextbox, and at the same
time floating it to the left. The broken overflow model (again) then drags
the parent wider. The fix is to remove the left margin on #footertextbox,
adding a left padding on #footer instead, and reducing the width of #footer
by the size of that padding.
I notice a few other things in your source:
1. You claim XHTML, but you have commented out your CSS. If you were
actually serving your page as XHTML (you are serving it as HTML - text/html
instead of application/xhtml+xml), browsers would be within their rights to
ignore it completely. If you ever change to using the XHTML content-type,
your site will break. The comments are not needed any more. Just remove
them.
2. This source code is broken:
<html>
</head>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
3. Stylesheets must be within the head, so this one is misplaced:
<!--[if lte IE 7]>
<link media="screen" rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
It also does not exist.
4. There is a spurious </p> near the end of the page:
</div>
</p>
</div>
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Phil Turner |
|---|
| To | Me |
|---|
| Subject | Re: css block positioning float bugs? |
|---|
| Date | 16 October 2006 10:08 |
|---|
Many thanks its worked, as a designer I just want to be able to design
without all these glitches is there a website that has a list of internet
explorer 'problems' on and fixes - or would it be too big!!
I'm also having problems with this sites navigation it works fine in all
other browsers - any help appreciated, I've just finished designing the
book which was great to do however now I've got to do the website I'm
resisting the temptation to build it the old way - its for a worthy
cause.
[URL]
| From | Phil Turner |
|---|
| To | Me |
|---|
| Subject | Re: css block positioning float bugs? |
|---|
| Date | 17 October 2006 12:35 |
|---|
Tarquin,
Thanks for all the info, I need help again this sites about a book I've just
spent half my life designing and its printed and delivered this week so
hence the urgency, I'm trying to get the sign up panel to float under the
navigation, I put the div inside the navigation div thinking it would go to
the bottom ..... it hasn't.
Also on a long term basis we are looking for someone to work with us on
this, as we need a blog, sign up panel etc etc as you seem to know what you
are talking about is it something you would be interested in ( obviously
paid ) we are based in Stockport and Chester and Wales when not working!!
:-) , please let me know what you think and what sort of cost, I suppose
once the site is built it will pretty much run its self and need a couple of
days a month to maintain. Please let me know what you think. As you can see
I'm new to css but trying to build a site that will be accessible to all as
well as to help the cause. Once again many thanks
| From | Me |
|---|
| To | Phil Turner |
|---|
| Subject | Re: css block positioning float bugs? |
|---|
| Date | 21 October 2006 11:40 |
|---|
> I'm trying to get the sign up panel to float under the navigation, I put
> the div inside the navigation div thinking it would go to the bottom .....
> it hasn't.
I don't see what the problem is. It looks ok on your page to me. Perhaps you
could make a quick mockup in an image editor, showing how you would want it
to look.
> we are looking for someone to work with us
> is it something you would be interested in
As I say on my contact page:
"Suffice to say that I am employed, and I do not need any other job offers
right now."
I really would not have time to do any other work.