[Browser Bug] li im IE wird Menü falsch dargestellt

[bewusstwerdung]

Hallo,

Das css Menü funkt super im FF aber im IE wird es falsch dargestellt.
Im Anhang die Bilder, hier der Code:

#navcontainer { margin-left: 0px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
font-size:12px;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 150px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

#navcontainer ul ul li { margin: 0 0 1px 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 135px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

Mlchte die darstellung im IE gleich wie im FF.
Wo liegt der Fehler?

linkes Bild IE rechtes Bild FF

Danke
lg
Otto

[sejuma]

Sieht aus, als hättest ne Ausklapp-Navi.
Die kann der IE nicht ohne weiteres darstellen, weil er den Hoverbefehl nur für a und nicht ul oder li zulässt.
Orientiere dich am besten an dieser Anleitung.

[bewusstwerdung]

Hallo sejum,

mein Aufklappmenü passiert nur durch klick nicht durch "hover".
Ist daher noch immer dein Link nötig oder nicht mehr und es liegt der Fehler
wo anders?

Danke übrigens für die superschnelle Antwort

Greetz
Otto

[hero-master]

Moin
bei deinem Problem handelt es sich um einen beliebten Bug im IE (Whitespace-Bug), den man wohl auch für den IE7 noch nicht repariert hat
Am besten gibst du den Listenpunkten ein float:left; und clearst es sofort wieder:

#navcontainer li {
float: left; clear: left
}

[bewusstwerdung]

Hallo Nico,

ok, habe ich mal getestet doch leider ohne Erfolg.

Hier die Änderung:

#navcontainer { margin-left: 0px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

/*#navcontainer li {margin: 0 0 1px 0; }*/
#navcontainer li { 
margin: 0 0 1px 0; 
float: left; 
clear: left;
}

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 150px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

#navcontainer ul ul li {margin: 0 0 1px 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 135px;
color: #fff;
background-color: #369;
text-decoration: none;
font-weight: normal;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

hast du noch eine Idee?

Greetz
Otto

[Boris]

Den Whitespace-Bug behebt man ganz einfach mit hasLayout, sprich:

#navcontainer li { height: 1%; min-height: 1% !important; } ... fertig

http://onhavinglayout.fwpf-webdesign.de/

Zitat von hero-master

Moin
bei deinem Problem handelt es sich um einen beliebten Bug im IE (Whitespace-Bug), den man wohl auch für den IE7 noch nicht repariert hat

Ein Element zu floaten ohne Breitenangabe ist nach CSS2.1 unzulässig - und daher funktioniert es in seinem Fall nicht. Ich sag nur hasLayout

[hero-master]

Zitat von Boris

Ein Element zu floaten ohne Breitenangabe ist nach CSS2.1 unzulässig - und daher funktioniert es in seinem Fall nicht.

Regeln sind da um gebrochen zu werden...
Bei mir hat das geklappt

Zitat von Boris

Ich sag nur hasLayout

pff...

[bewusstwerdung]

Hallo!

So, nun habe ich bereits soviel probiert
und komm einfach nicht weiter!

Irgendwo ist der Hund begraben....
Habt ihr noch Ideen

Greetz
Otto

[bewusstwerdung]

Hallo,
nun konnte ich es doch noch ein weniger freundlicher
machen wie?

#navcontainer { margin-left: 0px; text-align: left; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

/*#navcontainer li {margin: 0 0 1px 0; }*/
#navcontainer li { margin: 0 0 1px 0; display:block; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 150px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

#navcontainer ul ul li {display:inline;}

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 135px;
color: #fff;
background-color: #369;
text-decoration: none;
font-weight: normal;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

mit display:block;
hier:

#navcontainer li { margin: 0 0 1px 0; display:block; }

und display:inline;
hier:

#navcontainer ul ul li {display:inline;}

sieht nun fertig so aus:
links:IE, mitte:FF, rechts: so wollte ich es haben

Werd es mal so lassen, bis sich was ergibt...

vielen Dank an euch und liebe
Grüße aus dem kalten Wien!
Otto

[Boris]

Ähm ... du solltest dem Element ein height: 1% geben ...

[bewusstwerdung]

Hallo Boris,

Ähm ... du solltest dem Element ein height: 1% geben ...

habe ich getestet doch leider ohne Erfolg...
Habe sogar einige IE Hack probiert aber da war wieder etwas anders schlecht.

Greetz
Otto

[bewusstwerdung]

Hallo!
Vielleicht sollte ich auch mal den php und html teil posten!
Da die Hinweise in Richtung css nicht gefunkt haben, könnte
der Hund ja im Code-Teil liegen

Hier der css Teil:

#navcontainer { 
margin-left: 0px; text-align: left;

line-height: 1.2;
}

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0 0 1px 0;}

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 152px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

#navcontainer ul ul li {margin: 0 0 1px 0;}

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 137px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #4d91d0;
text-decoration: none;
}

und hier der php teil:

PHP-Code:

  function tep_show_category($counter) {
    global $tree, $categories_string, $cPath_array;
$categories_string .= '<div id="navcontainer"><ul>';
    for ($i=0; $i<$tree[$counter]['level']; $i++) {
      $categories_string .= '<ul><li>';
    }

    $categories_string .= '<a href="';

    if ($tree[$counter]['parent'] == 0) {
      $cPath_new = 'cPath=' . $counter;
    } else {
      $cPath_new = 'cPath=' . $tree[$counter]['path'];
    }

    $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '<b>';
    }

// display category name
    $categories_string .= $tree[$counter]['name'];

    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '</b>';
    }

    if (tep_has_category_subcategories($counter)) {
      $categories_string .= '';
    }

    $categories_string .= '<li>';

    if (SHOW_COUNTS == 'true') {
      $products_in_category = tep_count_products_in_category($counter);
      if ($products_in_category > 0) {
        $categories_string .= '(' . $products_in_category . ')';
      }
    }

    $categories_string .= '</a></li></ul></div>';

    if ($tree[$counter]['next_id'] != false) {
      tep_show_category($tree[$counter]['next_id']);
    }
  }
?>
<!-- categories //--> 


und hier der Link zum Shop wo mit FF und IE der
tolle Unterschied gesehen wird:
klick...

Einfach mal die Menüs testen...

Vielleicht geht jetzt

liebe Grüße
otto

[hero-master]

Boah, was ist denn das für ein Wollknäuel
Ich komm da nicht ganz durch.
Du solltest erstmal das PHP-Script bearbeiten, so dass es einen sinngemäßen Code erstellt. So ist das absolut nix. Es produziert zu viele Fehler, vom restlichen Code zu schweigen
Man kann nicht mal sagen, dass es sich um einen IE-Bug handelt, weil da so viel krumm läuft...

[bewusstwerdung]

Hallo Nico,
muss dir leider Recht geben im Bezug auf "Wollknäuel"
Doch wie soll ich dies angehen?

Kopiere mal die Komplette categories.php hier rein...

PHP-Code:

<?php
/*
  $Id: categories.php 1739 2007-12-20 00:52:16Z hpdl $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/

  function tep_show_category($counter) {
    global $tree, $categories_string, $cPath_array;
$categories_string .= '<div id="navcontainer"><ul>';
    for ($i=0; $i<$tree[$counter]['level']; $i++) {
      $categories_string .= '<ul><li>';
    }

    $categories_string .= '<a href="';

    if ($tree[$counter]['parent'] == 0) {
      $cPath_new = 'cPath=' . $counter;
    } else {
      $cPath_new = 'cPath=' . $tree[$counter]['path'];
    }

    $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '<b>';
    }

// display category name
    $categories_string .= $tree[$counter]['name'];

    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '</b>';
    }

    if (tep_has_category_subcategories($counter)) {
      $categories_string .= '';
    }

    $categories_string .= '<li>';

    if (SHOW_COUNTS == 'true') {
      $products_in_category = tep_count_products_in_category($counter);
      if ($products_in_category > 0) {
        $categories_string .= '(' . $products_in_category . ')';
      }
    }

    $categories_string .= '</a></li></ul></div>';

    if ($tree[$counter]['next_id'] != false) {
      tep_show_category($tree[$counter]['next_id']);
    }
  }
?>
<!-- categories //-->
          <tr>
            <td>
<?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

  new infoBoxHeading($info_box_contents, true, false);

  $categories_string = '';
  $tree = array();

  $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
  while ($categories = tep_db_fetch_array($categories_query))  {
    $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
                                                'parent' => $categories['parent_id'],
                                                'level' => 0,
                                                'path' => $categories['categories_id'],
                                                'next_id' => false);

    if (isset($parent_id)) {
      $tree[$parent_id]['next_id'] = $categories['categories_id'];
    }

    $parent_id = $categories['categories_id'];

    if (!isset($first_element)) {
      $first_element = $categories['categories_id'];
    }
  }

  //------------------------
  if (tep_not_null($cPath)) {
    $new_path = '';
    reset($cPath_array);
    while (list($key, $value) = each($cPath_array)) {
      unset($parent_id);
      unset($first_id);
      $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
      if (tep_db_num_rows($categories_query)) {
        $new_path .= $value;
        while ($row = tep_db_fetch_array($categories_query)) {
          $tree[$row['categories_id']] = array('name' => $row['categories_name'],
                                               'parent' => $row['parent_id'],
                                               'level' => $key+1,
                                               'path' => $new_path . '_' . $row['categories_id'],
                                               'next_id' => false);

          if (isset($parent_id)) {
            $tree[$parent_id]['next_id'] =