Hallo,
des Webdesigners Pain sind die verschiedenen Browser und ihre Tücken
- zumindest empfinde ich das so, obwohl ich nichtmal ein Webdesigner bin...
Arbeite an einem Formular, das ich mit ein paar Photoshop-Grafiken ansprechend gestalten möchte. Nach langem hin und her und erfolglosen Versuchen mit Tabellen, habe ich mich ein wenig in CSS eingearbeitet, was mir von Anfang an besser als Tabellenlayout gefallen hat.
Die Website ist wie folgt aufgebaut:
In die HTML-Seite ist die Datei master.css eingebunden, in der ich die CSS-Bedingungen festlege:
html, body {
margin: 0;
padding: 0;
}
#page-container {
background: transparent;
margin-top: 0px;
margin:auto;
}
#page-formularlayout
background: transparent;
margin:auto;
width:800px;
height:600px;
background-image:url(../images/formular.png);
}
p.oi_userinfo label{
clear:left;
float:left;
display:block;
margin-top:45px;
padding-left: 50px;
width: 400px;
}
p.oi_userinfo input {
clear:right;
float: right;
margin-top:45px;
padding-right:80px;
width: 40px;
}
-----
In index.html rufe ich dann die zuvor definierten Elemente auf:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Test Site" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
<div id="page-container">
<form name="form1" method="post" action="">
<div id="page-formularlayout">
<p class="oi_userinfo">
<label>Username:</label>
<input name="username" type="text" />
</div>
</form>
</div>
</body>
</html>
-----
Zusammengefasst geht es also darum, innerhalb 'div id="page-formularlayout"' mehrere Elemente (input, checkbox, list, submit, etc...) zu positionieren.
Die sollen exakt über der dafür angefertigten Grafik liegen. Jetzt teste ich also diese Seite mit Safari, FireFox(Mac), Opera(Mac), InternetExplorer(WinXP), FireFox(WinXP) und die Probleme beginnen. Ausser IE verschieben alle Browser das gesamte 'div id="page-formularlayout"' um 1-2 Zentimeter nach unten, was wiederum dazu führt, dass die Elemente nicht korrekt ausgerichtet sind. Würde das auch der IE machen, wärs kein Problem, denn dann könnte ich die Positionen einfach in der .css Datei anpassen und alles wäre gut. IE kocht aber sein eigenes Süppchen und verschiebt das 'div id="page-formularlayout"' nicht.
Jetzt liegt mein Problem also darin entweder auch alle anderen Browser dazu zu bringen das 'div id="page-formularlayout"' nicht zu verschieben (was mir lieber wäre) oder eben dies auch beim IE auszulösen.
Vermutlich denke ich aber auch völlig in die falsche Richtung und es gibt eine elegantere Methode Elemente innerhalb eines div zu positionieren?
Wie auch immer, für jede Anregung wär ich äusserst dankbar!
des Webdesigners Pain sind die verschiedenen Browser und ihre Tücken
- zumindest empfinde ich das so, obwohl ich nichtmal ein Webdesigner bin...Arbeite an einem Formular, das ich mit ein paar Photoshop-Grafiken ansprechend gestalten möchte. Nach langem hin und her und erfolglosen Versuchen mit Tabellen, habe ich mich ein wenig in CSS eingearbeitet, was mir von Anfang an besser als Tabellenlayout gefallen hat.
Die Website ist wie folgt aufgebaut:
In die HTML-Seite ist die Datei master.css eingebunden, in der ich die CSS-Bedingungen festlege:
html, body {
margin: 0;
padding: 0;
}
#page-container {
background: transparent;
margin-top: 0px;
margin:auto;
}
#page-formularlayout
background: transparent;
margin:auto;
width:800px;
height:600px;
background-image:url(../images/formular.png);
}
p.oi_userinfo label{
clear:left;
float:left;
display:block;
margin-top:45px;
padding-left: 50px;
width: 400px;
}
p.oi_userinfo input {
clear:right;
float: right;
margin-top:45px;
padding-right:80px;
width: 40px;
}
-----
In index.html rufe ich dann die zuvor definierten Elemente auf:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Test Site" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
<div id="page-container">
<form name="form1" method="post" action="">
<div id="page-formularlayout">
<p class="oi_userinfo">
<label>Username:</label>
<input name="username" type="text" />
</div>
</form>
</div>
</body>
</html>
-----
Zusammengefasst geht es also darum, innerhalb 'div id="page-formularlayout"' mehrere Elemente (input, checkbox, list, submit, etc...) zu positionieren.
Die sollen exakt über der dafür angefertigten Grafik liegen. Jetzt teste ich also diese Seite mit Safari, FireFox(Mac), Opera(Mac), InternetExplorer(WinXP), FireFox(WinXP) und die Probleme beginnen. Ausser IE verschieben alle Browser das gesamte 'div id="page-formularlayout"' um 1-2 Zentimeter nach unten, was wiederum dazu führt, dass die Elemente nicht korrekt ausgerichtet sind. Würde das auch der IE machen, wärs kein Problem, denn dann könnte ich die Positionen einfach in der .css Datei anpassen und alles wäre gut. IE kocht aber sein eigenes Süppchen und verschiebt das 'div id="page-formularlayout"' nicht.
Jetzt liegt mein Problem also darin entweder auch alle anderen Browser dazu zu bringen das 'div id="page-formularlayout"' nicht zu verschieben (was mir lieber wäre) oder eben dies auch beim IE auszulösen.
Vermutlich denke ich aber auch völlig in die falsche Richtung und es gibt eine elegantere Methode Elemente innerhalb eines div zu positionieren?
Wie auch immer, für jede Anregung wär ich äusserst dankbar!
