verschiedene Browser = verschiedene Ansichten :-( Nr.2

[Joachim]

Hallo (nochmal)

Schaut mal hier
http://www.buggy125.de/03.jpg

mit dem IE wird die Seite richtig angezeigt mit
FF und Opera fehlt der Bogen

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
versuch es mithilfe einer Tabelle. Hatte das gleiche Problem. Dein Bogen ist wahrscheinlich irgendwo weit Links aussen positioniert, womit  er nicht mehr angezeigt wird.
:::::::::::::::::::::::::::::::

wie geht das mit der Tabelle?
das bogen.gif kann ich nicht weiter verschieben weil sonst das design "zerhackt" ist

gruß jo

[Matze]

Hallo,

du solltest hier keinen neuen Thread öffnen, wenn es noch um das gleiche Thema geht.

Eine Verweis auf deine Datei "bogen.gif" habe ich im Quelltext nicht gefunden. Um welche Grafik geht es?

Noch was: Entfere doch mal den Deppenapostroph bei deinen Buggys mal per Suchen/Ersetzen. Das tut ja weh beim Lesen!

Mfg
matze

eine Bogen

Hallo (nochmal)

Schaut mal hier
http://www.buggy125.de/03.jpg

mit dem IE wird die Seite richtig angezeigt mit
FF und Opera fehlt der Bogen

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
versuch es mithilfe einer Tabelle. Hatte das gleiche Problem. Dein Bogen ist wahrscheinlich irgendwo weit Links aussen positioniert, womit  er nicht mehr angezeigt wird.
:::::::::::::::::::::::::::::::

wie geht das mit der Tabelle?
das bogen.gif kann ich nicht weiter verschieben weil sonst das design "zerhackt" ist

gruß jo

[Joachim]

.. es ist die head.gif
gruß jo

[Detlef G.]

Hallo Joachim

mit dem IE wird die Seite richtig angezeigt mit

Nein, nur so, wie du es erwartest.

FF und Opera fehlt der Bogen

Der Bogen ist da, allerdings 2000px oberhalb des Browserfensters.
 ~~~css #head h1

{margin-top:-2000px;}

Schmeiß das mal aus deinem CSS raus.  
Nicht wundern, lies einfach bei [Collapsing margins](http://www.w3.org/TR/CSS21/box.html#collapsing-margins) nach.  
  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!

[Joachim]

Hallo Joachim

mit dem IE wird die Seite richtig angezeigt mit

Nein, nur so, wie du es erwartest.

FF und Opera fehlt der Bogen

Der Bogen ist da, allerdings 2000px oberhalb des Browserfensters.

#head h1

{margin-top:-2000px;}

> Schmeiß das mal aus deinem CSS raus.  
> Nicht wundern, lies einfach bei [Collapsing margins](http://www.w3.org/TR/CSS21/box.html#collapsing-margins) nach.  
>   
>   
>   
> Auf Wiederlesen  
> Detlef  
>   
  
Hallo Detlef  
Ok das wars ganz rausschmeisen konnte ich es nicht da sonst keine Links (rechte Seite) angezeigt werden  
nun ist aber folgendes Problem:  
  
Die Suchwörter werden beim FF und Opera angezeigt.  
Schau mal selber  
http://www.buggy125.de/index.htm  
  
haste ne Idee?  
Gruß Joachim

[Detlef G.]

Hallo Joachim

Nicht wundern, lies einfach bei Collapsing margins nach.

Ok das wars ganz rausschmeisen konnte ich es nicht da sonst keine Links (rechte Seite) angezeigt werden

Links auf der rechten Seite?

Die Suchwörter werden beim FF und Opera angezeigt.

Du meinst den Suchmaschinenspam?

haste ne Idee?

Hast du das gelesen, was ich verlinkt habe?
Ist dir klar, dass dieser Effekt nur auftritt, wenn die margins aneinanderstoßen?
Was könnte man tun, damit der margin von #head (auch ein margin der Breite 0 ist einer) und der der darin enthaltenen h1 nicht mehr direkt aneinanderstoßen?

Auf Wiederlesen
Detlef

[joachim]

hi
die links (linke seite) sind da aber ich möchte auch gerne den suchmaschinenspam haben
verfluch.. ich blick da nicht durch *grrr

http://www.buggy125.de/bilderbuggys.htm
gruß jo

[Detlef G.]

Hallo Joachim

... aber ich möchte auch gerne den suchmaschinenspam haben

Hast du dir die Seite mal ohne CSS oder in einem Textbrowser angesehen?
Kannst du dir vorstellen, was ein Seitenbesucher mit einem Screenreader vorgelesen bekommt?

verfluch.. ich blick da nicht durch *grrr

Hast du dir überlegt, wie oder womit du den margin von #head von den margin der h1 voneinander trennen kannst, damit sie nicht direkt aneinanderstoßen?

Mir würde da ein border einfallen.

Es wäre auch möglich statt eines negativen margins eine entsprechende Positionierung zu verwenden.

Auf Wiederlesen
Detlef

[joachim]

hi
jetzt nach 2 stunden habe ich es aufgegeben ich kanns nicht!

die normalen .htm seiten bekomme ich ja noch hin aber hier ist es mir zu schwierig!
kannst du mir für nen weihnachtsbier :-)
die .css schreiben?!

gruß joachim

/* ----------------------------------------------------------------------------------- */
/* CSS-Datei für Buggy125 - Stand 17.08.2005 - letzte Änderungen durch D.Hüpenbecker */
/* ----------------------------------------------------------------------------------- */

/* Farben:
 Seitenhintergrund #AF200A
 Inhaltscontainer #191919
 Schrift #E2E2E2

/* Seitengerüst und Boxen ------------------------------------------------------------ */
/* Body und HTML -------------------------------------------------------------------- */
html, body
{ margin: 0;
   padding: 0;
 width: 100%;}

body
{  background: #AF200A;
 color: #E2E2E2;
 font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
 font-size: 11px;
 #behavior: url(/behavior/csshover.htc);
 height: 100%;}

/* Layoutboxen ------------------------------------------------------------------------ */

#head
{ background-image: url(gfx/head.gif);
 background-repeat: no-repeat;
 background-position: -2px 0px;
 height: 131px;}

#inhaltscontainer
{ position: absolute;
 top:130px;
 left:0px;
 background-color: #191919;
 background-image: url(gfx/content_hg.jpg);
 background-repeat: no-repeat;
 height: 75%;
 overflow:auto;
 padding: 0px;
 width: 100%;}
*html #inhaltscontainer{
 background-attachment: fixed;
}

#inhalt
{ padding-top: 10px;
 padding-left: 300px;
 padding-right: 100px;
 padding-bottom: 20px;}

#inhalt img
{border: 1px solid #3C3C3C;
display: block;
text-align:center;
margin: 10px;
margin-left:0;
padding: 1px;}

.cleaner
{
 clear: both;
 font-size:1px;
}

#inhalt img.rechtsbund
{ border:0px;
 padding:0px;
 margin: 10px;
 margin-right:0;
 margin-top: 0;
 margin-left: 18px;
 float: right;
 border: 1px solid #3C3C3C;
 padding: 1px;}
#inhalt img.linksbund
{ border:0px;
 padding:0px;
 margin: 10px;
 margin-left:0;
 margin-right: 18px;
 float: left;
 margin-top: 0;
 border: 1px solid #3C3C3C;
 padding: 1px;}

#inhalt ul
{padding:0; padding-left: 25px;margin:0px; list-style-type: square;}

#inhalt li a
{
 color: #E2E2E2;
 text-decoration: none;
 line-height:20px;
}

#inhalt li a:hover
{
 color: #E2E2FF;
 text-decoration: underline;
}

#inhalt a, #inhalt a:link, #inhalt a:visited
{
 color: #E2E2E2;
 text-decoration: none;
}
#inhalt a:hover
{
 color: #E2E2FF;
 text-decoration: underline;
}

#logobox
{ position: absolute;
 top: -10px;
 left:10px;
 z-index: 3;}
 *html #logobox
 {
  top: 10px;
 }
#logobox img
{ width: 182px;
 height: 190px;
 behavior: url(/behavior/pngbehavior.htc);}

/* Navigation ------------------------------------------------------------------------- */

ul#navigation
{
   position: absolute;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width:165px;
 top: 192px;
 z-index: 4;
}

#navigation li
{
 margin-top: 20px;
}

*html #navigation li
{
 margin-top: 10px;
}

a#startseite, a#forum, a#fotos, a#links, a#newsarchiv, a#impressum, a#downloads
{
 width: 165px;
 height: 22px;
 display: block;
}

a#startseite span, a#downloads span, a#forum span, a#fotos span, a#links span, a#newsarchiv span, a#impressum span
{
 margin-top: -2000px;
 display: none;
}

a#startseite
{
 background-image: url(gfx/button_start_normal.GIF);
}
a:hover#startseite
{
 background-image: url(gfx/button_start_hover.GIF);
}
a#downloads
{
 background-image: url(gfx/button_download_normal.GIF);
 background-position: +30px 0px;
}
a:hover#downloads
{
 background-image: url(gfx/button_download_hover.GIF);
}
a#forum
{
 background-image: url(gfx/button_forum_normal.GIF);
}
a:hover#forum
{
 background-image: url(gfx/button_forum_hover.GIF);
}
a#fotos
{
 background-image: url(gfx/button_foto_normal.GIF);

}
a:hover#fotos
{
 background-image: url(gfx/button_foto_hover.GIF);
}
a#links
{
 background-image: url(gfx/button_links_normal.GIF);
 background-position: 2px 0px;
}
a:hover#links
{
 background-image: url(gfx/button_links_hover.GIF);
}
a#newsarchiv
{
 background-image: url(gfx/button_news_normal.GIF);
 background-position: 4px 0px;
}
a:hover#newsarchiv
{
 background-image: url(gfx/button_news_hover.GIF);
}
a#impressum
{
 background-image: url(gfx/button_impressum_normal.GIF);
 background-position: 4px 0px;
}
a:hover#impressum
{
 background-image: url(gfx/button_impressum_hover.GIF);
}

li ul
{
 position: absolute;
 left: -1000px;
 list-style-type: none;
 margin: 0px;
 padding: 0;
}

li:hover ul
{
 left: auto;
 margin-left: 165px;
 margin-top: -20px;
}

*html li:hover ul
{
 margin-left: 160px;
}

li ul li
{
 font-weight: bold;
 display: block;
 width: 165px;

margin-top:0px !important;

letter-spacing: 1px;
 color: #F5F5F5;
}

.erster
{
 border-top: 1px solid #F5F5F5;
}
.letzter
{
 border-bottom: 1px solid #F5F5F5;
}

li ul li a
{
padding:10px;
padding-left: 15px;
 color: #F5F5F5;
 text-decoration: none;
 display: block;
 width: 100%;
 background-image: url(gfx/blind.gif);
 margin:0px !important;
}

li ul li a:hover
{
background-image: url(gfx/menue-pfeil.gif);
background-repeat: no-repeat;
background-position: 0px 9px;;
}
#direktlinks
{
 position: absolute;
 top: 20px;
 right: 20px;
 padding-top: 25px;
 padding-left: 30px;
}
#direktlinks select
{
 background-color: #E60E07;
 color: #fff;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11px;
 padding: 4px;
 border:0px solid #FFF;
 width: 160px;
}

/* Schriften ----------------------------------------------------------------------- */

p{
 letter-spacing: 1px;
 line-height: 18px;
 padding-left: 15px;
 font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
}

h1{
  font-size: 24px;
  font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
}

h2{
 font-size: 15px;
 font-weight: bold;
 font-family: "Trebuchet MS",Arial, Helvetica, sans-serif;
}

.bild
{
 float: left;
 text-align: center;
 display: inline;
 width: 122px;
 padding:0px;
 height: 160px;
}
.bild img
{
 margin:5px;
 padding:0;
}
.bild img a
{
 text-decoration: none;
 border: none;
}

.bild img a:hover
{
 text-decoration: underline;
 border: 1px solid #AF200A;
}

.bildbox
{
 width: 490px;}
}

#head h1 {margin-top: -500px;}

[Detlef G.]

Hallo Joachim

jetzt nach 2 stunden habe ich es aufgegeben ich kanns nicht!

Doch, du kannst es!

kannst du mir für nen weihnachtsbier :-)
die .css schreiben?!

Die komplette CSS-Datei werde ich dir nicht neu schreiben.

Das CSS hättest du hier nicht hereinkopieren brauchen. Es nützt überhaupt nichts ohne das HTML dazu und außerdem hast du einen Link auf deine Seite angegeben.

Was ich dir sagen wollte:

Wenn du auf den Suchmaschinenspam nicht verzichten willst, dann hast du zwei Möglichkeiten.
Entweder du trennst jeweils den margin-top von #head und von #head h1. Das kannst du durch einen Border erreichen:

  
#head {  
  background: #AF200A url(gfx/head.gif) no-repeat -2px 0px;  
  height: 131px;  
  border-top: 1px solid #AF200A;  
}  
  
#head h1 {  
  margin-top:-2000px;  
}  

Oder du verwendest dazu absolute Positionierung, wodurch keine "Collapsing margins" entstehen:

  
#head {  
  background: #AF200A url(gfx/head.gif) no-repeat -2px 0px;  
  height: 131px;  
}  
  
#head h1 {  
  position: absolute;  
  top:-2000px;  
}  

Außerdem:

body  
{  background: #AF200A;  
 ...  
 #behavior: url(/behavior/csshover.htc);

Hast du so eine Id? Auf jeden Fall ist es ein Fehler. Welche der Eigenschaften von welchem Browser dann noch berücksichtigt werden ist damit eher ein Zufall.

  
 height: 100%;}

*html #inhaltscontainer{ (*html ... kommt mehrmals vor)
Was soll das sein? Sieht wie ein verunglückter Star-HTML-Hack aus. Wenn er wirklich gebraucht wird, dann müsste es so aussehen:
* html #inhaltscontainer{

.bildbox  
{  
 width: 490px;}  
}  
#head h1 {margin-top: -500px;}

Eine der Klammern ist zuviel, dadurch wurde #head h1 nicht berücksichtigt. Es gehört hier sowieso nicht hin, die Eigenschaft wurde bereits weiter oben angegeben.

#behavior: url(...);
Das ist keine gültige CSS-Eigenschaft und hat nur dann einen Effekt, wenn im IE Javascript aktiviert ist. Wenn du dies verwendest, wäre es besser, es in eine separate CSS nur für den IE auszulagern, dann könnten dort auch die anderen Anpassungen hinein und auf den Star-HTML-Hack verzichtet werden.

Bitte strukturiere das CSS etwas übersichtlicher, setze die Klammern einheitlich, dann findet man sich besser damit zurecht und schreibt auch keine zuviel. Schreibe nicht denselben Selector ohne Grund mehrmals ins Stylesheet, sonst verlierst du ganz schnell den Überblick.
Validiere dein HTML und dein CSS.

Jetzt habe ich doch viel mehr geschrieben, als ich eigentlich wollte.

Auf Wiederlesen
Detlef

[Matze]

Hallo Joachim,

Du schreibst:

Die Suchwörter werden beim FF und Opera angezeigt.

Das ist ja auch völlig korrekt so – oder entspricht zumindest dem, was du »programmiert« hast. Du solltest nicht versuchen, irgendwelchen Text im Code zu haben und dann doch verstecken zu wollen. Suchmaschinen nehmen das heute sehr schnell übel, allen voran Google.

MfG
Mathias