Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Prob: Differenzen Opera und Firefox

Antwort erstellen

Prob: Differenzen Opera und Firefox

Beitragvon finalr » 25.03.2007, 21:34

Hi,

Ich hab ein neues Problem und zwar habe ich differenzen, wenn ich die Seite mit Opera öffne! In Firefox sieht alles gut aus! Desweiteren wenn ich firefox minimiere verkleinern sich die dev`s mit, sodass man nichts mehr erkennen kann!

hier mal die bilder:

so sollte die seite eigentlich aussehen(in firefox funzt es ja):
http://www.piccube.de/bilder_speicher/uploads/picCube_0d3f1d03d5.jpg
so sieht es mit den firefox minimiert aus:
http://www.piccube.de/bilder_speicher/uploads/picCube_b7f646c577.jpg
und so sieht es mit opera aus:
http://www.piccube.de/bilder_speicher/uploads/picCube_3913290a2b.jpg

wenn ihr den code auch noch braucht, dann werde ich den auch noch posten!
wäre schön, wenn ihr mir helfen könntet!

Gruss Daniel
finalr
neu hier
 
Beiträge: 6
Registriert: 24.03.2007, 21:04
Nach oben

Beitragvon Executor » 25.03.2007, 23:22

also ich würd dir gerne helfen, aber ohne code wird das schwer, bitte poste html und css. ich würde auf anhieb sagen es liegt an max-width oder margin oder so, aber plz poste erstmal^^

Executor
Reise, Reise
Amerika
Mutter
Mein Teil
Stein um Stein
Tier
Engel
Ich will
Nebel
Executor
ist häufig da
 
Beiträge: 156
Registriert: 08.08.2006, 01:48
Wohnort: Richtplatz
Nach oben

Beitragvon finalr » 26.03.2007, 15:07

hier der code:

HMPF, der html wird net richtig dargestellt z.b. "a-href" stellt er nicht richtig dar!

css:
Code: Alles auswählen
<style>
body { margin:0; padding:0; height:800px; }

#a3 { position:absolute; border:1px solid #888; top:10px; left:200px; bottom:10px; right:233px;
      z-index:3; background-color:grey; }
#a4 { position:absolute; border:1px solid #888; top:10px; left:10px; bottom:710px; right:11px;
      z-index:1; background-color:lightgrey; }
#a5 { position:absolute; border:1px solid #888; top:105px; left:10px; bottom:670px; right:10px;
      z-index:2; background-color:lightgrey; }
#a6 { position:absolute; border:1px solid #888; top:143px; left:10px; bottom:10px; right:11px;
      background-color:lightgrey; }

#a5 {
width:822px;
font-size:0.85em;
padding-bottom:0px;
z-index:1;
}

#a5 ul {
padding:0;
margin:0;
list-style-type:none;
z-index:1;
}
#a5 ul ul {
width:102px;
z-index:1;
}

#a5 li {
float:left;
width:102px;
position:relative;
z-index:1;
}

#a5 a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:white;
width:91px;
height:30px;
border:0px;
border-width:1px 1px 0 0;
background:green;
padding-left:10px;
line-height:29px;
z-index:1;
}


#a5 ul ul a.drop, .menu ul ul a.drop:visited {
background:white;
}

#a5 ul ul a.drop:hover{
background:white;
}

#a5 ul ul :hover > a.drop {
background:white;
}

#a5 ul ul ul a, .menu ul ul ul a:visited {
background:white;
}

#a5 ul ul ul a:hover {
background:white;
}

#a5 ul ul ul :hover > a {
background:white;
}

#a5 ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:100px;
z-index:1;
}

#a5 ul ul ul{
left:100px;
top:0;
width:100px;
z-index:1;
}

#a5 ul ul ul.left {
left:-100px;
z-index:1;
}

#a5 table {position:absolute; top:0; left:0; z-index:1;}

#a5 ul ul a, .menu ul ul a:visited {
background:green;
color:white;
height:auto;
line-height:1em;
padding:5px 10px;
width:79px;
z-index:1;
}


#a5 a:hover, .menu ul ul a:hover{
color:white;
background:#333333;
}

#a5 :hover > a, .menu ul ul :hover > a {
color:white;
background:#333333;
}


#a5 ul li:hover ul,
#a5 ul a:hover ul{
visibility:visible;
z-index:1;
}

#a5 ul :hover ul ul{
visibility:hidden;
z-index:1;
}

#a5 ul :hover ul :hover ul ul{
visibility:hidden;
z-index:1;
}

#a5 ul :hover ul :hover ul{
visibility:visible;
z-index:1;
}

#a5 ul :hover ul :hover ul :hover ul {
visibility:visible;
z-index:1;
}
</style>


html:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>

<div id="a3">

  <div id="a4">a4

  </div>


  <div id="a5">

  <table border='0' align='left>
  <tr><td align='center'></td></tr>
  <tr><td align='center'>
  <ul>
  <li><a href='index.html'>Home</a>
  <table><tr><td>
    <ul>
    <table><tr><td>           
    </td></tr></table></a>
    </li>
    </ul>
  </td></tr></table></a>
  </li>


  <li><a href='test.html'>Test</a>
  <table><tr><td>
    <ul>
    <table><tr><td>           
    </td></tr></table></a>
    </li>
    </ul>
  </td></tr></table></a>
  </li>

  <li><a href='beispiele.html'>Beispiele</a>
  <table><tr><td>
    <ul>
    </ul>
  </td></tr></table></a>
  </li>

  <li><a href='anfahrt.html'>Anfahrt</a>
  <table><tr><td>
    <ul>   
    </ul>
  </td></tr></table></a>
  </li>

  <li><a href='index.html'>Kontakt</a>
  <table><tr><td>
  </td></tr></table></a>
  </li>

  <li><a href='index.php'>bla</a>
  <table><tr><td>
  </td></tr></table></a>
  </li>

  <li><a href='index.html'>News</a>
  <table><tr><td>
  </td></tr></table></a>
  </li>

  <li><a href='index.html'>Feedback</a>
  <table><tr><td>
  </td></tr></table></a>
  </li>
  </ul>
  </table>
 
  </div>
<div id="a6">a6</div>
</div>
</body></html>
Zuletzt geändert von finalr am 26.03.2007, 23:39, insgesamt 1-mal geändert.
finalr
neu hier
 
Beiträge: 6
Registriert: 24.03.2007, 21:04
Nach oben

Beitragvon Laus » 26.03.2007, 17:59

So kann man mit dem Code leider nichts anfangen :(
Mache einen Haken bei HTML in diesem Beitrag deaktivieren dann wird der HTML Code richtig angezeigt. Noch besser wäre ein Online Beispiel.
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon finalr » 26.03.2007, 23:40

so, ich hab's mal editiert...
hab leider noch kein webspace sonst würde ich es irgendwo noch hochladen!

gruss daniel
finalr
neu hier
 
Beiträge: 6
Registriert: 24.03.2007, 21:04
Nach oben

Beitragvon Laus » 27.03.2007, 10:03

Hab dir das ganze mal etwas vereinfacht.
Ich weis ja nicht wozu du diese Tabelle in der Navi brauchst, hab sie mal rausgenommen.
Genauso die Listenpunkte als Untermenüs, wenn sie nicht gebraucht werden raus damit.(hab ich auch mal gemacht)
Dann deine absolute Positionierung von der die ganzen Probleme eigentlich herrühren hab ich auch raus genommen.
Ist eigentlich nicht viel von deinem Code Übrig geblieben hat aber die gleiche Funktion die dein alter Code bis jetzt hatte, macht weniger Probleme und läuft in fast allen Browsern.

Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>position</title>

<style type="text/css">
<!--
html, body {
   margin:0;
         padding:0;
         height:100%;
         text-align:center;/*für IE*/
}

#a3 {
   margin: 10px auto;
   width:880px;
   border:1px solid #888;
         background-color:#808080;
         text-align:left;/*aufheben descenter für IE*/
}
#a4 {
   border:1px solid #888;
   margin:10px;
   height:90px;
          background-color:808080;
}
#a5 {
   margin:0px auto;
   width:822px;
   height:30px;
   font-size:0.85em;
         background-color:808080;
         clear:both;
}
#a6 {
   border:1px solid #888;
   margin:10px;
         background-color:#d3d3d3;
         min-height:500px;
}

#a5 ul {
   padding:0;
   margin:0;
   list-style-type:none;
   z-index:1;
}

#a5 li {
   float:left;
   width:102px;
   position:relative;
   z-index:1;
}

#a5 a, .menu a:visited {
   display:block;
   font-size:11px;
   text-decoration:none;
   color:white;
   width:91px;
   height:30px;
   border:0px;
   border-width:1px 1px 0 0;
   background:green;
   padding-left:10px;
   line-height:29px;
   z-index:1;
}

#a5 a:hover, {
   color:white;
   background:#333333;
}

#a5 :hover > a, .menu ul ul :hover > a {
   color:white;
   background:#333333;
}
-->
</style>
<body>
<div id="a3">

    <div id="a4">a4</div>

      <div id="a5">

     <ul>
        <li><a href='index.html'>Home</a></li>
        <li><a href='test.html'>Test</a></li>
        <li><a href='beispiele.html'>Beispiele</a></li>
        <li><a href='anfahrt.html'>Anfahrt</a></li>
        <li><a href='index.html'>Kontakt</a></li>
        <li><a href='index.php'>bla</a></li>
        <li><a href='index.html'>News</a></li>
      <li><a href='index.html'>Feedback</a></li>
     </ul>

       </div>
    <div id="a6">a6</div>
</div>
</body>
</html>
Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon finalr » 29.03.2007, 19:29

Hi,

Danke für die Antwort, Laus! Funktioniert wunderbar.
Nur die Schrift der Buttons ist nicht mehr mittag, wozu ich die Tabellen hatte! Habe schon viel probiert, aber bekomme die nicht mehr "center"!

Gruss Daniel
finalr
neu hier
 
Beiträge: 6
Registriert: 24.03.2007, 21:04
Nach oben

Beitragvon Laus » 29.03.2007, 21:18

Hallo

Ein
Code: Alles auswählen
#a5 a, .menu a:visited {
   text-align:center;
   display:block;
   font-size:11px;
   text-decoration:none;
   color:white;
   width:91px;
   height:30px;
   usw......

}

dürfte hier für Abhilfe sorgen.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Prob: Differenzen Opera und Firefox"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de