• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit 100% Breite in IE7 weil Parent-Div width:auto hat

scbawik

scbawik

Senior HTML'ler
Hallo!

Danke schonmal dass ihr meinen Thread angeklickt habt ;)

Wer eine Lösung auf meine Frage hat, der weiß wahrscheinlich alleine wegen der Headline bereits die Lösung - bzw dass es keine Lösung gibt :(

Zum besseren Verständnis hier dennoch mein "Pseudo-Code":

Mein CSS:
Code: 
#elternelement {
     width:auto;
     float:left;
     padding:0;
}
#solldiebreitebestimmen {
     width:auto;
     margin-left:20px;
     margin-right:20px;
}

Mein HTML:
HTML: 
<div id="elternelement">

     <img width="100%" />

     <div id="solldiebreitebestimmen">

          Hallo, ich soll die Breite von '#elternelement' bestimmen.

     </div>

</div>

Es funktioniert in jedem (für mich) relevanten Browser - außer dem IE7. Unter "funktionieren" verstehe ich dass das '#elternelement' so breit ist wie '#solldiebreitebestimmen'. Also so breit wie der Text.

Warum es im IE7 nicht funktioniert weiß ich ja. Im IE7 muss für die Breite von 100% das Parent-Element eine fixe Breite haben. In meinem Fall hat das Element aber eine Breite von 'auto'.

Am Liebsten wäre es mir ja wenn ich den IE7-Nutzern eine Meldung anzeigen könnte dass die sich erst garnicht auf meine Seite trauen sollen, bevor sie sich nicht einen akzeptablen Browser zulegen... aber naja :D

Eine Lösung für mein Problem wäre es natürlich die Breite einfach mit jQuery zu bestimmen, aber lieber wäre es mir mit CSS.

Vielleicht kennt ja einer von Euch eine CSS-Lösung ohne dass ich den HTML Aufbau grob verändern muss.

Danke im Voraus!
 
Wenn du dich bei deinen Fragen auf das wesentliche beschränken würdest, wäre
a) dein Beitrag viel kürzer
b) hättest du die Problemstellung verständlicher formuliert,
c) könnte man die Problemstellung besser erkennen und
d) könnte man dir vielleicht sogar eine Antwort liefern

Jedes Element ist grundsätzlich so breit wie sein Inhalt.
Wie breit soll den #elternelement sein?

Falls 100%:
Worauf sollen die sich beziehen?

Auf die Fensterbreite?
Falls ja, definiere noch
Code: 
html, body {width: 100%;}

Falls nicht 100%: wie breit denn?

Welchen Doctype verwendest du?
 
Damit du nicht zuviel lesen musst, mach ich es kurz. Ich weiß zwar nicht was an meinem Post unübersichtlich sein soll, aber bitte ;)

Erweitern wir den Code:

Code: 
#wrapper {
     width: 900px;
     height: 30px;
     position: relative;
}
#elternelement {
     width:auto;
     float:left;
     padding:0;
}
#solldiebreitebestimmen {
     width:auto;
     margin-left:20px;
     margin-right:20px;
}

HTML: 
<div id="wrapper">

<div id="elternelement">

     <img width="100%" />

     <div id="solldiebreitebestimmen">

          Hallo, ich soll die Breite von '#elternelement' bestimmen.

     </div>

</div>

</div>

Das Bild sollte so Breit sein wie '#elternelement', ist im IE7 aber so breit wie der Wrapper, also 900px.

'#elternelement' soll wiederum so breit sein wie der Text 'Hallo, ich soll die Breite von '#elternelement' bestimmen.'.

Doctype:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hoffe der Post nimmt nicht zuviel Zeilen in Anspruch.. :D

EDIT:
Vielleicht noch als Zusatz. Es handelt sich dabei um eine Horizontale Navigation (von links nach rechts) mit unterschiedlich Breiten Menüpunkten. Das Bild soll immer so Breit wie der Menüpunkt sein.
 
Zuletzt bearbeitet:
so ein Problem habe ich auch... allerdings etwas anders .. meine website wird mit safari vollkommen normal angezeigt aber in iExplorer ist die navigationsleiste plötzlich versetzt und alle links sind mit einem violetten rahmen umrunden .... aber komisch is das bei safari alles normal is???!
 
das mit dem violetten rahmen liegt daran dass safari diesen so oder so bei links nicht darstellt. setze mal bei deinem umrandeten bild das CSS "border: 0;" bzw das HTML-Attribut border="0".

Oder auch:
Code: 
a {
      border:0;
}

ich denke mal es ist alles wegen dem Rahmen versetzt..
 
Zuletzt bearbeitet:
Die Breitenangabe beim DIV elemente kann weg, da ein Blockelement immer so breit ist wie das Elternelement. D.h. wenn du das Bild als Blockelement deklarierst, müßte alles ok sein.
 
Danke für die Antwort :)

Dass ein Block-Element immer so breit ist wie das Elternelement, weiß ich. Wenn ich aber das Bild als Block-Element deklariere, und die Höhen- und Breitenangabe weglasse, ist es so groß wie das Quellbild.

HTML: 
<img src="../img/menu.png" id="men1" style="display:block;" alt="" />
Habe das Bild auch schon in ein Div gepackt - hat auch nicht funktioniert.

Und wenn ich das Bild ganz durch ein Div mit background-color ersetze, hat dieses im IE7 eine Breite von 0px, in allen anderen Browsern die Breite des Elternelements.

Ich kenne das Problem ja bereits:
IE7 benötigt eine fixe Breite des Elternelements.

Funktionieren würde wenn das Elternelement eine Breite in Pixel oÄ angegeben hätte, bzw keine Breite angegeben wäre. In meinem Fall muss diese Breite aber auf "auto" sein, da die Breite von einem Child bestimmt wird.

Die 100% Breite des Bilds beziehen sich im IE7 darum nicht auf das Elternelement (Da dieses keine verwendbare Breitenangabe hat) sondern auf das übergeordnete Element 'Wrapper', da dieser mit 900 Pixel Breite das erste darüberliegende Element mit fixer Breite ist.

Dankeschön

EDIT:
Hatte gerade eine Idee und es sieht so aus als ob es funktioniert. Muss noch die anderen Browser kontrollieren.

HTML: 
<div id="elternelement" style="position:relative">
      <div style="position:absolute;left:0;right:0;"><img src="../img/menu.png" id="men1" style="display:block;" width="100%" height="30px" alt="" /></div>
</div>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben