Autor |
Nachricht |
googelb
Threadersteller
Dabei seit: 25.07.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 25.07.2006 23:25
Titel width unterschiedlich |
|
|
Hallo,
ich habe das Problem, dass wenn ich über css die eigenschaft width für einen div container festlege, diese unterschiedlich in den browsern angezeigt werden.
Im IE habe ich z.B. dann bei width: 175px; rechts danach noch mehr platz als wenn ich die seite im firefox anschaue.
Wo liegt das problem und wie kann ich das beheben ?
Ich bedanke mich recht herzlich im Voraus.
bye
googelb.
|
|
|
|
|
Doppelplusgut
Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 55
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 25.07.2006 23:28
Titel
|
|
|
google mal ne runde nach boxmodel und quirksmode und verinnerliche.
|
|
|
|
|
googelb
Threadersteller
Dabei seit: 25.07.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 25.07.2006 23:54
Titel
|
|
|
hi, erstmal danke für eure Antworten.
Leider hat mir das nicht geholfen.
Boxmodelling kenn ich ja, also wie man paddings,margins setzt und wofür was ist.
Ich hab das ganze jetzt auch in den quirksmode gesetzt mittels des xml doctypes, nur hilft es auch nicht.
Ich hab hier mal ein Besipiel von meinem Problem als source:
Code: |
<?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>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>fhgfhgf</title>
<style type="text/css">
#topmenue { border: 1px solid #C4C4C4; }
a { color: #000080; text-decoration: none; }
a:visited { color: #000080; text-decoration: none; }
a:active { color: #000080; text-decoration: none; }
a:hover { color: #000080; text-decoration: underline; }
#leftmenue { padding: 5px; width: 200px; min-width: 200px; background-color: #FF0000; }
h5 { font-size: 10px; font-family: Verdana; color: #306749; margin: 0px; }
#buttons A {
PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; MARGIN: 0px; WIDTH: 175; PADDING-TOP: 3px; text-decoration: none;
font-family: Verdana; font-size: 10px; color: #000080;
}
#buttons A:hover {
PADDING-RIGHT: 2px;PADDING-LEFT: 4px;PADDING-BOTTOM: 2px;PADDING-TOP: 2px;BACKGROUND-COLOR: #f1f1f1; border: 1px solid #cccccc; text-decoration: none;
}
</style>
</head>
<body bgcolor="#E9E9E9">
<div id="leftmenue">
<h5>Info</h5>
<div id="buttons"><a href="gig">Gehe zu Giga.de</a></div>
<div id="buttons"><a href="lol">lol.de</a></div>
<h5>Info</h5>
<div id="buttons"><a href="gig">Gehe zu Giga.de</a></div>
<div id="buttons"><a href="lol">lol.de</a></div>
</div>
</body>
</html>
|
Wenn man hinschaut merkt man, dass wenn man mit der maus auf einen Link geht die box rechts einen größeren abstand zum ende der roten box hat (IE) als im Firefox wo das deutlich kleiner ist.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 26.07.2006 09:10
Titel
|
|
|
Boxmodel ist dir wirklich ein Begriff? Dann schau dir dass mal an:
Code: | <?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>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>fhgfhgf</title>
<style type="text/css">
#topmenue { border: 1px solid #C4C4C4; }
#leftmenue { padding: 5px; width: 190px; background-color: #FF0000; }
h5 { font-size: 10px; font-family: Verdana; color: #306749; margin: 0px; }
#buttons A {
PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; MARGIN: 0px; WIDTH: 180px; PADDING-TOP: 3px; text-decoration: none;
font-family: Verdana; font-size: 10px; color: #000080;
}
#buttons A:hover {
PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f1f1f1; border: 1px solid #cccccc; text-decoration: none;
}
</style>
</head>
<body bgcolor="#E9E9E9">
<div id="leftmenue">
<h5>Info</h5>
<div id="buttons"><a href="gig">Gehe zu Giga.de</a></div>
<div id="buttons"><a href="lol">lol.de</a></div>
<h5>Info</h5>
<div id="buttons"><a href="gig">Gehe zu Giga.de</a></div>
<div id="buttons"><a href="lol">lol.de</a></div>
</div>
<div style="margin-top:30px; width:200px; background:#f00; ">width:200px;</div>
</body>
</html> |
Und so passt es dann auch:
Code: | #topmenue { border: 1px solid #C4C4C4; }
#leftmenue { padding: 5px; width: 190px; background-color: #FF0000; }
* html #leftmenue {
width:200px;
}
h5 { font-size: 10px; font-family: Verdana; color: #306749; margin: 0px; }
#buttons A {
PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; MARGIN: 0px; WIDTH: 180px; PADDING-TOP: 3px; text-decoration: none;
font-family: Verdana; font-size: 10px; color: #000080;
}
* html #buttons A {
width:188px;
}
#buttons A:hover {
PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f1f1f1; border: 1px solid #cccccc; text-decoration: none;
} |
* html Hack solltest du aber nicht nutzen, jetzt nur mal so auf die schnelle..
|
|
|
|
|
vome
Dabei seit: 15.02.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 26.07.2006 09:24
Titel
|
|
|
Das Box-Modell mag Dir ja vielleicht klar sein, nicht aber die falsche Interpretation der verschiedenen Internet-Explorer-Varianten.
Alle Internet-Explorer bis Version 5.5 und der IE 6 im quirks mode interpretieren das Boxmodell falsch!
Der erste Schritt wäre den IE 6 durch löschen der ersten Zeile (<?xml ...) in den standard mode zu bringen - dann interpretiert dieser das Box-Modell schon einmal richtig.
Als nächstes gibt es die Möglichkeit 2 Angaben für width zu machen: eine, die dem Standard entspricht und eine, die nur vom IE <= 5.5 umgesetzt wird.
Code: |
width: 65px; /* nur IE 5.x */
width/**/:/**/ 85px; /* alle anderen Browser */ |
Das wäre eine Möglichkeit von vielen, hat aber den Vorteil, dass Du die Seiten später evtl. nicht überarbeiten musst, sollte sich der IE 7 endlich an den Standard halten.
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 27.07.2006 06:37
Titel
|
|
|
Das Padding/Margin Problem läßt sich ganz einfach
mit einer vollständigen DTD inkl der URL
beheben.
Scheinbar tritt das Problem nur im Quirksmodus
des IE auf. Mit dieser DTD z.B. überhaupts nicht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN"
"http://www.w3.org/TR/html4/strict.dtd">
bzw. loose:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
// oh, wer lesen kann ist klar im Vorteil. Vome
hats ja schon geschrieben.
Zuletzt bearbeitet von Raumwurm am Do 27.07.2006 06:43, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
[css] width: 100%
CSS 100% width auch für IE
CSS Width in links
[HTML] IE6 width:auto bug?
100% width elemente nebeneinander
[CSS] Problem (min/max-height/width im IE)
|
|