[CSS] image herhaalt zich ongewenst in IE

[Haan]

Ik ben bezig om een startpagina voor mezelf te maken, vooral functioneel, maar het moet er natuurlijk wel een beetje leuk uitzien
De vorige die ik had, was nog met frames, maar na alle verhalen hier ben ik het ook maar eens met div's en css gaan proberen.. Dat lukt tot nu toe vrij aardig, maar er zijn soms nog wat rare dingetjes (en altijd alleen met IE )

In dit geval gaat het over een balk bovenin, die ik 'banner' heb genoemd. In IE wil dit alleen niet helemaal goed werken als het scherm gemaximaliseerd is (in kleiner venster gaat het dus wel goed).

Relevante code:

Cascading Stylesheet:

#banner{
position: relative;
width: 100%;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image:  url("banner_background.gif");
}

HTML:

<div id="banner"> 
    [img]"banner_left.gif"[/img] [img]"banner_right.gif"[/img]

Plaatje:


Hierop is dus te zien dat het plaatje dat aan de linkerkant voor een mooie ronding zorgt, zich aan de rechterkant weer herhaalt.. Ik heb het nu wel weten op te lossen door de width op 99,9% te zetten, maar ik denk dat er ook een andere (betere?) manier zou moeten zijn, dus met width gewoon netjes op 100%.
Ik heb alle vormen van position geprobeerd, maar dat hielp in ieder geval niets..

[Lukse]

Zoek eens op no-repeat of iets in die aard.
Een achtergrond afbeelding wordt standaard herhaald.

edit: ik neem aan dat het de background img is die herhaald wordt. Een normale img kan natuurlijk niet herhalen.

[ Voor 38% gewijzigd door Lukse op 23-06-2005 21:12 ]

[Rowanov]

Cascading Stylesheet:

background-repeat: no-repeat;

Even ter info background-repeat.

[ Voor 55% gewijzigd door Rowanov op 23-06-2005 21:15 ]

[Haan]

Bedankt voor de tips, alleen gaat dit niet zo goed werken, want die balk bestaat uit een heel smal gifje met een gradient die telkens herhaald wordt en zo dus de balk vult. Met die no-repeat heb ik dus geen achtergrond meer voor m'n balk .. Maar de rechterkant zag er wel goed uit

[ Voor 5% gewijzigd door Haan op 23-06-2005 21:22 ]

[Rowanov]

Is dat hoekje wat je gebruikt een plaatje? Zo ja, dan moet je de marges daarvan op 0 zetten en de padding van je omvattende div ook.

Cascading Stylesheet:

img { 
   margin: 0;
}

edit:
Je hoeft geen eenheid (px) achter een 0 te zetten, 0 koeien is gelijk aan 0 pixels zeg maar; het blijft 0

[ Voor 42% gewijzigd door Rowanov op 23-06-2005 21:27 ]

[Haan]

Rowanov schreef op donderdag 23 juni 2005 @ 21:26:
Is dat hoekje wat je gebruikt een plaatje? Zo ja, dan moet je de marges daarvan op 0 zetten en de padding van je omvattende div ook.

Cascading Stylesheet:

img { 
   margin: 0;
}

Met margin 0 blijft het, maar margin -1 lost het op en ik zal overal '0' van maken zonder px

Maar wat is nou de mooiste manier volgens jullie? Mijn eerste manier, of die margin op -1 ? Of maakt het eigenlijk niks uit..

[Lukse]

Haan schreef op donderdag 23 juni 2005 @ 21:36:
Maar wat is nou de mooiste manier volgens jullie? Mijn eerste manier, of die margin op -1 ? Of maakt het eigenlijk niks uit..

Geen van beide, lijkt mij
Moet toch een ander manier zijn, padding mss, de spaties weghalen?
Laat anders de html even zien. nm

[ Voor 5% gewijzigd door Lukse op 23-06-2005 21:41 ]

[Rowanov]

Natuurlijk zijn er andere manieren, maar dit is opzich een prima oplossing; je past je html code geenszins aan, alleen je css.

[gvdh81]

Dat gaat niet cross browser werken, negative margins. Het probleem is dat je spaties of tabs tussen de divs hebt en sommige browsers (waaronder IE) pleuren er dan 1 pixel bij (om en nabij).

d.w.z. dit is fout:

code:

<div id="banner"> 
    [img]"banner_left.gif"[/img] [img]"banner_right.gif"[/img]
</div>

Maar dit zal goed gaan:

code:

<div id="banner">[img]"banner_left.gif"[/img][img]"banner_right.gif"[/img]</div>

Dus zorg ervoor dat je geen tabs, spaties of wat dan ook hebt in die banner en het zal goed gaan.

[ Voor 30% gewijzigd door gvdh81 op 23-06-2005 21:47 ]

[Haan]

Ik heb nu één enorme regel waar alles van die div staat, maar het mag niet baten..
Ik laat het nu maar even zo als ik het had, moet nu weg achter deze pc, dus kan er morgen weer naar kijken hoop ik..

[ Voor 43% gewijzigd door Haan op 23-06-2005 21:57 ]

[gvdh81]

Als je echt ALLE spaties eruit hebt gehaald lijkt me dat een beetje onwaarschijnlijk, maar als jij het zegt zal het wel kloppen

P.s. ik heb ook de volgende spatie eruit gehaald he?

code:

id="bnrL"> <img src="banne