[CSS/DIV] Float: left in IE en FF - Softwareontwikkeling

vrijdag 7 maart 2008 12:25

Acties:

Topicstarter

Beste tweakers,

Na het internet afgestruint te hebben en geen specefiek antwoord op mijn vraag te hebben gekregen post ik hier een vraag. Meerdere tweakers zien namelijk meer dan 1

Inleiding:

Ben op het moment bezig om met divs een simpel fotoalbum te maken.
Het idee is dat je alle fotos naast elkaar inlaad en css automatisch een "enter" toevoegd, naarmate de breedte van de site overscheden word.

Dus:
- site is 600px breed
- foto is 60px breed
- Na 10 fotos (even zonder margins etc.) komt er een nieuwe regel met de overgebleven foto's

De achterliggende code naar de database bespaar ik jullie.

Probleem:

Om elke foto die geladen word komt een "<a href="#"></a>" te staan, netals een "<div></div>".
De link is bedoelt naar een vergrootte versie te linken. De div dient voor de opmaak.

Stukje code:

De fotos in een "<div>".

code:

1
2
3

<div class="naast-elkaar"><a href="#" target="_Self"><img width="150"src="src.jpg" alt="Alternative tekst">Naam die onder de foto komt</a></div>
<div class="naast-elkaar"><a href="#" target="_Self"><img width="150"src="src.jpg" alt="Alternative tekst">Naam die onder de foto komt</a></div>
<div class="naast-elkaar"><a href="#" target="_Self"><img width="150"src="src.jpg" alt="Alternative tekst">Naam die onder de foto komt</a></div>

Deel van mijn css ( op het moment voor troubleshooten in de zelfde pagina ):

code:

1
2
3

    <style type="text/css" media="screen">
        div.naast-elkaar    { display: inline; float: left; width: 150px; height: 200px;  margin: 5px; color: blue;}
    </style>

De rest van de pagina is geopenden met de standaard <html> tags.
Voorbeeld:

screenshot in IE(6):
Afbeeldingslocatie: http://meddie.nl/screen%20ie.jpg

screenshot in FF(2):
Afbeeldingslocatie: http://meddie.nl/screen%20ff.jpg

Wat ik al geprobeerd heb:
Verschillende divs om de alle fotos te zetten, die floaten en positie vast zetten.

Slot
Zou erg top zijn als iemand hier een oplossing voor heeft.
Mochten er dingen niet helemaal duidelijk zijn roep dan even, zetten we dat recht.

Probleem zal vast makkelijk op te lossen zijn, alleen ik zie de fout niet.

Alvast bedankt,

Ruud

vrijdag 7 maart 2008 12:38

Acties:

TeeDee

CQB 241

Met een zeer simpele testcase kan ik jouw probleem niet reproduceren.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <title>Title Description</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <style type="text/css">
    .imgbox{display:inline;float:left;border:solid 1px red;width:150px;height:200px;margin:5px;}
    #containert{width:600px;margin:0 auto;
    </style>
</head>
<body>
<div id="containert">

<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
<div class="imgbox"></div>
</div>
</body>
</html>

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 7 maart 2008 12:51

Acties:

P.O. Box

omdat "atelier met expositie ruimte" in IE ook meer naar links staat, moet je het denk ik in de omvattende div zoeken. IE heeft daar een probleem met de breedte. Geen idee wat voor probleem, aangezien je die code niet gepost hebt

vrijdag 7 maart 2008 13:37

Acties:

Xcalibur

Edwardvb schreef op vrijdag 07 maart 2008 @ 12:51:
omdat "atelier met expositie ruimte" in IE ook meer naar links staat, moet je het denk ik in de omvattende div zoeken. IE heeft daar een probleem met de breedte. Geen idee wat voor probleem, aangezien je die code niet gepost hebt

het lijkt er inderdaad op dat die te smal is om er uberhaupt 2 naast elkaar te zetten

Dingen effe een bordertje geven helpt ook wel om zoiets te vinden!

vrijdag 7 maart 2008 14:09

Acties:

reddevil

Background colors werken ook handig

als je nou een volledig voorbeeld toevallig ergens hebt, kijken we meteen even mee

vrijdag 7 maart 2008 14:22

Acties:

El_BingO

Kun je die divs ook niet beter display:block geven, of weglaten; het zijn immers al block elementen?

vrijdag 7 maart 2008 14:56

Acties:

RuudvandeBeeten

Topicstarter

Dank je voor alle reacties.
display heb ik weg gelaten. Het blijkt dat het probleem te maken heeft met de doctype.

vrijdag 7 maart 2008 16:44

Acties:

TeeDee

CQB 241

Welk doctype had je en welke heb je nu?

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 7 maart 2008 18:21

Acties:

RuudvandeBeeten

Topicstarter

Ik had geen doctype, nu heb ik strict HTML

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">