Problem with floats and IE

[Stanimir Stamenkov]

Take a look at:

http://www.geocities.com/stanio/test/ie_and_floats.html

Basically I got such content blocks:

<div class="somebloc k">
<img class="preview" ...>
<p>...</p>
<div class="clear"></div>
</div>

Where the "preview" image is floated to the right and the "clear"
element has 'clear: both' style to ensure the parent container will
extend to the floated image height at minimum.

The problem I encounter with Internet Explorer is when the normal
content is shorter than the floated image: notice the container
block left edge extends to the page boundaries, although there
should be a padding (from the parent UL element).

I've tried various tweaks but nothing have helped. Has anybody
encountered such issue with IE and have some workaround in mind?

--
Stanimir

[Spartanicus]

Re: Problem with floats and IE

Stanimir Stamenkov <s7an10@netscap e.net> wrote:
[color=blue]
>http://www.geocities.com/stanio/test/ie_and_floats.html
>
>Where the "preview" image is floated to the right and the "clear"
>element has 'clear: both' style to ensure the parent container will
>extend to the floated image height at minimum.
>
>The problem I encounter with Internet Explorer is when the normal
>content is shorter than the floated image: notice the container
>block left edge extends to the page boundaries, although there
>should be a padding (from the parent UL element).[/color]

This is not an issue with IE, learn how floats and height calculation
work:

http://www.w3.org/TR/CSS2/visuren.html#floats

http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

--
Spartanicus

[Stanimir Stamenkov]

Re: Problem with floats and IE

/Spartanicus/:
[color=blue]
> This is not an issue with IE, learn how floats and height calculation
> work:
>
> http://www.w3.org/TR/CSS2/visuren.html#floats
> http://www.w3.org/TR/CSS2/visudet.ht...ts_and_margins[/color]

Seems I didn't understand you - my problem is not about heights but
about horizontally "shifted" (or what?) blocks. Here are screenshots:

http://www.geocities.com/stanio/test/somefloat_ieshot.PNG

http://www.geocities.com/stanio/test/somefloat_mozshot.PNG

The second being got with Mozilla is what it should be.

--
Stanimir

[Mark Johnson]

Re: Problem with floats and IE

Stanimir Stamenkov <s7an10@netscap e.net> wrote:
[color=blue]
>Take a look at:[/color]
[color=blue]
>http://www.geo cities.com/stanio/test/ie_and_floats.h tml[/color]

Ever thought of getting off geocities? It was a neat idea when it WAS
geocities, and virtual hosting was relatively new and expensive.
Nowadays you can pick up hundreds of megabytes for 10/mo or less,
server db, ftp access of course, and whatever else.

[color=blue]
>The problem I encounter with Internet Explorer is when the normal
>content is shorter than the floated image: notice the container
>block left edge extends to the page boundaries, although there
>should be a padding (from the parent UL element).[/color]

Howabout someblock width?

body { background: white; color: black }
.someblock {
display: block;
background: #d7d7d7;
margin-bottom: 0.5em;
padding: 1px;
width: 100%;
}
img.preview {
width: 5em;
height: 7em;
float: right;
margin-left: 0.5em;
border: 1px dashed;
}
.clear { clear: both }
li {
margin-left: 2.5em;
padding-left: 0;
}

[Spartanicus]

Re: Problem with floats and IE

Stanimir Stamenkov <s7an10@netscap e.net> wrote:
[color=blue][color=green]
>> This is not an issue with IE, learn how floats and height calculation
>> work:
>>
>> http://www.w3.org/TR/CSS2/visuren.html#floats
>> http://www.w3.org/TR/CSS2/visudet.ht...ts_and_margins[/color]
>
>Seems I didn't understand you - my problem is not about heights but
>about horizontally "shifted" (or what?) blocks.[/color]

Ah, I'd suggest using more appropriate markup:

http://www.spartanicus.utvinternet.ie/test/stanimir.htm

--
Spartanicus

[Stanimir Stamenkov]

Re: Problem with floats and IE

/Mark Johnson/:
[color=blue]
> Howabout someblock width?
>
> .someblock {
> ...
> width: 100%;
> }[/color]

Cool :-)

That did it - thank you, Mark.

--
Stanimir

[Stanimir Stamenkov]

Re: Problem with floats and IE

/Spartanicus/:
[color=blue]
> Ah, I'd suggest using more appropriate markup:
> http://www.spartanicus.utvinternet.ie/test/stanimir.htm[/color]

Not that much for the markup :-) but much thanks for the
height/max-height and the child selector tip:

li {
...
height: 9em;
}
ul > li {
height: auto;
min-height: 9em;
}

Sometimes I just forget what "miracles" IE is capable of, huh.

--
Stanimir

[Spartanicus]

Re: Problem with floats and IE

Stanimir Stamenkov <s7an10@netscap e.net> wrote:
[color=blue][color=green]
>> Ah, I'd suggest using more appropriate markup:
>> http://www.spartanicus.utvinternet.ie/test/stanimir.htm[/color]
>
>Not that much for the markup :-)[/color]

Unlike your original div mess, it's clean and appropriate for the
content.
[color=blue]
>but much thanks for the
>height/max-height and the child selector tip:
>
>li {
> ...
> height: 9em;
>}
>ul > li {
> height: auto;
> min-height: 9em;
>}[/color]

Wrong, use the original code (without spaces), or it will fail.

--
Spartanicus

[Stanimir Stamenkov]

Re: Problem with floats and IE

/Spartanicus/:
[color=blue]
> Unlike your original div mess, it's clean and appropriate for the
> content.[/color]

Actually the only superfluous DIV was that of the "clear" element.
Now it is:

<div class="somebloc k">
<img class="preview" ... >
<p>...</p>
</div>

This is just for the test case, but actually in the place of the
paragraph I have couple of list elements. I need the container DIV
to group and separate that data from a following it different class
list representing child items with the same structure.

<ul class="tree">
<li>
<strong class="item-label">Item 1</strong>
<div class="item-content">
<img class="preview" ... >
<ul class="spec">
...
</ul>
<ul class="spec">
...
</ul>
</div>
<ul class="tree">
...
</ul>
</li>
....
</ul>

I don't need Hx elements for the item labels since I don't know how
many levels I may need - I already got H1, H2 and H3 outside this
structure.

BTW, using the 'min-height' solution I could even place the
"preview" image as a background of the "item-content" DIV.
[color=blue][color=green]
>> but much thanks for the
>> height/max-height and the child selector tip:
>>
>> li {
>> ...
>> height: 9em;
>> }
>> ul > li {
>> height: auto;
>> min-height: 9em;
>> }[/color]
>
> Wrong, use the original code (without spaces), or it will fail.[/color]

Hmm, weird - it works fine by my side.

--
Stanimir

[Haines Brown]

Re: Problem with floats and IE

Somehow Spartcanicus' reply to Stanmir went missing, and I'm not sure
if a problem that appears to be the same as the original query was
resolved in the exchange.

My problem is that a list that has a left margin in galeon, mozilla,
etc, looses it in IE. Furthermore, the image left margin also
disappears:

ul.parents {
margin-left: 2em;
...
}
li.up {
list-style-image: url(../bin/arrow-b.png);
height: 1.4em;
margin-left: -2em;
}


<ul class="parents" >
<li class="up"><a href="target">d escription of target</a>
</li>
</ul>

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net

https://www.hartford-hwp.com

[Stanimir Stamenkov]

Re: Problem with floats and IE

/Haines Brown/:
[color=blue]
> My problem is that a list that has a left margin in galeon, mozilla,
> etc, looses it in IE. Furthermore, the image left margin also
> disappears:
>
> ul.parents {
> margin-left: 2em;
> ...
> }[/color]

Mozilla's default stylesheet puts left padding of 40px on the UL
elements, instead of left margin, so while the above overrides the
IE's default stylesheet it just adds margin in Mozilla, so:
[color=blue]
> li.up {
> list-style-image: url(../bin/arrow-b.png);
> height: 1.4em;
> margin-left: -2em;
> }
>
>
> <ul class="parents" >
> <li class="up"><a href="target">d escription of target</a>
> </li>
> </ul>[/color]

with Mozilla you end up:

2em + 40px - 2em = 40px

while with IE or Opera:

2em - 2em = 0

--
Stanimir

[Haines Brown]

Re: Problem with floats and IE

Stanimir Stamenkov <s7an10@netscap e.net> writes:
[color=blue]
> Mozilla's default stylesheet puts left padding of 40px on the UL
> elements, instead of left margin, so while the above overrides the
> IE's default stylesheet it just adds margin in Mozilla, so:
>[color=green]
> > li.up {
> > list-style-image: url(../bin/arrow-b.png);
> > height: 1.4em;
> > margin-left: -2em;
> > }
> > <ul class="parents" >
> > <li class="up"><a href="target">d escription of target</a>
> > </li>
> > </ul>[/color]
>[/color]

Stanimir,

Thanks for the information that Mozilla has a default 40px left
padding. I believe I can override this inherited value to get the same
positioning of the list in Mozilla and IE with:

ul.parents {
padding-left: 0em;
margin-left: 40px;
}

I believe this negates Mozilla's default padding, and then it puts
40px back in for both Mozilla and IE to use. While that gets ride of a
complicating factor, it does not resolve my basic problem.

As best I can make out, when list-style-image substitutes a symbol
image for the default UL bullet, Mozilla and EI place the image
differently. In Mozilla, the left edge of the graphic is located in
the position previously taken by the UL default bullet, while IE
places the right edge of the graphic in the position previously taken
by the UL bullet. Therefore, Mozilla shifts the LI to the right a
distance equal to the width of the symbol image in relation to its
position with IE. At least this is how I see it.

Problem is, I don't know how to get both browers to locate the symbol
image the same way.

--
Haines Brown

[Stanimir Stamenkov]

Re: Problem with floats and IE

/Haines Brown/:
[color=blue]
> As best I can make out, when list-style-image substitutes a symbol
> image for the default UL bullet, Mozilla and EI place the image
> differently. In Mozilla, the left edge of the graphic is located in
> the position previously taken by the UL default bullet, while IE
> places the right edge of the graphic in the position previously taken
> by the UL bullet. Therefore, Mozilla shifts the LI to the right a
> distance equal to the width of the symbol image in relation to its
> position with IE. At least this is how I see it.
>
> Problem is, I don't know how to get both browers to locate the symbol
> image the same way.[/color]

I'm not sure if I've understood your exact problem, but:

It is a known fact currently browsers don't have good standard
support for generated content and control over the list item
markers. That's why it is suggested one could use background image
instead of 'list-style-image' to have greater control over the
presentation:

<ul>
<li>A list item</li>
<li>Another item</li>
<li>One more item</li>
</ul>

where you style the LI element something like:

li {
list-style: none;
background-image: url("bullet.png ") no-repeat left top;
padding-left: 20px /* suppose your bullet image is 15px wide
* and you want 5px distance from the text */
}

There are on-line examples available but I don't remember pointers
right now.

--
Stanimir

[Haines Brown]

Re: Problem with floats and IE

Stanimir Stamenkov <s7an10@netscap e.net> writes:
[color=blue]
> It is a known fact currently browsers don't have good standard support
> for generated content and control over the list item markers.[/color]

Yup, that's the problem.
[color=blue]
> That's > why it is suggested one could use background image instead of
> 'list-style-image' to have greater control over the presentation:[/color]

Thanks for this suggestion, for it fixed most problems nearly
perfectly. Here, for whatever it's worth, is my markup:

ul.parents {
list-style-type: none; /* get rid of bullet */
padding-left: 0px; /* equalize browsers */
margin: 1em 0px -0.3em 4px;
}
li.up {
background-image: url(../bin/arrow-b.png);
background-repeat: no-repeat;
padding-left: 30px; /* set indent of the list line*/
height: 1.4em;
}
.link-up {
font-weight: bold;
position: relative;
top: 0.2em; /* adjust rel.pos.image and text */
}

<ul class="parents" >
<li class="up"><a href="index.htm l">
<span class="link-up">link text</span></a>
</li>

--
Haines Brown
brownh@hartford-hwp.com
kb1grm@arrl.net

https://www.hartford-hwp.com

[kchayka]

Re: Problem with floats and IE

Haines Brown wrote:
[color=blue]
> Stanimir Stamenkov <s7an10@netscap e.net> writes:
>[color=green]
>> That's > why it is suggested one could use background image instead of
>> 'list-style-image' to have greater control over the presentation:[/color]
>
> Thanks for this suggestion, for it fixed most problems nearly
> perfectly.[/color]

So what happens for those who browse with image loading off? They get no
marker at all?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.