[Chidori]

Hej!

Jag har en halvfärdig shop design som jag försöker fixa som jag vill ha den innan en programmerare tar tag i den och ger den funktionerade kod. Den förra designen gjorde först en sida som avr menad för att skriva kommentarer till en produkt men jag ansåg att den kunde göras bättre och skapade derför en "pop up" div där man kan skriva kommentaren och sen skicka iväg istället för att forslas till en helt ny sida för att skriva en kommentar. Så jag snodde koden från den sidan och satta den på produktsidan men helt plötsligt är det som att förbindelsen med css filen är borta just för den diven och jag kan inte förstå varför.

<!-- Hidden div -->
<div class="grayback" style="position:absolute; left:5px; top:21px; z-index:99; padding:5px; border:#000 solid 1px;">
<form id="form3" name="form3" method="post" action="">
<table border="0" cellpadding="2" cellspacing="0" id="reviewform">
<tr align="left">
<td colspan="3">Title:
<label><input type="text" name="textfield4" id="textfield4" /></label>
</td>
</tr>
<tr align="left">
<td colspan="3">Comment:
<label><textarea name="textarea" id="textarea" cols="40" rows="5"></textarea></label></td>
</tr>
<tr align="left">
<td>Your name:
<label><input type="text" name="textfield3" id="textfield3" /></label></td>
<td> Your rating:

<label><select name="select" size="1" id="select">
<option value="1star">5 Stars</option>
<option value="2star">4 Stars</option>
<option value="3star">3 Stars</option>
<option value="4star">2 Stars</option>
<option value="5star">1 Star</option>
</select></label>
</td>
<td align="right"><div id="postreview"><label><input type="submit" name="button3" id="button3" value="Post" /></label></div></td> <--- denna rad läser inte av id="postreview" från css filen.
</tr>
<tr>
<td colspan="3">
Thank you for your rewiev!
It will be displayed within a day.
</td>
</tr>
</table>
</form>
</div>
<!-- Hidden div ends -->

#shopcart table#reviewform td#ratings img {
	margin:0px 10px 0px 0px;
	border:none;
}
#shopcart table#reviewform td {
	padding:2px 14px 2px 14px;
}
#shopcart table#reviewform td input {
	width:200px;
	padding:2px 0px 2px 0px;
	height:17px;
	border:1px solid #d8dde6;
	border-top:1px solid #999999;
	font-size:12px;
	font-weight:normal;
}
#shopcart table#reviewform td textarea {
	width:200px;
	padding:2px 0px 2px 0px;
	height:120px;
	border:1px solid #d8dde6;
	border-top:1px solid #999999;
	font-size:12px;
	font-weight:normal;
}
#shopcart table#reviewform td #postreview {
	background-image:url(../images/review.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	height:43px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	width:77px;
}
#shopcart table#reviewform td #postreview input {
	height:25px;
	width:77px;
	background:none;
	font-weight:bold;
	color:#FFFFFF;
	border:none;
}

Är det någon som kan hjälpa mig med varför det inte funkar som tänkt? knappen ska ha en grafisk look "../images/review.jpg" och vara en annan storlek etc men den läser inte av css filen för den diven.
Observera att denna kod inte är rensad och tillfixad eftersom det är en blandning mellan 2 sidor.

[taz76]

testa detta istället:

div#postreview { ...


istället för:
#shopcart table#reviewform td #postreview { ...


Kolla också att bilden har rätt sökväg och att den finns..

[Chidori]

Originally posted by taz76@Feb 17 2009, 16:31
testa detta istället:

div#postreview { ...


istället för:
#shopcart table#reviewform td #postreview { ...


Kolla också att bilden har rätt sökväg och att den finns..

Ja alltså jag tog som sagt samma kod som fanns på en annan sida och slistra in den och där funkade koden perfekt. Ska testa de du sa.

[Chidori]

Ursprungligen postat av Chidori

Ja alltså jag tog som sagt samma kod som fanns på en annan sida och slistra in den och där funkade koden perfekt. Ska testa de du sa.

Nu funkar det.

Jag tog ut "#postreview" och skrev allt i ett eget avsnitt nedanför så nu ser det ut såhär.

#shopcart table#reviewform td {
	background-image:url(../images/review.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	height:43px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	width:77px;
}
#postreview {
	background-image:url(../images/review.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	height:43px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	width:77px;

Varför kan jag inte ha all på en å samma rad när det funkar på en annan sida ?!? Fattar inget :/ Känns som en massa onödig kod. Detta måste gå att fixa på nått sätt.

[taz76]

Ursprungligen postat av Chidori

Då är det säkert något med selectorerna.. du haden en gigantisk "sökväg" först.. sen då du kortade ner den så funkade det.

[HMH]

I den html du har i inlägget så finns inget element med id #shopcart... är du säker på att du har det på båda ställena?

Dessutom lämnar html-koden mycket att önska; bl a tabell-baserad layout och en direkt felaktig användning av label-elementet... att inte ha korrekt och välstrukturerad kod är ofta skäl till huvudvärk. Svårt att säga om det har någon direkt inverkan i detta fallet dock.

[Chidori]

"direkt felaktig användning av label-elementet" Hjälp mig, vad du menar med det?

[Chidori]

Här är ett till problem som är likt.

Inget av id'erna funkar när det står så här.

#reviewform select #reviewform input {
border:1px solid #7F7F7F;
border-top:1px solid #999999;
font-size:12px;
font-weight:normal;
}

Men skriver jag dem i sperata stycker funkar det utmärkt, varför är det så? skriver jag något fel?

[Chidori]

det verkar ha någonting att göra med att det är i en absolut div, alla rader oavset vad det är så länge det finns i diven som är abolut så funkar det inte att definera 2st di's på samma rad.

[allstars]

Du skall selektera båda typerna med ett komma-tecken som separator

#reviewform select,
#reviewform input {
border:1px solid #7F7F7F;
border-top-color: #999;
font-size:12px;
font-weight:normal;
}

Vidare så förstår jag inte detta:

<label><select name="select" size="1" id="select">
<option value="1star">5 Stars</option>
<option value="2star">4 Stars</option>
<option value="3star">3 Stars</option>
<option value="4star">2 Stars</option>
<option value="5star">1 Star</option>
</select></label>

Etikett använder man för text för att hänvisa till(döpa) fältet

<label for="myselect">Betyg</label>
<select name="betyg" size="1" id="myselect">
<option value="1star">5 Stars</option>
<option value="2star">4 Stars</option>
<option value="3star">3 Stars</option>
<option value="4star">2 Stars</option>
<option value="5star">1 Star</option>
</select>

Notera att jag ändrat id och name på selecten för att du skall förstå skillnaden.