• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS-Rahmen mit Firefox

Status
Für weitere Antworten geschlossen.
A

Anonymous

Neues Mitglied
Hallo zusammen

Ich habe ein kleines Problem. Und zwar will ich meine neue Page sowoh für Firefox als auch den Internet Explorer optimieren. Allerdings werden div-Rahmen, die ich im Quellcode angegeben habe, im Firefox nicht angezeigt. Wie kann ich die Rahmen auch im Firefox darstellen lassen?

Vielen Dank
 
Werbung:
Wie hast Du denn die Div-Border definiert? Es wäre hilfreich, Deine Umsetzung zu kennen, dann lässt sich das Problem auch ergründen.

Allgemein kann man sagen, dass bei Gecko-Optimierung immer auch auf dem Opera getestet werden sollte, da dieser u.a. mit den default-margins und paddings anders verfährt als es Geckos tun.

Mit absolut standardkonfomen Code wird der IE aber wohl nie so richtig zurecht kommen, dafür ist der Hersteller zu ignorant. Wenn Du das fehlerhafte Box-Model des IE zu stark beanspruchst, dann wird eine Browserweiche notwendig. CSS-Hacks (also die Mäglichkeit, aufgrund von Fehlern in Browsern Teile des CSS-Codes zu verstecken) und Javascript sind dafür weniger zu empfehlen. Optimal wäre eine serverseitige Browserweiche, beispielsweise ein paar Zeilen PHP, welche für den IE ein anderes bzw. ein zusätzliches Stylesheet laden, das die Teile des CSS überschreibt, welche der IE nicht auf die Reihe bekommt.

Poste doch bitte einen Link oder ein Snippet, dass man sich das ansehen kann.
 
Werbung:
Code: 
 div {border:1px solid #aaaaaa;}
 div#a
 {
  position:absolute;
  top:0px; left:100px;
  width:850px; height:100px;
  background-color: #FFFFFF;
 }
 #b
 {
  position:absolute;
  top:101px; left:100px;
  width:850px; height:20px;
  background-color: #CCFF99;
 }
 #c
  {
	position:absolute;
	top:122px;
	left:100px;
	width:260px;
	height:25px;
  bgc
; 		color: #33CC99;
	background-color: #00FFFF;
  }
  #d
  {
	position:absolute;
	top:122px;
	left:359px;
	width:591px;
	height:27px;
	background-color: #33CC33;
	}
	#e
	{
	position:absolute;
	top:148px;
	left:100px;
	width:850px;
	height:22px;
	background-color: #006666;
	background-image:   url(Home_Bilder/Background.jpg);
	}
	#f
	{
	position:absolute;
	top:148px;
	left:100px;
	width:65px;
	height:22px;
	border:0px;
	}
	#g
	{
	position:absolute;
	top:148px;
	left:174px;
	height:22px;
	border:0px:
	}
	#h
	{
	position:absolute;
	top:148px;
	left:249px;
	height:22px;
	border:0px;
	}
	#i
	{
	position:absolute;
	top:148px;
	left:345px;
	height:22px;
	border:0px;
	}
	#j
	{
	position:absolute;
	top:148px;
	left:425px;
	height:22px;
	border:0px;
	}
	#k
	{
	position:absolute;
	top:148px;
	left:550px;
	height:22px;
	border:0px;
	}
	#l
	{
	position:absolute;
	top:148px;
	left:600px;
	height:22px;
	border:0px;
	}
	#m
	{
	position:absolute;
	top:148px;
	left:665px;
	height:22px;
	border:0px;
	}
	#n
	{
	position:absolute;
	top:148px;
	left:726px;
	height:22px;
	border:0px;
	}
	#o
	{
	position:absolute;
	top:148px;
	left:823px;
	height:22px;
	border:0px;
	}




</style>
<title>Politik Schweiz</title>
<script language="JavaScript" type="text/JavaScript">
<!--


function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

Wobei zu beachten ist, dass der Rahmen natürlich nur dort erscheinen soll, wo nicht border:0px angegeben ist. Das müsste, denke ich, beispielsweise bei a,b,c,d und e der Fall sein.
 
Das Markup im body wäre besser als die JS-Skripts des Headers ;) Wie soll man das sonst testen?

und was ist mit diesen Zeilen in deinem CSS?

bgc
; color: #33CC99;
Zum Vergrößern anklicken....

Angenommen das Markup besteht nur aus aneinandergereihten absolut positionierten divs a-z, dann sieht das wenn die obigen Zeilen aus dem CSS raus sind auf IE 6, FF und Opera 8 gleich aus.
 
hmm ja diese zeilen sind überflüssig

hat sich allerdings nichts verändert als ich die wegnahm

ach ja... ich habe kein Problem mit dem IE, der stellt es richtig dar, der FF macht Probleme.
 
Werbung:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;  charset=ISO-8859-1" />
<title></title>
  <style type="text/css">
  <!--
  div { border: 1px solid #AAAAAA; position: absolute; }
  #b { width: 850px; background: #CCFF99; top: 101px; left: 100px; height: 20px; }
  #c { width: 260px; background: #00FFFF; position: absolute; top: 122px; left: 100px; height: 25px; }
  #d { width: 591px; background: #33CC33; position: absolute; top: 122px; left: 359px; height: 27px; }
  #e { width: 850px; background: #006666 url(Home_Bilder/Background.jpg); position: absolute; top: 148px; left: 100px; height: 22px; }
  #f { width: 65px; border: 0px; position: absolute; top: 148px; left: 100px; height: 22px; }
  #g { border: 0; position: absolute; top: 148px; left: 174px; height: 22px; }
  #h { border: 0; position: absolute; top: 148px; left: 249px; height: 22px; }
  #i { border: 0; position: absolute; top: 148px; left: 345px; height: 22px; }
  #j { border: 0; position: absolute; top: 148px; left: 425px; height: 22px; }
  #k { border: 0; position: absolute; top: 148px; left: 550px; height: 22px; }
  #l { border: 0; position: absolute; top: 148px; left: 600px; height: 22px; }
  #m { border: 0; position: absolute; top: 148px; left: 665px; height: 22px; }
  #n { border: 0; position: absolute; top: 148px; left: 726px; height: 22px; }
  #o { border: 0; position: absolute; top: 148px; left: 823px; height: 22px; }
  div#a { width: 850px; background: #FFFFFF; position: absolute; top: 0px; left: 100px; height: 100px; }
  -->
  </style>
</head>
<body>
<div id="a"></div><div id="b"></div>
<div id="c"></div><div id="d"></div>
<div id="e"></div><div id="f"></div>
<div id="g"></div><div id="h"></div>
<div id="i"></div><div id="j"></div>
<div id="k"></div><div id="l"></div>
<div id="m"></div><div id="n"></div>
<div id="o"></div>
</body>
</html>

Also das hier sieht definitiv auf dem Opera 8, auf IE 6 und FF 1.0.6 gleich aus, natürlich habe ich die Hintergrundgrafik nicht, aber das ist egal. Welche Rahmen verschwinden bei Dir denn? Liegt es am Inhalt der Divs? Link wäre nicht schlecht.
 
stefan, wenn der gepostete Quelltext von dir dem aus deinem Dokument entspricht, dann sollte es eigentlich gehen. (Ansonsten die Variante von "Chilla" benutzen)

Ansonsten kann es eigentlich nur ein Fehler im Quelltext sein.
 
Werbung:
border: 0; = falsch

entweder border:none; oder border:typ breite farbe; , beispiel: border:solid 2px #345;

background: #CCFF99; <-- weiß ich nicht ob man da eine einzel angabe machen darf.

<--- Moved: CSS --->
 
border: 0; = falsch
Zum Vergrößern anklicken....
Nö, stimmt nicht => siehe CSS-Validator Du kannst border:0 genauso verwenden wie border:none. Ersteres ist aber kürzer, und wenn man auf jedes Byte schaut, ist diese Methode vorzuziehen. border:0px so wie er es hatte ist überflüssig, 0 braucht natürlich keine Einheit.
background: #CCFF99; <-- weiß ich nicht ob man da eine einzel angabe machen darf.
Zum Vergrößern anklicken....
Darf man. Ist auch kürzer als background-color. Siehe shorthand-properties.
 
hmm komisch, bei mir tuts wirklich nicht

hier der Link

Vielen Dank

P.S. ich kapier den Unterschied zwischen chillas und meiner version nicht ganz?!

ach ja, die Laufzeile ist nur so ein Versuch, das Geschriebene ist reine Fantasie und die Seite ist natürlich noch nicht fertig
 
Werbung:
Ach du meine Güte.
Drei Sachen.
Erstens: Der Fehler liegt eindeutig darin, dass Du falsch kommentiert hast.
Code:
Im CSS-Block kommentiert man nicht mit sondern mit /* */

Zweitens: raus mit diesen Font-Tags. Der Font-Tag ist veraltet (deprecated). Mach das mit CSS. Die Schrift solltest Du als "Sans Serif" und nicht "Microsoft Sans Serif" definieren. Validiere deine Seite mit dem Validator. (Link für CSS-Validator oberhalb).

3. Pack einen Doctype-Header rein, damit das ganze im standardkonformen Modus läuft und nicht im Quirks-Mode.
P.S. ich kapier den Unterschied zwischen chillas und meiner version nicht ganz?!
Zum Vergrößern anklicken....
Es gibt keinen. (bis auf das Doctype und das Fehlen der Kommentare)
 
Vielen Dank, das mit dem falsch kommentieren habe ich nicht gewusst...beim Dreamweaver kann man ja einfach "mal irgendwo draufklicken"... :)

danke für die tipps, werde ich machen, bin allerdings nun eine Weile abwesend :|
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben