[AnOnYmUs]

Tjenixen!

Håller fortfarande på att lära mig CSS och har stött på ett problem som jag inte klarar av att lösa själv.

Jag har sökruta på en sida där jag använt en bakgrundsbild istället för den traditionella input-rutan. Problemet är att jag nu inte får line-height att fungera för FF vilket gör att texten hamnar lite olika per browsers.

IE och Chrome hamnar texten i samma höjd

FF hamnar texten högst upp.

Problem nummer 2 är att bakgrundsbilden är 51px hög, men själva "sökrutan" på bilden är bara 44px hög (i bilden, resterande nedre del i bilden är en skuggning), så hur får ja texten att hamna i mitten av dessa 44px?

Några förslag?

Tacksam för svar. Ps. Som sagt, jag är ganska grön ännu Ds.

[Jonas]

line-height: xx;
font-size: xx;

Matten får du själv lösa

[crazzy]

För att få text att hamna i mitten av ett element:

#blabla {
        text-align: center;
        vertical-align: middle;
}

[marcuslind]

Gör en <div> som sökrutan hamnar i. Alltså följande:

<div id="sokruta">
<input type="text" name="sokord" />
</div>


CSS
----
#sokruta{
background: transparent url(gfx/sokruta.png);
}

#sokruta input{
border: 0px hidden transparent;
background: transparent;
margin: 5px;
}


Justera margin på #sokruta input{} för att positionera den korrekt. Du kan även skriva margin: 5px 0 0 0; eller margin: 0 5px 5px 0; för att bara ändra en eller flera sidor. (Siffra 1: Top, Siffra 2: Right, Siffra 3: Bottom, Siffra 4: Left).

Sedan ska du självklart lägga till width: ; height: ; och andra attribut som du behöver.

[AnOnYmUs]

Ursprungligen postat av Jonas

line-height: xx;
font-size: xx;

Matten får du själv lösa

Och detta löser det för FF? För jag skrev i mitt inlägg att jag inte får det att fungera för just FF

[crazzy]

Ursprungligen postat av AnOnYmUs

Och detta löser det för FF? För jag skrev i mitt inlägg att jag inte får det att fungera för just FF

Alltså, ren gissning att du hade lite inline element som du ville centrera i diven. Jag har ju inte en endaste aning om hur din kod ser ut.

[AnOnYmUs]

Ursprungligen postat av crazzy

Alltså, ren gissning att du hade lite inline element som du ville centrera i diven. Jag har ju inte en endaste aning om hur din kod ser ut.

Nä sant.

Jag har 4 ikoner och en sökruta som jag vill ha horisontellt. Till det har jag gjort en ul, li. Jag testade lösningen med div o input, problemet blev att den bytte rad. Så jag testade att göra en lösning med DIV LI - display inline och då hamnade den rätt.

Men nu blev bakgrundsbilden ungefär 13px hög bara.

<li>
<div class="searchframe">
<input name="search" type="text" value="Search city here">
</div>
</li>


.searchframe
{
background: transparent url('../images/search.png') no-repeat;
width: 304px;
height: 51px;
vertical-align: top;
padding: 0px;
margin: 0px;
}

.searchframe input
{
vertical-align: top;
margin: 0px 0px 0px 0xp;
background: transparent;
height: 41px;
line-height: 41px;
border: 0px hidden transparent;
width: 304px;
color: #FFF;
font-size: 25px;
font-weight: bold;
font-family: Helvetica, Helvetica-Narrow, Tahoma, sans-serif;
}

Plz, ha lite överseende med att jag är grön på det här, så om det är en massa kod som är onödig, så bli inte upprörda

[KarlRoos]

<li>
  <input class="searchframe" name="search" type="text" value="Search city here">
</li>

input.searchframe
{
width: 304px;
height: 41px;
line-height: 41px;
background: transparent url('../images/search.png') no-repeat;
margin: 0;
border: 0px;
color: #FFF;
font-size: 25px;
font-weight: bold;
font-family: Helvetica, Helvetica-Narrow, Tahoma, sans-serif;
}

Otestat. Borde dock funka

[AnOnYmUs]

Ursprungligen postat av KarlRoos

<li>
  <input class="searchframe" name="search" type="text" value="Search city here">
</li>

input.searchframe
{
width: 304px;
height: 41px;
line-height: 41px;
background: transparent url('../images/search.png') no-repeat;
margin: 0;
border: 0px;
color: #FFF;
font-size: 25px;
font-weight: bold;
font-family: Helvetica, Helvetica-Narrow, Tahoma, sans-serif;
}

Otestat. Borde dock funka

Tror det var min orginalkod och det fungerade tyvärr inte

En fråga angående transparent, hoppar inte den över alla lager ända ner till botten? Anledningen är för att testade flytta lite hit å dit å märkte att det var grått i botten, vilket är min bottenfärg för hela html/body.

[KarlRoos]

Kan du länka så man kan kolla hela såsen o.s.v.?