mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:19 Benutzername: Passwort: Auto-Login

Thema: width unterschiedlich vom 25.07.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> width unterschiedlich
Seite: 1, 2  Weiter
Autor Nachricht
googelb
Threadersteller

Dabei seit: 25.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.07.2006 23:25
Titel

width unterschiedlich

Antworten mit Zitat Zum Seitenanfang

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. Lächel
  View user's profile Private Nachricht senden
Doppelplusgut

Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 55
Geschlecht: Männlich
Verfasst Di 25.07.2006 23:28
Titel

Antworten mit Zitat Zum Seitenanfang

Einfach mal so geraten:

http://www.css4you.de/wsboxmodell/index.html
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
beeviZ

Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 25.07.2006 23:28
Titel

Antworten mit Zitat Zum Seitenanfang

google mal ne runde nach boxmodel und quirksmode und verinnerliche.
  View user's profile Private Nachricht senden
googelb
Threadersteller

Dabei seit: 25.07.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.07.2006 23:54
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 26.07.2006 09:10
Titel

Antworten mit Zitat Zum Seitenanfang

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..
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
vome

Dabei seit: 15.02.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 26.07.2006 09:24
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 26.07.2006 09:31
Titel

Antworten mit Zitat Zum Seitenanfang

vome hat geschrieben:
Code:
width: 65px; /* nur IE 5.x */
width/**/:/**/ 85px; /* alle anderen Browser */


AAAHHHHHHHH *hu hu huu*
http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 27.07.2006 06:37
Titel

Antworten mit Zitat Zum Seitenanfang

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. *ha ha*


Zuletzt bearbeitet von Raumwurm am Do 27.07.2006 06:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ä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)
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.