zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV, IE und Firefox - Falsche Darstellung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.09.2008, 14:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2008
Beiträge: 14
thebrains_de befindet sich auf einem aufstrebenden Ast
Standard DIV, IE und Firefox - Falsche Darstellung

Also obwohl ich eigentlich nur Standard CSS Werte nehme, zeigt er mir in beiden Browser verschiedene Varianten an.


style.css
Code:
a:link {
color:#006CFF;
}

a:visited {
color:#006CFF;
}

a:hover {
background-color:#006CFF;
color:#FFFFFF;
}

a:active {
color:#006CFF;
}

a.toplinks:link {
color:#FFFFFF;
text-decoration:underline;
}

a.toplinks:visited {
color:#FFFFFF;
text-decoration:underline;
}

a.toplinks:hover {
background-color:#006CFF;
color:#FFFFFF;
text-decoration:none;
}

a.toplinks:active {
color:#FFFFFF;
text-decoration:underline;
}

body {
background-color:#FFFFFF;
font-family:Arial;
font-size:1em;
margin:0px;
}

#container {
border:0px #000000 dotted;
margin:0 auto;
text-align:left;
width:900px;
}

#content {
border:0px #000000 dotted;
float:right;
width:630px;
}

#footer {
clear:both;
color:#999999;
font-family:Arial;
font-size:0.7em;
margin:0 auto;
padding-top:15px;
text-align:center;
width:900px;
}

#navigation {
border:1px #000000 dotted;
border-top:0px;
font-family:Arial;
font-size:1em;
float:left;
width:250x;
}

#productleft {
background-image:url(images/product_left.jpg);
float:left;
height:100px;
width:11px;
}

#producttext {
background-image:url(images/product_text.jpg);
border-right:1px #7F7F7F solid;
border-left:0px;
height:100px;
width:100%;
}

#shopname {
color:#FFFFFF;
font-family:Arial;
font-size:2.5em;
margin:0 auto;
padding-top:10px;
text-align:left;
width:900px;
}

#topnavi {
color:#FFFFFF;
font-family:Arial;
font-size:0.9em;
margin:0 auto;
padding-top:10px;
text-align:left;
width:900px;
}

.headline {
border-bottom:1px #000000 dotted;
color:#006CFF;
font-family:Arial;
font-size:1.5em;
padding-left:10%;
}

.hereuare {
font-family:Arial;
font-size:1em;
margin-top:5px;
width:100%;
}

.navlinks {
color:#000000;
font-family:Arial;
font-size:0.9em;
padding:5px;
width:100%;
}

.productdescription {
padding:5px;
padding-left:15px;
}

.slogan {
color:#FFFFFF;
font-family:Arial;
font-size:0.5em;
}

.top {
background-image:url(images/top.gif);
background-repeat:repeat-x;
height:123px;
width:100%;
}

index.php
Code:
<?php
$sitetitle = "Title";
$slogan = "Slogan!";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo $sitetitle; ?></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 <div class="top">
  <div id="shopname"><?php echo $sitetitle; ?><br><div class="slogan"><?php echo $slogan; ?></div></div>
  <div id="topnavi"><a href="link1" class="toplinks">Erster Link</a> | <a href="link2" class="toplinks">Zweiter Link</a> | <a href="link3" class="toplinks">Dritter Link</a> | <a href="link4" class="toplinks">Vierter Link</a></div>
 </div>
 <div id="container">
  <div class="hereuare"><b>Du bist hier:</b> <a href="index.php" target="_parent">Startseite</a></div>
  <br>
  <div id="content">
   <div class="headline">Angebote</div>
   <br>
   <div id="productleft"></div>
   <div id="producttext">
    <div class="productdescription">
	 Hier kommt der Text etc.
    </div>
   </div>
  </div>
  <div id="navigation">
   <img src="images/navigation.gif" width="250" height="35">
   <br>
   <div class="navlinks">
    ›› <a href="/1/erste_kategorie">Erste Kategorie</a><br><br>
    ›› <a href="/2/zweite_kategorie">Zweite Kategorie</a><br><br>
	›› <a href="/3/dritte_kategorie">Dritte Kategorie</a><br><br>
	›› <a href="/4/vierte_kategorie">Vierte Kategorie</a>
   </div>
  </div>
 </div>
 <div id="footer">&copy; 2008 tb - smk | <a href="imprint.php" target="_parent">Impressum</a> &bull; <a href="versand.php" target="_parent">Versand</a></div>
</body>
</html>
Was ist an der CSS Formatierung falsch? Ich finde absolut nicht den Fehler o.O
Angehängte Grafiken
Dateityp: jpg screen_ff.jpg (75,6 KB, 11x aufgerufen)
Dateityp: jpg screen_ie.jpg (79,7 KB, 9x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.09.2008, 14:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Bitte poste einen Link.

Eine Navigation gehört in eine Liste!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.09.2008, 14:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2008
Beiträge: 14
thebrains_de befindet sich auf einem aufstrebenden Ast
Standard

Oh, hab den Link vergessen - sorry

BSS v1


Joa das ist provisorisch erstmal gedacht...ich arbeite seit einiger Zeit erst mit CSS und wollte erst das Layout komplett haben um mich danach der Programmierung etc. widmen.
Mit Zitat antworten
  #4 (permalink)  
Alt 30.09.2008, 14:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von thebrains_de Beitrag anzeigen
Joa das ist provisorisch erstmal gedacht...ich arbeite seit einiger Zeit erst mit CSS und wollte erst das Layout komplett haben um mich danach der Programmierung etc. widmen.
Tut mir leid, das ist Unfug.
Du brauchst zuerst das sinnvolle Markup. Man kann mit CSS nämlich nur das gestalten, was im Quelltext steht.

Wirf alle leeren Elemente raus. Für deinen blauen Balken brauchst du kein Element. Leg eine Hintergrundgrafik mit Balken und Verlauf in deine Box.
Wirf alle als Abstandhalter missbrauchten <br /> raus.
Wirf img-Elemente raus, die nur Ziergrafik sind. Sowas gehört als Hintergrundbild ins Stylesheet.
Zeichne deinen Inhalt semantisch aus. Der Seitentitel ist eine h1. Die Navigation ist eine Liste. <div class headline> ist eine Überschrift! (Google: "Div-Suppe", "Divitis").
Dann kann man weitersehen. Für Browserbugs ist später noch Zeit.

Geändert von fricca (30.09.2008 um 14:31 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 30.09.2008, 14:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2008
Beiträge: 14
thebrains_de befindet sich auf einem aufstrebenden Ast
Standard

So...nun funktioniert alles nach der Fehlerbehebung. Hier nochmals das aktuellste:

index.php
Code:
<?php
$sitetitle = "BSS v1";
$slogan = "Verkaufen - mit Leichtigkeit!";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo $sitetitle; ?></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 <div class="top">
  <div id="shopname"><?php echo $sitetitle; ?><br><div class="slogan"><?php echo $slogan; ?></div></div>
  <div id="topnavi"><a href="link1" class="toplinks">Erster Link</a> | <a href="link2" class="toplinks">Zweiter Link</a> | <a href="link3" class="toplinks">Dritter Link</a> | <a href="link4" class="toplinks">Vierter Link</a></div>
 </div>
 <div id="container">
  <div class="hereuare"><b>Du bist hier:</b> <a href="index.php" target="_parent">Startseite</a></div>
  <br>
  <div id="content">
   <div class="headline">Angebote</div>
   <br>
   <div id="product">
	Hier kommt der Text etc.
   </div>
  </div>
  <div id="navigation">
   <ul class="navlinks">
	<li><a href="/1/erste_kategorie">Erste Kategorie</a></li>
    <li><a href="/2/zweite_kategorie">Zweite Kategorie</a></li>
	<li><a href="/3/dritte_kategorie">Dritte Kategorie</a></li>
	<li><a href="/4/vierte_kategorie">Vierte Kategorie</a></li>
   </ul>
  </div>
 </div>
 <div id="footer">&copy; 2008 tb - smk | <a href="imprint.php" target="_parent">Impressum</a> &bull; <a href="versand.php" target="_parent">Versand</a></div>
</body>
</html>

style.css
Code:
a:link {
color:#006CFF;
}

a:visited {
color:#006CFF;
}

a:hover {
background-color:#006CFF;
color:#FFFFFF;
}

a:active {
color:#006CFF;
}

a.toplinks:link {
color:#FFFFFF;
text-decoration:underline;
}

a.toplinks:visited {
color:#FFFFFF;
text-decoration:underline;
}

a.toplinks:hover {
background-color:#006CFF;
color:#FFFFFF;
text-decoration:none;
}

a.toplinks:active {
color:#FFFFFF;
text-decoration:underline;
}

body {
background-color:#FFFFFF;
font-family:Arial;
font-size:1em;
margin:0px;
}

#container {
border:0px #000000 dotted;
margin:0 auto;
text-align:left;
width:900px;
}

#content {
border:0px #000000 dotted;
float:right;
width:630px;
}

#footer {
clear:both;
color:#999999;
font-family:Arial;
font-size:0.7em;
margin:0 auto;
padding-top:15px;
text-align:center;
width:900px;
}

#navigation {
background-image:url(images/navigation.gif);
background-repeat:no-repeat;
border:1px #000000 dotted;
border-top:0px;
font-family:Arial;
font-size:1em;
float:left;
width:250px;
}

#product {
background-image:url(images/product.gif);
background-repeat:no-repeat;
border:1px #000000 dotted;
height:90px;
padding-left:15px;
padding-top:10px;
width:615px;
}

#shopname {
color:#FFFFFF;
font-family:Arial;
font-size:2.5em;
margin:0 auto;
padding-top:10px;
text-align:left;
width:900px;
}

#topnavi {
color:#FFFFFF;
font-family:Arial;
font-size:0.9em;
margin:0 auto;
padding-top:10px;
text-align:left;
width:900px;
}

.headline {
border-bottom:1px #000000 dotted;
color:#006CFF;
font-family:Arial;
font-size:1.5em;
padding-left:10%;
}

.hereuare {
font-family:Arial;
font-size:1em;
margin-top:5px;
width:100%;
}

.navlinks {
color:#000000;
font-family:Arial;
font-size:0.9em;
line-height:1.5em;
list-style-type:square;
margin-top:35px;
}

.slogan {
color:#FFFFFF;
font-family:Arial;
font-size:0.5em;
}

.top {
background-image:url(images/top.gif);
background-repeat:repeat-x;
height:123px;
width:100%;
}

Hier nun auch: BSS v1

Danke an fricca!!
Mit Zitat antworten
  #6 (permalink)  
Alt 30.09.2008, 14:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von thebrains_de Beitrag anzeigen
Code:
<br>
  <div id="content">
   <div class="headline">Angebote</div>
   <br>
Mit Zitat antworten
  #7 (permalink)  
Alt 30.09.2008, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2008
Beiträge: 14
thebrains_de befindet sich auf einem aufstrebenden Ast
Standard

Wollte grad meinen Beitrag editieren...ist mir im letzten Moment eingefallen, dass ich den h1 vergessen hab^^

Jetzt aber:

style.css
Code:
a:link {
color:#006CFF;
}

a:visited {
color:#006CFF;
}

a:hover {
background-color:#006CFF;
color:#FFFFFF;
}

a:active {
color:#006CFF;
}

a.toplinks:link {
color:#FFFFFF;
text-decoration:underline;
}

a.toplinks:visited {
color:#FFFFFF;
text-decoration:underline;
}

a.toplinks:hover {
background-color:#006CFF;
color:#FFFFFF;
text-decoration:none;
}

a.toplinks:active {
color:#FFFFFF;
text-decoration:underline;
}

body {
background-color:#FFFFFF;
font-family:Arial;
font-size:1em;
margin:0px;
}

h1 {
border-bottom:1px #000000 dotted;
color:#006CFF;
font-family:Arial;
font-size:1.5em;
padding-left:10%;
margin-top:-5px;
}

#container {
border:0px #000000 dotted;
margin:0 auto;
text-align:left;
width:900px;
}

#content {
border:0px #000000 dotted;
float:right;
width:630px;
}

#footer {
clear:both;
color:#999999;
font-family:Arial;
font-size:0.7em;
margin:0 auto;
padding-top:15px;
text-align:center;
width:900px;
}

#navigation {
background-image:url(images/navigation.gif);
background-repeat:no-repeat;
border:1px #000000 dotted;
border-top:0px;
font-family:Arial;
font-size:1em;
float:left;
width:250px;
}

#product {
background-image:url(images/product.gif);
background-repeat:no-repeat;
border:1px #000000 dotted;
height:90px;
padding-left:15px;
padding-top:10px;
width:615px;
}

#shopname {
color:#FFFFFF;
font-family:Arial;
font-size:2.5em;
margin:0 auto;
padding-top:10px;
text-align:left;
width:900px;
}

#topnavi {
color:#FFFFFF;
font-family:Arial;
font-size:0.9em;
margin:0 auto;
padding-top:10px;
text-align:left;
width:900px;
}

.hereuare {
font-family:Arial;
font-size:1em;
margin-top:5px;
margin-bottom:15px;
width:100%;
}

.navlinks {
color:#000000;
font-family:Arial;
font-size:0.9em;
line-height:1.5em;
list-style-type:square;
margin-top:35px;
}

.slogan {
color:#FFFFFF;
font-family:Arial;
font-size:0.5em;
}

.top {
background-image:url(images/top.gif);
background-repeat:repeat-x;
height:123px;
width:100%;
}

index.php
Code:
<?php
$sitetitle = "BSS v1";
$slogan = "Verkaufen - mit Leichtigkeit!";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo $sitetitle; ?></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 <div class="top">
  <div id="shopname"><?php echo $sitetitle; ?><br><div class="slogan"><?php echo $slogan; ?></div></div>
  <div id="topnavi"><a href="link1" class="toplinks">Erster Link</a> | <a href="link2" class="toplinks">Zweiter Link</a> | <a href="link3" class="toplinks">Dritter Link</a> | <a href="link4" class="toplinks">Vierter Link</a></div>
 </div>
 <div id="container">
  <div class="hereuare"><b>Du bist hier:</b> <a href="index.php" target="_parent">Startseite</a></div>
  <div id="content">
   <h1>Angebote</h1>
   <div id="product">
	Hier kommt der Text etc.
   </div>
  </div>
  <div id="navigation">
   <ul class="navlinks">
	<li><a href="/1/erste_kategorie">Erste Kategorie</a></li>
    <li><a href="/2/zweite_kategorie">Zweite Kategorie</a></li>
	<li><a href="/3/dritte_kategorie">Dritte Kategorie</a></li>
	<li><a href="/4/vierte_kategorie">Vierte Kategorie</a></li>
   </ul>
  </div>
 </div>
 <div id="footer">&copy; 2008 tb - smk | <a href="imprint.php" target="_parent">Impressum</a> &bull; <a href="versand.php" target="_parent">Versand</a></div>
</body>
</html>
Mit Zitat antworten
  #8 (permalink)  
Alt 30.09.2008, 14:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Der Shopname ist die H1. Danach entsprechend der Überschriftenhierarchie. Außerdem hast du mehr als eine Navigation auf deiner Seite, aber nur eine Liste.
Du solltest dich dringend über "semantisches Markup" informieren, außerdem zu den bereits genannten Stichworten.
Es gibt viel mehr in HTML als nur Divs.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.10.2008, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2008
Beiträge: 14
thebrains_de befindet sich auf einem aufstrebenden Ast
Standard

Kleines Problem mit der Startseite!

Im Firefox ist die Navigation auf der gleichen Höhe wie die h2 Überschrift "Angebote".

Im IE6 und IE7 schmeißt er die nach unten.


Auf allen anderen Seiten (wenn man auf die Links klickt) bleibt die Navi dann doch oben. Wieso nicht auf der Startseite?

URL: BSS v1
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 02.10.2008, 14:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Weil es auf der Startseite andere Syntaxfehler gibt, als auf den anderen Seiten.
Validieren!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Schrift überlappt div (firefox) fabianbs CSS 0 07.09.2007 17:35
Div Höhe und FireFox cavebird CSS 3 09.01.2005 15:06
html tabelle in div steht im firefox rechts neben div Holger (HMR) CSS 2 08.01.2005 19:45
div in div firefox Holger (HMR) CSS 3 29.12.2004 22:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:43 Uhr.