Inhalt rutscht aus Box...

[lukiB]

Hallo,
Ich habe eine <div> Box erstellt mit 900x30px.
In diese Box habe ich einen Background geladen und 4 Verweisbuttons.

Hier mal der Code:

<div style="background-color:none;
            width:900px;
            height:30px;
            border:2px black solid;
            margin-bottom:10px;

 ">
 <div class="rosa">
 <div id="navi">
  <ul>
   <li><a href="lukibstart.htm">Home</a></li>
   <li><a href="compu.htm">Computer</a></li>
   <li><a href="uemi.htm">Über Mich</a></li>
   <li><a href="indeRx.htm">Gästebuch</a></li>
  </ul>
  </div>
  </div>
 </div>

Der CSS Code vom Hintergrund:

.rosa{
  background:url('grüün.bmp');
           width:900px;
           height:30px;
}

Und der Design Code der Links:

#navi {
   text-align:left;
   margin-top:2px;
   margin-bottom:10px;
   margin-left:20px;
   margin-right:15px;
 }
 #navi ul {
   list-style:none;
 }
 #navi li {
   float:left;
   margin-left:50px;
   width:85px;
   background-image:url('buttonee.jpg');
   background-color:#222222;
   border-top:1px black solid;
   border-left:1px black solid;
   border-bottom:1px black solid;
   border-right:1px black solid;
   margin-top:0px;
   margin-bottom:0px;
   padding-top:3px;
   padding-bottom:3px;
   padding-left:3px;
   padding-right:3px;
   font-family:Comic Sans MS  , sans-serif;
   font-size:13px;
   font-weight:bold;

 }
 #navi a:link { color:white; text-decoration:none; }
 #navi a:visited { color:white; text-decoration:none; }
 #navi a:focus { color:green; text-decoration:overline; }
 #navi a:hover { color:red; text-decoration:none; }
 #navi a:active { color:orange; text-decoration:underline; }

Nun Rutscht der Hintergrund und die Links im FireFox immer zur hälfte runter (raus). Aber im IE 7 funktioniert alles einwandfrei...

bitte um Hilfe

Mfg lukiB

 

[neuroleptika]

so müßte es gehen:

.rosa{
  background:url('grüün.bmp');
           width:900px;
           min-height:30px;

* html .rosa{
           height:30px; /*für IE5-6/*

*+html .rosa{
           height:30px; /*für IE7/*
}

Alle Internet Explorer kennen min-height nicht aber behandeln height wie min-height.
Du könntest height für moderne Browser auch einfach weglassen.
Dann sollten die IE's aber ein height : 1%; bekommen.

 

[koslowski]

Hi,

so müßte es gehen:

.rosa{
  background:url('grüün.bmp');
           width:900px;
           min-height:30px;

* html .rosa{
           height:30px; /*für IE5-6/*

*+html .rosa{
           height:30px; /*für IE7/*
}

Alle Internet Explorer kennen min-height nicht aber behandeln height wie min-height.
Du könntest height für moderne Browser auch einfach weglassen.
Dann sollten die IE's aber ein height : 1%; bekommen.

*räusper*, äh...., könnte es sein das die Fehlerursache darin liegt das nicht gecleart wurde??
Der IE schließt die floats ja fälschlicherweise ohne clear ein.

Float:left; sehe ich in der CSS, aber nirgendwo ein clear .

koslowski

 

[neuroleptika]

Oh..!
Ja also dann:

  <ul>
   <li><a href="lukibstart.htm">Home</a></li>
   <li><a href="compu.htm">Computer</a></li>
   <li><a href="uemi.htm">Über Mich</a></li>
   <li><a href="indeRx.htm">Gästebuch</a></li>
  </ul>
  <br style="clear : both;" />
  </div>

Das mit den Höhenangaben sehe ich aber immer noch so.
Entweder für alle nicht-IE's weglassen oder so wie ich es beschrieben habe.
Sonst passt das ganze nur mit einer Schriftgröße.

 

[lukiB]

Hallo,
Danke schon mal für die Antworten.

Also ich habe das Clear eingebaut, so wie es mir neuroleptika beschrieben hat. Es ändert sich aber leider nichts nichts :(.

@koslowski:
Du hast gesagt ich muss das in die CSS einbauen.

Float:left; sehe ich in der CSS, aber nirgendwo ein clear .

Wie und wo baue ich das "clear" in der CSS Datei ein!? ich kenne den Befehl garnicht...



Wenn ich das einbaue, stimmt garnichts mer...

.rosa{
background:url('grüün.bmp');
width:900px;
min-height:30px;

* html .rosa{
height:30px; /*für IE5-6/*

*+html .rosa{
height:30px; /*für IE7/*
}

Also ohne die Verweise in der Box, bleibt das Hintergrund bild ganz normal drinne... ich verstehe das nicht weil ich kann in der CSS nirgends einen befehl finden der das Bild Rausschieben könnte. Aber wenn ich bgcolor:xxxx abgebe bleiben die verweise ganz normal in der box....

so soll es aus sehen:
linirut.jpg

und so sieht es aus (im FF jetzt ohne hintergrund... der hintergrund ist dann genau hinter den link buttons, also der rutscht mit aus der Box) :
lirut.jpg


Mfg lukiB

 

[koslowski]

Hi,

da es sich bei dir um eine horizontale, gefloatete Navi handelt lies dir doch mal das hier durch.
Du mußt weiter nach unten scrollen, dort steht was du brauchst
Heikos Artikel zu Navis ist wirklich erstklassig.

koslowski

 

[neuroleptika]

Hi,
Heikos Artikel zu Navis ist wirklich erstklassig.

Da wird dir sicher keiner widersprechen wollen.

In diesem Beispiel stören aber auch die Höhenangaben und die voreingestellten margins von ul und li.

Ich hab es mal verbessert und hochgeladen.
Die Hintergrundbilder hab ich gegen Lineale ausgetauscht. Mir hilft das manchmal.
Für das clear habe ich ein br verwendet:
menu

Die min-height Werte aus meinem ersten Beitrag waren natürlich auch zu groß. Ich hab sie jetzt ganz weggelassen.

 

[lukiB]

Super es hat geklappt... vielen Dank an euch, echt klasse =) Danke!!!

Mfg lukiB