Problem mit Background und float

kerstel · 14.03.2011, 17:51

Hallo,

ich hab ein Problem mit CSS, und zwar habe ich folgenden Code:

Code:

<div style="background-image: url(../img/navi_back.png);">
        	<ul style="margin: 0; padding: 0">
        		        			<li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">
        				Alltagshilfen
        			</li>
        		        			<li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">
        				Bla Blub
        			</li>
        		        			<li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">
        				Sonstiges
        			</li>
        		        		<div style="clear: left; margin: 0;"></div>
        	</ul>
        </div>

Das Hintergrundbild wird nicht angezeigt, nehme ich das float:left aus dem li raus, dann gehts. hat jemand eine Ahnung wo das Problem liegt?

Liebe Grüße
Ralf

mermshaus · 14.03.2011, 17:57

Das div-Element steht an einer unzulässigen Stelle. In ul ist nur li erlaubt.

Wenn's das nicht war, poste bitte ein vollständiges Beispiel (inklusive DOCTYPE) und den Browser, den du verwendest. Bei mir im Firefox geht es nämlich in den meisten Anordnungen.

kerstel · 14.03.2011, 18:04

ok, hab es abgeändert. und habe mehr li-Einträge: Hier der ganze code (Problem hab ich mit ie8 mit eingeschaltenem Kompitibilitätsmodus)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
   <title>Test</title>
</head>
<body>
  <div style="width: 500px; background-image: url(http://localhost/akanto/out/akanto/img/navi_back.png); background-repeat: repeat;">
    <ul style="margin: 0; padding: 0">
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 1</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 2</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 3</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 4</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 5</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 6</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 7</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 8</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 9</li>
      <li style="float: left; padding: 0 10px; border-right: 1px solid #ffffff; height: 30px;">Eintrag 10</li>
    </ul>
    <div style="clear: both; margin: 0;"></div>
  </div>
</body>

Durch die vielen Einträge entstehen 2 Zeilen, durch das versetzen des clear, wird nur die untere zeile mit dem hintergrund angezeigt.

lg ralf

mermshaus · 14.03.2011, 18:25

Ich muss leider sagen, dass es bei mir okay aussieht. Das Bild wird über den gesamten Hintergrund des Rahmen-Divs gekachelt. Vielleicht ein Cache-Problem? Reload mit STRG-F5 probiert?

Ansonsten fällt mir dazu leider nichts ein.

kerstel · 14.03.2011, 19:25

komisch, schau mal hier: http://43810-beta.lorenzsoft.de/

Ich hab das mal eingebaut, hier passiert es auch nur im ie8 (mit kompatibilitätsmodus)

mermshaus · 14.03.2011, 22:18

Frag mich nicht wieso und weshalb, aber hasLayout für das div-Element mit class="bar categories" scheint zu helfen.

- http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1; oder width: 100%; zum Beispiel.

kerstel · 15.03.2011, 05:00

width: 100% geht. Danke für die Hilfe

kerstel · 15.03.2011, 05:47

kannst Du mir vielleicht noch sagen warum der graue div (unter dem menü) im ie7 Modus einen Abstand nach oben hat? Ebenso das Bild unter dem grauen div?

mermshaus · 15.03.2011, 13:15

Ich weiß nicht, was du genau meinst. Im Zweifel immer versuchen, Layout zu verpassen. Siehe oben.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem bei Hovereffekt (Text springt etwas)	skelle	HTML, Usability und Barrierefreiheit	6	13.11.2010 15:33
[Erledigt] CSS IE6 Problem: Faux Column	jeanorwin	HTML, Usability und Barrierefreiheit	4	17.10.2010 00:18
[Erledigt] [CSS,HTML] Background Problem	wilskin1	HTML, Usability und Barrierefreiheit	9	15.05.2010 16:47
Float oder nicht Float	d0ne	HTML, Usability und Barrierefreiheit	7	08.04.2010 21:05
Scriptsuche [Erledigt] Kontaktformular erstellen	Arndt K.	Scriptbörse	15	22.02.2010 14:52
Bereich um einen float left und float right Bereich	andrew22	HTML, Usability und Barrierefreiheit	8	27.02.2007 18:27
[CSS] Problem mit float	I-Spy	HTML, Usability und Barrierefreiheit	3	31.03.2006 17:08
Begrenzung von .gif/.Jpg body background	Bruce	HTML, Usability und Barrierefreiheit	2	02.03.2006 11:09
Problem mit Picture bei div als Background		HTML, Usability und Barrierefreiheit	3	27.10.2005 17:30
[Erledigt] Problem mit div, float und clear		HTML, Usability und Barrierefreiheit	2	09.09.2005 18:51
Wordpress Template		HTML, Usability und Barrierefreiheit	8	22.08.2005 11:21
Firefox float Problem....	MortakArtos	HTML, Usability und Barrierefreiheit	1	14.01.2005 12:18


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.03.2011, 17:57
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Das div-Element steht an einer unzulässigen Stelle. In ul ist nur li erlaubt. Wenn's das nicht war, poste bitte ein vollständiges Beispiel (inklusive DOCTYPE) und den Browser, den du verwendest. Bei mir im Firefox geht es nämlich in den meisten Anordnungen. __________________ Blog \| Buch \| Kaloa

14.03.2011, 18:25
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Ich muss leider sagen, dass es bei mir okay aussieht. Das Bild wird über den gesamten Hintergrund des Rahmen-Divs gekachelt. Vielleicht ein Cache-Problem? Reload mit STRG-F5 probiert? Ansonsten fällt mir dazu leider nichts ein. __________________ Blog \| Buch \| Kaloa

14.03.2011, 19:25
kerstel Erfahrener Benutzer Registriert seit: 08.08.2008 Beiträge: 128	komisch, schau mal hier: http://43810-beta.lorenzsoft.de/ Ich hab das mal eingebaut, hier passiert es auch nur im ie8 (mit kompatibilitätsmodus)

14.03.2011, 22:18
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Frag mich nicht wieso und weshalb, aber hasLayout für das div-Element mit class="bar categories" scheint zu helfen. - http://www.satzansatz.de/cssd/onhavinglayout.html zoom: 1; oder width: 100%; zum Beispiel. __________________ Blog \| Buch \| Kaloa

15.03.2011, 05:00
kerstel Erfahrener Benutzer Registriert seit: 08.08.2008 Beiträge: 128	width: 100% geht. Danke für die Hilfe

15.03.2011, 05:47
kerstel Erfahrener Benutzer Registriert seit: 08.08.2008 Beiträge: 128	kannst Du mir vielleicht noch sagen warum der graue div (unter dem menü) im ie7 Modus einen Abstand nach oben hat? Ebenso das Bild unter dem grauen div?

15.03.2011, 13:15
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Ich weiß nicht, was du genau meinst. Im Zweifel immer versuchen, Layout zu verpassen. Siehe oben. __________________ Blog \| Buch \| Kaloa