CSS button achtergrond

Status
Niet open voor verdere reacties.
B

blackeagle67

Gebruiker
Lid geworden
13 okt 2009
Berichten
158
Ok ik probeer een navigatie balk te maken.
Met afbeeldingen daarin.
Enkele zijn daadwerkelijk ook afbeeldingen en zien er goed uit.

Maar als ik een button opmaak als afbeelding dan heb ik een klein probleempje.
De afbeelding is kleiner dan het eigenlijk is.
Dit vind ik erg vervelend omdat ik op andere pagina's dezelfde afbeelding gebruik maar niet als button.

Ik gebruik onderstaande code om de button op te maken.

div.first input
{
width: 20;
background: url(L_Icons/Obj0630.bmp) no-repeat left;
border: 0px;
}

Maar de button krimpt naar links toe.
Dit wil ik graag verhelpen maar weet niet goed hoe.
De afbeelding is gewoon 16px bij 16px en dit word ook goed laten zien als het geen button is.

Heeft iemand een zelfde soort probleem gehad?
 
Ik weet niet zeker of ik je vraag helemaal goed begrijp. Als dat niet zo is, zet dan even hier de html ook neer. Of beter nog: 'n link naar waar het online staat.

'n Achtergrond-afbeelding (background-image) vult alleen maar de achtergrond van het element waar hij in staat. Dus als de div bijvoorbeeld 10 x 10 px is, zie je ook maar 10 x 10 px van de afbeelding, ongeacht hoe groot de afbeelding is.

Als je in 'n div dus 'n achtergrond-afbeelding van 16 x 16 px wilt weergeven, moet je de div 16 px hoog en 16 px breed maken.

Twee andere dingen: je gebruikt 'n .bmp-afbeelding. Die kan niet door alle browsers worden weergegeven, dat is 'n Microsoft-formaat. Je kunt beter jpg, gif of png gebruiken, dat kunnen alle browsers weergeven.
In de naam van de afbeelding gebruik je hoofd- en kleine letters. Dat maakt voor Windows niets uit, maar op de meeste servers waar de site staat wel. Het is beter om alleen kleine letters te gebruiken, daar voorkom je veel problemen mee.
 
je kunt border ook weg halen als die op 0px staat .. :shocked:
Klik om te vergroten...
Mmm, ik zou daar maar niet zo zeker van zijn... :shocked:

Een input element (daarvan is hier sprake) heeft standaard een border-style "inset", d.w.z. zo'n venstertjes-border van 2px.
Als je in plaats daarvan een eigen achtergrond-img wil gebruiken, zou je die border wel eens op 0 kunnen willen zetten om er van af te zijn. ;)

En is het intussen gelukt, blackeagle67?

Met vriendelijke groet,
CSShunter
 
Helaas het is mij nog niet gelukt.
Het is gewoon zo dat de button een klein stukje krimpt.
Nogmaals de afbeeldingen die ik heb gekregen zijn allemaal 16px x 16px.
De hoogte van mijn table is daarom ook 16px.
Dit werkt voor alle buttons.
Alleen voor de afbeeldingen die buttons zijn worden een beetje kleiner.

dit is de css die ik heb gebruikt en werkt 100%(gecontroleerd met W3C CSS Validator)

div.save input
{
width: 19px;
background: url(L_Icons/Obj0614.bmp) no-repeat left;
border: 0px;
}

Dit is de html code:

<td><div class="save"><input type="submit" name="save" value="&nbsp;"></td>

kan het komen door: &nbsp; ?
Dat door de &nbsp; mijn afbeelding kleiner word?:confused:
 
Hoi blackeagle67,
Heb wat proefjes gedaan, en kan het verschijnsel niet reproduceren. :rolleyes:
Ik krijg daarom het vermoeden dat het niet in de style van de <input> zit, maar hogerop in de cascade.

Wat doet de class="save", welke styles zitten daarin?
En wat is de opmaak van je <table>, <tr> en <td> precies?

Maar het beste: kan je een voorbeeld-pagina maken en online zetten waarop we het "live" kunnen zien? Anders blijft het een beetje tasten in het duister.
Of desnoods de hele code van de pagina en de css hier neerzetten, en het achtergrondplaatje als attachment toevoegen?

Met vriendelijke groet,
CSShunter

[edit]En gebeurt het zowel in Internet Explorer (welke versie?) als in andere browsers? ;)[/edit]
 
Laatst bewerkt:
Los van de html en css (volledig) is het ook handig als je even zegt in welke browser en welke versie je dat probleem hebt. Er zijn nogal wat bugs en verschillen tussen browsers als het om het opmaken van forms en zo gaat.
'n Link naar iets online is trouwens verreweg 't makkelijkste.
<offtopic>Goeiemorgen csshunter :D </offtopic>
 
Laatst bewerkt:
<offtopic>Goeiemorgen csshunter :D</offtopic>
Klik om te vergroten...
<offtopic>Ook goeiemorgen, Goeroeboeroe!
Kregen we mooi op hetzelfde moment dezelfde ingeving (zie m'n Edit): kruispost! :D
</offtopic>
 
Hé bedankt ik denk idd dat het een browser bug is.

ik maak voor mijn stagebedrijf een inlogsysteem met opties na het inloggen.
De navigatie is daar een onderdeel van.
Het project moet er in Firefox goed uitzien.
Daarom zat ik hier zo op te hakken.
De breedte van de afbeelding veranderd niet in internet explorer 7 wel gebeuren er andere dingen maar dat is voor later.
Het lijkt erop dat het een browser bug is.

Zou mooi zijn als dit toch nog te fixen is, maar denk het niet.
Hier zitten trouwens de afbeeldingen bij voor degenen die het toch graag willen proberen.
Voorlopig laat ik het links liggen en hou het forum wel in de gaten.
Moet namelijk nu een gebruikersnaam scriptje maken m.b.v. ajax.:confused:
Dit moet controleren of de gebruikersnaam bestaat
 

Bijlagen

De breedte van de afbeelding verandert niet in internet explorer 7 (...).
Het lijkt erop dat het een browser bug is.
Klik om te vergroten...

Zou kunnen, maar van Firefox of IE? ;)

En heb je dit al eens geprobeerd (als je er eerst een gif-je van hebt gemaakt):
Code: 
[font=courier]#save {
	width: 16px;
	height: 16px;
	background: url(L_Icons/Obj0614.gif);
	border: 0;
	cursor: pointer;
	}[/font]
met:
HTML: 
<td><button type="submit" id="save" name="save"></button></td>
Want ik krijg de indruk dat het meer een klik-knopje is dan een tekst-invoerveld.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
oh sorry,

Het is inderdaad een klik knop.
Het slaat de ingevoerde gegevens op in de database die gehaald worden uit tekst boxen.
Sorry als ik daar niet geheel duidelijk in was.
Heb trouwens je code geprobeerd maar nog steeds hetzelfde :confused:
 
Heb even wat weinig tijd, maar ergens in mijn hoofd zweeft 'n vaag iets rond. (Heb ik wel vaker last van trouwens, dank u.)
Kun je die hele button niet in 'n div of span (als blok-element) of zo zetten en de background-image daaraan geven? Ik meen me vaag te herinneren dat je op die manier de problemen kunt omzeilen.
 
oh sorry de bug zit in Firefox.
in internet explorer ziet de afbeelding er hetzelfde uit kwa breedte.
op een pagina word de afbeelding gewoon als een afbeelding weergeven.
Dus deze doet niks en is dus de grijze versie van de save knop.
Op de volgende pagina voor het bewerken van gegevens is de afbeelding een button. Hierbij is deze kleiner dan op de vorige pagina ook al zijn deze van hetzelfde formaat.
Dit is een erg vervelend probleem. Het is maar een schoonheidsfoutje maar toch.
Als een gebruiker dit ziet zal hij of zij dit grappig/raar of irritant vinden, daarom zou het mooi zijn als er een oplossing voor is.

Alvast bedankt voor de hulp:thumb::o
 
Ik heb er 'n tijdje mee zitten spelen, maar het lukt mij niet de fout te reproduceren.
Nogmaals: kun je hier de volledige html en css posten, of (nog liever) 'n link naar waar het online staat?
 
Het spijt me voor de ellenlange code maar jullie vroegen erom.
Ik had het ook als bijlage kunnen doen maar dat zou mijn stagebedrijf niet leuk vinden.
Op een 15" monitor zien de buttons er hetzelfde uit maar op een 17" niet.

Code: 
div.edit input 
{
	background: url(L_Icons/Obj0610.bmp) no-repeat left;
	border: 0px;
}
div.new input 
{
	background: url(L_Icons/Obj0611.bmp) no-repeat left;
	border: 0px;
}
div.delete input 
{
	width: 19px;
	background: url(L_Icons/Obj0612.bmp) no-repeat left;
	border: 0px;
}
div.copy input 
{
	background: url(L_Icons/Obj0613.bmp) no-repeat left;
	border: 0px;
}
#save {
	width: 19px;
	height: 16px;
	background: url(L_Icons/Obj0614.bmp) no-repeat left;
	border: 0px;
	cursor: default;
	}
div.refresh input 
{
	background: url(L_Icons/Obj0620.bmp) no-repeat left;
	border: 0px;
}
div.view input 
{
	background: url(L_Icons/Obj0621.bmp) no-repeat left;
	border: 0px;
}
div.az input 
{
	width: 15px;
	height: 15px;
	background: url(L_Icons/Obj0622.bmp) no-repeat left;
	color: #FFFFFF;
	border: 0px;
	border-color:black;
	padding: 0px;
	display:inline;
}
div.za input 
{
	width: 15px;
	height: 15px;
	background: url(L_Icons/Obj0623.bmp) no-repeat left;
	color: #FFFFFF;
	border: 0px;
	border-color:black;
	padding: 0px;
	display:inline;
}
div.first input 
{
	width: 19px;
	background: url(L_Icons/Obj0630.bmp) no-repeat left;
	border: 0px;
}
div.previous input 
{	
	width: 19px;
	background: url(L_Icons/Obj0631.bmp) no-repeat left;
	border: 0px;
}
div.pause input 
{
	width: 19px;
	background: url(L_Icons/Obj0632.bmp) no-repeat left;
	border: 0px;
}
div.next input 
{
	width: 19px;
	background: url(L_Icons/Obj0633.bmp) no-repeat left;
	border: 0px;
}
div.last input 
{
	width: 19px;
	background: url(L_Icons/Obj0634.bmp) no-repeat left;
	border: 0px;
}
div.search input 
{
	background: url(L_Icons/Obj0650.bmp) no-repeat left;
	border: 0px;
}
div.filteron input 
{
	width: 15px;
	height: 15px;
	background: url(L_Icons/Obj0651.bmp) no-repeat left;
	color: #FFFFFF;
	border: 0px;
	border-color:black;
	padding: 0px;
	display:inline;
}
div.filteroff input 
{
	width: 15px;
	height: 15px;
	background: url(L_Icons/Obj0652.bmp) no-repeat left;
	color: #FFFFFF;
	border: 0px;
	border-color:black;
	padding: 0px;
	display:inline;
}
div.help input 
{
	width: 19px;
	background: url(L_Icons/Obj0680.bmp) no-repeat left;
	border: 0px;
}
div.whatsthis input 
{
	width: 19px;
	background: url(L_Icons/Obj0681.bmp) no-repeat left;
	border: 0px;
}
div.logout input 
{
	width: 15px;
	height: 15px;
	background: url(L_Icons/Obj0690.bmp) no-repeat left;
	color: #FFFFFF;
	border: 0px;
	border-color:black;
	padding: 0px;
	display:inline;
}

			.afbeelding
			{
				width: 16px;
				height: 16px;
				padding: 0px;
			}
			.txtMain 
			{
			margin-bottom:0px;
			margin-left:0px;
			margin-right:0px;
			margin-top:0px;
			padding-left:0px;
			padding-right:0px;
			float: left;
			width: 91px;
			}

Code: 
#nav 
{
padding:0; 
margin:0; 
list-style:none; 
height:19px; 
width:1020px; 
background:#E5E5E5 repeat-x; 
position:relative; 
z-index:500; 
font-family:arial, verdana, sans-serif;
cursor:default;
}
#nav li.top 
{
display:block; 
float:left; 
height:19px;
cursor:default;
}
#nav li a.top_link 
{
display:block; 
float:left; 
height:19px; 
line-height:18px; 
color:#000000; 
text-decoration:none; 
font-size:11px; 
font-weight:bold; 
padding:0 0 0 12px; 
cursor:default;

}
#nav li a.top_link span 
{
float:left; 
display:block; 
padding:0 24px 0 12px; 
height:19px; 
cursor:default;
}
#nav li a.top_link span.down 
{
float:left; 
display:block; 
padding:0 15px 0 12px; 
height:15px; 
cursor:default;
}

#nav li:hover a.top_link 
{
color:#B3B3B3; 
cursor:default;
}

#nav li:hover 
{
position:relative; 
z-index:200;
}
#nav li:hover ul.sub
{
left:1px; 
top:19px; 
background: #ffffff; 
white-space:nowrap; 
width:98px; 
height:77px; 
z-index:300;
cursor:default;
}
#nav li:hover ul.sub li
{
display:block; 
height:20px; 
position:relative; 
float:left; 
width:90px; 
font-weight:normal;
cursor:default;
}
#nav li:hover ul.sub li a
{
display:block; 
font-size:11px; 
height:15px; 
width:98px; 
line-height:15px; 
text-indent:5px; 
color:#000; 
text-decoration:none;
cursor:default;
}
#nav li:hover ul.sub li a:hover 
{
background:#2f3fb8; 
color:#ffffff; 
border-color:#E5E5E5;
}
#nav li:hover ul.sub li a.fly:hover
{
color:#B3B3B3;
}

#nav li:hover ul.sub2
{
left:1px; 
top:19px; 
background: #ffffff; 
white-space:nowrap; 
width:98px; 
height:97; 
z-index:300;
cursor:default;
}
#nav li:hover ul.sub2 li
{
display:block; 
height:20px; 
position:relative; 
float:left; 
width:90px; 
font-weight:normal;
cursor:default;
}
#nav li:hover ul.sub2 li a
{
display:block; 
font-size:11px; 
height:15px; 
width:98px; 
line-height:15px; 
text-indent:5px; 
color:#000; 
text-decoration:none;
cursor:default;
}
#nav li:hover ul.sub2 li a:hover 
{
background:#2f3fb8; 
color:#ffffff; 
border-color:#E5E5E5;
cursor:default;
}
#nav li:hover ul.sub2 li a.fly:hover
{
color:#B3B3B3;
cursor:default;
}



#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{
left:90px; 
top:-4px; 
background: #DBDBDB; 
padding:3px; 
border:1px solid #B3B3B3; 
white-space:nowrap; 
width:90px; 
z-index:400; 
height:auto;
}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{
position:absolute; 
left:-9999px; 
top:-9999px; 
width:0; 
height:0; 
margin:0; 
padding:0; 
list-style:none;
}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{
color:#ffffff; 
border-color:#ffffff;
} 

#nav2 
{padding:0; 
margin:0; 
list-style:none; 
height:19px; 
position:relative; z-index:500; 
font-family:arial, verdana, sans-serif;
cursor:default;
}

#nav2 li.top 
{
display:block; 
float:left; 
height:19px;
cursor:default;
}

#nav2 li a.top_button
{
display:block; 
float:left; 
height:19px; 
line-height:18px; 
color:#000000; 
text-decoration:none; 
font-size:11px; 
font-weight:bold; 
padding:0 0 0 12px; 
cursor:default;
}

#nav2 li a.top_button span 
{float:left; 
display:block; 
padding:0 14px 0 2px; 
height:22px; 
cursor:default;
}

#nav2 li:hover a.top_button 
{color:#B3B3B3; 
background:#000000) no-repeat;
cursor:default;
}

#nav2 
{ 
position: absolute;
bottom: 0px;
left: 0px; 
cursor:default;
}

#wrapper
{
width: 100%;
height: 100%;
background: #ffffff;
cursor:default;
}

#footer 
{ 
position: absolute;
bottom: 20px;
left: 0px; 
cursor:default;
}
#head 
{ 
position: absolute;
top: 00px;
left: 0px; 
cursor:default;
}
#table
{
position:absolute; 
bottom:0%; 
left: 0%; 
right:0%;
cursor:default;
}

Code: 
<div id="head">
<table border="0" cellspacing="0" cellpadding="0" bgcolor=#DBDBDB width="100%" height="40">
	<tr>
		<td><center><font size="2"> 
		</td>
	</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#2f3fb8" width="100%" height="19">
	<tr>
		 <td align="left" style="width:333px"><font size="2" color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>TechID Engineering BV</b></font></td>  
		 <td align="center" style="width:333px"><font size="2" color="#ffffff"><b>Systeembeheer - Gebruikers</b></font></td> 
         <td align="right" style="width:333px"><font size="2" color="#ffffff"><b>TST8110/ 01</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></td> 
	</tr>
</table>
<!-- The first dropdwon "Bestand" -->
<table width="100%">
<ul id="nav">
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Bestand</span></a>
		<ul class="sub">
			<li><a href="tst8110_01.php">Systeembeheer</a></li>
			<li><a href="tst8120_01.php">Paginabeheer</a></li>
			<li><a href="tst8130_01.php">Producten</a></li>
			<li><a href="logout.php">Uitloggen</a></li>
		</ul>
	</li>
	<!-- The second dropdown "Bewerken" -->
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Bewerken</span></a>
		<ul class="sub2">
			<li><a href="#nogo23">Wijzigen</a></li>
			<li><a href="#nogo24">Toevoegen</a></li>
			<li><a href="#nogo25">Verwijderen</a></li>
			<li><a href="#nogo25">Kopi&euml;ren</a></li>
			<li><a href="#nogo25">Opslaan</a></li>
		</ul>
	</li>
	
</ul>
</table>
<form method="post" name="navigation">
<table border="0" cellspacing="0" cellpadding="0" bgcolor=#BFBFBF height="16px" width="100%" style="cursor: default;">
	<tr>
		<td>&nbsp;&nbsp;</td>
		<td class="afbeelding"><a href="tst8110_01A.php"><img src="L_Icons/Obj0610.bmp" align="left" border="0" onmouseover="this.style.cursor='default';" onmouseout="this.style.cursor='default';"></a></td>
		<td class="afbeelding"><a href="tst8110_01B.php"><img src="L_Icons/Obj0611.bmp" align="left" border="0" onmouseover="this.style.cursor='default';" onmouseout="this.style.cursor='default';"></a></td>
		<td><div class="delete"><input type="submit" name="delete" value="&nbsp;"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0613N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0614N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0620.bmp"  align="left" border="0" onmouseover="this.style.cursor='default';" onClick="window.location.reload();return false;" onmouseout="this.style.cursor='default';"></a></td>
		<td class="afbeelding"><img src="L_Icons/Obj0621N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0622N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0623N.bmp" align="left" border="0"></td>
		<td><div class="first"><input type="submit" name="first" value="&nbsp;"></div></td>
		<td><div class="previous"><input type="submit" name="previous" value="&nbsp;"></div></td>
		<td><div class="pause"><input type="submit" name="pause" value="&nbsp;"></div></td>
		<td><div class="next"><input type="submit" name="next" value="&nbsp;"></div></td>
		<td><div class="last"><input type="submit" name="last" value="&nbsp;"></div></td>
		<td class="afbeelding"><img src="L_Icons/Obj0650N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0651N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0652N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0680N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0681N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><a href="logout.php"><img src="L_Icons/Obj0690.bmp" align="left" border="0" onmouseover="this.style.cursor='default';" onmouseout="this.style.cursor='default';"></a></td>
		<td width="100%">&nbsp;</td>
	</tr>
</table>
Code: 
<div id="head">
<table border="0" cellspacing="0" cellpadding="0" bgcolor=#DBDBDB width="100%" height="40">
	<tr>
		<td><center><font size="2"> 
		</td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#2f3fb8" width="1020px" height="19">
	<tr>
		 <td align="left" style="width:333px"><font size="2" color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>TechID Engineering BV</b></font></td>  
		 <td align="center" style="width:333px"><font size="2" color="#ffffff"><b>Systeembeheer - Gebruikers - Editing</b></font></td> 
         <td align="right" style="width:333px"><font size="2" color="#ffffff"><b>TST8100/ 01A</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></td> 
	</tr>
</table>
<!-- The first dropdwon "Bestand" -->
<ul id="nav">
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Bestand</span></a>
		<ul class="sub">
			<li><a href="#nogo">Systeembeheer</a></li>
			<li><a href="#nogo">Paginabeheer</a></li>
			<li><a href="#nogo">Producten</a></li>
			<li><a href="#nogo">Uitloggen</a></li>
		</ul>
	</li>
	<!-- The second dropdown "Bewerken" -->
	<li class="top"><a href="#nogo" id="services" class="top_link" onmouseover="this.style.cursor='default';" onmouseout="this.style.cursor='default';"><span class="down">Bewerken</span></a>
		<ul class="sub2">
			<li><a href="#nogo">Wijzigen</a></li>
			<li><a href="#nogo">Toevoegen</a></li>
			<li><a href="#nogo">Verwijderen</a></li>
			<li><a href="#nogo">Kopi&euml;ren</a></li>
			<li><a href="#nogo">Opslaan</a></li>
		</ul>
	</li>
	
</ul>

<form method="post" name="bewerk">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#BFBFBF" height="16px">
	<tr>
		<td>&nbsp;&nbsp;</td>
		<td class="afbeelding"><img src="L_Icons/Obj0610N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0611N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0612N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0613N.bmp"  align="left" border="0"></td>
		<td><button type="submit" id="save" name="save"></button></td>
		<td class="afbeelding"><img src="L_Icons/Obj0620N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0621N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0622N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0623N.bmp"  align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0630N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0631N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0632N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0633N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0634N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0650N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0651N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0652N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0680N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><img src="L_Icons/Obj0681N.bmp" align="left" border="0"></td>
		<td class="afbeelding"><a href="logout.php"><img src="L_Icons/Obj0690.bmp" align="left" border="0" onmouseover="this.style.cursor='default';" onmouseout="this.style.cursor='default';"></a></td>
		<td width="100%">&nbsp;</td>
	</tr>
</table>

Code: 
		if(isset($_POST['save']))
			{
			
						?>
					<table id="footer" border="0" cellspacing="0" cellpadding="0" bgcolor="#DBDBDB" width="1022px" height="45">
						<tr>
							<td><center><font face="Arial">
<?php
						
							$newgeb			= mysql_real_escape_string($_POST['gebruikersnaamnieuw']);
							$newpw			= mysql_real_escape_string($_POST['wachtwoordnieuw']);
							$newpwagain		= mysql_real_escape_string($_POST['wachtwoordagain']);
							$achternaam 	= mysql_real_escape_string($_POST['achternaam']);
							$vrltrs		 	= mysql_real_escape_string($_POST['vrltrs']);
							$vvgsl			= mysql_real_escape_string($_POST['vvgsl']);
							$voornaam 		= mysql_real_escape_string($_POST['voornaam']);
 
Laatst bewerkt:
Hoi Zwarte Adelaar,
Het is toch wonderbaar! Volgens de goede aanbevelingen die hier de ronde doen:
  • eerst maar eens de html-validator er overheen,
  • wat er in de <head> ontbrak, toegevoegd (DOCtype!),
  • het probleem isoleren door de rest aan overtollige html en css te verwijderen,
  • de inline-styles naar het style-blok (later: stylesheet) brengen,
  • beetje aan de css fiegelen.
Na enige arbeid is er dan de valid versie met een html-image in de code.
En dan:
  • deze versie als uitgangspunt,
  • de button in de html zetten,
  • de button-styles toevoegen aan de css.
Na enige arbeid is er dan ook de valid versie met de button-achtergrond.
oh sorry de bug zit in Firefox.
Klik om te vergroten...
Bij mij ergens in mijn hoofd zweefde ook 'n vaag iets rond (:rolleyes:), en dat is nu geland: geen bug in FF te zien: alles keurig volgens plan.
- Ik heb geen inches-rolmaatje bij de hand, maar op resoluties van 800x600px tot 1280x1024px: probleemloos FF, IE7, Safari en Chrome.

Wel ging IE7 er ongevraagd een pixel hoogte aan toevoegen, maar dat kon gepareerd worden met een conditional comment.
Opera 9.64 ging (op een andere manier) ook 1 pixel toevoegen, alleen bij het bg-img; daar zou misschien iemand zijn adelaarsoog nog eens overheen kunnen laten gaan.

Conclusie: als IE iets goed doet, en bv. FF niet, kan het ook een niet-de-standaarden-volgende codering zijn die dankzij IE-onvolkomenheden min of meer toevallig een goed effect hebben. Ook hier: FF treft geen blaam! Ik ben weer helemaal gerustgesteld! :)

Bewijsmateriaal? O ja, hier te beginnen. :D Styles enzo zitten in de broncode.
Overblijvend te doen: testen in andere IE-versies en andere browsers. In elk geval voor de laatste zie ik dat niet zo somber in.

Met vriendelijke groet,
CSShunter
 
Ik heb 'n hele tijd met adelaarsoog en intelligente blik en zo naar zitten kijken (naar de bestanden van csshunter voor die ene px in Opera). Vermoedelijk zat er 'n vuiltje in m'n adelaarsoog.

Oftewel: ik krijg 't er niet uit (die px, niet 't vuiltje in m'n oog). Ook in Opera 10 en in IE 8 doet diezelfde verspringing zich voor. Als je 't goed hebt in Opera 9/10 en IE 8, verspringt 't in Firefox, Safari en Chrome. IE 6/7 is niet zo interessant, want die kun je 'n eigen style geven.
De enige manier waarop ik 't in alle browsers werkend krijg is door de eerste verspringende afbeelding absoluut te positioneren binnen de <td>. Maar dat is bepaald geen fraaie oplossing voor zo'n onbenulligheid.
't Lijkt erop dat de dames en heren browsermakers iets in de specificatie anders uitleggen of zo en er 'n ??? aan toevoegen (of juist niet). line-height heeft ook geen invloed.
Maar even afwachten of 't nog nodig is om dit op te lossen.
 
Laatst bewerkt:
de laatste pixel...

Tja, <form>'s behoren wel tot de elementen die de meeste onenigheid onder de browsers teweegbrengen.

Maar hmm, wie zonder zonde is, werpe de eerste steen: ik heb gezondigd! :rolleyes:
Er staat wel vrolijk een link naar de html-validator op eagle-02-new.htm, maar wie daarop klikt, ziet de validator rood van schaamte worden.
In mijn laatste upload had ik op de valreep nog even alle indents in de code mooi gemaakt, daarbij per ongeluk zomaar een <tr>'retje extra in de table gezet, en geen ultimate html-validator check meer uitgevoerd ("hoeft niet, het was toch al in orde!"). Tja, dat komt er van. :o
<offtopic: iedereen hier heeft me zomaar op m'n mooie huntersogen geloofd: geen uitbrander gekregen. :D />

Helaas levert verbetering (valid versie: eagle-02-new2.htm) niet de ene Opera-pixel winst op waar we om verlegen zitten.

Maar nog iets. Mijn voetstoots overgenomen suggestie dat het beter een <button> kon zijn dan een <input>, omdat het geen text-invoerveld is (hier dus): dat klopte niet. Het is alleen een text-invoerveld als opgegeven wordt type="text"; als je type="submit" opgeeft wordt het uit zichzelf al een button.
Foei alweer! Zeker een vuiltje in m'n oog. ;)
Edoch, niettegenstaande, desalniettemin: misschien een gaatje op weg naar die ene pixel. Terug naar af, en opnieuw!
eagle-gespot.png

Everybody happy? Bij mij komen nu FF, Opera9, IE6, IE7, Safari en Chrome (en ook Netscape9) tevreden terug van de verrekijker.
Zjee! IE8 niet. Vlug een CC'tje, en ook gefikst. :)

Met vriendelijke groet,
CSShunter
 
Nou, complimenten! Jij bent wel 'n volhouder!
Alleen: begrijp ik nou goed dat je 'n adelaar uitscheldt voor IE???
Die cc's zijn echt ongelooflijk handig. Ik zou willen dat elke browser zoiets had. Heeft misschien met patenten te maken dat dat niet zo is.
Goed, ik ga piten.

Edit: dat was mij trouwens ook niet opgevallen van die button. Ik zocht 't in de richting van positioneren.
 
Laatst bewerkt:
Alleen: begrijp ik nou goed dat je 'n adelaar uitscheldt voor IE???
Klik om te vergroten...
Nee hoor, de adelaar is alleen maar de boodschapper. IE durft zich niet te vertonen. En terecht! ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan