Unterschiedl. Ansicht IE/FF bei Verwendung CSS

mapsit · 26. Juni 2009

Hallo,

habe Webseite für IE gebaut und im FF sieht sie echt grauslich aus.

Habe mal CSS und Webseite gepostet (Text ist gekürzt). Gravierend ist der Unterschied in der verwendeten Schriftart und bei der Umsetzung des Aufzählungszeichens (Ist ein fetter Punkt), den zeigt der FF garnicht an.
Ansonsten ist der Text der Kopfzeile verrutscht (Slogan a und p sind zu eng beieinander)
Die beiden Grafiken am Ende (Background fuss_gelb an body) sollen einen Farbverlauf zeigen Im FF ist es nicht wie im IE zusammenhängend, sondern eine Zeilenschaltung dazwischen

Da ich kein Profi bin, bin ich für jede Verbesserung dankbar. Auch wenn Euch sonst etwas auffällt.

Thx
index.htm

HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<title>Nordische- HOME</title>
</head>

<body>
<div id="top"> </div>
<div id="wrapper">

<!-- Header -->

	<div id="header">
		<a class="title"> Nordische<a class="stitle"> seit 1984</a></a>		
		
		<!-- Slogan -->		
			<div id="slogan">
				<p class="slogan">Skandinavische Sprachen Dolmetschen und Übersetzen</p>
				<a class="slogan">Wir haben uns entschieden, uns auf das zu beschränken, von dem wir wirklich etwas verstehen!</a>
				<!-- Logo -->
					<div class="logo">
						<img src="img/logo_blue.gif" alt="logo" width=145 height=118 />
					</div>
				<!-- Logo end -->
			</div>
		<!-- Slogan end -->
	</div> 

<!-- Header end -->

<!-- Flag -->

	<div class="flag">
		<img src="img/flag_se.jpg" alt="Svenska" border="1" width=20 height=15 />
	</div>

<!-- Flag end -->

<!-- <hr class="noscreen" /> -->

<!-- Content -->

	<div class="content">

		<!-- Left column -->
			<div class="column-left">
				
				<!-- Left column in -->
				<div class="column-left-in">
					<h1>JF, BDÜ</h1>
						<p>Seit 1984 ...Stelle.</p>
<br />
<b>Wir übersetzen  ....</b><br />
Unsere Schwerpunkte sind:
<ul>
	<li> Recht 
	<li> Medizin
	<li> Technik
	<li> Chemie/Physik
	<li> Film/Synchronisation
</ul>

				</div>
				<!-- Left column in end -->
			
			</div>
			<!-- Left column end -->

		<!-- Right column -->
		<div class="column-right">
			<!-- Right column in -->
			<div class="column-right-in">
				<ul>
					<li><a href="index.html" class="active">HOME</a></li>
					<li><a href="team.html">TEAM</a></li>
					
				</ul>
			</div>
			<!-- Right column in end -->
		</div> 
		<!-- Right column end -->
		<div class="cleaner"> </div>
	</div>
	<!-- Content end -->

<hr class="noscreen" />

	<!-- Footer -->
	<div id="footer">
				
		<p>staatl. anerk., allg. beeidigte Dolmetscherin (LG Bonn) </p>

		<ul>
			<li><a href="#top">Top</a>↑</li>
		</ul>

	</div> 
	<!-- Footer end -->

<hr class="noscreen" />

	<p class="impressum"><a href="impressum.html">Impressum</a></p>

</div> 
<!-- Wrapper end -->
</body>
</html>

CSS

HTML:

/* Main */

{

margin: 0px;
padding: 0px;

}

html { height: 100%; font-size: 62% }

a:link {

color: #404040;
text-decoration: underline;
font-weight: bolder;

}

a:visited {

color: #696969;
text-decoration: underline;
font-weight: bolder;

}

a:hover {

text-decoration: none;
color: #ffffff;

}


div.flag {

padding-top: 2px;
padding-left: 877px;

}


body {

height: 100%;
background-color: #0B5089;
text-align: center;
font: 1.2em Arial, Verdana,  Helvetica, sans-serif;
color: #404040;

}


.noscreen {
display: none;
}


/* Cleaner */

.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}



/* Wrapper */

#wrapper {
width: 900px;
margin: 70px auto 0 auto;
padding-bottom: 90px;
}


/* Headings, paragraphs */

h1 {

font: 2.4em Arial, Verdana,  Helvetica, sans-serif;
color: #3A3A3A;
margin-bottom: 5px;
border-bottom: 1px solid #0B5089;
padding-bottom: 2px;
position: relative;
z-index: 2;

}


h1 a:link, h1 a:visited {
text-decoration: none;
color: #FFC88D;
}

h2 {

font: 1.8em Arial, Verdana,  Helvetica, sans-serif;
color: #3A3A3A;
letter-spacing: 1px;
margin-bottom: 5px;
border-bottom: 1px solid #0B5089;
padding-bottom: 2px;

}

h3 {

font-size: 1.5em;
color: #3A3A3A;
position: relative;
z-index: 2;

}

p {

line-height: 1.8;

}


/* Header */

#header {
width: 900px;
height: 80px;
margin: 0 auto;
position: relative;
text-align: left;
}

#header a.title  {

position: absolute;
text-align: left;
top: -70px;
font: 2.2em Arial, Verdana,  Helvetica, sans-serif;
color: #bfbfbf;
z-index: 2;

}

#header a.stitle  {

position: absolute;
text-align: left;
top: -58px;
left: 380px;
font: 1.2em Arial, Verdana,  Helvetica, sans-serif;
color: #bfbfbf;
z-index: 2;

}


#slogan {

position: absolute;
width: 900px;
height: 119px;
bottom: 0;
left: 0;
background: #8F0a0a url('../img/kopf_gelb.jpg') no-repeat 0 0;

}


#slogan p {

font: 2.0em Arial, Verdana,  Helvetica, sans-serif;
color: #3A3A3A;
position: absolute;
text-align: left;
top: 8px;
left: 10px;
letter-spacing: 1px;
width: 420px;

}

#slogan a {

font: 1.4em Arial, Verdana,  Helvetica, sans-serif;
color: #404040;
position: absolute;
text-align: justify;
top: 75px;
left: 10px;
letter-spacing: 1px;
width: 520px;

}

div.logo {

padding-top: 1px;
padding-left: 680px;
}

/* Content and columns */

.content {
width: 900px;
background-color: #ffdd73;
}

.column-left {
float: left;
width: 66%;
text-align: left;
}

.column-right {
float: right;
width: 33%;
text-align: center;
}

.column-left-in {
margin: 1.6em 1em 3em 1.5em;
}

.column-right-in {
margin: 1.3em 2.8em 3em 2em;
}

/* Column left list */

.column-left ul {
margin: 5px 10px 10px 25px;
list-style-type: disc;

}

.column-left ul li {
display: block;
}


/* Column right list */

.column-right ul {
margin: 10px 10px 0 20px;
list-style-type: none;
}

.column-right ul li {
display: block;
}

.column-right ul li a, .column-right ul li a:visited {
color: #404040;
font-weight: normal;
text-decoration: none;
display: block;
padding: 10px 0;
border-bottom: 1px solid #91b0ca;
}

.column-right ul li a:hover, .column-right ul li a.active {
color: #3A3A3A;
font-weight: bold;
border-bottom: 1px solid #0B5089;
}


/* Footer */

#footer {

width: 900px;
height: 86px;
background: #2B2B2B url('../img/fuss_gelb.jpg') no-repeat 0 0;

}

#footer a:link, #footer a:visited {
color: #787878;
font-weight: normal;
}

#footer ul {
list-style-type: none;
color: #787878;
padding: 1px 0 0 8px;
text-align: left;
font-size: 1.1em;
float: left;
width: 20px;
}

#footer ul li {
float: left;

}

#footer ul li a, #footer ul li a:visited {
margin: 0 6px;
}

#footer p {

padding: 25px 0 0 10px;
color: #787878;
font-weight: normal;
text-align: bottom;
width: 750px;
}

/* Responsible */


#responsible {

color: #bfbfbf;
font-weight: normal

}

#responsible p.name  {

color: #3A3A3A;
font-size: 1.1em;
margin: 7px 8px 10px 0;
line-height: 1,1;
text-align: left;

}

/* Impressum */

p.impressum {
color: #bfbfbf;
font-size: 1.1em;
margin: 7px 8px 10px 0;
line-height: 1;
text-align: right;
}

p.impressum a, p.impressum a:visited {
color: #bfbfbf;
font-weight: normal;
}

p.impressum a:hover {
color: #FFFFFF;
}

Guardian · 26. Juni 2009

Hallo,

check Deinen Code erstmal mit dem Validator, das sollte immer als erstes geschehen:
http://validator.w3.org/

da sind einige Tags nicht ordnungsgemäss geschlossen worden (XHTML 1.0 Strict ist der Code oben nicht), aber das wird mit dem Tool genau gezeigt, dann solltest Du Dich eher am FF orientieren und für den IE Ausnahmen berücksichtigen, der FF ist vielfach standardkonformer als der IE

bye
Guardian

edit: :lego:

Broken Sword · 26. Juni 2009

Hi,
am besten du postest deine Seite, damit wir es "Hautnah" erleben können und nicht extra deine Seite selbst zusammenbauen müssen, wobei wir ja gar nicht deine Grafiken haben. Würde uns die Arbeit sehr viel vereinfachen. Aber als erstes lege ich dir nah deine Seite auf Fehler prüfen zu lassen
The W3C CSS Validation Service (Für CSS)
The W3C Markup Validation Service (Für HTML)
Da kommen schon ein paar Fehler zusammen und wer weiß, ob die nicht ausschlaggebend sind.

Beim Durchgehen sind mir schon ein paar Probleme aufgefallen.
Zu deinem Listen Problem: Warum hast du li als Block Element verschrieben? Das muss raus.
Zu deinem Dritten: em ist ungenau, arbeite lieber mit Pixel px, die werde weitgehend gleich interpretiert.

Gruß
Broken Sword

edit:
Tze da will mir der Wächer die Show stehlen

mapsit · 29. Juni 2009

OK Kritik angenommen...werde mal validieren und dann die Seite einstellen... dann wäre es schön wenn Ihr noch einmal darüber schaut....
DANKE schonmal....

snuggles · 05. Juli 2009

zum Thema Pixel als Schriftgröße. Wenn man den Text skalieren möchte. Was besonders für sehbehinderte Menschen notwendig ist. Dann kann man EM oder besser noch % als Schriftgröße einsetzen. 1px bei einer Auflösung von 1280*1024 wird ganz anders dargestellt, als wenn ich einen Monitor mit 1920*1080 habe.
Wer Barrierfreie Webseiten erstellen möchte, sollte relative Schriftgrößen verwenden.

Kompliziert bei EM ist die Vererbung.
Beispiel:

Das TAG <p> bekommt EM 0.8 == 80% Elternelement. Ist darin ein anderes Element enthalten <a> dass auch eine Angabe der Schriftgröße bekommt mit EM 0.8, dann hat dieses aber nicht mehr die gleiche Größe wie <p> sondern eben nur 80% von diesem Element. Entspricht dann nur noch einer Angabe von 64%.

Somit ist zu beachten, dass man bei relativen Schriftgrößen wirklich ein sauber Strukturiertes CSS macht. Bei der Angabe von Pixel ist sowas natürlich nicht so problematisch.

Hier gibt es auch einen schönen Überblick:
SELFHTML: Stylesheets / CSS-Formate definieren / Maßeinheiten, Farbangaben und Wertzuweisung

Unterschiedl. Ansicht IE/FF bei Verwendung CSS

mapsit

Well-known member

Guardian

Well-known member

Broken Sword

Well-known member

mapsit

Well-known member

snuggles

Beliebte Schlagwörter