webForumDet fria alternativet

css som bråkar en smula

8 svar · 435 visningar · startad av qleblat

qleblatMedlem sedan jan. 200822 inlägg
#1

Hej.

Jag sitter med en sida som av någon anledning inte funkar. Har använt samma typ av sida för ett gäng produkter nu utan problem men nu är det något som bråkar. Om ni öppnar sidan ser ni vad jag menar.

Bilden på halsbands smycket skall ligga snällt till vänster, men av någon anledning gör den en radbrytning och knasar till hela layouten. Jag är rätt säker på att det är något i .buybutton biten, även fast det inte blir någon större skillnad när jag slänger på en display:none på den.

Försöker undvika att göra någon tablehack för att slippa små pillet men de vore ju inte lika l33t (sjukt viktigt). Några förslag? Eller är det något som det faktiskt vore legitimt att fixa med en table?

yes
css

headbugMedlem sedan sep. 2006867 inlägg
#2

Hej, jag brukar alltid öppna knasiga sidor i FireFox och sedan kolla i Tidy Validator addonen. är det riktigt illa kollar jag i FireBug-addonen också.

Men nu så kollade jag i varje fall med Tidy HTML Validator och din kod innehöll 23 fel, varav många nog är samma fel som propagerar. Men i denna finurliga addon kan man välja "Clean Up Code" och sedan previewa resultatet direkt och Lo and Behold - det blev bra.

Jag klistrar in den "rättade" koden om du vill ha den - annars rekommenderar jag dig att använda Firefox med dessa tre livsviktiga addons: Web developer, Tidy HTML Validator och FireBug.

Kort sagt verkar det som du missat en </div> vilket Tidy snällt påpekar!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=utf-8">
    <link href="../../../css/garden_pop.css" rel="stylesheet" type=
    "text/css">
    <title>
      Dog Tucker Traveler
    </title>
  </head>
  <body>
    <div id="popup">

      <div id="poptext">
        <h1>
          Stolen Heart Pedant
        </h1>
        <p>
          A beautiful neckless for your four-legged friend
        </p>
        <p id="price">
          only £36.95
        </p>

        <div class="buybutton">
          <form action="http://www.romancart.com/cart.asp" method=
          "post">
            <input type="hidden" name="storeid" value=
            "21564"><input type="hidden" name="quantity" value=
            "1"><input type="hidden" name="price" value=
            "36.95"><input type="hidden" name="itemname" value=
            "Stolen Heart Pedant">
            <div id="buyleft">
              <p>
                Personalization:
              </p>
              <p>
                Cord Size:
              </p>

            </div>
            <div id="buyright">
              <input type="text" name="itemname2" id=
              "pname"><select name="itemname" id="csize">
                <option value="Please Select {exclude}">
                  Choose your size
                </option>
                <option value=" + Leather Cord 40 cm">
                  Leather Cord - 40 cm
                </option>
                <option value=" + Leather Cord 60 cm">

                  Leather Cord - 60 cm
                </option>
              </select> <input type="image" src=
              "../../../garden_site_images/bag.gif" alt=
              "Add to Basket" onclick=
              "top.basket.document.location.reload('http://www.evesorchard.co.uk/basket.htm');">
            </div>
          </form>
        </div><!--end buybutton-->
        <div id="back">
          <a href="javascript:history.go(-1)" onmouseover=
          "self.status=document.referrer;return true">back</a>

        </div>
      </div>
      <div id="popimg">
        <img src="pet_jewellery_images/pet_stolenheart.jpg" name=
        "mypic" id="big" alt="#########">
      </div>
      <div id="popthumbs">
        -
      </div>
    </div>

  </body>
</html>
qleblatMedlem sedan jan. 200822 inlägg
#3

Toppen! Tack för tipset.

Blir lite nyfiken på vad som bråkade utöver detta, 23 fel lät lite mycket. Skyller ifrån mig på Dreamweaver så länge. ;) Skall ta och kika på de tilläggen direkt. Tack igen.

(Satt precis och validerade min css, vette sjutton varför jag inte tänka på att göra det samma för html sidorna, doh)

headbugMedlem sedan sep. 2006867 inlägg
#4

Det mesta handlade om 2 saker: du har valt xhtml och då måste man för det första ha dubbelfnutt runt alla attribut, tex <input type="submit" /> och inte <input type=submit />.

För det andra så måste man stänga alla taggar, även om dom är en "en-taggs-tagg" :) Så man måste skriva <img src="" alt="" /> och inte bara <img src="" alt="">. Observera dom obligatoriska dubbelfnuttarna också :D. Och när det gäller vanliga två-taggs-taggar så stänger du som vanligt med <p> yada yada </p> osv...

Sjukt viktigt var dagens sanning :p

qleblatMedlem sedan jan. 200822 inlägg
#5

Minns att jag satt i förrgår och gjorde just de ändringarna på sidan. Måste ha glömt att ladda upp den senaste versionen. Hade kopierat in lite kod och märkte att den hade just de felen. Det andra var nog good ol' slarvfel. Oh well. Det funkar finfint nu. Tack igen. :)

qleblatMedlem sedan jan. 200822 inlägg
#6

Ah, tänkte inte på de kära input taggarna. Rats. Siten är full av dem. Lite att göra med andra ord.

headbugMedlem sedan sep. 2006867 inlägg
#7

jag tror du kan få DW att automagiskt sätta fnuttar runt attribut där det saknas. Har ett svagt minne av att jag använt det någon gång.

headbugMedlem sedan sep. 2006867 inlägg
#8

Found it: Under menyn Commands -> Clean Up XHTML

qleblatMedlem sedan jan. 200822 inlägg
#9

Toppen. Letade precis efter något liknande.

130 ms totalt · 3 externa anrop · v20260731065814-full.fb544a5a
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)