[HTML / CSS] Plaatjes willen niet tegen de rand aan - Softwareontwikkeling

woensdag 9 maart 2005 13:12

Acties:

Vrolijkheid alom!

Topicstarter

Toen je de topictitel las dacht je "oh fuck, weer zo'n prutser"... toch?

Nou heb ik dit soort dingen al echt te vaak gedaan, maar ik krijg het hierbij maar niet voor elkaar. Ik heb heel simpel een aantal frames, met daarin pagina's. In het linker en rechter frame moet een plaatje in de hoek komen. Beide plaatjes willen best tegen de bovenkant aan, maar links of rechts tegen de rand... ho maar.

Aangezien ik er stellig van overtuigd was dat ik 't niet meer snapte heb ik allerlei sites gechecked, GoT topics bekeken en overal wordt verteld dat het moet op de manier die ik op dit moment heb. Hier wat code van in dit geval het linker frame:

HTML:

<html>
<head>
    <title>Test</title>
    <style>
        body{
            margin: 0;
            background-repeat: no-repeat;
            background-position: right 150;
            background-image: url('zijkant.jpg');
        }
    </style>
</head>
<body bgcolor='#F5F9FC'>
    [img]'plaatje.jpg'[/img]
</body>
</html>

Uiteraard heb ik ook dingen als topmarign, leftmargin, rightmargin, marginwidth, marginheigt geprobeerd en in de css alle margins per stuk benoemd (margin-left, margin-right etc.), helaas zonder resultaat. Ook dingen als padding, spacing of whatever ik kon vinden wat er niets mee te maken kon hebben maar er op leek heb ik geprobeerd.

Het wazige is, dat bovenstaande code in Firefox perfect werkt, precies zoals geplanned en exact zoals ik het wil hebben. In Internet Explorer (helaas nog steeds de meest gebruikte browser) echter blijven de plaatjes (plaatje.jpg) een pixel of 3 van de rand af staan, zowel links als rechts.

Help!

IE versie 6.0
Firefox versie 1.0

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 9 maart 2005 13:17

Acties:

Woudloper

« - _ - »

Een pixel of 3? Hmm, dat klink als de '3 pixel bug' bij Internet Explorer. Wellicht is dit artikel (bij simplebits) wellicht een uitkomst. Hier is over de 3 pixels geschreven en staat er ook een oplossing tussen...

woensdag 9 maart 2005 13:17

Acties:

Genoil

code:

1	<FRAMESET FRAMESPACING=0...

woensdag 9 maart 2005 13:19

Acties:

Verwijderd

Gooi om te beginnen 'bgcolor=etc', border='0' en align uit je html en regel dat met css. Wellicht dat het dan al beter gaat.

woensdag 9 maart 2005 13:22

Acties:

Woudloper

« - _ - »

Verwijderd schreef op woensdag 09 maart 2005 @ 13:19:
Gooi om te beginnen 'bgcolor=etc', border='0' en align uit je html en regel dat met css. Wellicht dat het dan al beter gaat.

Dat heeft er niets mee te maken, hoewel ik wel van mening ben dat je dat niet middels HTML, maar met CSS moet oplossen.

Wellicht kan de TS nog in dit topic kijken, want dat ging over hetzelfde probleem (genaamd: spookpixels)...

woensdag 9 maart 2005 13:24

Acties:

Verwijderd

Is het niet de whitespace om je image heen? Geef de image anders een display:block;.

woensdag 9 maart 2005 13:26

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ah dat lijkt inderdaad op die 3-pixel achtige bug, alhoewel ik geen floats gebruik. Ik ga 'm proberen.. zou erg fijn zijn als ik verder kon

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 9 maart 2005 13:37

Acties:

Rowanov

Kop eens wat anders...

Het wil wel eens helpen om bij je plaatje en je body de margin, padding en border allemaal op 0 te knallen.

code:

<html>
<head>
    <title>Test</title>
    <style>
        body, img{
                margin: 0;
                padding: 0;
                border: 0;
        }
    </style>
</head>
<body bgcolor='#F5F9FC'>
    [img]'plaatje.jpg'[/img]
</body>
</html>

Doet het hier gewoon, IE6 SP2 en FF.

[ Voor 80% gewijzigd door Rowanov op 09-03-2005 13:41 ]

woensdag 9 maart 2005 13:38

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Genoil schreef op woensdag 09 maart 2005 @ 13:17:
code:
1
<FRAMESET FRAMESPACING=0...

Volgens mij is dat het enige correcte antwoord hier. Dit dacht ik ook meteen. Die 3 pixel bug is namelijk alleen van toepassing op Images en block-level elementen als ik me niet vergis, en niet op background images (of ik bedoel een andere bug

). Sterker, volgens mij is 'ie niet eens van toepassing op images, maar alleen op block-level floats:

quote: http://positioniseverything.net/explorer/threepxtest.html
Special Note: If the float is an image (or presumably, other generated content), then the 3px line box space is NOT applied by IE.

Tevens geeft de TS aan dat het plaatje als <img> én niet als background tegen de randen aan wil en zegt hij frames te gebruiken. Mijn 1e gedachte dus: framespacing en frameborder spul...

[ Voor 71% gewijzigd door RobIII op 09-03-2005 13:44 ]

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

woensdag 9 maart 2005 13:49

Acties:

Woudloper

« - _ - »

RobIII schreef op woensdag 09 maart 2005 @ 13:38:
Tevens geeft de TS aan dat het plaatje als <img> én niet als background tegen de randen aan wil en zegt hij frames te gebruiken. Mijn 1e gedachte dus: framespacing en frameborder spul...

Heb je toevallig zijn voorbeeld code ook uitgeprobeerd met een eigen afbeelding? Want als je dat doet zie je dat het ook voorkomt wanneer je niet met frames werkt!

woensdag 9 maart 2005 13:50

Acties:

Genoil

ja ik voel me vereerd, en het framespacing attribuut moet voor IE idd wel gezet worden, maar er zitten nog steeds 3px links/rechts...

edit:

zet es een proper doctype...dat helpt!

[ Voor 17% gewijzigd door Genoil op 09-03-2005 13:51 ]

woensdag 9 maart 2005 13:51

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

In dat frame komen 2 plaatjes voor, 1 gewone <img> en 1 background. De background wil door de css netjes tegen de kant aan, aan beide kanten werkt dat in zowel FF als IE. Het gaat echt alleen om die <img>'s...

Wat ik alleen continu tegenkom in alle handleiding tegen de '3 pixel bug' is dat men met floats werkt, wat hier niet het geval is.

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 9 maart 2005 13:54

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Woudloper schreef op woensdag 09 maart 2005 @ 13:49:
[...]

Heb je toevallig zijn voorbeeld code ook uitgeprobeerd met een eigen afbeelding? Want als je dat doet zie je dat het ook voorkomt wanneer je niet met frames werkt!

Had het nog niet getest nee

Ik heb er overigens géén last van in mijn background image, alleen bij de <img>, en dat is dus idd waarschijnlijk vanwege de align="right" waardoor het een "float" wordt. Zonder de align komt 'ie prima te staan aan de linker kant.
Overigens gek, want ik kan me niet heugen er ooit last van gehad te hebben...

[ Voor 21% gewijzigd door RobIII op 09-03-2005 13:56 ]

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

woensdag 9 maart 2005 13:57

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Die align='right' is nog niet eens nodig, want dat wordt in de css al goed gezet (heb 'm ook weggehaald nu). De doctype er bij zetten heeft in ieder geval effect, nu gaat ie heel raar doen in zowel IE als FF, maar voor zover ik heb kunnen zien wel hetzelfde raar, dus daar zou ik misschien iets mee kunnen doen.

Aaah het had toch iets van doen met die aligns. Nu ik die er helemaal uit heb, en die doctype trouwens ook weer, werkt het in allebei de browsers naar behoren

Ik vond het ook al zo raar, het was me al eerder gelukt zonder al die 3-pixel-handleidingen. Hartelijk dank voor de suggesties, ik ben weer vrolijk

[ Voor 36% gewijzigd door Kaastosti op 09-03-2005 13:58 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 9 maart 2005 14:00

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Kaastosti schreef op woensdag 09 maart 2005 @ 13:57:
Die align='right' is nog niet eens nodig, want dat wordt in de css al goed gezet (heb 'm ook weggehaald nu). De doctype er bij zetten heeft in ieder geval effect, nu gaat ie heel raar doen in zowel IE als FF, maar voor zover ik heb kunnen zien wel hetzelfde raar, dus daar zou ik misschien iets mee kunnen doen.

Aaah het had toch iets van doen met die aligns. Nu ik die er helemaal uit heb, en die doctype trouwens ook weer, werkt het in allebei de browsers naar behoren Ik vond het ook al zo raar, het was me al eerder gelukt zonder al die 3-pixel-handleidingen. Hartelijk dank voor de suggesties, ik ben weer vrolijk

Ik begon al aan mezelf te twijfelen

Was al sites aan het zoeken waar ik dit principe in heb gebruikt maar kon er zo snel geen vinden. Guess dat ik dat altijd met een CSS heb opgelost in plaats van die align dan

Heb er iig nog nooit last van gehad.

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