[CSS] IE misplaatst (te) grote plaatjes.

[WyriHaximus]

Ik heb een probleempje op me site. IE renderd de CSS niet goed, waardoor plaatjes die buiten het design vallen tot helemaal onderaan gepushed worden. Nu heb ik een vriend die vrij goed is in CSS al gevraagt maar die kwam er niet uit, kon zelfs niks vinden via google en de search engine op GOT zelf. (Misschien op de verkeerde keywords gezocht.) En zelf ben ik ook niet zon hele grote ster met CSS.

Een voorbeeldje: http://www.wyrihaximus.ne...w-id-7162-start-7140.html (Ja het paatje is wat low ress maar dat komt omdat ik de halve wow community op me site heb kijkend naar een setje screenshots.)

Dit is de CSS:

Cascading Stylesheet:

body {
font-family:Arial, Helvetica, sans-serif;
color:#000;
/*background-color:#FFF;*/
background-color:#000;
background-image: url(../images/trnpl_bg.jpg);
font-size:10pt;
margin:10;
padding:10;
}

p {
font-size:9pt;
color: #fff;

}

a {
font-family:Arial, Helvetica, sans-serif;
color:#d0e9ff;
font-size:9pt;
}

a:hover {
text-decoration:underline;
color:#FF2424;
}

form {
margin:0;
}

input {
font-family:Tahoma;
font-size:12px;
}

#HEADER h1 {
width:471px;
top:0;
left:0;
height:112px;
background-image:url(../images/bg_logo_deep.gif);
background-repeat:no-repeat;
display:inline;
margin:0;
padding:0 0 0 23px;
}

#HEADER h1 a {
width:130px;
line-height:52px;
border-top:3px solid #9E0000;
background-color:#CD0000;
height:52px;
color:#FFF;
font-family:"Times New Roman", Times, serif;
font-size:20px;
text-decoration:none;
display:block;
font-weight:400;
margin:0;
padding:0 22px;
}

#HEADER h1 a:hover {
background-color:#E60000;
}

#HEADER p.NextPage {
display:inline;
width:20px;
float:right;
margin:32px 0 0;
}

#HEADER p.NextPage a {
width:20px;
height:19px;
background-color:#CD0000;
background-image:url(../images/next_page.gif);
background-repeat:no-repeat;
display:block;
color:#CD0000;
}

#HEADER p.NextPage a:hover {
background-color:#E60000;
background-image:url(../images/next_page.gif);
background-repeat:no-repeat;
color:#E60000;
}

#HEADER ul {
list-style:none;
float:right;
display:block;
border-bottom:5px solid #004278;
left:20px;
margin:87px 0 0;
padding:0;
}

#HEADER li {
float:left;
list-style:none;
display:inline;
background-image:url(../images/bg_topnav_li.gif);
background-repeat:repeat-y;
height:25px;
line-height:7px;
margin:0;
padding:0 27px 0 5px;
}

#HEADER li a {
color:#FFF;
text-decoration:none;
font-size:11px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
}

#PATH {
display:block;
height:48px;
padding-left:220px;
margin:0;
background-image: url(../images/gr_bg.jpg);
}

#PATH span {
font-size:8pt;
color:#d0e9ff;
font-weight:700;
margin:0;
padding:1px 0 0;
}

#PATH a {
text-decoration:none;
color:#000;
font-size:8pt;
font-weight:400;
}

#PATH .Arrow {
color:#000;
top:-1px;
margin:0 2px;
}

#CONTENT_HOLDER {
width:1031px;
border-left:1px solid #393939;
border-right:1px solid #393939;
border-bottom:1px solid #393939;
margin:auto;
background-color: #8a8a8a;
}

#CONTENT {
display:block;
margin:27px 27px 27px 220px;
}

#CONTENT h1 {
line-height:14pt;
font-family:Arial, Helvetica, sans-serif;
font-weight:400;
font-size:14pt;
color:#d0e9ff;
margin:0 0 0.5em;
padding:0;
}

#CONTENT p {
text-align:justify;
text-indent:25px;
margin:0 0 10px;
padding:0;
}

#SIDEBAR {
width:151px;
display:table-cell;
margin-top:27px;
background-image:url(../images/bg_vline.gif);
background-repeat:repeat-y;
background-position:right;
float:left;
margin-bottom:20px;
padding:0 23px;
}

#SIDEBAR h1 {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
background-color:#004278;
text-align:center;
font-weight:700;
margin:0 0 17px;
padding:3px 0;
}

#SIDEBAR p {
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color: #fff;
padding-bottom:3px;
margin:0;
}

#SIDEBAR p.Date {
text-align:left;
font-size:8pt;
color:#fff;
font-weight:700;
line-height:8pt;
margin:0 0 3px;
}

#SIDEBAR p.More {
text-align:right;
margin-top:3px;
margin-bottom:18px;
}

#SIDEBAR p.More a {
font-size:8pt;
color:#d0e9ff;
text-decoration:none;
font-weight:700;
}

#FOOTER {
display:block;
clear:both;
/*background-image:url(../images/bg_footer.gif);
background-repeat:no-repeat;
background-position:right bottom;*/
margin:27px 27px 0 220px;
padding:0 0 20px;
}

#FOOTER ul {
background-image:url(../images/bg_hline.gif);
background-repeat:repeat-x;
list-style:none;
display:block;
margin:0;
padding:5px 0 0;
}

#FOOTER li {
list-style:none;
display:inline;
margin:0;
padding:0;
}

#FOOTER li a {
color:#000;
text-decoration:none;
font-size:9pt;
font-family:"MS Sans Serif", Geneva, sans-serif;
margin-left:6px;
margin-right:6px;
}

#FOOTER li a.First {
margin-left:0;
}

#FOOTER p {
font-family:"MS Sans Serif", Geneva, sans-serif;
font-size:9pt;
margin:5px 0 0;
}

#FOOTER a {
font-family:"MS Sans Serif", Geneva, sans-serif;
font-size:9pt;
color:#000;
text-decoration:none;
}

#HEADER li a:hover,#PATH a:hover {
text-decoration:none;
position:relative;
top:-1px;
}

#SIDEBAR p.More a:hover,#FOOTER li a:hover,#FOOTER a:hover {
text-decoration:underline;
color: #d0e9ff;
}

[Verwijderd]

Ik denk dat de halve WoW communinity inmiddels je server omzeep heeft geholpen

Firefox kan de server op www.wyihaximus.net niet vinden.

[Verwijderd]

Het zit ergens in de structuur niet helemaal lekker, maar vrij veel code om dit snel even op te lossen.

Dit is in ieder geval een oplossing.

Cascading Stylesheet:

img#resize {
   position:absolute;
}

[WyriHaximus]

Verwijderd schreef op woensdag 06 december 2006 @ 14:18:
Ik denk dat de halve WoW communinity inmiddels je server omzeep heeft geholpen

Firefox kan de server op www.wyihaximus.net niet vinden.

Typo mijn fout zit met een toetsenbord met een vage layout: www.wyrihaximus.net

Verwijderd schreef op woensdag 06 december 2006 @ 14:25:
Het zit ergens in de structuur niet helemaal lekker, maar vrij veel code om dit snel even op te lossen.

Dit is in ieder geval een oplossing.

Cascading Stylesheet:

img#resize {
   position:absolute;
}

Cool straks als ik thuis kom gelijk proberen .

[Verwijderd]

Misschien een beetje kip en het ei replei maaaaaar: Wil je niet liever ervoor zorgen dat plaatjes uberhaubt niet buiten de lay-out gaan vallen?

[Verwijderd]

Position absolute werkt niet helemaal goed in IE, dit kun je ook proberen.

Cascading Stylesheet:

img#resize {
  float:left;
  clear:right;
}

[XWB]

IE plaatst te brede content gewoon onderaan, bekend probleem. Als je de container waar het plaatje inzit laat floaten zou het goed moeten gaan. Het plaatje laten floaten zoals F12 zegt zou ook kunnen werken maar dat weet ik niet zeker.

[WyriHaximus]

Verwijderd schreef op woensdag 06 december 2006 @ 14:25:
Het zit ergens in de structuur niet helemaal lekker, maar vrij veel code om dit snel even op te lossen.

Dit is in ieder geval een oplossing.

Cascading Stylesheet:

img#resize {
   position:absolute;
}

Top werkt .

Verwijderd schreef op woensdag 06 december 2006 @ 16:15:
Position absolute werkt niet helemaal goed in IE, dit kun je ook proberen.

Cascading Stylesheet:

img#resize {
  float:left;
  clear:right;
}

Top werkt ook .

Verwijderd schreef op woensdag 06 december 2006 @ 15:36:
Misschien een beetje kip en het ei replei maaaaaar: Wil je niet liever ervoor zorgen dat plaatjes uberhaubt niet buiten de lay-out gaan vallen?

Het liefst wel natuurlijk, maar ik ga er geen dingen speciaal voor resizen. Daarom ben ik ook opzoekn naar een forum.fok.nl achtige auto resize maar daar wil ik niet afhankelijk van zijn .

Hacku schreef op woensdag 06 december 2006 @ 16:50:
IE plaatst te brede content gewoon onderaan, bekend probleem. Als je de container waar het plaatje inzit laat floaten zou het goed moeten gaan. Het plaatje laten floaten zoals F12 zegt zou ook kunnen werken maar dat weet ik niet zeker.

Het werkt . Maar misschien is de container laten floaten een beter idee.

Iig bedankt allemaal .