|
 |
  |
| Autor |
Nachricht |
ataub2qf
Neuer [User]
Anmeldung: 10.08.08
Beiträge: 6
|
 Verfasst am: 10.08.2008, 22:43 Titel: IE 7: width:100% => zu groß |
 |
|
Hi, hab ein Problem mit dem Internet Explorer 7 oder er mit mir 
Habe ein Menu, dass 100% breit sein soll, wobei die Menüpunkte ein paar Prozent immer ausmachen.
Jeder Browser (Firefox, Safari, IE6, Opera) zeigt die Seite und das Menu richtig mit 100% Breite an.
Beim IE 7 jedoch geht sich der Platz nicht aus.
FF   IE 7 
Der Menüpunkt 6 (m6) sollte noch in der gleichen Zeile sein.
Hier die (abgespeckten) Sourcecodes:
index.htm
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" href="style/reset.css" type="text/css">
<link rel="stylesheet" href="style/default.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Test</h2>
</div>
<div id="menu">
<ul>
<li id="m1"><a href="#">m1</a></li>
<li id="m2"><a href="#">m2</a></li>
<li id="m3"><a href="#">m3</a></li>
<li id="m4"><a href="#">m4</a></li>
<li id="m5"><a href="#">m5</a></li>
<li id="m6"><a href="#">m6</a></li>
</ul>
</div>
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
|
default.css
| Code: | body{
margin:0;
padding:0;
border:0;
width:100%;
}
#wrapper{
width:100%;
}
/* Header
-------------------------------------------------*/
#header {
background-color:blue;
padding: 1em 0;
}
#header h1,
#header h2{
text-align:center;
font-family:Times, Times New Roman, Georgia, serif;
color:#fce94f;
}
/* Menu
-------------------------------------------------*/
#menu{
height:48px;
background-color:red;
}
#menu ul li{
list-style:none;
float:left;
}
#menu ul li a{
height:48px;
padding:0 1em 0 3.8em;
display:block;
text-decoration:none;
color:black;
font-weight:bold;
background-repeat:no-repeat;
background-position:top left;
font-size:.8em;
line-height:1.2em;
}
#menu ul li#m1{width:13%;}
#menu ul li#m2{width:17%;}
#menu ul li#m3{width:19%;}
#menu ul li#m4{width:20%;}
#menu ul li#m5{width:18%;}
#menu ul li#m6{width:13%;}
#menu ul li a:hover{
background-color:blue;
}
/* Content
-------------------------------------------------*/
#content {
clear:both;
padding: 1em;
}
/* Footer
-------------------------------------------------*/
#footer {
border-top:1px solid #000;
padding:1em;
} |
reset.css
| Code: | /*http://meyerweb.com/eric/tools/css/reset/*/
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
} |
Kann mir irgendjemand helfen?
Vielen Dank schon mal im Voraus!!!
Das ganze kann man sich hierzum Testen herunterladen; DivShare File - webpage.zip
|
|
| Nach oben |
|
 |
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 485
|
| Verfasst am: 11.08.2008, 07:46 Titel: |
|
|
So ein ähnliches Problem hatte ich auch schon bei mir bei einem flexiblen Laxout festgestellt.
Variiere mal die Fensterbreite um nur einige Millimeter, indem du das Bildschirmfenster vergrößerst oder verkleinerst. Je nachdem (selbst bei Verkleinerung) wird dann auch der sechste Menüpunkt noch angezeigt.
Es hat also den Anschein, dass die Gesamtbreite generell ausreicht, nur eben nicht bei ganz bestimmten Fensterbreiten.
Eine Erklärung dafür kann ich dir leider nicht geben. Würde mich selbst interessieren.
Man muss auch beachten, dass das Padding bei li dessen Gesamtbreite erweitert. Aber selbst wenn ich das entferne, ändert dies nichts am beschriebenen Phänomen.
_________________
sejumas CSS-Einsteigerkurs
|
|
| Nach oben |
|
|
ataub2qf
Neuer [User]
Anmeldung: 10.08.08
Beiträge: 6
|
| Verfasst am: 11.08.2008, 14:06 Titel: |
|
|
Hey sejuma.
Vielen Dank, das mit dem Vergrößern und verkleiner funktioniert wirklich  Das "blinkt" dann direkt.
Blöd nur, dass es bei 1024x768 grad nicht geht. Zum Glück gehts aber bei 1280x1024.
Das padding ist ja der Innenabstand, sollte also nichts verbreitern oder? Außer der Platz reicht innen nicht aus.
Naja im Endeffekt werde ich wohl das Ganze so lassen und auf die IE 7 Benutzer mit 1024x769 schei*** gg.
Vielen Dank für die rasche Antwort, da wär ich nie draufgekommen!
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 485
|
|
| Nach oben |
|
|
ataub2qf
Neuer [User]
Anmeldung: 10.08.08
Beiträge: 6
|
| Verfasst am: 12.08.2008, 09:11 Titel: |
|
|
Aber dann müsste die Seite ja auch größer sein wenn ich sie folgendermaßen aufbaue:
| Code: | ...
<body>
<div style="width:100%;padding:10%></div>
</body>
... |
aber das tut sie nicht.
|
|
| Nach oben |
|
|
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 485
|
| Verfasst am: 12.08.2008, 16:49 Titel: |
|
|
Das tut sie dann, wenn du auch dem body 100% width zuweist.
_________________
sejumas CSS-Einsteigerkurs
|
|
| Nach oben |
|
|
ataub2qf
Neuer [User]
Anmeldung: 10.08.08
Beiträge: 6
|
| Verfasst am: 12.08.2008, 19:43 Titel: |
|
|
Ahh okke hatte nen Denkfehler. Ja ist eigentlich eh klar
Danke für die Erklärung!
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
