CSS problemer i IE6

Du skal nok også sætte display:block; på #navcontainer li a

Lad os se det i aktion - kan du skaffe et link?

I kan se problemet her:
http://thorup-oergaard.dk/menuDemo/menuDemo.html

Jeg har forsøgt mig med display:block; men uden held...

Vises left-billedet, hvis du fjerner margin-left:-5px; fra #navcontainer li a?

Problemet er flyttet fra
http://thorup-oergaard.dk/menuDemo/menuDemo.html til
http://thorup-oergaard.dk/menuDemo1

Det har jeg prøvet, men det giver et andet problem.

På http://thorup-oergaard.dk/menuDemo2 kan i se problemet med at fjerne margin-left.

Hej oergaard

Hvis jeg gør som w13 skriver 16/07-2008 09:56:35 så se det da sådan her ud hos mig i IE6, IE7, FF2 og FF3
http://prebendahl.dk/test-sider/exp/oergaard/

Hej Zips, det er fordi du bruger tab billederne fra menuDemo1, hvor nav_tab_left.gif og nav_tab_active_left.gif ikke er gennemsigtige i øverste venstre hjørne. :-)

I den virkelige menu skal øverste venstre hjørne være gennemsigtigt, idet menuen skal virker med såvel en fast baggrundsfarve, som et baggrundsbillede.

Ups. det kan jeg godt se nu ;-)

Var det så ikke muligt at lave venste øverste hjørne transparant i nav_tab_right.gif og nav_tab_active_right.gif da det jo er dette billede som stikker igennem.

Din menu tab kan jo max være 275 px bred, så et par px mindre er vel ok ;-)

Bare glem det jeg skrev, for det kan aldrig komme til at virke, for nav_tab_left.gif fylder 9px i bredden mens nav_tab_right.gif er 275px i bredden, men nav_tab_right.gif viser måske kun ca 100px mens resten ligger ind under nav_tab_left.gif, derfor vil det ikke virke.

Håber en kan løse det for dig, da det vil gavne andre som vil lave menu tap på denne måde.

Så har jeg løst problemet, dog måtte jeg ændre lidt på opbygningen, men resultatet er 100% som ønsket i de tre browser. Se evt. http://thorup-oergaard.dk/menuDemo3

*** KODE ***
<div id="navcontainer">
  <div id="navlist">
    <div class="left_tab_active"></div><a href="#" class="center_tab_active">Menu 1</a><div class="right_tab_active"></div>
    <div class="left_tab"></div><a href="#" class="center_tab">Menu 2</a><div class="right_tab"></div>
    <div class="left_tab"></div><a href="#" class="center_tab">Menu 3</a><div class="right_tab"></div>
    <div class="left_tab"></div><a href="#" class="center_tab">Menu 4</a><div class="right_tab"></div>
  </div>
</div>

*** STYLE ***
#navcontainer {padding: 10px;}

.left_tab, .left_tab_active, .right_tab, .right_tab_active
{
width: 9px;
height: 32px;
float: left;
}
           
.left_tab{background: transparent url(nav_tab_left.gif) no-repeat left top;}
           
.left_tab_active{background: transparent url(nav_tab_active_left.gif) no-repeat left top;}
           
.center_tab
{
height: 32px;
background: transparent url(nav_tab_right.gif) no-repeat left top;
float: left;
padding: 5px 10px 0px 10px;
}
           
.center_tab_active
{
height: 32px;
background: transparent url(nav_tab_active_right.gif) no-repeat left top;
float: left;
padding: 5px 10px 0px 10px;
}
           
.right_tab
{
background: transparent url(nav_tab_right.gif) no-repeat right top;
margin-right: 5px;
}
       
.right_tab_active
{
background: transparent url(nav_tab_active_right.gif) no-repeat right top;
margin-right: 5px;
}

Zips og W13 smider i ikke et svar hver så deler vi pointene lige over, som tak for deltagelsen.

Hej oergaard

Ja jeg kan godt se du nu har delt din tap op i flere dele så right.gif ikke kommer ind under left.gif, for som det var kunne man ikke holde right.gif de 9px fra left som var nødvendig.

Skønt du ikke gav op og fik det resultat du ønskede ;-)

:)

Tak for deltagelsen. :-)

Tak for point :-)

Jeg har forenklet koden lidt, se resultatet på den nye kode på:
http://thorup-oergaard.dk/menuDemo4/

Tak for point!

*** HTML ***
<div id="navcontainer">
  <div class="left_tab_active"></div><div class="right_tab_active"><a href="#">Menu 1</a></div>
  <div class="left_tab"></div><div class="right_tab"><a href="#">Menu 2</a></div>
  <div class="left_tab"></div><div class="right_tab"><a href="#">Menu 3</a></div>
  <div class="left_tab"></div><div class="right_tab"><a href="#">Menu 4</a></div>
</div>

*** STYLE ***
/* Navigation */
#navcontainer{padding: 10px;}

.left_tab, .left_tab_active, .right_tab, .right_tab_active
{
height: 32px;
float: left;
}
           
.left_tab, .left_tab_active {width: 9px;}
       
.right_tab, .right_tab_active
{
margin-right: 5px;
padding: 5px 15px 0px 5px;
}
   
.left_tab {background: transparent url(nav_tab_left.gif) no-repeat left top;}   
.left_tab_active {background: transparent url(nav_tab_active_left.gif) no-repeat left top;}           
.right_tab {background: transparent url(nav_tab_right.gif) no-repeat right top;}
.right_tab_active {background: transparent url(nav_tab_active_right.gif) no-repeat right top;}