[Slicing/IE7] Input + Fixed background = Troubles

[BlackWhizz]

Hoi,

Ik ben al een uur bezig met het volgende: Op deze slice van mij lijkt alles eerst goed, http://www.mixo.nl/maffiajob/Outgame/ echter, zo gauw ik in IE7 te veel tekst in een veld invul komen er problemen. Dan verschuift de achtergrond.

Simpel tcoh, dan hoef ik alleen maar fixed toe te voegen aan de background. echter, dan heb je geen achtergrond plaatje. Nu benk ik er achter gekomen dat dus background-repeat het probleem veroorzaakt van het niet weergeven van het plaatje. Dus background-repeat heb ik weggehaald.

Daarna geprobeerd om fixed te zetten. Maar dan laat het plaatje zich niet goed zien. De hoeken zitten namelijk aan de vooorkant in het midden. Ik heb al veel gesliced maar dit is echt een zwaar probleem. Ik krijg het maar niet voor elkaar.

Komt iemand van jullei dit bekend voor?

[Dekaasboer]

Laat eens zien hoe je die background repeat hebt opgebouwd dan? Repeaten gaat namelijk standaard in beide richtingen. Probeer het eens als volg in je css file:

Ik keek naar de verkeerde achtergrond,dan nu:

code:

#right {

    float: right;

    background: url('content_right.png') no-repeat left;

    width: 167px;

    height: 426px;

    font-weight: bold;

}

Maak daar eens van:
[s]

code:

#right {

    float: right;

    background: url('content_right.png');

        background-repeat: no-repeat;

        background-attachment:fixed;

        background-position:center; 

    width: 167px;

    height: 426px;

    font-weight: bold;

}

Laat maar zitten lost het niet op

Daarnaast kun je ook gewoon een max lengte aan je input geven. Dit werkt bij mijn sites prima, maar ik heb wel mijn formulieren in een lijst of tabel staat. Want feit is dat je nu de achtergrond aan een paragraaf koppelt (tekst dus) Bij een lijst of een tabel koppel je de achtergrond aan het element en niet de input.

Ik zie trouwens dat je een achtergrond in het invulvenster hebt zitten, en gewoon achter de website. Als ik resize lijnen ze niet netjes uit.

Je hebt de website toch al met png'tjes gemaakt, nu heeft png een functie voor transparantie
Ik heb het over deze:

[ Voor 83% gewijzigd door Dekaasboer op 30-06-2008 16:06 ]

[_Thanatos_]

Dat zal met met transparantie moeten, zeker als je wilt dat je website in de breedte schaalbaar is (voor high-dpi schermen en font-zooming, of gewoon voor fluid layout).

Je kunt eventueel je textbox binnen een div zetten die je de gewenste achtergrond geeft, en de textbox helemaal transparant maken.

[Kiphaas7]

EDIT 2: spuit elf, Thanatos was me een paar uur voor


Opera 9.50 heeft dit probleem niet. Ik heb dit probleem zelf ook eens gehad, en ik weet dat ie7 er niet zo mee omgaat, dus dat de achtergrond verschuift.

Een vieze oplossing zou zijn:

[code=html]
<span id="linker_rond_hoekje"></span>
<input type="text" name="username" />
<span id="rechter_rond_hoekje"></span>
[/code]

Of iets dergelijks . Wat de essentie van mijn verhaal is dat je het dus zodanig kan maken, dat een verschuivende achtergrond niet opvalt. Persoonlijk vond ik dat het wel niet netjes was (een verschuivende achtergrond, maar niks afdeed aan leesbaarheid. Overigens zal de combinatie lange input en ie7 niet zo vaak voorkomen.

EDIT:
Een zelfde redenatie kan je ook vinden in de source code van phpbb.com bij het zoekveld:
http://www.phpbb.com/

Wat mij op een iets minder vieze oplossing brengt voor jouw source:
[code=html]
<p id="bevat_achtergrond">
<input type="text" name="username" />
<p>
[/code]

Als je het p element fixed height/width maakt, kan je best de achtergrond van de input erin verwerken.

[ Voor 26% gewijzigd door Kiphaas7 op 30-06-2008 22:14 ]