Padding in IE7

[Christoph_Ac]

Hallo zusammen,

flogendes Problem:

- Ich habe einen Div der 300px width hat.
- Diesem Div gebe ich ein Padding nach links und rechts von 10px.
- Damit muss ich 20px also 10px+10px von den 300px abziehen.
- In allen Browsern kein Problem !außer im IE7! der möchte nicht das ich die width verkleinere.

Wo liegt das Problem und wie kann ich das beheben?

lg Chris

 

[Pascal Bajorat]

AW: Padding in IE7

Das ist einen genereller IE Bug, dir bleibt nichts anderes über als da zu probieren. Ggf. via Conditinal Comments einfach eine extra CSS für den IE 7

 

[Christoph_Ac]

AW: Padding in IE7

Das ist einen genereller IE Bug, dir bleibt nichts anderes über als da zu probieren. Ggf. via Conditinal Comments einfach eine extra CSS für den IE 7

Das Problem ist, wenn ich das über Comments machen möchte, wird die css anweisung ebenfalls grau hinterlegt und die css wird nich eingebunden.

Hier meine css einbindung:

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/webartizer/css/template.css" />

Jommla!

lg Chris

 

[Maschmo]

AW: Padding in IE7

wenn ich die seite sehen könnte, also link zu der seite wo der div das problem macht!, könne ich schon helfen!!!

macht er im ie 7 überhaupt ein padding?

 

[sokie]

AW: Padding in IE7

Wo liegt das Problem und wie kann ich das beheben?

Du bist doch nicht erst seit gestern hier:

 

[Christoph_Ac]

AW: Padding in IE7

Also es scheint ein gennereller IE Bug zu sein das er Probleme macht wenn man Padding nutzt. Da der Div dann relativ größer wird muss man die Breite im Firefox anpassen. Im IE allerdings nicht.

Was ich jetzt nicht kann, ist per comment die css einbinden. Da macht er einfach nichts.

@sokie

Ich denke ich habe meine Frage richtig gestellt, mein Problem im Detail erläutert und keinen Quelltext angehangen weil ich es nicht für zwingend nötig empfunden habe.

Ich könnte natürlich schnell ma was Tippen zum Veranschaulichen.

Das Beispiel funktioniert im IE

html:

<div id="blubidubidu">

</div>

css:

#blubidubidu{width: 180px; padding: 0 10px 0 10px;}

Das Beispiel funktioniert in allen anderen Browsern:


html:

<div id="blubidubidu">

</div>

css:

#blubidubidu{width: 200px; padding: 0 10px 0 10px;}

P.S: Ich nutze Dreamweaver, es gibt eine Html und eine CSS Datei.

 

[Maschmo]

AW: Padding in IE7

du kannst aber auch für den ie 7 ein eigenes css einbinden!!!

Hier sind die möglichen Broserweichen.
<!--[if IE 5]>
<p>Das ist der Internet Explorer 5.</p>
<![endif]-->
<!--[if IE 5.5]>
<p>Das ist der Internet Explorer 5.5.</p>
<![endif]-->
<!--[if IE 6]>
<p>Das ist der Internet Explorer 6.</p>
<![endif]-->
<!--[if IE 7]>
<p>Das ist der Internet Explorer 7.</p>
<![endif]-->

wenn ich den link sehen könnte, könnte ich es code nachvollziehen , da der ie 7 doch auch die paddingeigenschaft können muss

 

[Shuilar]

AW: Padding in IE7

schreib im Stylesheet

* html .deineKlasse{
  width: Gesamtbreitepx;
}

Das zieht nur im IE ....

Wobei ich immernoch glaube, dass nicht der IE falsch denkt, sondern das W3-Konsortium.

Wenn ich ein 60cm-Bild mit 5cm Passepartout kaufe, dann ist es auch 60cm breit und nicht 70
Aber das soll jetzt keine Grundsatzdiskussion auslösen

 

[Christoph_Ac]

sorry doppelpost

schreib im Stylesheet

* html .deineKlasse{
  width: Gesamtbreitepx;
}

Das zieht nur im IE ....

Wobei ich immernoch glaube, dass nicht der IE falsch denkt, sondern das W3-Konsortium.

Wenn ich ein 60cm-Bild mit 5cm Passepartout kaufe, dann ist es auch 60cm breit und nicht 70
Aber das soll jetzt keine Grundsatzdiskussion auslösen

Seh ich genauso. Was aber am IE ärgerlich ist, er hält sich einfach nicht an die Standards. Da hätten die Microdoof Entwickler auch dran denken können, die einzubauen wie es jeder andere Browser auch macht.

Wenn du ein Passepartout um dein Bild machst wäre das aber so: Div_Rahmen/Div_Passepartout/Div_Bild...das könnte man dann auch als außenabstand sehen. da macht der ie ja auch keine probs :-D

lg Chris

du kannst aber auch für den ie 7 ein eigenes css einbinden!!!

Hier sind die möglichen Broserweichen.
<!--[if IE 5]>
<p>Das ist der Internet Explorer 5.</p>
<![endif]-->
<!--[if IE 5.5]>
<p>Das ist der Internet Explorer 5.5.</p>
<![endif]-->
<!--[if IE 6]>
<p>Das ist der Internet Explorer 6.</p>
<![endif]-->
<!--[if IE 7]>
<p>Das ist der Internet Explorer 7.</p>
<![endif]-->

wenn ich den link sehen könnte, könnte ich es code nachvollziehen , da der ie 7 doch auch die paddingeigenschaft können muss

Können tut er sie, nur wenn man ein Padding macht, muss man den Wert in der Gesammtbreite abziehen. Der IE möchte das aber nicht. Ist ein bekanntes Prob wie ich jetzt im Inet gelesen habe. Wenn du Code brauchst dann mach mal flott mim Editor den Code den ich oben rein geschrieben habe. Es liegt definitiv nicht an meinem Code, der ist sauber!

Die Conditional Comments funktionieren zwar mit nem <p> Tag aber wenn ich wie oben erwähnt meine css einbinde (für Joomla) wird die nicht ganz erkannt in der If Anweisung.

lg Chris

 

[Shuilar]

AW: Padding in IE7

Wenn du ein Passepartout um dein Bild machst wäre das aber so: Div_Rahmen/Div_Passepartout/Div_Bild...das könnte man dann auch als außenabstand sehen. da macht der ie ja auch keine probs :-D

naja ... ich bin jetzt mal davon ausgegangen, dass ich ein Bild bei irgendnem Versandhaus bestelle. Da würde ich mich schon sehr wundern, wenn ich ein 60cm breites Bild bestelle und nur, weil innendrin ein Rand mit 5cm ist, ein Bild bekäme, das 70cm breit ist. Aber vielleicht gehe ich da zu praktisch ran.
Vielleicht kommt mir es aber auch deshalb logisch vor, weil ich früher zuerst im IE entwickelt habe und dann im FF gecheckt habe (inzwischen mach ich das umgekehrt) ... dadurch hat sich mir die Logik vielleicht verinnerlicht

Abgesehen davon hast Du natürlich Recht, dass sich der IE ruhig an die Standards halten könnte. Egal wieviel Sinn die nun machen oder nicht. Dafür gibt es nunmal diese Standards und Microsoft sitzt mit in dem Konsortium *g*

Ist ja nicht so, dass wir die Problematik nicht umgehen könnten ... ist nur einfach dummer, unnötiger Mehraufwand

LG
Shu

 

[sokie]

AW: Padding in IE7

Christoph.
ich verstehe das Problem nicht, deshalb hatte ich ja nach dem code gefragt. bei mir geht das gänzlich ohne CC und ohne hacks und mit einer einzigen css Regel für das Element.
wenn der IE im standardkonformen Modus läuft (DOCTYPE!) versteht der zumindest das Boxmodell für dieses Beispiel ohne Probleme - Beispiel:
sieht im IE(sogar im IE6!) und im FF gleich aus.

 

[Christoph_Ac]

AW: Padding in IE7

Also:

Hier mein Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml" lang="<?php echo $this->language; ?>" xml:lang="<?php echo $this->language; ?>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Hier der betroffene html Teil:

                    <div id="footer">
                    
                        <jdoc:include type="modules" name="blog" style="xhtml" />
                        
                        <jdoc:include type="modules" name="twitter" style="xhtml" />
                                                 
                        <jdoc:include type="modules" name="mailme" style="xhtml" />                        
                    
                    </div> <!--Ende Footer-->

und hier die betroffene CSS:

div#footer{
width: 960px;
height: 150px;
margin: 15px 0 30px 0;
background: url(../images/footer_bg.png) no-repeat;
float: left;
color: #232424;
}

.moduletable_blog{
width: 260px;
float: left;
padding: 57px 30px 0 30px;
}

.moduletable_twitter{
width: 260px;
float: left;
padding: 57px 30px 0 30px;
}

.moduletable_mailme{
width: 260px;
float: left;
padding: 57px 30px 0 30px;
}

Die 3 Boxen haben eine Breite von 320px und sind um 60px reduziert wegen dem Padding nach links und rechts.

Im IE7 sieht das so aus:



Im FF und Chrome etc. sieht das so aus:



Hoffe das hilft mehr als mein Beispiel.

P.S: Wenn ich aber das Padding nicht von der 320px Breite abziehe stellt der IE7 es richtig da und der FF etc machen Probleme. Es sei denn ich nutze Margin.

Als Lösung habe ich folgenden Eintrag gefunden:



lg Chris