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="someblock">
<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]

Stanimir Stamenkov <s7****@netscape.net> wrote:

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).

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

--
Spartanicus

[Stanimir Stamenkov]

/Spartanicus/:

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

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...oat_ieshot.PNG
http://www.geocities.com/stanio/test...at_mozshot.PNG

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

--
Stanimir

[Mark Johnson]

Stanimir Stamenkov <s7****@netscape.net> wrote:

Take a look at: http://www.geo cities.com/stanio/test/ie_and_floats.html
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.

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).

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]

Stanimir Stamenkov <s7****@netscape.net> wrote:

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

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

Ah, I'd suggest using more appropriate markup:
http://www.spartanicus.utvinternet.ie/test/stanimir.htm

--
Spartanicus

[Stanimir Stamenkov]

/Mark Johnson/:

Howabout someblock width?

.someblock {
...
width: 100%;
}

Cool :-)

That did it - thank you, Mark.

--
Stanimir

[Stanimir Stamenkov]

/Spartanicus/:

Ah, I'd suggest using more appropriate markup:
http://www.spartanicus.utvinternet.ie/test/stanimir.htm

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]

Stanimir Stamenkov <s7****@netscape.net> wrote:

Ah, I'd suggest using more appropriate markup:
http://www.spartanicus.utvinternet.ie/test/stanimir.htm
Not that much for the markup :-)

Unlike your original div mess, it's clean and appropriate for the
content.
but much thanks for the
height/max-height and the child selector tip:

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

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

--
Spartanicus

[Stanimir Stamenkov]

/Spartanicus/:

Unlike your original div mess, it's clean and appropriate for the
content.

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

<div class="someblock">
<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.

but much thanks for the
height/max-height and the child selector tip:

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

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

Hmm, weird - it works fine by my side.

--
Stanimir

[Haines Brown]

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">description of target</a>
</li>
</ul>

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

[Stanimir Stamenkov]

/Haines Brown/:

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;
...
}
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:
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">description of target</a>
</li>
</ul>

with Mozilla you end up:

2em + 40px - 2em = 40px

while with IE or Opera:

2em - 2em = 0

--
Stanimir

[Haines Brown]

Stanimir Stamenkov <s7****@netscape.net> writes:

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:

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">description of target</a>
</li>
</ul>

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]

/Haines Brown/:

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.

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]

Stanimir Stamenkov <s7****@netscape.net> writes:

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

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.html">
<span class="link-up">link text</span></a>
</li>

--
Haines Brown
br****@hartford-hwp.com
kb****@arrl.net
www.hartford-hwp.com

[kchayka]

Haines Brown wrote:

Stanimir Stamenkov <s7****@netscape.net> writes:

That's > why it is suggested one could use background image instead of
'list-style-image' to have greater control over the presentation:

Thanks for this suggestion, for it fixed most problems nearly
perfectly.

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.

[Haines Brown]

kchayka <us****@c-net.us> writes:

Haines Brown wrote:

Stanimir Stamenkov <s7****@netscape.net> writes:

That's > why it is suggested one could use background image instead of
'list-style-image' to have greater control over the presentation:

Thanks for this suggestion, for it fixed most problems nearly
perfectly.

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

Yes, that's true. But the alternative is inconsistency between Mozilla
and IE, and in my case that inconsistency can be confusing. The lack
of any marker at all is perhaps less confusing than misplaced
markers. That may not be so in other situations, though.

--
Haines Brown

[kchayka]

Haines Brown wrote:

The lack
of any marker at all is perhaps less confusing than misplaced
markers.
It depends on the list content. If there is any line wrapping at all,
lack of a marker can create real readability problems. Extra margin
between list items might help in that event, but not if the list
contains paragraphs or other whitespace within the text.
That may not be so in other situations, though.

Yup.

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