✔ Problem mit Firefox

aleks · 20. Mai 2006

Weis nicht so recht wie das Problem beschreiben soll.
Also ich habe auf einer Seite CSS Bedingungen befiniert. Auf dieser Seite ist ein Formular eine Box mit runden ecken. In dem Formular gibt es viele checkboxen. So wenn ich jetzt eine Checkbox anklicke, dann wird sie nicht nur angeschickt sondern es wird auch ein Rahmen gemacht (von der Maus.) siehe Graphik unten. So jetzt noch ein bißchen Quellcode der dafür relevant ist:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>

<link rel="stylesheet" href='css/formular_box.css' type="text/css" type='text/opera;charset=utf-8'>
</head
<body>




  <h1>CSS-basierte Layouts</h1>
<p><h3>Fortsetzung der Registrierung</h3></p>
   <form action="kalender.php?SID=<?php echo session_id(); ?>" method="post" enctype="multipart/form-data">

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<div class="inhalt">
...
<p >
<span class="spalte1 ">
<input name="check1[1]" type="checkbox" value="abenteuer" <?php if (isset($_POST['check1']['1'])){echo 'checked="checked"' ; }  ?> /><label  for="abenteuer">abenteuerlustig</label></span>
<span class="spalte2">
<input name="check1[2]"type="checkbox" value="energiegeladen" <?php if (isset($_POST['check1']['2'])){echo 'checked="checked"' ; }  ?> /><label for="energiegeladen" >energiegeladen</label></span> 
<span class="spalte3">
<input name="check1[3]" type="checkbox" value="intelektuell" <?php if (isset($_POST['check1']['3'])){echo 'checked="checked"' ; }  ?> /><label for="intelektuell" >intellektuell</label></span> 
<span class="spalte4">
<input name="check1[4]" type="checkbox" value="spontan" <?php if (isset($_POST['check1']['4'])){echo 'checked="checked"' ; }  ?> /><label for="spontan" >spontan</label></span></p>
...usw.

So jetzt der Code der CSS-Datei:

Code:

******************************************************************************************************************************
/*KLASSEN für die runden ecken */
*******************************************************************************************************************************

.raised {
  background:transparent; 
  width:400px;
  
  
  }
.raised h1, .raised p {
  margin:0 10px;
  }
.raised h1 {
  font-size:2em; 
  color:#fff;
  }
.raised p {
  padding-bottom:0.5em;
  }
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {
  display:block; 
  overflow:hidden;
  font-size:1px;
  }
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {
  height:1px; 
  }
.raised .b2 {
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #eee;
  }
.raised .b3 {
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #ddd;
  }
.raised .b4 {
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #aaa;
  }
.raised .b4b {
  background:#ccc; 
  border-left:1px solid #eee; 
  border-right:1px solid #999;
  }
.raised .b3b {
  background:#ccc; 
  border-left:1px solid #ddd; 
  border-right:1px solid #999;
  }
.raised .b2b {
  background:#ccc; 
  border-left:1px solid #aaa; 
  border-right:1px solid #999;
  }
.raised .b1 {
  margin:0 5px; 
  background:#fff;
  }
.raised .b2, .raised .b2b {
  margin:0 3px; 
  border-width:0 2px;
  }
.raised .b3, .raised .b3b {
  margin:0 2px;
  }
.raised .b4, .raised .b4b {
  height:2px; margin:0 1px;
  }
.raised .b1b {
  margin:0 5px; background:#999;
  }
.raised .boxcontent {
  display:block;  
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #999;
  width: 600px;
  }
...
**********************************************************************************
/*Eigenschaften von Input und Label*/
**********************************************************************************

.spalte1 {
    position:absolute;
    left:20em;
   
  } 

span.spalte1 input 
  				{
  				    position:absolute;left:16em;
					
					
				}  



span.spalte1 label 
			  {
				position:absolute;
                left:22em;
				
			  }


.spalte2 {
    position:absolute;
    left:30em;
  }
  

span.spalte2 input
					{
						position:absolute;
    				    left:-3em;
					}

span.spalte2 label 
			  {
				position:absolute;
                left:3em;
              }


.spalte3  {
    position:absolute;
    left:39em;
  }


 span.spalte3 input 
					{
						position:absolute;
    				    left:-3em;
					}
					

span.spalte3 label 
			  {
				position:absolute;
                left:3em;
              }

.spalte4 {
    position:absolute;
    left:48em;
    
  }
  

  span.spalte4 input 
					{
						position:absolute;
    				    left:-3em;
					}
					

span.spalte4 label 
			  {
				position:absolute;
                left:3em;   
              }
#button {
    margin-left:30em;
  }

So hat einer einen Lösungsvorschlag bzw eine Idee woran das beim Firefox liegen könnte?
Über Tipps würde ich mich wahnsinnig freuen.
Gruß
aleks

Maik · 21. Mai 2006

Diese gepunktete Umrandung stellt den aktuellen Fokus dar und ist Bestandteil der Benutzerführung, sie erscheint nämlich auch beim Klicken von Hyperlinks und ist somit eine "normale" Browsereigenschaft.

Um sie dennoch zu deaktivieren, wird etwas Javascript benötigt:

HTML:

<input type="checkbox" onfocus="this.blur()">

Da das nichts mit CSS zu tun hat, wird der Thread ins JS-Board verschoben.

aleks · 21. Mai 2006

Danke michaelsinterface, ist ja super ist ok.
Ich kenne mich mit JavaScript überhaupt nicht aus deshalb meine Frage es dort villeicht eine Möglichkeit, daß ich diesen Befehl nicht in jeden input Tag(vom Typ chechbox) einzeln schreiben muß, sondern der Seitenweit gilt?
Nicht, daß das unmöglich für mich wäre bloß wäre bestimmt eleganter.
Also hat jemand eine Idee?
Gruß aleks

P.S. Mir das bitte das nicht übel das ich keine Ahnung in JavaScript habe!

Maik · 21. Mai 2006

Auch das ist möglich. Die Checkboxen werden über das name-Attribut angesprochen, also mit der getElementsByName()-Methode auf sie zugegriffen. Hierbei erhalten alle Checkboxen den Namen check1[]. Die von dir verwendete Variable in der eckigen Klammer wird ausgelassen, da du sie ja per PHP und if (isset($_POST['check1']['Variable'])) übergibst. Die Nummerierung beginnt dann aber bei "0".

Das Script wird im HEAD-Bereich des HTML-Dokuments eingefügt.

Code:

<script type="text/javascript">
function BlurLinks(){

checkBox=document.getElementsByName('check1[]');
for(i=0;i<checkBox.length;i++){
checkBox[i].onfocus=new Function("this.blur()");
}
}

onload=BlurLinks;
</script>

Der geänderte HTML-Quelltext sieht dann so aus:

HTML:

<p>
<span class="spalte1">
<input name="check1[]" type="checkbox" value="abenteuer" <?php if (isset($_POST['check1']['0'])){echo 'checked=\"checked\"' ; }  ?> /><label  for="abenteuer">abenteuerlustig</label></span>
<span class="spalte2">
<input name="check1[]" type="checkbox" value="energiegeladen" <?php if (isset($_POST['check1']['1'])){echo 'checked=\"checked\"' ; }  ?> /><label for="energiegeladen" >energiegeladen</label></span>
<span class="spalte3">
<input name="check1[]" type="checkbox" value="intelektuell" <?php if (isset($_POST['check1']['2'])){echo 'checked="checked"' ; }  ?> /><label for="intelektuell" >intellektuell</label></span>
<span class="spalte4">
<input name="check1[]" type="checkbox" value="spontan" <?php if (isset($_POST['check1']['3'])){echo 'checked="checked"' ; }  ?> /><label for="spontan" >spontan</label></span>
</p>

aleks · 21. Mai 2006

Hallo michaelsinterface,
danke für deinen Vorschlag.Der Rahmen ist weg! Bloß wenn ich das Übernehme pasiert etwas eigenartiges: Angenommen ich klicke die Ersten drei Checkbox (senkrecht an), dann zeigt er mir beim nächsten zeigen des Formulars die erst drei wagerechten Checkboxen als aktiv an. Wenn ich stattdessen aber wagerechte checkboxen aktivere so werden sie bei nächsten zeigen des Formulars richtig angezeigt.
Wie ist das zu verstehen?

Und was kann ich da machen?

Gruß aleks

Maik · 21. Mai 2006

Kann es sein, daß die waage- und senkrechten Checkboxen nicht den gleichen Namen besitzen?

Vielleicht solltest du doch den Event-Handler onfocus="this.blur()" einsetzen.

aleks · 21. Mai 2006

Ne die haben alle den selben Namen check1[]. Sieht ja so aus als ob das doch nicht so einfach ist, deswegen werde onfocus="this.blur()" einsetzen. Trotzdem komisch.

Gruß aleks

Sven Mintel · 21. Mai 2006

probiers mal hiermit:

Code:

<style type="text/css">
<!--
input[type="checkbox"]{
  -moz-appearance: none !important;
}
-->
</style>

✔ Problem mit Firefox

aleks

Mitglied

Anhänge

Maik

aleks

Mitglied

Maik

aleks

Mitglied

Maik

aleks

Mitglied

Sven Mintel

Mitglied

Neue Beiträge