Undesirable space between divs in IE6

[maroger]

I'm sure this is a common issue, but I haven't come across anything
that works for me thusfar. I am trying to fix my header, which works
fine in firefox but has extra space in IE. Here are example html and
css files that illustrate my problem:

http://torch.cs.dal.ca/~mroger/css/ietest.html
http://torch.cs.dal.ca/~mroger/css/styles.css

I would like to get both browsers to display the page as firefox does.
That is, with no space between the two divs. What is causing that
extra space, and how can I remove it?

Cheers!

[Els]

ma*****@sympatico.ca wrote:

I'm sure this is a common issue, but I haven't come across anything
that works for me thusfar. I am trying to fix my header, which works
fine in firefox but has extra space in IE. Here are example html and
css files that illustrate my problem:

http://torch.cs.dal.ca/~mroger/css/ietest.html
http://torch.cs.dal.ca/~mroger/css/styles.css

I would like to get both browsers to display the page as firefox does.
That is, with no space between the two divs. What is causing that
extra space, and how can I remove it?

http://www.positioniseverything.net/...reepxtest.html
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[maroger]

Els wrote:

ma*****@sympatico.ca wrote:

I'm sure this is a common issue, but I haven't come across anything
that works for me thusfar. I am trying to fix my header, which works
fine in firefox but has extra space in IE. Here are example html and
css files that illustrate my problem:

http://torch.cs.dal.ca/~mroger/css/ietest.html
http://torch.cs.dal.ca/~mroger/css/styles.css

I would like to get both browsers to display the page as firefox does.
That is, with no space between the two divs. What is causing that
extra space, and how can I remove it?

http://www.positioniseverything.net/...reepxtest.html
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Thanks for the info. :)

In particular, I'm looking to have two divs next to each other with no
text, only background images. In that case, I don't have the text to
expand vertically the right div. And as usual when I apply a height I
get the space between them again.

For example: http://torch.cs.dal.ca/~mroger/css/ietest2.html

The first two show the right div with text and how it expands when the
amount of text changes. That works ok and I don't get the space
between the left and right div. What I want is the bottom example
where there is no text. In this case I've set the height to match the
left div, which leads to the problem.

Is there any way to expand the right div to match the left div in
height without using text, but not have the space between them in IE?
What am I missing?

[Els]

ma*****@sympatico.ca wrote:

Els wrote:

>>I would like to get both browsers to display the page as firefox does.
That is, with no space between the two divs. What is causing that
extra space, and how can I remove it?

http://www.positioniseverything.net/...reepxtest.html

[snip]

For example: http://torch.cs.dal.ca/~mroger/css/ietest2.html

The first two show the right div with text and how it expands when the
amount of text changes. That works ok and I don't get the space
between the left and right div. What I want is the bottom example
where there is no text. In this case I've set the height to match the
left div, which leads to the problem.

Is there any way to expand the right div to match the left div in
height without using text, but not have the space between them in IE?
What am I missing?

I hate to say this, but could you please first validate your code,
(HTML and CSS) and then, if the problem persists, come back again?

Chances are the errors (double ids, missing elements, HTML code with
XHTML doctype) as well as superfluous CSS rules, are causing the
discrepancy somewhere.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Rush - Jacob's Ladder

[maroger]

Els wrote:

ma*****@sympatico.ca wrote:

Els wrote:

>I would like to get both browsers to display the page as firefox does.
That is, with no space between the two divs. What is causing that
extra space, and how can I remove it?

http://www.positioniseverything.net/...reepxtest.html

[snip]

For example: http://torch.cs.dal.ca/~mroger/css/ietest2.html

The first two show the right div with text and how it expands when the
amount of text changes. That works ok and I don't get the space
between the left and right div. What I want is the bottom example
where there is no text. In this case I've set the height to match the
left div, which leads to the problem.

Is there any way to expand the right div to match the left div in
height without using text, but not have the space between them in IE?
What am I missing?

I hate to say this, but could you please first validate your code,
(HTML and CSS) and then, if the problem persists, come back again?

Chances are the errors (double ids, missing elements, HTML code with
XHTML doctype) as well as superfluous CSS rules, are causing the
discrepancy somewhere.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Rush - Jacob's Ladder

Thanks Els.

I did as you suggested and validated my code at
http://validator.w3.org/. The HTML is Tentatively Valid HTML 4.01
Strict and the CSS validator found no errors or warnings. However, I
still have the same issue.

http://torch.cs.dal.ca/~mroger/css/ietest4.html

Do you have an idea on how I might avoid this? Thanks again for all
your help!

[Els]

ma*****@sympatico.ca wrote:

Els wrote:

>ma*****@sympatico.ca wrote:

>>Els wrote:

>>>>I would like to get both browsers to display the page as firefox does.
That is, with no space between the two divs. What is causing that
extra space, and how can I remove it?

http://www.positioniseverything.net/...reepxtest.html

[snip]

>>For example: http://torch.cs.dal.ca/~mroger/css/ietest2.html

The first two show the right div with text and how it expands when the
amount of text changes. That works ok and I don't get the space
between the left and right div. What I want is the bottom example
where there is no text. In this case I've set the height to match the
left div, which leads to the problem.

Is there any way to expand the right div to match the left div in
height without using text, but not have the space between them in IE?
What am I missing?

I hate to say this, but could you please first validate your code,
(HTML and CSS) and then, if the problem persists, come back again?

Chances are the errors (double ids, missing elements, HTML code with
XHTML doctype) as well as superfluous CSS rules, are causing the
discrepancy somewhere.

Thanks Els.

I did as you suggested and validated my code at
http://validator.w3.org/. The HTML is Tentatively Valid HTML 4.01
Strict and the CSS validator found no errors or warnings. However, I
still have the same issue.

http://torch.cs.dal.ca/~mroger/css/ietest4.html

Do you have an idea on how I might avoid this? Thanks again for all
your help!

Okay, well..
Normally, I snip messages to leave only what is important for the
question. This time however, I advise you to scroll up, and see the
link I posted the first time I replied. You see, that one is still the
answer to your problem. When you said "Thanks for the info :-)", I
figured you had read it, understood it, applied the fix, and then
still run into problems. I now see that wasn't the case. So.. go read
it, and apply the fix :-)
(hint: the problem you are experiencing is exactly the same bug as on
that page, just without text)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[maroger]

Els wrote:

Okay, well..
Normally, I snip messages to leave only what is important for the
question. This time however, I advise you to scroll up, and see the
link I posted the first time I replied. You see, that one is still the
answer to your problem. When you said "Thanks for the info :-)", I
figured you had read it, understood it, applied the fix, and then
still run into problems. I now see that wasn't the case. So.. go read
it, and apply the fix :-)
(hint: the problem you are experiencing is exactly the same bug as on
that page, just without text)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

I did read it, but apparently I do not understand like I thought. My
understanding is that the 3px of extra space appears because it is
touching or is next to the float on the left. This padding is not
applied for portions that are not horizontally across from the float.
So when text or whatever drops below the float's level, it gets
displayed correctly.

The solution, as I understand it, is supplying the right div with a
height and using content to expand it. The key is to take advantage of
another bug where IE will expand the box to keep content inside it,
even if the height is specified as otherwise. I need to specify a very
small height, like 1%, and allow IE to expand the box to contain the
content. This results in things being displayed correct.

Do I have that right?

What I am missing is how to expand the right box to the desired size
without using text or an image to do so. How do I expand the box if it
doesn't contain any content apart from the background? I'd like to set
the background to an image that can be repeated along the x axis. But
with no content to cause the box to expand, it actually gets set to 1%.

One solution that was suggested to me was to have a transparent image
in the foreground that is of the desired height. This works, but I'd
like to understand that pure CSS solution as well.

Sorry for my boneheadedness...

[Els]

ma*****@sympatico.ca wrote:

Els wrote:

>Okay, well..
Normally, I snip messages to leave only what is important for the
question. This time however, I advise you to scroll up, and see the
link I posted the first time I replied. You see, that one is still the
answer to your problem. When you said "Thanks for the info :-)", I
figured you had read it, understood it, applied the fix, and then
still run into problems. I now see that wasn't the case. So.. go read
it, and apply the fix :-)
(hint: the problem you are experiencing is exactly the same bug as on
that page, just without text)

I did read it, but apparently I do not understand like I thought. My
understanding is that the 3px of extra space appears because it is
touching or is next to the float on the left.

Yup.

This padding is not
applied for portions that are not horizontally across from the float.
So when text or whatever drops below the float's level, it gets
displayed correctly.

The solution, as I understand it, is supplying the right div with a
height and using content to expand it.

Which makes the entire div have the 3px extra padding, instead of just
the part that's next to the float.

The key is to take advantage of
another bug where IE will expand the box to keep content inside it,
even if the height is specified as otherwise. I need to specify a very
small height, like 1%, and allow IE to expand the box to contain the
content. This results in things being displayed correct.

Do I have that right?

If you like to have the 3px extra padding, then yes.

What I am missing is how to expand the right box to the desired size
without using text or an image to do so. How do I expand the box if it
doesn't contain any content apart from the background? I'd like to set
the background to an image that can be repeated along the x axis. But
with no content to cause the box to expand, it actually gets set to 1%.

The 1% is only for people who don't have a desired height for the div.
IE will expand it to hold content, so 1% is a safe small number. If
you want the div to be 150px high, just give it height:150px. No
problem.

But ... you'll still have the 3px gap.

My apology btw about the link I gave. It used to have a slightly
different hack for this problem, which would be perfect for the
situation on your page. I don't know when they changed it, nor why. No
time now to investigate either, it could be that it gives undesired
results in IE7, although I haven't noticed any of my pages having a
problem in IE7, and I did use this hack.

Anyway, the old hack they used to have on that page, goes as follows
(adjusted for your page):

/* hide from IEMac \*/
* html #jog-box3{
position:relative;
left:-3px;
margin-right:-3px;
}
/* end hide IEMac */

The * before the html makes that only IE sees it, while the /* \*/ and
/* */ wrap it up to not be seen by IEMac, since that one doesn't have
this bug, and the box would overlap the float by 3px.

HTH

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Yes - Long Distance Runaround [live][Full Circle Tour]

[maroger]

Great. Thanks again for all your help. :)