[CSS] IE6 weigert "float left" en layout verspringt *

vrijdag 29 januari 2010 21:55

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

hallo,
Ik ben net aangesloten op dit forum en heb wat web-ervaring. Tot nu toe vooral websites in tabellen gemaakt. Sinds kort verken ik de wereld van DIVs, maar positioneren heb ik nog niet helemaal onder de knie.
Ik gebruik alles teveel door elkaar denk ik: margin, position, placement, ..

Momenteel heb ik heb een pagina van klaarstaan (verborgen online), en die toont goed in alle browsers... behalve Internet Explorer 6.

Ik heb 3 delen die ik naast elkaar wil tonen. Bij het eerste deel heb ik gewerkt met een float left, en de twee volgende DIV’s reageren daar niet op in IE6

Dit is mijn CSS (ik weet nog niet hoe ik deze codes overzichtelijk in dit bericht kan plaatsen: copy-paste?)

Cascading Stylesheet:

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; 
    padding: 0;
    text-align: center;
    color: #000000;
    background-color: #FFF;
    background-image: url();
    background-repeat: no-repeat;
}
.oneColFixCtr #container {
    border: 0px solid #CCC;
    background-image: url(../images/BG_.jpg);
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 700px;
    width: 950px;
}
.oneColFixCtr #mainContent {
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 15px;
    float: left;
    color: #f7941e;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    background-color: #373535;
    height: 653px;
    text-align: left;
    width: 345px;
    position: relative;
    left: 85px;
}
.oneColFixCtr #footer {
    text-align: right;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #CCC;
}
#navigatie {
    text-align: left;
    margin-right: 353px;
    margin-left: 455px;
}
body,td,th {
    font-size: 10pt;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
    margin-bottom: 0px;
}
#fish {
    margin-left: 597px;
    margin-top: -653px;

En dit is de broncode

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
-->
</style>
<link href="_.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script><style type="text/css">
<!--
body {
    background-color: #000;
    margin-top: 60px;
}
-->
</style></head>

<body class="oneColFixCtr" onload="MM_preloadImages('images/button_contact_RO.jpg','images/button__RO.jpg','images/button_werkwijze_RO.jpg')">

<div id="container">
  <div id="mainContent">
    <h1>  </h1>
    <p><strong>Van waar  komt de naam eigenlijk?</strong></p>
    <p> tekst </p>
  </div>
  <div class="oneColFixCtr" id="navigatie"><img src="../images/nav_top.jpg" width="142" height="442" align="absbottom" /><a href="portfolio/fullpage.html" target="_blank" onmouseover="MM_swapImage('Portfolio','','../images/button_portfolio_RO.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="../images/button_portfolio.jpg" alt="Portfolio" name="Portfolio" width="142" height="44" border="0" align="top" id="Portfolio" /></a><img src="../images/button__RO.jpg" width="142" height="48" align="top" /><a href="werkwijze.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Werkwijze','','../images/button_werkwijze_RO.jpg',1)"><img src="../images/button_werkwijze.jpg" alt="Werkwijze" name="Werkwijze" width="142" height="52" border="0" align="top" id="Werkwijze" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/button_contact_RO.jpg',1)"><img src="../images/button_contact.jpg" alt="contact" name="contact" width="142" height="40" border="0" align="top" id="contact" /></a><img src="../images/nav_bottom.jpg" width="142" height="27" align="top" /></div>
  <div id="fish"><img src="../images/fish.jpg" width="353" height="653" alt="fish" /></div>
<!-- end #container -->
</div>
</body>
</html>

Hopelijk kan er iemand mij in de juiste richting duwen?
Groeten,
Eveline

vrijdag 29 januari 2010 21:58

Acties:

0 Henk 'm!

Wiethoofd

Broadcast TOM

Css

Waarom zou je IE5 nog willen ondersteunen, laat een mooie banner zien dat de gebruiker moet upgraden naar een degelijke browser zoals Firefox/chrome/opera of de nieuwste IE-versie.

Verder even je lappen html en css tussen [code] blokken plaatsen: Overzicht van UBB-codes #tag_code

[ Voor 26% gewijzigd door Wiethoofd op 29-01-2010 21:58 ]

Volg me op Twitter/X & Bluesky

vrijdag 29 januari 2010 21:59

Acties:

0 Henk 'm!

Craven

Even afgezien van alle code, kan er namelijk zelf geen ruk van maar IE5???? Als je het werkend hebt in ie7/8, opera, firefox en safari is het toch harstikke netjes? ie6 is nog meegenomen maar ook niet echt noodzakelijk meer. IE5 is in dergelijke mate verouderd dat het gewoon echt niet meer kan.

vrijdag 29 januari 2010 22:01

Acties:

0 Henk 'm!

NiteSpeed

Gebruik firefox met Firebug om te zien waar het misgaat in de code. Inspect element is je grootste hulp hierbij.

Verder, laat astjeblieft nooit meer Dreamweaver code genereren voor je. Deze site is met wat handmatige HTML/CSS in veeeeel minder regels op te bouwen dan er nu al staan.

Third, waarom pak je in de CSS je #id ná je .classes? Nou heb je meerdere keren .oneColFixCtr {} uitgewerkt in je CSS met minimale codeverschillen alleen voor de ID's?

vrijdag 29 januari 2010 22:07

Acties:

0 Henk 'm!

AsoT

Wiethoofd schreef op vrijdag 29 januari 2010 @ 21:58:
Waarom zou je IE5 nog willen ondersteunen, laat een mooie banner zien dat de gebruiker moet upgraden naar een degelijke browser zoals Firefox/chrome/opera of de nieuwste IE-versie.

Verder even je lappen html en css tussen [code] blokken plaatsen: Overzicht van UBB-codes #tag_code

Inderdaad, zoals op smartschool die school gebruikt zijn ze onlangs ook gestopt met support voor IE6... Maak het ze gewoon subtiel duidelijk niet zo'n gigantische knop van 'UPDATE !'

vrijdag 29 januari 2010 22:13

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Hoi en welkom op GoT

Als je code post, gebruik dan a.u.b.code tags. Verder vinden we het altijd fijn als je je beperkt tot de relevante(!) code en dus niet complete scripts en andere zooi in je HTML (of andere code) laat staan die niet terzake doen. Dat is voor jezelf ook niet handig als je aan 't testen bent waar je probleem in zit of zou kunnen zitten.

Neem ook even onze Quickstart door; daarin zul je o.a. vinden hoe we hier graag een topicstart zien en zul je (dus) ook lezen dat we een beetje eigen inzet verwachten. Nu is het in dit geval toch wel aardig de schuld van IE5 vermoed ik (het ding is hoogbejaard

) maar toch.

Over dat IE5 verhaal: IE5 marketshare: 0.02%. Dat loont zich wel om nog uren in te steken ja

[ Voor 51% gewijzigd door RobIII op 29-01-2010 22:16 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

vrijdag 29 januari 2010 22:28

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

heb net mijn originele post aangepast. want ik bedoelde eigenlijk IE6.

vrijdag 29 januari 2010 22:31

Acties:

0 Henk 'm!

Cartman!

Opzich staat in de TS 2 keer IE6 ipv. IE5, ik gok dat de IE5 in de titel een typo is

Tipje voor IE debug: gooi er een paar backgroundkleuren in, als er iets uitsteekt wat de float naar onderen drukt dan zie je vaak vrij snel welk element er bokt

vrijdag 29 januari 2010 23:32

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

Cartman! schreef op vrijdag 29 januari 2010 @ 22:31:
Opzich staat in de TS 2 keer IE6 ipv. IE5, ik gok dat de IE5 in de titel een typo is

Er stond in de TS ook IE5

(Heb de titel ook meteen even gefixed).

Anyway: even een uitgeklede(!) testcase maken met enkel de relevante CSS/markup moet al verheldering geven denk ik.

Het probleem zit 'm in de container div die in IE6 niet breed genoeg is. En je hebt inderdaad wel een vreemde manier van positioneren met allerlei negatieve margins e.d. die helemaal niet nodig zijn en een flinke background (BG_MissViss.jpg) waarvan je helemaal niets ziet behalve het stukje in de footer; waarom snij je 'm dan niet wat kleiner en zet je 'm dan niet op de footer? < My bad; 't komt aan de linkerkant ook gedeeltelijk terug zie ik nu.

Ook in je CSS zitten wat rariteiten als:

Cascading Stylesheet:

body {
    background: #666666;
    ....
    background-color: #FFF;
    background-image: url());
}

Daar zie ik al een haakje teveel bij een (lege

) url en zet je een shorthand background alleen op een kleur en vervolgens background-color weer op een andere kleur..

Ik ben er even mee aan 't stoeien geweest (en had 't werkend in alle browsers, inc. IE6) maar toen ik de margins/paddings allemaal ging corrigeren en op logische(re) plaatsen zetten ging 't ergens mis en had ik er geen zin meer in. Kijk daar ook even naar dus (en zorg dat je het verschil kent tussen margin en padding

)

Mijn tip van de dag: drop alle WYSIWY(W)G tools en leer HTML/CSS met de hand schrijven

[ Voor 78% gewijzigd door RobIII op 30-01-2010 00:42 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 30 januari 2010 18:42

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

bedankt voor de reactie. ik zal mijn code opschonen. misschien terug van scratch beginnen, om het beheersbaar te houden.
k moet nog wat onderzoek doen over welke instellingen ik best gebruik: margins, positioning, placement, ...

zaterdag 30 januari 2010 20:25

Acties:

0 Henk 'm!

curry684

left part of the evil twins

RobIII schreef op vrijdag 29 januari 2010 @ 23:32:
Het probleem zit 'm in de container div die in IE6 niet breed genoeg is. En je hebt inderdaad wel een vreemde manier van positioneren met allerlei negatieve margins e.d. die helemaal niet nodig zijn

Nog afgezien van het minuscule detail dat IE6 helemaal geen negative margins ondersteunt.

Verwijderd schreef op zaterdag 30 januari 2010 @ 18:42:
bedankt voor de reactie. ik zal mijn code opschonen. misschien terug van scratch beginnen, om het beheersbaar te houden.
k moet nog wat onderzoek doen over welke instellingen ik best gebruik: margins, positioning, placement, ...

Zo moeilijk is het niet. Je hebt:
• Positionering, oftewel waar komt het element (absolute/relative/static/fixed/float)
• Margin, oftewel hoeveel ruimte zit er om het element buiten de border
• Border, oftewel wat zit er aan vulling om het element
• Padding, oftewel hoeveel ruimte er zit om het element binnen de border

Het is geen kwestie van 'welke instellingen gebruik ik het best', maar weten waar je mee bezig bent en 'right tool for the right job' gebruiken. Als je weet wat alles doet wijst het zichzelf merendeels.

[ Voor 18% gewijzigd door curry684 op 30-01-2010 20:27 ]

Professionele website nodig?

zondag 31 januari 2010 11:48

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ik ben herbegonnen, en alle onnodige dingen weggelaten. ipv mijn maincontent een margin left te geven, heb ik een image van de background toegevoegd. zo blijft alles op z'n plaats. float left geeft nu geen problemen meer. toont ook goed in IE6.

bedankt voor de reacties.

groeten, Eveline

[ Voor 8% gewijzigd door Verwijderd op 05-02-2010 22:08 ]

Onderwerpen