Problemer med plassering av bilde i IE

[Cobos]

Jeg driver å prøver å bytte fra tabeller til DIV og CSS design på en webside jeg driver å tukler med.

Det meste er nå iorden, men det er en detalj jeg sliter noe sinnsvakt med som bare kommer fram i IE...

 

Slik ser det ut i Firefox:

 

Slik ser det ut i IE 5,5:

 

HTML-koden som lager dette ser slik ut:

 

<div id="top_left">
<div id="top_left_line_top">
    <img src="images/hor_line.png" height="3" width="360px" alt="line" border="0">         
</div>
 ..... mere HTML
</div>

 

Og CSS'en som styrer dette ser slik ut:

div#top_left {width:360px; vertical-align:top; height:167px;float:left; position:relative; border: 2px dashed red; }
div#top_left_line_top {position: absolute; top:25px; left:0px; width:360px; max-height:3px; border: 2px dashed green;}

 

For å forklare litt mer så er problemet at jeg ønsker å bruke top: xxpx til å plassere den linja et spesifikt sted relativt til container div'en (top_left er container div). Problemet er at i IE så gjør den et eller annet slags offset slik at den div'en som inneholder linjebildet blir altfor stor og ikke bare akkurat så stor som bildet er, slik den skulle (eller i det minste er det logiske). Dette er veldig tydlig pga den grønne borderen som jeg har lagt på... Den røde er naturligvis border for container div'en. Så spørsmålet er hvordan skal jeg sørge for at IE ikke roter til designet mitt ?

(og borderene skal vekk naturligvis, de er bare der for debugging)

 

Cobos

[Cobos]

Nå fant jeg en slags fiks på dette ved at jeg bruker !important hacken i CSS'en til å kode en spesiell verdi for IE... Men det er jo ikke noen god eller riktig løsning...

 

Cobos

[Simon Zimmermann]

Hvorfor bruker du ikke hr?

Koden din ville da blitt noe sånt:

<div id="top_left">      
<hr id="tophr" />
..... mere HTML
</div>

og CSS:

#tophr {position: absolute; top:25px; left:0px; width:360px; height:3px; border: 2px dashed green; background-color: #000;

[Cobos]

Jeg prøvde å bytte ut bildet mitt av en strek med en hr og det interresante er at da blir det fortsatt feil, men denne gangen er det Mozilla som av en eller annen grunn legger den for langt ned ikke IE. Dessuten så rendres ikke en hr likt på forskjellige browsere og forskjellige plattformer, dermed ser det ikke bra ut. Poenget er nemlig at den horisontale linja skal forbindes med den lille linja en ser stikke ut nede i høyre hjørne på illustrasjonene mine...

Noen andre ideer ?

 

Cobos

[Simon Zimmermann]

Prøv å sette width: 100%.

 

Har du en link til siden?

[Arve Systad]

legg til dette øverst i stilarket og sjå om det bedrer ting litt:

* {
margin: 0;
padding: 0;
}

[Cobos]

* {
margin: 0;
padding: 0;
}

Dette hjelp desverre ikke i det hele tatt, og når jeg tenker etter har jeg prøvd å manuelt sette margin og padding til 0 på samtlige relevante kodelinker i CSS'en før...

 

Jeg er nødt til å få klarhet i en copyright detalj før jeg vil gå offentlig ut med siden slik at jeg kan desverre ikke vise link enda.

 

Hvis ikke noen andre har noen geniale ideer, kan jeg bruke den hack'en jeg har inntil jeg kan la folk se på siden ihvertfall Koderen i meg liker bare ikke browserspesifikke hacks og slikt, siden det gjør koden styggere og mer uoversiktlig...

 

Cobos

 

PS: Waldmeister, hva var det jeg skulle sette til 100% ?

[Haraldson]

Jeg er nødt til å få klarhet i en copyright detalj før jeg vil gå offentlig ut med siden slik at jeg kan desverre ikke vise link enda.

I Norge har du automatisk kopirettigheter, skjønner ikke helt det argumentet.