Avatar billede koch Nybegynder
07. marts 2005 - 22:50 Der er 16 kommentarer

border omkring billeder er højere end billedet

jeg har et billede som jeg har sat en border omkring med css.

#rawside{
position:absolute;
left:390px;
top:330px;
border:1px solid #363635;
padding-bottom:0px;
margin-bottom:0px;
}

Men border omridser ikke kun billedet, den går lidt længere ned end billedet er højt, så man kan se noget af baggrunden. Hvordan kan jeg fikse dette?
Avatar billede Slater Ekspert
07. marts 2005 - 23:54 #1
prøv at give den en display:block;, eller sætte en <br /> bagefter billedet ..
IMG-tags opfører sig nogle gange meget mærkeligt, mht. linjeskift efter.

Har ikke lige gidet teste det, sorry. Er bare et forslag.
Avatar billede roenving Novice
08. marts 2005 - 02:56 #2
Har det noget med borderen at gøre ?-)
Avatar billede olebole Juniormester
08. marts 2005 - 11:30 #3
<ole>

Nej, border'en kan ikke have afstand til billedet, Der sker med garanti noget andet, du ikke er opmærksom på. Måske et link ville hjælpe  ;o)

/mvh
</bole>
Avatar billede futurefreak Nybegynder
08. marts 2005 - 11:36 #4
Kan det være en fejl i din skærmpixel?
Avatar billede koch Nybegynder
08. marts 2005 - 18:10 #5
Jeg har forsøgt med
display: block; <br /> efter billedet...

Siden er ikke lagt ud endnu.
Koden ser således ud:

#rawmain{
position:absolute;
left:175px;
top:240px;
border:1px solid #363635;
}


og når jeg indsætter billedet

      <div id="rawmain">
          <img src="pics/raw/drawingfront.jpg" height="147px" width="227px">
      </div>

Jeg har også forsøgt uden at skrive height og width på.
Avatar billede skovenborg Nybegynder
09. marts 2005 - 01:01 #6
øhm, er ikke helt klar over hvad logikken er i det her, men prøv:
#rawmain IMG {
    vertical-align:middle;
}
Normalt er vertical-align lig med baseline, og det laver åbenbart lidt rod i det i IE.
Avatar billede koch Nybegynder
09. marts 2005 - 01:23 #7
Det ændrer det ikke...
Avatar billede skovenborg Nybegynder
09. marts 2005 - 10:34 #8
okay, det gjorde godt nok her - men jeg havde selvfølgelig kun den lille bid med, som du viste.
Avatar billede koch Nybegynder
09. marts 2005 - 11:43 #9
Jeg satte det ind sådan her:
#rawside{
position:absolute;
left:390px;
top:330px;
border:1px solid #363635;
padding-bottom:0px;
margin-bottom:0px;
vertical-align:middle;
}


og igen når jeg kalder

      <div id="rawmain">
          <img src="pics/raw/drawingfront.jpg" height="147px" width="227px">
      </div>
Avatar billede olebole Juniormester
09. marts 2005 - 13:59 #10
Der er flere mulige løsninger (jeg går udfra, det er en fejl med forskellig id på CSS-selector og div). Du kan slette 'vertical-align:middle' og lægge div-slut-tag'et helt op efter billedet:
  <div id="rawmain">
    <img src="pics/raw/drawingfront.jpg" height="147px" width="227px"></div>

Eller du kan sætte 'font-size:0px' på div'et. Så er det ligegyldigt, hvor slut-tag'et står.

Eller du kan give billedet 'display:block' og igen lægge div-slut-tag'et op i r.... på billedet.

Problemet opstår i Win/IE, da MSHTML - som er den teknologi, IE og f.eks. Word bygger på - kaster et blanktegn, hvergang en linie skiftes. Der kommer derfor til at stå et blanktegn efter billedet, hvis div-slut-tag'et står på ny linie.
Avatar billede olebole Juniormester
09. marts 2005 - 14:00 #11
PS: I de to sidste løsninger, behøver du ikke slette 'vertical-align:middle' ... det er kun i første eksempel  :)
Avatar billede koch Nybegynder
09. marts 2005 - 19:58 #12
Sådan ;) Så  er det fikset i IE men i Firefox er den stadig gal! Har tilføjet font-size:0px; og sat </div> lige bag billedet!
Avatar billede olebole Juniormester
09. marts 2005 - 20:06 #13
Mozilla kræver nok 'display:block' på billedet ... det er en anden gammel særhed - denne gang bare i Mozilla  ;o)
Avatar billede koch Nybegynder
09. marts 2005 - 20:15 #14
Det hjalp ikke! Det ser nu således ud:
#rawmain{
position:absolute;
left:175px;
top:220px;
border:1px solid #363635;
font-size:0px;
display:block;
}

og </div> er lige bag billedet.
Avatar billede olebole Juniormester
09. marts 2005 - 21:04 #15
Den sidder lige i garnet hos mig i både FireFox 1.0 og en 'gammel' Mozilla 1.5 ... begge under WinXP
Avatar billede koch Nybegynder
09. marts 2005 - 21:46 #16
Mærkeligt. Jeg har følgende
#rawmain{
position:absolute;
left:175px;
top:220px;
border:1px solid #363635;
font-size:0px;
display:block;
}
<div id="rawmain"><img src="pics/raw/drawingfront.jpg"/></div>


Er dit magen til?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester