04.04.2011, 15:01
|
|||
|
|||
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>
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 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? 
|
| Sponsored Links |
|
04.04.2011, 18:03
|
||||
|
||||
|
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
|
| Sponsored Links |
|
04.04.2011, 18:48
|
|||
|
|||
|
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>
|
|
04.04.2011, 19:39
|
|||
|
|||
|
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> Code:
#janik{
width: 300px;
height: 150px;
left: 0;
position: absolute;
}
#janik h1 {
font-family: Helvetica;
font-size: 9em;
|
|
05.04.2011, 07:00
|
||||
|
||||
|
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
|
|
05.04.2011, 19:37
|
|||
|
|||
|
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
|
 |
| Stichwörter |
| firefox, line-height, safari css |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 18:38 |
| Unterschiedliche Höhe trotz gleicher Angabe | BoFiaZ | CSS | 3 | 25.11.2009 16:27 |
| Divv 100% Höhe mit Hintergrundbild | Gsicht | CSS | 0 | 24.03.2009 08:30 |
| Tablle mit 100% Höhe in IE | Be1er0ph0r | CSS | 4 | 03.03.2007 16:15 |
| Inhaltsbereich in der Höhe dynamisch anpassen | jorainbo | CSS | 3 | 05.07.2004 09:39 |
Linear-Darstellung
