|
|||
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="">Ü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> |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
Nachtrag Quellcode
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="">Ü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> 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; } |
|
|||
Hallo.
Zitat:
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.
|
|
|||
Hi.
Zitat:
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? |
|
|||
Zitat:
Ich denke, wenn das Design ansonnsten passt, kannst du dieses Detail beibehalten. Firefox-Benutzer sind normalerweise eh recht schnell beim aktualisieren. |
|
|||
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. |
Sponsored Links |
|
|||
Problem gelößt
Hallo.
Das hatte ich komplett übersehen (float gesetzt). Danke, jetzt funktioniert es in jedem Browser!!! |
Sponsored Links |
Stichwörter |
css, float, text-align |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |