rongricker: Layout wird nur mit IE korrekt angezeigt!

SELF-Forum

Layout wird nur mit IE korrekt angezeigt!

rongricker
– Informationen zu den Bewertungsregeln

Hallo,
ich bringe mir grade das Entwickeln von Webanwendungen bei und da ist ein seltsames Problem aufgetreten. Bei meiner Login Seite (siehe Quelltext) sollen alle Elemente des äußeren PanelGrid zentriert werden (text-align: center;). Das wird (ausgerechnet) nur mit dem Internet Explorer korrekt angezeigt. Mit Firefox, Opera und Google Chrome ist lediglich das erste Element (Login-Icon) zentriert und alle anderen Elemente sind linksbündig. Ich möchte die Anwendung aber so programmieren, dass sie bei allen gängigen Browsern korrekt angezeigt wird.

Ist es ein Fehler im Quellcode oder ein bekanntes Kompabilitätsproblem??

  
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>  
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>  
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>  
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>  
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>  
  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<f:view>  
	<html>  
		<head>  
			<base href="<%=basePath%>">  
			<title>JCALL- main</title>		  
			<link rel="stylesheet" type="text/css" href="css/styles.css">  
			<style type="text/css">table {font-size: 11px;}</style>		  
		</head>  
		<body>  
		  
			<a4j:form>		  
					<h:panelGrid width="100%" style="text-align:center" cellspacing="8" columns="1" border="0" >  
						  
						<h:graphicImage url="icons/login.jpg" />  
					  
						<h:panelGrid cellpadding="8" columns="2" border="0">  
							<h:outputText escape="false" value="User:" />  
							<h:inputText id="user" value="#{bean.user}" style="font-size:11px; width:100px;" />  
							  
							<h:outputText escape="false" value="Passwort:" />  
							<h:inputSecret id="password"  value="#{bean.password}" style="font-size:11px; width:100px;" />  
							  
							<a4j:commandLink value="zurück"  action="INDEX"/>  
							<a4j:commandButton reRender="password,user,status" value="test" image="icons/next.gif"  action="#{bean.legitimation}"/>  
						</h:panelGrid>  
												  
						<h:outputText id="status" value="#{bean.status}" />  
					  
					</h:panelGrid>  
			</a4j:form>					  
			  
		</body>  
 	</html>  
</f:view>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layout wird nur mit IE korrekt angezeigt!

    Christopher
    – Informationen zu den Bewertungsregeln

    Hallo rongricker,

    [code]

    Wenn es um Darstellungsfehler geht, so ist es immer hilfreicher das HTML, welches der Browser letztendlich empfaengt, zu liefern, statt des Templates- oder Servercodes - auch wenn es, wie in deinem Beispiel, recht ersichtlich ist.

    Nach meinem Wissensstand bezieht sich die CSS-Angabe text-align lediglich auf Inline-Elemente. Da dein anzuzeigender Text jedoch noch mal in einen separaten Untercontainer landet, greift diese Angabe nicht. Folglich muesstest du dem zweiten PanelGrid das Style-Attribut zuweisen.

    Besser noch, wenn du das CSS in eine separate Datei auslagerst, statt es direkt in das HTML zu betten.

    MfG
    Christopher

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln