PDA

Volledige versie bekijken : Wie ziet het probleem? (CSS niet goed in IE; site validated)

Down
%Europe/Berlin %374 %2008, 09:59
Ik hoop dat jullie mij deze dienst ff kunnen bewijzen.. ik zit namelijk al een tijdje met een site die ik aan het opzetten ben: url verwijderd!

Ik krijg het echter maar niet voor elkaar om 'm in IE goed te krijgen (iets met de floats..), ik zit hier helaas op een mac zonder IE en in FireFox en Safari is ie wel goed.. wie o wie ziet het probleem?

Alvast onwijs bedankt!

EDIT: Ik zag dat de site nog niet ge-validate was.. nu dus wel, maar helaas nog steeds hetzelfde..
mknol
%Europe/Berlin %394 %2008, 10:28
ik zie niets online staan (404)?
Down
%Europe/Berlin %400 %2008, 10:37
vreemd.. nog steeds? Was ondertussen ook even uploaden namelijk.. :)
mknol
%Europe/Berlin %417 %2008, 11:01
vreemd.. nog steeds? Was ondertussen ook even uploaden namelijk.. :)
Nee, maar je kunt natuurlijk ook zelf op de link klikken :) Dan lijkt het mij dat je hetzelfde ziet.
Down
%Europe/Berlin %426 %2008, 11:13
Euh nee ik zie gewoon een website namelijk :) En op pc hier een verdieping lager ook.. en van 't weekend deed ie t bij mij thuis ook gewoon..
Aeronobe
%Europe/Berlin %447 %2008, 11:44
Het zou dan wel handig zijn moest je de CSS posten :)
Down
%Europe/Berlin %471 %2008, 12:19
CSS zit grotendeels in het HTML (tijdens ontwikkelfase) verder kun je de stylesheet gewoon uit de bron lezen :)

EDIT: Bij deze dan nog even de 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" xml:lang="en" lang="en">
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="css_js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("swf/3beelden_top.swf", "myContent", "629", "171", "9.0.0", "swf/expressInstall.swf");
</script>

<script type="text/javascript" src="css_js/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="css_js/stylesheet.css" />

</head>
<body>


<div id="container">
<!-- MENU -->
<div><img src="afbeeldingen/1.jpg" width="850px" height="64px" alt="" /></div>
<!-- /MENU -->

<div style="float:left;"><img src="afbeeldingen/2.jpg" width="221px" height="171px" alt="" /></div>
<!-- FLASH BLOKKEN -->
<div id="myContent" style="float:right;">
<h1>Alternative content</h1>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
<!-- ALTERNATIVE CONTENT --><img src="afbeeldingen/3.jpg" width="629px" height="171px" alt="" /> <!-- /ALTERNATIVE CONTENT -->
</div>
<!-- /FLASH BLOKKEN -->



<div style="float:left;"><img src="afbeeldingen/4.jpg" width="381px" height="264px" alt="" /></div>
<div style="float:left;"><img src="afbeeldingen/5.jpg" width="438px" height="264px" alt="" /></div>
<div style="float:right;"><img src="afbeeldingen/6.jpg" width="31px" height="264px" alt="" /></div>
<div style="background:#FF0000; height:100%;">
<div style="height:100%; background:#999999 url(afbeeldingen/7.jpg); clear:both; float:left; width:381px; height:238px;">&nbsp;</div>

<div style="background:#e3e3e3; float:left; width:428px;">
<h1>Titel</h1>
Tekst tekst tekst
<br /><br />
Hier komt een form
<br /><br />
</div>
<div style="float:right;"><img src="9.jpg" width="31px" height="238px" alt="" /></div>
</div>

<div id="footer" style="clear:both;"><img src="10.jpg" width="850px" height="46px" alt="" /></div>
</div>
</body>
</html>
voskuh
%Europe/Berlin %476 %2008, 12:25
Het waarschijnlijk te maken met de flash header. Als ik lokaal test zonder de header staat hij in IE wel goed.
digitalecartoons
%Europe/Berlin %505 %2008, 13:07
Net zo lang uit zowel het html als het css bestand dingen lopen deleten tot ik een wel erg minimaal bestandje overhield en erachter gekomen dat het aan de width van #container in het css bestand lag. Die waar het flash object in komt. Die was net een aantal pixels te klein voor IE. Veranderde ik die van 850 naar 853 dan ging het in IE wel goed. Wellicht dat je voor IE iets aan de padding/margin moet klooien om het ontwerp dan weer gelijk lijnend te krijgen als je die container-width vergroot, maar de flash verschuift dus naar beneden in IE omdat hij te weinig width voor het object heeft. In IE tenminste. Zelf ook al gemerkt dat padding/margins tussen IE en FF wel eens verschillen.

Hier is wat ik aan het html/css overhield. Met 853 ging het dus in IE goed:

/* CSS Document */
#container {
width:853px;
}
Down
%Europe/Berlin %518 %2008, 13:26
- flash header.. tja zou kunnen, maar de afmetingen staan goed..

- containergrootte: hmm ok ja die had ik idd nog niet geprobeerd.. ga er gelijk even mee rommelen, maar waarschijnlijk heb ik dan wel een paar pixels teveel in FF? Nou ja ik hou jullie op de hoogte!
Down
%Europe/Berlin %526 %2008, 13:38
hmm ja wat ik al dacht: containergrootte aanpassen is niet echt de oplossing.. idd iets met dat flash.. maar wat dan.. bah frustrerend!!!
digitalecartoons
%Europe/Berlin %605 %2008, 15:31
Het kan aan het swfobject zelf liggen. Kwam heeeel toevallig op iets raars. Bekijk deze code eens (uitsnede):

<script type="text/javascript" src="css_js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("swf/3beelden_top.swf", "myContent", "629", "171", "9.0.0");

<style type="text/css">
<!--
#container #myContent {
margin-left: 221px;
}
-->
</style>

</head>
<body>
<div id="container" width:"850px">
<div id="myContent" >alternatief
</div>
</div>

Beetje uitgeklede versie. Niets vreemds mee: het flash object krijgt een linker marge van 221 pixels. Nu dacht ik, als ik die style in de div myContent zelf zet zou dat natuurlijk net zo goed moeten werken:

<script type="text/javascript" src="css_js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("swf/3beelden_top.swf", "myContent", "629", "171", "9.0.0");</script>
</head>

<body>
<div id="container" width:"850px">
<div id="myContent" style="margin-left:221px">alternatief
</div>
</div>
</body

Wat schets mijn verbazing: het flash object gaat tegen de linkerkant aan. Verander ik myContent in myContent2 dan zie ik de alternatieve tekst wel 221 pixels naar rechts.

Schijnbaar kan het swfobject er niet goed tegen als de styles voor de div in de div zelf zitten. Ze zouden dus erbuiten of in een stylesheet moeten zitten.

Wat gebeurd er dus als je die styles van myContent die je nu hebt:
<div id="myContent" style="float:right; width:629px;">
eens naar je stylesheet verplaatst?

Zodat hier dus enkel dit komt te staan:
<div id="myContent">
En je dit aan je stylesheet toevoegt:
#myContent {
width:629px;
float:right;
}

Bij mij komt het flash object nu wel op z'n goeie plek in IE (en FF) te staan.
Down
%Europe/Berlin %636 %2008, 16:16
hmm interessant.. alvast bedankt voor je tijd en hulp! Ga gelijk checken of dit klopt..

Yes! Werkt super nu.. onwijs bedankt allen (en vooral 'digitale cartons' ik heb je reputatie ge-up-t ;))!