Ausrichtung der HP offline zu online sieht anders aus

Seh ich mir die Seite offline an (IE7) -> ist das Layout mittig.
Seh ich mir die Seite 1:1 online an (IE7) -> ist das Layout links!

Warum?

Hallo zusammen.
Ja, wie oben beschrieben habe ich da ein Verständnisproblem. Die Seite ist 1:1 kopiert (also offline / online). Auch der Browser ist der gleiche.
Verstehe das einfach nicht. Über Google hab ich bereits danach gesucht, aber hauptsächlich habe ich das Problem gefunden das die Leute das
Layout erst gar nicht ausgerichtet bekommen ....

Brauche nur einen Tipp... denke ich.
Danke euch!

Gruß Sam

Link zur Seite: http://www.projects.lenzing.it/khazri

CSS-File:

body {
	margin: 120px 0 0 0;
	padding: 0;
	background: #FCF7E8 url(images/img01.jpg) repeat-x left top;
	text-align: center;
	font: 15px Arial, Helvetica, sans-serif;
	color: #626262;
}
      
h1, h1 a, h2, h2 a, h3, h3 a {
	margin: 0;
	text-decoration: none;
	font-family: Tahoma, Georgia, "Times New Roman", Times, serif; 
	font-weight: normal;
	color: #444444;
}

h1 {
	letter-spacing: -1px;
	font-size: 2.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

h2 {
	letter-spacing: -1px;
	font-size: 2em;
}

h3 {
	font-size: 1em;
}

p, ol, ul {
	margin-bottom: 2em;
	line-height: 200%;
}
  
a {
	color: #473701;
}

a:hover {
	text-decoration: none;
}

/* Header */

#header {
	height: 42px;
	width: 800px;
}

#logo h1, #logo p {
	float: left;
	text-transform: lowercase;
}

#logo h1 {
	font-size: 2.4em;
	padding: 0px 0 0 40px;
}

#logo p {
	margin: 0;
	padding: 18px 0 0 4px;
	line-height: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

#logo a {
	text-decoration: none;
	color: #E47F07;
}

#logo p a {
	color: #473701;
}

#logo .firmenlogo {
	background: url(images/firmenlogo.jpg) no-repeat left center;
}


/* Page */

#page {
	padding: 40px 0 0 0;
	width:800px;
}

/* Menu */
#menu {
	float: left;
	width: 200px;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: top;
}

#menu a {
	display: block;
	width: 100px;
	padding: 2px 20px 2px 20px;
	background: url(images/img03.jpg) repeat-x left top;
	border: 4px 4px 4px 4px solid #fdefbf;
	margin-top: 2px;
	margin-bottom: 2px;
	text-decoration: none;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
	color: #C78C04;
}

#menu .last {
	margin-bottom: 20px;
}

#menu a:hover {
	background: url(images/img02.jpg) repeat-x left top;
	color: #FFFFFF;
}

#menu .current_page_item {
}

#menu .current_page_item a {
	background: url(images/img02.jpg) repeat-x left top;
	color: #FFFFFF;
}

/* Content */

#content {
	background: #FFFFFF url(images/img04.jpg) repeat-y left bottom;
	margin: 0 0 0 200px;
	width: 600px;
	border-top: 6px #F4BA0F solid;
}

.post {
	padding-top: 30px;
	margin: 10px 20px 0 20px;
	text-align: left;
}

.post .title {
	font-family: Tahoma, Georgia, "Times New Roman", Times, serif; 
}

.post .title h2 {
	padding: 0px 30px 5px 0px;
	font-weight: normal;
	font-size: 2.2em;
	text-align: left;
	color: #473701;
}

.title h2 a {
	color: #473701;
}

.post .title p {
	margin: 0 0 0 20px;
	padding: 10px 0 10px 30px;
	background: url(images/img12.gif) no-repeat left center;
	border-top: 1px #D8DFE6 dotted;
	line-height: normal;
	color: #BABABA;
}

.post .title p a {
	color: #EEA90B;
}
  
.post .links {
	padding: 5px 0;
	border-top: 1px #D8DFE6 dotted;
	border-bottom: 1px #D8DFE6 dotted;
	margin-top: 10px;
	text-align: right;
}

.post .links a {
	font-weight: bold;
}

.post .links a:hover {
}

/* Footer */

#footer {
	padding: 20px 0 10px 0;
	width: 800px;
	border-top: 6px #F4BA0F solid;
	background: #473701;
}

#footer p {
	margin-bottom: 1em;
	text-align: center;
	line-height: normal;
	font-size: .9em;
	color: #FFFFFF;
}

#footer a {
	padding: 0 20px;
	text-decoration: none;
	color: #F4BA0F;
}

#footer a:hover {
	color: #FFFFFF;
}

#footer .impressum {
	background: url(images/paragraph.png) no-repeat left center;
}

Please also mark the comments that contributed to the solution of the article

Content-Key: 129378

Url: https://administrator.de/contentid/129378

Printed on: April 19, 2024 at 13:04 o'clock

5 Comments

Latest comment

Also in Safari und Firefox ist sie auch linksbündig was eher für einen konzpetionellen Fehler spricht

Ich sehe in deinem CSS-Code auch nicht die einzige relevante Methode um divs zu zentrieren (text-align ist keine!):

#el {
  width: 800px;
  margin: 0 auto;
}

PS: Du machst doch hoffentlich nicht den Kardinalsfehler eine Website im IE zu entwickeln?

Grüße

Max

Hallo dog,
danke für den Tipp, werde mich gleich mal darum kümmern.

Was den IE betriffft würde ich mal sagen "jain". In PhpED ist Mozilla als Embedded Browser integriert. Allerdings nutze ich sonst ausschließlich den IE.
Werde mir wohl dann auch mal den Firefox und Opera zulegen ...

Gruß Sam

So, habe es jetzt....
Ich habe bei den DIV's "Header", "Page" und "Footer" ein margin: 0 auto; eingetragen.
Was mich jetzt noch ein wenig wundert: Im Body steht doch ein margin: 120px 0 0 0; -> Wenn ich daraus ein 120px 0 0 auto; oder ein 120px auto 0 auto; mache geht es nicht. ????

Werde mir jetzt noch einen "vernünfigen" Browser zulegen ....

Aber nochmal zurück zu meiner eigentlichen Frage:
Warum hat er mir das offline zentriert angezeigt und online linksbündig???

Gruß Sam

Hinter margin: stecken eigentlich 3 Möglichkeiten:

margin: 5px; /* Margin nach allen Seiten */
margin: 10px 5px; /* Oben und unten 10 px, links und rechts 5px */
margin: 3px 5px 7px 10px; /* Oben 3, rechts 5, unten 7, links 10 */

Das sollte auch deine Verwunderung klären

Das mit dem Online/Offline kann ich dir so nicht sagen, ich würde aber auf ein Caching-Problem tippen.
In Firefox kann man die Caches mit Strg+Shift+R (Force-Reload) leicht umgehen.
Außerdem sollte man immer Firebug und die webdeveloper toolbar installiert haben, die helfen beim Debuggen ungemein.

Grüße

Max