[HTML/CSS] Border verschiebt Text im Firefox/ im IE nicht

vOerni

Ensign
Registriert
Jan. 2008
Beiträge
146
[HTML/CSS] Textposition im div beim Firefox verschoben, im IE nicht

/* Mir ist grad aufgefallen das der Titel nicht stimmt. Müsste "Textposition im div beim Firefox verschoben, im IE nicht" evtl könnte ein MOd dies ändern */

Guten Tag,

ich bin gerade in die Welt von HTML und CSS einzutauchen und versuche mich an einer Textseite.

Dabei tritt ein Problem im Firefox 15.0 auf, wenn ich zwei verschachtelte div habe (website und header). Der Text im header div wird an der unteren Kante angzeigt Siehe Bilder). Im IE 9 wird es ganz normal angezeigt.

test.html
Code:
<html>
<head>
	<title> just4fun startseite </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="website">
	
		<div id="header">
			<p> Just4Fun  </p>
		</div>
				
	</div>
	
</body>
</html>

style.css
Code:
body{

	background-color:  #696969;
	text-align: center;

}

#website{
	width: 980px;
	margin: 0 auto;
}

#header{
	
	border: 1px solid #B3B2B2;
	border-radius: 10px;
	width:980px;
	height:100px;
	background:darkorange;
	padding-top: 10px;
}

#header p{
	
	font-size: 60px;
	font-weight:bold;
	color: white;
}

Mach ich da was falsch oder ist das ein bug?

Mfg und schon mal danke im voraus
 

Anhänge

  • IE.jpg
    IE.jpg
    44,1 KB · Aufrufe: 244
  • FF.jpg
    FF.jpg
    31,5 KB · Aufrufe: 243
Zuletzt bearbeitet:
vielen dank. hat geklappt.

könntest du evtl. noch erklären, wieso das jetzt funktioniert.
Liegt das vllt daran, dass jetzt die Abstände der Elemente den selben Bezugspunkt besitzen?
 
Die Browser stellen die Websites ohne jegliche Voreinstellung anders dar. Deshalb würde ich dir empfehlen in deinen CSS-Dateien ersteinmal einen "Master-Reset" zu machen.
Benutze dazu folgenden Code
Code:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {     margin: 0;     padding: 0;     border: 0;     font-size: 100%;     font: inherit;     vertical-align: baseline; } article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {     display: block; } body {     line-height: 1; } ol, ul {     list-style: none; } blockquote, q {     quotes: none; } blockquote:before, blockquote:after, q:before, q:after {     content: '';     content: none; } table {     border-collapse: collapse;     border-spacing: 0;}
 
Wie mein Vorposter schon schreibt ist das, was ich angegeben haben ein Reset der margin und padding-Werte. Ich Empfehle dir auch Plugins wie z.B. Firebug für den Firefox, damit (F12) kannst du dir dann die Elemente angucken und siehst relativ schnell woran es hängt.
 
Zurück
Oben