[HTML & CSS] Inputs met verborgen marge - Softwareontwikkeling

vrijdag 18 augustus 2006 16:16

Acties:

Topicstarter

Voor een website gebruik ik het volgende stukje code, dit alles komt netjes in een rechthoek te staan in FF. In IE6 flipt echter de laatste input weg! Als ik de inputs vervang door images dan werkt alles wel zoals het hoort.

Ik heb al zitten prutsen met marges en padding, door alles op 0 te zetten, maar niets werkt. Het lijkt alsof hij gewoon niet genoeg ruimte aan de zijkant heeft. Als ik de div breder maak is er niets aan de hand.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<title></title>
<style type='text/css'>
div#photos {
    border: 1px solid #000;
    padding: 1px;
    float: left;
    width: 369px;
    height: 184px;
}

img#photo_0 {
    margin: 1px;
    float: left;
    width: 275px;
    height: 184px;
}

input#thumb_0, input#thumb_1, input#thumb_2 {
    margin: 1px;
    float: left;
    width: 90px;
    height: 60px;
}
</style>
</head>
<body>

<div id='photos'>
<img id='photo_0'>
<input id='thumb_0' type='image'>
<input id='thumb_1' type='image'>
<input id='thumb_2' type='image'>
</div>

</body>
</html>

Ik heb hier op GOT gezocht, maar ik kan er niets over vinden. Hoewel het ook moeilijk is om hier goede zoekwoorden voor te vinden.

zaterdag 19 augustus 2006 12:13

Acties:

crisp

Devver

Pixelated

Het is een combinatie van IE's double margin-bug bij floats en het feit dat IE's collapsing-margin model buggy is. De beste oplossing is om gewoon je div#photos iets breder te maken - 372px will do

Intentionally left blank

zaterdag 19 augustus 2006 19:40

Acties:

Fles

Topicstarter

Dan is de marge alleen niet meer even breed aan alle kanten. Ik dacht dat het opgelost was als je display op inline zou zetten. Float elementen worden toch block, maar hiermee was het helaas niet opgelost

Gokte al op die IE bug, maar dacht dat dit het niet was, omdat ik het niet op kon lossen met display op inline.

zaterdag 19 augustus 2006 22:42

Acties:

D4V3

anders zet je onder je huidige width een _width: 372px, dan ziet valt hij er in IE niet meer af en ziet hij er in FF gewoon hetzelfde uit

(de _ wordt alleen door internet explorer genegeerd en dus gepakt als width element waardoor de andere browser hier niet naar zullen kijken).

op-voorraad.nl - Realtime voorraad updates voor de Playstation 5!

zondag 20 augustus 2006 23:18

Acties:

Fles

Topicstarter

Alleen ziet hij er voor het meren deel van de bezoekers gewoon beroerd uit door die 3 pixels extra

Ik los het wel op door de input te veranderen in een afbeelding met een javascript link. Als het niet kan zoals het moet...