Jobbig border som inte vill försvinna

Tråden skapades och har fått 11 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Trollhättan
  • 2007-12-11 13:53

Hej!

Nu har jag suttit och pillat med den här satans bordern en bra stund, men hittar ingen lösning att få bort den. Det är en border både i firefox och IE, men den är större i FF på nåt konstigt sätt. Jag använder mig bara av float-funktionen nu, så divvarna ska väl egentligen vara intill varandra?

Så här ser dom ut:

I IE:

Nu har ja markerat divarna med grönt, så ni ser hur bilderna ligger. Ser ni den svarta bordern? Det blir en border mellan två bilder som ligger ovanpå varann, medans två som ligger bredvid varann är intill varandra, som dom ska vara.

Såhär ser det ut i FF:

... och här är det samma sak; bilderna bredvid varann ligger som dom ska, men bilderna på höjden blir det en border mellan.

Hoppas nån förstår när jag förklarar så här konstigt, men komplexa problem behöver komplexa förklaringar.

Hjälp! \\Dana

Det låter som om du har fått till någon nedärvd css som ställer till det. Ta bort dina border-attribut ett efter ett för att enklast hitta orsaken. Annars, om du har en massa nestade containers i olika färger så kan det vara något misspass där. Plocka bort attribut ett efter ett för att hitta vad som ställer till det - eller posta din css och ev html här.

Om du inte redan gjort det, ta hem pluginen Firebug till Firefox. Med den kan du ganska enkelt ta reda på vilka css-regler som påverkar ett element.

  • Medlem
  • Trollhättan
  • 2007-12-12 11:26

Såhär ser min css ut:
body {
text-align:left;
background-image: url("BG_color.jpg");
margin:0;
padding:0;
}
#wrapper{
width: 800px;
margin: 0 auto;

}
#box{
margin: 0 auto;

}
#buttons{
float: left;

}
#left{
float: left;

}
#topborder_off{
float: right;

}
#leftborder_off{
float: left;
margin: 0 auto;

}
#button_off{
float: left;
margin: 0 auto;

}
#rightborder_off{
float: right;
margin: 0 auto;

}
#bottomborder_off{
float: left;
margin: 0 auto;

}

-------------------------------

All margin och padding står ju på 0, så det borde väl vara rätt? Jag testade ta bort all margin och padding, men det blev ingen skillnad.

Jag blir naturligtvis mycket nyfiken på dina id "topborder_off" m fl - använder du en uppsättning divar för att skapa ramar? Låter ju som en tänkbar källa till problem.

  • Medlem
  • Trollhättan
  • 2007-12-13 13:17

Tack för svaret, ninjamac!

Bilderna heter bara top_border, och left_border, så det är inte det som är konstigt.

Men ja, jag använder en massa divvar till att placera ut bilder.. borde jag inte göra det? Jag använder divvar till det mesta, och det har jag alltid gjort.

Jag är ganska osäker på det mesta som har med webbdesign o göra, så... upplys mig!:)

Tja, din css ovan gör ju egentligen inte nånting att prata om. I detta läget skulle jag behöva titta på din html för att se vad som egentligen händer.
Huruvida du "borde" använda en massa divvar till allting eller inte kan ju diskuteras - men är knappast någon skada i sig.

  • Medlem
  • Trollhättan
  • 2007-12-17 13:20

Ninja: Här är html-koden:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>

<font size="1">
<font color="#ffffff">
<font face="Verdana">
<title>Dana</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css" />

<script LANGUAGE="JavaScript">

</script>
<script LANGUAGE="JavaScript1.1">

</script>
</head>
<body>

<div id="wrapper">

<div>
<img src="top.png" alt="banner" height="152" width="800" />
</div>

<div id="left">
<img src="left.png" alt="left" height="872" width="114" />
</div>

<div id="topborder_off">
<img src="topborder_off.png" alt="topborder_off" height="215" width="686"/>
</div>

<div id="leftborder_off">
<img src="leftborder_off.png" alt="leftborder_off" height="657" width="186"/>
</div>

<div id="button_off">
<a href="Page1.htm" onMouseOver="swtch('1','button_off')"
onMouseOut="swtch('0','button_off')"><img name="buton_off" src="button_off.png" border="0"></a>
</div>


<div id="rightborder_off">
<img src="rightborder_off.png" alt="rightborder_off" height="654" width="304"/>
</div>

<div id="bottomborder_off">
<img src="bottomborder_off.png" alt="bottomborder_off" height="461" width="196"/>
</div>

</div>
</body>
</html>

Har kollat på det och hittat problemet.

I och med att du använder floats och bilder inuti divvar så tolkas visst radhöjden in i beräkningen.. antagligen på grund av någon misspass mellan bilder.

Om jag tar bort dina font-taggar uppe i html head. (vad fasen gör de där..??)
och
sätter in
line-height:12px;
i bodytaggen så försvinner problemet.

Minst sagt underligt, men å andra sidan är din kod en smula udda också så du tycks ha snubblat på en samling omständigheter som triggar detta.

Om jag slänger bort allt "onödigt" i koden och bara kör en float på alla bilder så har du en utgångspunkt som kanske säger dig något - jag vet inte, men testa:
(ps, doctype som nedan ger bättre kompabilitet för CSS-baserade layouter)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dana</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background-image: url("BG_color.jpg");}
#wrapper{width:800px;margin:0 auto;}
img{float:left;}

</style>
</head>
<body>
<div id="wrapper">
<img src="top.png" alt="banner" height="152" width="800" />
<img src="left.png" alt="left" height="872" width="114" />
<img src="topborder_off.png" alt="topborder_off" height="215" width="686"/>
<img src="leftborder_off.png" alt="leftborder_off" height="657" width="186"/>
<img src="rightborder_off.png" alt="rightborder_off" height="654" width="304"/>
<img src="bottomborder_off.png" alt="bottomborder_off" height="461" width="196"/>
</div>
</body>
</html>

  • Medlem
  • Trollhättan
  • 2007-12-20 16:33

Herregud! Tack som fan! Har suttit på det här problemet i veckor nu.

Tack för din hjälp!:D

Grymt kul med en sådan respons! Kul att få hjälpa till!

  • Medlem
  • 2007-12-29 21:31

Hej,
Jag är grymt imponerad av att kunna se felaktigheter en kod som ovan!

Mitt problem är att jag inte kan "ladda upp" en sida med följande kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Frykerud Bilder</title>
<style type="text/css">

</style>
</head>

<body>
<span class="style3"><span class="style6">Foto på byggnader i Frykerud</span><br />
<span class="style5">Klicka på hemmansnamnet för att läsa om ortnamnet och på gårdsnamnet för att se bild och text </span></span>
<br />
</body>
</html>

Den är gjord i Dreamweaver/designläge. (Jag kan inget om koder)
Är det fel någonstans??

1
Bevaka tråden