zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden text-align wird bei float von FF ignoriert?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.06.2008, 18:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2008
Ort: Hannover
Beiträge: 31
burnersk befindet sich auf einem aufstrebenden Ast
Standard text-align wird bei float von FF ignoriert?

Hallo,

ich habe ein kleines CSS Problem mit text-align: right und float: right.

Im Firefox 2.0.0.14 wird die Box zwar nach Rechts ausgerichtet, aber der Text bleibt weiter linksbündig.
Der Internet Explodierer stellt das Problem merkwürdiger Weise korrekt dar. Box und Text sind rechtsbündig.

Code:
div#footer div.footerContainer {
  float: left;
  text-align: left;
}
div#footer div.footerCopyright {
  float: right;
  text-align: right;
}
Code:
<div class="footerContainer">
  <ul>
    <ul class="section"><h4>Homepage</h4>
      <li><a href="">Startseite</a></li>
      <li><a href="">&Uuml;ber uns</a></li>
      <li><a href="">Impressum</a></li>
    </ul>
    <ul class="section"><h4>Forum</h4>
      <li><a href="">Startseite</a></li>
      <li><a href="">Anmeldung</a></li>
      <li><a href="">Registrierung</a></li>
    </ul>
  </ul>
</div>
<div class="footerCopyright">
  <p>
    NAME, PROJEKT, STRASSE HAUSNUMEMR, ISOLAND-PLZ WOHNORT<br />
    Tel.: TELEFON | Fax: TELEFAX<br />
    E-Mail: EMAIL | Internet: INTERNET
  </p>
  <p>
    COPYRIGHT<br />
    INFORMATIONS
  </p>
</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.06.2008, 19:07
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Wo ist div#footer im Quelltext?

Merke: Gesamten Quelltext einfügen und idealerweise ein Onlinebeispiel, das den Fehler zeigt, bereitstellen.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.06.2008, 19:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2008
Ort: Hannover
Beiträge: 31
burnersk befindet sich auf einem aufstrebenden Ast
Standard Nachtrag Quellcode

Zitat:
Zitat von gato Beitrag anzeigen
Gesamten Quelltext einfügen
Code:
/**
 * @copyright (c) 2008, Sören Kornetzki. All rights reserved.
 * @license Private License
 * @version 1.0.0.alpha.1
 */
html, body {
  color: #fff;
  background-color: #333;
}

div#page {
  position: absolute;
  width: 900px;
  left: 50%;
  margin-left: -450px;
  border: 1px solid #292929;
}

div#header {
  height: 178px;
  width: 100%;
  background-image: url(../images/headBackground.png);
  background-position: left 1px;
  background-repeat: repeat-x;
  background-color: #1d1d1d;
}
div#header div#powerButton {
  float: left;
  height: 177px;
  width: 237px;
  background-image: url(../images/headPowerButton.png);
  background-position: left -1px;
  background-repeat: no-repeat;
  overflow: hidden;
}
div#header div#logo {
  float: right;
  height: 177px;
  width: 662px;
  background-image: url(../images/headLogo.png);
  background-position: right top;
  background-repeat: no-repeat;
  overflow: hidden;
}
div#header div#logo div.logoContainer {
  padding: 14px;
  overflow: visible;
}
div#header div#mainMenu {
  height: 26px;
  width: 100%;
  background-color: #292929;
}

div#main {
  padding: 6px;
}

div#footer {
  float: left;
  padding: 4px;
  background-color: #474747;
  color: #333;
  font-size: 85%;
}
div#footer a {
  color: #222;
  text-decoration: none;
}
div#footer a:hover {
  text-decoration: underline;
}
div#footer div.footerContainer {
  float: left;
  text-align: left;
}
div#footer div.footerCopyright {
  float: right;
  text-align: right;
}
div#footer ul li {
  font-size: 100%;
}
div#footer ul.section {
  float: left;
  padding: 7px;
  padding-top: 0;
}

div.clearFloat {
  clear: both;
}
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!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"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
      xml:lang="en">
  <head>
    <title>dev5-media.de</title>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <!-- reset style -->
    <link rel="stylesheet" type="text/css" href="style/reset.css" media="all" />
    
    <!-- dev5-media.de styles -->
    <link rel="stylesheet" type="text/css" href="style/global.css" media="all" />
    <link rel="stylesheet" type="text/css" href="style/screen.css" media="all" />
  </head>
  <body>
    <div id="page">
      <a id="top"></a>

      <div id="header" class="powerButton">
        <div id="powerButton"></div>
        <div id="logo">
          <div class="logoContainer">logoContainer</div>
        </div>
      </div>
      <div class="clearFloat">

      <div id="main">
        <div class="mainHeadline">
          <div class="headlineContainer">headlineContainer</div>
        </div>
        
        <div class="content">content</div>
      </div>
      
      <div id="footer">
        <div class="footerContainer">
          <ul>
            <ul class="section"><h4>Homepage</h4>
              <li><a href="">Startseite</a></li>
              <li><a href="">&Uuml;ber dev5-media</a></li>
              <li><a href="">Impressum</a></li>
            </ul>
            <ul class="section"><h4>Forum</h4>
              <li><a href="">Startseite</a></li>
              <li><a href="">Anmeldung</a></li>
              <li><a href="">Registrierung</a></li>
            </ul>
          </ul>
        </div>
        <div class="footerCopyright">
          <p>
            Sören Kornetzki, Projekt “dev5-media“, Warstr, 3, D-30167 Hannover<br />
            Tel.: +49 (0) 1803 / 663388 - 05465* | Fax: +49 (0) 1803 / 663388 - 05462* (*: 0,09 € / Minute)<br />
            E-Mail: allgemein@dev5-media.de | Internet: http://dev5-media.de/
          </p>
          <p>
            Entwicklung und Design: © 2008 by Sören Kornetzki. Alle Rechte vorbehalten.<br />
            Power Button: © Joseph Romero - <a href="http://fotolia.com/">Fotolia.com</a> | generic laptop: © Kirsty Pargeter - <a href="http://fotolia.com/">Fotolia.com</a>
          </p>
        </div>
      </div>
      <div class="clearFloat">
    </div>
  </body>
</html>

Zitat:
Zitat von gato Beitrag anzeigen
idealerweise ein Onlinebeispiel
localhost
Mit Zitat antworten
  #4 (permalink)  
Alt 07.06.2008, 19:31
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von burnersk Beitrag anzeigen
localhost
Schade, schade, das macht es schwieriger.

Auf die schnelle konnte ich jetzt keinen Quelltextfehler entdecken.

Es handelt sich hier ausnahmsweise tatsächlich um einen Fehler im Firefox. Ich kann dich zunächst damit trösten, dass es diesen Fehler in Version 3 (wird diesen Monat veröffentlicht) nicht mehr gibt.

Ich weis nicht, inwiefern es dein Design beeinflusst, aber folgenden Workaround gäbe es:
Code:
div#footer div.footerCopyright p {
  float: right;
  text-align: right;
}
statt div#footer div.footerCopyright zu verwenden.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.06.2008, 19:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2008
Ort: Hannover
Beiträge: 31
burnersk befindet sich auf einem aufstrebenden Ast
Standard

Hallo.

Zitat:
Zitat von gato Beitrag anzeigen
Code:
div#footer div.footerCopyright p {
  float: right;
  text-align: right;
}
zu verwenden.
Das habe ich schon versucht, auch mit !important. Hat aber leider genau so wenig funktioniert, wie direkt in den p-TAG ein style-TAG einzubinden.

Trotzdem vielen Dank!
Mit Zitat antworten
  #6 (permalink)  
Alt 07.06.2008, 19:36
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von burnersk Beitrag anzeigen
Trotzdem vielen Dank!
den anstatt-Teil hab ich noch hinzugefügt, wenn ich das p-Element an die Regel anhänge zeigt mir Firefox 2 die Textausrichtung wie gewünscht an.
Mit Zitat antworten
  #7 (permalink)  
Alt 07.06.2008, 19:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2008
Ort: Hannover
Beiträge: 31
burnersk befindet sich auf einem aufstrebenden Ast
Standard

Hi.

Zitat:
Zitat von gato Beitrag anzeigen
den anstatt-Teil hab ich noch hinzugefügt, wenn ich das p-Element an die Regel anhänge zeigt mir Firefox 2 die Textausrichtung wie gewünscht an.
Ja, dass funktioniert. Aber dann in allen anderen Browsern nicht mehr. Ab dem Zeitpunkt werden alle p-TAGs nebeneinander angezeigt.

Dann müssen die FF2'ler eben passen. Ich lasse es dann wieder wie gehabt.

Oder wie war das mit CSS Weichen/Hacks? Kann man das nur für FF 2.0.0.14 freischalten?
Mit Zitat antworten
  #8 (permalink)  
Alt 07.06.2008, 19:50
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von burnersk Beitrag anzeigen
Oder wie war das mit CSS Weichen/Hacks? Kann man das nur für FF 2.0.0.14 freischalten?
Möglich ist alles, aber ob es die Sache Wert ist?

Ich denke, wenn das Design ansonnsten passt, kannst du dieses Detail beibehalten. Firefox-Benutzer sind normalerweise eh recht schnell beim aktualisieren.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.06.2008, 21:47
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Da #footer auf float gesetzt ist, wird eine Breitenangabe gebraucht, wenn sich dieser Bereich über die volle Breite erstrecken soll.
width: 100% löst dann auch die text-align:right-Frage in FF. Nebenbei: Die seitlichen Paddings müssen dann allerdings für #footer rausgenommen werden.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.06.2008, 10:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2008
Ort: Hannover
Beiträge: 31
burnersk befindet sich auf einem aufstrebenden Ast
Standard Problem gelößt

Hallo.

Zitat:
Zitat von EvT Beitrag anzeigen
Da #footer auf float gesetzt ist, wird eine Breitenangabe gebraucht
Das hatte ich komplett übersehen (float gesetzt).
Danke, jetzt funktioniert es in jedem Browser!!!
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, float, text-align

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
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
frage zur umsetzung (siehe anhang) mmiethe79 CSS 4 01.04.2009 16:10
Internet Explorer verschluckt Grafik Webentwickler Eric CSS 4 06.07.2007 15:53
Probleme mit Abständen zwischen div´s.... darvida CSS 4 09.07.2005 19:48
div- float - text weserweb CSS 2 12.12.2003 12:09


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