zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden H1 - unterschiedliche höhe in Safari/Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2011, 16:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2011
Beiträge: 3
Janik befindet sich auf einem aufstrebenden Ast
Standard H1 - unterschiedliche höhe in Safari/Firefox

Hi,


Ich habe kürzlich ein Splashscreen erstell, welches durch zwei h1 bzw ein h2 tag dargestellt bzw. mit JS auch animiert wird und wie folgt aussieht:

Code:
<div id="logo">
    <div id="janik"><h1>Janik</h1></div>
    <div id="lipke"><h1>lipke</h1></div>
    <div id="tog_design"><h2>Photography and Webdesign</h2></div>
</div>
Das entsprechende Stylesheet sieht wie folgt aus:

Code:
#logo{
position: relative;
width: 570px;
margin-left: auto;
margin-right: auto;
/*margin-top: -150px;*/
cursor: pointer;
}

#janik, #lipke{
width: 300px;
height: 150px;
overflow: hidden;
left: 0;
position: absolute;
}

#janik h1, #lipke h1 {
padding-top: 12px;
line-height: 142px;
height: 142px;
font-family: Helvetica;
font-size: 142px;
letter-spacing: -8px;
color: #3a3e40;
}

#lipke{
width: 265px;
left: 295px;
}

#lipke h1 {
color: #4b7586;
}
In Safari wurde das ganze so weit korrekt dargestellt: Bildschirmfoto 2011-04-03 um 20.10.58.png

In Firefox wird der Text jedoch etwas weiter nach oben verschoben, wodurch der Beschnitt der beiden h1 tags durch width und overflow:hidden natürlich anders aussieht:

screen.jpg

Ich habe es schon mit einem reset Stylesheet ausprobiert bzw. die line-height definiert, was beides zu keinem Ergebnis geführt hat.
Im Prinzip sieht das ja wie ein zusätzliches padding seitens Safari aus, was sich durch explizites Ändern eines padding Wertes nicht beheben lies.
Jemand eine Idee?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.04.2011, 19:03
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

overflow:hidden ist fast nie eine gute Idee, weil das auch in modernen Browsern gerne zu Darstellungsproblemen führt.

Binde das alles als HG-Grafik ein und schieb das per Image Replacement (Gilder/Levin) über den Text.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2011, 19:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

du möchstest dir dein Eigenes Logobanner erstellen ohne Grafiken.

#logo {
................
}
#logo h1 {
.................
}
#logo h1 span {
.................
}
#logo h2 {
.................
}

<div id="logo">
<h1>Janik <span>lipke</span></h1>
<h2>Photography and Webdesign</h2>
</div>
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2011, 20:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2011
Beiträge: 3
Janik befindet sich auf einem aufstrebenden Ast
Standard

Das mit dem overflow:hidden mag sein, hat aber in diesem Fall aber leider nichts mit meinem Problem zu tun.

Ich hab den code jetzt mal auf folgendes minimiert:

Code:
<div id="janik"><h1>Janik lipke</h1></div>
Css:

Code:
#janik{

width: 300px;
height: 150px;
left: 0;
position: absolute;
}

#janik h1 {
font-family: Helvetica;
font-size: 9em;
Da besteht das Problem immer noch, dass sich im Safari Browser irgendein zusätzlicher Abstand oberhalb des H1 dazumogelt.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.04.2011, 08:00
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

wozu du position:absolute brauchst erschließt sich mir nicht.
Vielleicht mußt du für Safari die Zeilenhöhe anpassen.
Ein Link zum Problem wäre am Besten, damit man mit Firebug mal etwas rumtesten kann.

Wie schon gesagt mit Gilder/Levine hättest du das Problem erst gar nicht, bzw. wäre schon lange Geschichte.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 05.04.2011, 20:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2011
Beiträge: 3
Janik befindet sich auf einem aufstrebenden Ast
Standard

Das mit der position liegt daran, dass ich das ganze noch animieren möchte. Ich habs jetzt mal hochgeladen, das im Firefox ließ sich durch einen zusätzlichen Hack im css File korrigieren, wie ich aber gesehen habe, ist das eigetnlich nur im Mac Firefox notwendig.
Naja hier ist das ganze erst mal:

Link
Mit Zitat antworten
Antwort

Stichwörter
firefox, line-height, safari css

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
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe danoman CSS 5 24.04.2011 19:38
Unterschiedliche Höhe trotz gleicher Angabe BoFiaZ CSS 3 25.11.2009 17:27
Divv 100% Höhe mit Hintergrundbild Gsicht CSS 0 24.03.2009 09:30
Tablle mit 100% Höhe in IE Be1er0ph0r CSS 4 03.03.2007 17:15
Inhaltsbereich in der Höhe dynamisch anpassen jorainbo CSS 3 05.07.2004 10:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:30 Uhr.