Floats, lists, IE to behave?

D

dorayme

Would appreciate any recommendations to make the list at
http://tinyurl.com/zcpgv behave itself in WinIE closest to this
sort of markup and css? I know there are other ways to go, but I
am curious as to how to make this more rock solid. I have removed
my every stumbling hacks and left it bare to see what you might
suggest.

It behaves nicely in all modern Mac browsers I have at hand. ie.
it has the grace wanted in the margin to left and reasonable
grace to right of pic and the list text is lined up on the left
neatly with no kinks, no wrapping, no drops or gaps or surprising
behaviour. But not in IE as can be seen from various window
resizing, text enlarging... In particular, a slight kink in the
list as it clears the float. I have now forgotten where I read up
about this jag and what was recommended.
 
B

BootNic

dorayme said:
Would appreciate any recommendations to make the list at
http://tinyurl.com/zcpgv behave itself in WinIE closest to this
sort of markup and css? I know there are other ways to go, but I
am curious as to how to make this more rock solid. I have removed
my every stumbling hacks and left it bare to see what you might
suggest.

It behaves nicely in all modern Mac browsers I have at hand. ie.
it has the grace wanted in the margin to left and reasonable
grace to right of pic and the list text is lined up on the left
neatly with no kinks, no wrapping, no drops or gaps or surprising
behaviour. But not in IE as can be seen from various window
resizing, text enlarging... In particular, a slight kink in the
list as it clears the float. I have now forgotten where I read up
about this jag and what was recommended.

http://www.positioniseverything.net/explorer/threepxtest.html

ul {
margin: 0 0 0 330px;
padding: 0;
text-align: left;
list-style-type: none;
border: 1px red solid;
background: transparent;
height:expression('1px'); /* will not validate */
}

OR

<!--[if IE]>
<style type="text/css">
ul {
height:1px;
}
</style>
<![endif]-->
 
D

dorayme

Would appreciate any recommendations to make the list at
http://tinyurl.com/zcpgv behave itself in WinIE closest to this
sort of markup and css?
... In particular, a slight kink in the
list as it clears the float. I have now forgotten where I read up
about this jag and what was recommended.

http://www.positioniseverything.net/explorer/threepxtest.html
[/QUOTE]

Thank you Bootnic, I greatly appreciate this, saved me possibly a
lot of time trying to find this again. It is exactly where I read
it and it is in my bookmarks!

I have tested both the IE conditional and the "height:expression"
one in IE6 (but not 5) and both remove that slight kink and have
no side effects in at least Mac Safari, IE and Opera. As it
happens, my built in validator in my text editor passes the one
that you say will not validate, but other checks reveal
different. iCab face does not smile (it smiles only when html and
css is completely kosher) and just explains that "expression' is
an "unknown css property". I could live with this but probably
will go for the conditional. Hope this fix is not mucking up any
other browser (like IE7 ... my offline Winbox has not got this
yet).

ul {
height:expression('1px'); /* will not validate */
}

OR

<!--[if IE]>
<style type="text/css">
ul {
height:1px;
}
</style>
<![endif]-->
 
B

BootNic

dorayme said:
[snip}

I have tested both the IE conditional and the "height:expression"
one in IE6 (but not 5) and both remove that slight kink and have
no side effects in at least Mac Safari, IE and Opera. As it
happens, my built in validator in my text editor passes the one
that you say will not validate, but other checks reveal
different. iCab face does not smile (it smiles only when html and
css is completely kosher) and just explains that "expression' is
an "unknown css property". I could live with this but probably
will go for the conditional. Hope this fix is not mucking up any
other browser (like IE7 ... my offline Winbox has not got this
yet).


I have read somewhere that the 3 Pixel Text Jog is suppose to get fixed in IE7, no
worries if you go with the conditional statement.

http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx

Just limit it to less then or equal to IE 6.

<!--[if lte IE 6]>
<style type="text/css">
ul {
height:1px;
}
</style>
<![endif]-->

--
BootNic Saturday, May 20, 2006 11:16 AM

Humor is an affirmation of dignity, a declaration of man's
superiority to all that befalls him.
*Romain Gary*
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads


Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top