IE6 und Bild in Box und Boxgröße

[Gast] Foren Web allgemein HTML und CSS / Stylesheets IE6 und Bild in Box und Boxgröße

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

1 2

matmax

Beiträge gesamt: 626

20. Sep 2006, 00:15
Beitrag # 1 von 20
Bewertung:
(5852 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Liebes Forum,
ich finde nichts mehr in meinem CSS-Buch … Die Seite läuft in Safari, Firefox und dem IE5.2 auf Mac OS 10.4 und in Netscape 7 auf WIN XP nur im IE6 geht es nicht. (Zur verständlichkeit habe ich die boxen eingefärbt)

1_Dort scheint sich die bild(box) um 1 oder 2px nach unten zu schieben, wenn das gleich große Bild geladen wird. Ohne Bild ist die größe der Box korrekt. Wie kriege ich den Streifen weg? (Bild: Logo_inkl.jpg ist 100px hoch und 450px breit)

2_Ich habe eine 8px x 8px großes Quadrat vor dem Menü (#kaestchen). Nur im IE scheint es 8 x 16px zu sein? Wie bekomme ich ein Quadrat hin?

3_Ist sonst etwas total bescheuert in meinem Quelltext?

Vielen Dank, wenn sich jemand die Zeit nimmt, mal drüber zu gucken!
Matthias

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Name</title> 
 
<style type="text/css"> 
/* <![CDATA[ */ 
body  		{ 	background-color: white; 
				color: black; 
				text-align: center;		} 
				 
#container	{ 	width: 900px; 
				height: 600px; 
				background-color: #76CEF3; 
				text-align: left; 
				position: relative; 
				margin: 0 auto;	 
				margin-top: 50px;	}			 
				 
#logo		{	background-color: black; 
                       width: 500px; 
				height: 100px;	}				 
				 
#navigation	{	background-color: yellow; 
				width: 100px; 
				height: 470px; 
				position: absolute; 
				top: 130px; 
				left: 0px; 
				font: 12px Helvetica, Verdana, sans serif; 
				line-height: 18px; 
				font-weight: normal; 
				text-align: right; 	} 
				 
#kaestchen	{	background-color: black;	 
				width: 8px; 
				height: 8px; 
				position: absolute; 
				top: 135px; 
				left: 104px; 	}																 
				 
#inhalt		{	background-color: brown;	 
				width: 350px; 
				height: 445px;  
				position: absolute; 
				top: 130px; 
				left: 125px; 
				padding-right: 25px; 
				overflow: auto;	} 
								 
h1, h2		{	font: 12px Helvetica, Verdana, sans serif; 
				line-height: 18px;	 
				font-weight: bold; 
				margin-bottom: 0px; 
				margin-top: 0px;	} 
				 
p			{	font: 12px Helvetica, Verdana, sans serif; 
				line-height: 18px; 
				font-weight: light;	 
				margin-bottom: 0px; 
				margin-top: 0px;	}							 
				 
#bild		{	background-color: green;	 
				width: 400px; 
				height: 600px; 
				position: absolute; 
				top: 0px; 
				right: 0px;			} 
				 
a:link		{	color: black;  
				text-decoration: none;	} 
				 
a:visited	{	color: black;  
				text-decoration: none;	}				 
				 
a:hover		{	font-weight: bold;	} 
 
.aktuell	{	font-weight: bold;	} 
 
 
 
 
								 
/* ]]> */ 
</style> 
</head> 
<body> 
 
<div id="container">  
  <div id="logo"><img src="Logo_inkl.jpg"</div> 
  <div id="navigation"> <a href="Name.html" class="aktuell">&Uuml;ber  
    uns</a><br> 
    <br> 
    <a href="#">Zwei</a><br> 
    <br> 
    <a href="#">Drei</a><br> 
    <br> 
    <a href="#">Vier</a><br> 
    <br> 
    <a href="#">Fünf</a><br> 
    <br> 
    <a href="#">Sechs</a><br> 
    <br> 
    <a href="#">Impressum</a> </div> 
  <div id="kaestchen"></div> 
  <div id="inhalt">  
    <p>texttexttexttexttexttexttexttexttexttexttexttext<br> 
      <br> 
    <h1>Überschrift</h1> 
    <p> • texttexttexttexttexttext<br> 
      texttexttexttexttexttext<br> 
      • texttexttexttexttexttexttexttexttext<br> 
      texttexttexttexttexttext<br> 
      • texttexttexttexttexttexttexttexttext<br> 
      • texttexttexttexttexttexttexttexttext<br> 
    </p> 
    <br> 
    <h1>Überschrift</h1> 
    <p> texttexttexttexttexttexttexttexttext<br> 
      • texttexttexttexttexttexttexttexttext<br> 
      • texttexttext<br> 
      texttexttexttexttexttext<br> 
    </p> 
  </div> 
  <div id="bild"><img src="Bild_Ueber uns4.jpg"</div> 
</div> 
 
</body> 
</html>

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

20. Sep 2006, 00:30
Beitrag # 2 von 20
Beitrag ID: #251860
Bewertung:
(5845 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Oh, das Streifenproblem war das Fehlen eines > bei der Bildeinfügung!

Jetzt fehlt nur noch diese komische #kaestchen …!

als Antwort auf: [#251859]

IE6 und Bild in Box und Boxgröße

ganesh

Beiträge gesamt: 1981

20. Sep 2006, 04:49
Beitrag # 3 von 20
Beitrag ID: #251867
Bewertung:
(5818 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

füge noch dies hinzu:

overflow:hidden;

als Antwort auf: [#251860]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

20. Sep 2006, 10:10
Beitrag # 4 von 20
Beitrag ID: #251918
Bewertung:
(5803 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Danke, mit overflow: auto hat es aber ganz gut geklappt, dass bei etwaiger höherer Textlänge in #inhalt ein Scrollbalken an richtiger Stelle erscheint (vertikaler scroll). Bei anderen Einstellungen war immer, zmindest bei OS X ein scrollbalkenhintergrund zu sehen.

Was mach ich aber nur mit dem Kästchen das so vertikal gestreckt ist?

als Antwort auf: [#251867]

IE6 und Bild in Box und Boxgröße

FSt

Beiträge gesamt: 1965

20. Sep 2006, 10:41
Beitrag # 5 von 20
Beitrag ID: #251935
Bewertung:
(5799 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo matmax

das overflow:hidden sollte beim #kaestchen eingebaut werden, dann ists quatratisch ...

Gruss
Martin

als Antwort auf: [#251918]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

20. Sep 2006, 11:34
Beitrag # 6 von 20
Beitrag ID: #251958
Bewertung:
(5794 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ach so! Danke Martin!
Das werde ich gleich heute abend ausprobieren!
Daran wird es wohl liegen …

Gruss
Matthias

als Antwort auf: [#251935]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

20. Sep 2006, 21:13
Beitrag # 7 von 20
Beitrag ID: #252157
Bewertung:
(5788 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Super, funktioniert! Dankeschön!

als Antwort auf: [#251958]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

21. Sep 2006, 21:05
Beitrag # 8 von 20
Beitrag ID: #252436
Bewertung:
(5777 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Zwei Fragen hätte ich noch:

1 Das Kästchen ist auf dem Windows IE und Netscape in der Position ein Pixel zu hoch. Auf dem Mac ist es korrekt. Wie kann ich dies beheben?
2 Ein XHTML-Validator spuck verdammt viele Fehler aus – doch die Seite scheint ja zu funktionieren. Ist es ratsam doch nur HTML zu nehmen (zumal ich rechnen muss, dass die Seite von Benutzern besucht wird, die nicht gerade taufrische Browser haben)?

als Antwort auf: [#251935]

IE6 und Bild in Box und Boxgröße

FSt

Beiträge gesamt: 1965

22. Sep 2006, 07:38
Beitrag # 9 von 20
Beitrag ID: #252463
Bewertung:
(5770 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo matmax

Antwort auf [ matmax ] Ein XHTML-Validator spuck verdammt viele Fehler aus – doch die Seite scheint ja zu funktionieren. Ist es ratsam doch nur HTML zu nehmen (zumal ich rechnen muss, dass die Seite von Benutzern besucht wird, die nicht gerade taufrische Browser haben)?

So schwer sind die Felher gar nicht zu beheben:

1. es fehtl das html-tag <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> vor dem head-tag
2. solltesn die img mit einem /> geschlossen werden und zusätzlich noch mit alt=""
3. <br> schreibt man <br />
4. fehlt ein </p>
5. ü wird zu ü
und schon hast Du ein einen validen Code ...

Validierter Code ist wichtig, nicht nur für Browser auch für Suchmaschinen und alternative Ausgabegeräte. Das hat es keinen Einfluss auf Deine Entscheidung, ob Du XHTML oder HTML nimmst ...

Beseitige mal alle Fehler und schau dann, ob der IE immer noch um 1px nicht stimmt ...

Gruss
Martin

als Antwort auf: [#252436]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

22. Sep 2006, 14:31
Beitrag # 10 von 20
Beitrag ID: #252646
Bewertung:
(5760 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Danke, aber doch noch mal nachgefragt:
Spielt es eine Rolle ob ich HTML oder XHTML verwende je nach Alter des Browsers?
Bzw. ist es nicht bei meiner Seite (mit CSS) ohne Flash etcpp. völlig egal ob ich HTML oder XHTML nehme?

als Antwort auf: [#252463]

IE6 und Bild in Box und Boxgröße

FSt

Beiträge gesamt: 1965

22. Sep 2006, 17:28
Beitrag # 11 von 20
Beitrag ID: #252692
Bewertung:
(5754 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo matmax

Wow, da hast Du aber eine Gretchenfrage erwischt ...
Wenn Du Zeit und Lust hast, kannst Du Dich zu diesem Thema hier einlesen:
http://de.selfhtml.org/...tml/unterschiede.htm

Kurze Antwort:
Für Dein Projekt spielt es eigentlich keine Rolle.

Gruss
Martin

als Antwort auf: [#252646]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

22. Sep 2006, 23:58
Beitrag # 12 von 20
Beitrag ID: #252729
Bewertung:
(5745 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Okay, gut zu wissen. Danke. Bei selfhtml hatte ich auch schon gelesen, aber da versteh ich nur Bahnhof. Schönes Wochenende, Matthias

als Antwort auf: [#252692]

IE6 und Bild in Box und Boxgröße

matmax

Beiträge gesamt: 626

24. Sep 2006, 16:12
Beitrag # 13 von 20
Beitrag ID: #252814
Bewertung:
(5700 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Martin,
ich habe die Fehler beseitigt, aber das verschobene "kaestchen" bleibt …
Habe herausgefunden, dass sich im IE6 auf WINXP aber nicht das "kaestchen" verschiebt – das bleibt exakt gleich" – sondern die "navigation"-Box und die "inhalt"-Box um ein Pixel nach unten. Probiere die ganze Zeit mit verschiedenen CSS schreibweisen (mal im body mal in "inhalt" etcpp), aber es bleibt wie es ist …
Woran kann das nur liegen?!

Viele Grüße, Matthias

als Antwort auf: [#252692]