css issues in strict mode

GoogleCodeExporter commented 8 years ago

What steps will reproduce the problem?

1. create a dynatree using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

What is the expected output? What do you see instead?

The 'T' shaped dotted line images (ltL_nes.gif) do not connect (they have
some vertical spacing in between each one.

What version of the product are you using?

jquery.dynatree.js 0.3, beta build 2008-09-14 

On what operating system and browser?

Mac OSX FF 3 & Safari 3

Please provide any additional information below.

In strict mode images are not treated as inline elements.  The get some
extra margin added to the bottom of them.

Creating a custom style sheet can fix this
(tested in FF, Safari and IE6)

add the following attributes to .ui-dynatree-container img
display: block; /*removes bottom margin from images*/
float: left;    /*makes images display inline*/

and add the following rule
/*clear the float left from above */
div.ui-dynatree-container div div {
    clear:both;
}

Original issue reported on code.google.com by gabriell...@gmail.com on 29 Oct 2008 at 4:10

GoogleCodeExporter commented 8 years ago

Original comment by moo...@wwwendt.de on 1 Nov 2008 at 11:02

Changed state: Accepted
Added labels: Milestone-Release0.3

GoogleCodeExporter commented 8 years ago

the proposed solution seemed to wor (FF3 and IE7) with this exception:
I used
  div.ui-dynatree-container div {
instead of 
  div.ui-dynatree-container div div {

>> r72
Needs to be verified on safary, ie6, ff2

Original comment by moo...@wwwendt.de on 1 Nov 2008 at 11:50

Changed state: Fixed

GoogleCodeExporter commented 8 years ago

Had to re-open this!

The CSS changes caused a browser crash in IE 7.0.6001.18000 on Vista
when using the [Left] key to close an expanded node.

It's reproducible and only occurs, when the "float: ..." line is present.

.ui-dynatree-container img
{
    [...]
    display: block; /* Removes bottom margin from images */
    float: left;    /* Makes images display inline */
}

/*clear the float left from above */
div.ui-dynatree-container div  
{
    clear: both; 
}

Original comment by moo...@wwwendt.de on 1 Nov 2008 at 2:33

Changed state: Accepted

GoogleCodeExporter commented 8 years ago

Maybe fixed with issue #55. Still needsto be verified

Original comment by moo...@wwwendt.de on 15 Nov 2008 at 11:18

GoogleCodeExporter commented 8 years ago

Closing this.
Please provide feedback, if the current css doesn't work for you.

Original comment by moo...@wwwendt.de on 30 Nov 2008 at 3:50

Changed state: Duplicate

kcmohanprasad / dynatree

css issues in strict mode #49