[html] form in FF zonder border - Softwareontwikkeling

woensdag 25 augustus 2004 19:31

Acties:

Verwijderd

Topicstarter

aangezien FF een form altijd met border rendered, ongeacht wat er in de css staat, probeer ik dit te omzeilen. (in IE wordt het wel borderloos weergegeven, dus css is ok) Ook wordt de font kleur niet meegenomen.

Er moet wel een manier zijn, heb het nl wel op een andere site eens goed weergegeven gezien in FF (maarja, url ??)

heb dit, maar werkt nog niet helemaal, enig idee wat fout zit, en misschien dat iemand ff een voorbeeld kan posten

code:

 <style type="text/css">
   .field { background-color: #DCDCDC; border: 0px solid gray; }
   </style>
...
   <input id="input1" type="text" class="field" />
   <input id="input2" type="text" class="field" />

Afbeeldingslocatie: http://server5.uploadit.org/files/chrisk-search.jpg

[ Voor 40% gewijzigd door Verwijderd op 25-08-2004 19:37 . Reden: toevoegen plaatje ]

woensdag 25 augustus 2004 19:40

Acties:

Verwijderd

Wat werkt hier niet aan dan

Bij mij werkt dit prima in FF.

Post eens wat meer code, ik denk dat er ergens anders een fout staat waardoor FF je styles niet pakt.

Je kunt zelf natuurlijk ook debuggen door steeds code weg te halen totdat het werkt. Op die manier kun je je fouten lokaliseren en elimineren. Of wil je zeggen dat die kale code die je hebt gepost ook niet werkt in FF?

[ Voor 74% gewijzigd door Verwijderd op 25-08-2004 19:43 ]

woensdag 25 augustus 2004 19:48

Acties:

Verwijderd

Topicstarter

als ik gewoon een simple blank html pagina aanmaak met en voeg form erin, en test vervolgens dan werkt het idd niet. Vond het ook al raar, daar ik dacht dat dit wel zou moeten werken.

Kan jij misschien jou werkende code even posten $_/-\o_$ kan nu nl niet meer bij de daadwerkelijk file (office netwerk sluit om 19.00 uur)

woensdag 25 augustus 2004 19:58

Acties:

Verwijderd

Topicstarter

deze werkt dus niet bij mij in FF

code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
   .field { background-color: #DCDCDC; border: 0px solid gray; }
   </style>


</head>

<body>


  <input type="text" class="field" name="T1" size="20">
<input type="submit" value="Submit" name="B1">
<input type="reset" value="Reset" name="B2"></p>
</form>

</body>

</html>

[ Voor 245% gewijzigd door Verwijderd op 25-08-2004 20:37 . Reden: <p> weggehaald uit code ]

woensdag 25 augustus 2004 20:20

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Sluit die p, wat sowieso vreemd is om als container voor je form te gebruiken, open een form tag.

Huur mij in als freelance SEO consultant!

woensdag 25 augustus 2004 20:37

Acties:

Verwijderd

Topicstarter

die <p> maakt op zich niet uit, s nu wel weg. En dit voorbeeld is echt alleen als voorbeeld bedoeld, niet om echt te gerbuiken als search field,

dit werkt dus wel ok, in ms frontpage en IE.

woensdag 25 augustus 2004 20:40

Acties:

Verwijderd

En als je nou van 'background-color' gewoon 'background' maakt (zo hoort het toch ook ???).

woensdag 25 augustus 2004 20:42

Acties:

Verwijderd

Verwijderd schreef op 25 augustus 2004 @ 20:40:
En als je nou van 'background-color' gewoon 'background' maakt (zo hoort het toch ook ???).

Ja, maar dat heeft er IMHO niks mee te maken

.

En background is wellicht beter, maar background-color mag ook gewoon.
Zie http://www.htmlhelp.com/r...und/background-color.html

[ Voor 16% gewijzigd door Verwijderd op 25-08-2004 20:43 ]

woensdag 25 augustus 2004 20:44

Acties:

Verwijderd

Verwijderd schreef op 25 augustus 2004 @ 20:42:
[...]

Nee hoor, dat heeft er IMHO niks mee te maken .
Zie http://www.htmlhelp.com/r...und/background-color.html

Maar background-color geeft wel eens problemen (volgensmij in Netscape), dus misschien ook in FireFox. Vandaar mijn opmerking, maar ik zie idd dat background-color gewoon is toegestaan.

woensdag 25 augustus 2004 21:02

Acties:

Verwijderd

Verwijderd schreef op 25 augustus 2004 @ 19:58:
deze werkt dus niet bij mij in FF

Bij mij wel...geen idee wat je verkeerd doet.

woensdag 25 augustus 2004 21:37

Acties:

Verwijderd

Topicstarter

welke FF gebruik je, ik zelf run hier 0.9.2

background-color vervangen in background, maar geen effect

edit: hier ff een linkje naar desbetreffende test html, laat ff weten of deze inderdaad nu wel of niet borderless rendered (dan weet ik of het aan de html, dan wel mijn FF versie ligt) >> link

[ Voor 101% gewijzigd door Verwijderd op 25-08-2004 21:46 ]

woensdag 25 augustus 2004 22:15

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Haal tab/spaties eens weg voor de class naam.

Huur mij in als freelance SEO consultant!

woensdag 25 augustus 2004 22:22

Acties:

crisp

Devver

Pixelated

CrashOne schreef op 25 augustus 2004 @ 22:15:
Haal tab/spaties eens weg voor de class naam.

idd, er staan no-breaking-spaces in (xA0) in plaats van gewone spaties (x20)

Intentionally left blank

woensdag 25 augustus 2004 22:31

Acties:

b19a

hier werkt deze code perfect:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>Testcase</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
 
<style type='text/css' media="all">
P INPUT { border-width: 0px; }

.field { border-width: 0px; }

</style>

</head>

<body>

<p>
    <input value='tik een tekst' />
</p>

<input class='field' value='tik een tekst v2' />

</body>
</html>

<p> is gebruikt omdat anders beide <input> de standaardlayout voor een input pakken uit het stylesheet, terwijl het de bedoeling is dat de 2e alleen de class pakt.

woensdag 25 augustus 2004 22:38

Acties:

Grijze Vos

Verwijderd schreef op 25 augustus 2004 @ 19:31:
(in IE wordt het wel borderloos weergegeven, dus css is ok)

Als iets in IE werkt en in FF niet, is in minstens 95% van de gevallen de CSS fout.
Als iets in FF werkt, en in IE niet, is in minstens 90% van de gevallen de CSS goed.

hmkay.

Als je FF compatible wilt zijn, dev dan gewoon voor FF, en bugfix die laatste paar irritante dingetjes voor IE daarna, das het minste werk.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info

woensdag 25 augustus 2004 22:50

Acties:

crisp

Devver

Pixelated

whitespace in de CSS syntax is gedefinieerd als zijnde [ \t\r\n\f]+ oftewel: spatie (x20), tab (x09), linefeed (x0A), newline (x0D) of formfeed (x0C); een no-breaking-space (xA0) wordt dus niet gezien als whitespace en daardoor is de syntax invalid, IE gaat hier weer te losjes met de regels om en keurt het wel goed.

Intentionally left blank

woensdag 25 augustus 2004 22:53

Acties:

b19a

crisp schreef op 25 augustus 2004 @ 22:50:
whitespace in de CSS syntax is gedefinieerd als zijnde [ \t\r\n\f]+ oftewel: spatie (x20), tab (x09), linefeed (x0A), newline (x0D) of formfeed (x0C); een no-breaking-space (xA0) wordt dus niet gezien als whitespace en daardoor is de syntax invalid, IE gaat hier weer te losjes met de regels om en keurt het wel goed.

Ik mag misschien dom zijn, maar hoe zie jij dan dat het zgn "no-breaking-space" zijn?

woensdag 25 augustus 2004 23:01

Acties:

crisp

Devver

Pixelated

BoukeHaarsma schreef op 25 augustus 2004 @ 22:53:
[...]
Ik mag misschien dom zijn, maar hoe zie jij dan dat het zgn "no-breaking-space" zijn?

openen in een hex-editor

Intentionally left blank

donderdag 26 augustus 2004 13:49

Acties:

Verwijderd

Topicstarter

ok, thx BoukeHaarsma voor je code. Deze werkt nu ook goed bij mij.

Echter het volgende probleempje

:

de html is voor een searchbox. De html bestaat uit een input field en searchbutton. Deze wordt geplaast in mijn master template via ###searchbox###. Deze maakt gebruik van css, dus heb in mijn css dit geplaast:

INPUT {
background-color: #FFFFFF;
border: 0px
solid gray;}

Als ik de site nu bekijk in IE, en verander waarden in mijn css dan worden deze ook herkend en meegeneomen. Echter in FF blijft alles onveranderd, dus gewoon een default weergave, van witte background, en 1px border. Dit terwijl dus in de individuele searchbox html, deze wel borderless en met custom bgcolor wordt weergegen.

Enig idee waar dit aan kan liggen.

code searchbox html:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Template file for the &quot;macina_searchbox&quot; extension.</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type='text/css' media="all">
P INPUT {  background-color: #DCDCDC; border: 0px solid gray;}

</style>


</HEAD>

<BODY>

<H3>Template file for the &quot;macina_searchbox&quot; extension.</H3>

<P><B>Available Markers:</B></P>

<UL>

  <LI>###HEADLINE### Displays the Headline</LI>

  <LI>###ADVANCED### Advanced Search Link</LI>

  <LI>###SUBMIT### Alttext for the submit button</LI>

  <LI>###ACTLANG### UID of the actual language</LI>

  <LI>###SEARCHPID### PID of the Searchpage</LI>

</UL>

<!-- ###TEMPLATE### begin -->

<DIV align="center" style="width=139; height="13">

<TABLE height="0" border="0" cellpadding="0" cellspacing="0">

 <TR><TD></TD></TR></TABLE>

 <TABLE width="139" border="0" cellpadding="0" cellspacing="0" >

 <TR> 

  <TD width="139">

    

    <TABLE width="139" border="0" cellpadding="0" cellspacing="0" height="13" 
style="border-collapse: collapse" bordercolor="#111111">

     <TR>

      <FORM name="searchform" method="POST" action="###SEARCHPID###"
 style="padding:0; color: #FFFFFF; background-color: #FFFFFF">

       <INPUT type=hidden name=tx_indexedsearch[lang] 
value=###ACTLANG###><INPUT type=hidden name=tx_indexedsearch[ext] 
value=0><INPUT type=hidden name=tx_indexedsearch[pointer] value=0><INPUT 
type=hidden name=tx_indexedsearch[_sections] value=0>

       <TD align="left" height="13" width="4">

            </TD>
       <TD align="center" height="13" width="104">
            <p align="left">
            <INPUT name=tx_indexedsearch[sword] type="text" 
style="height:13; width:96; font-size:10; padding-left:4; padding-right:4; 
padding-top:0; padding-bottom:0" size="10" height="13" width="96" 
value="search"></TD>
       <TD align="left" height="13" width="13">
            <INPUT name=I2 type="image" style="border:0" value="Submit" 
src="fileadmin/templates/hyperbody/images/search.gif" alt="###SUBMIT###" 
vspace="1" width="13" height="13"></TD>
       <TD align="right" height="13" width="13">
            <p align="left"></TD>
      </FORM>
     </TR>
     </TABLE>
   </TD>
 </TR>
</TABLE>
</DIV>
<!-- ###TEMPLATE### end -->
</BODY>
</HTML>

html master template:

code:

<html>

<head>

<title>Master Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>
<!--TYPO3SEARCH_begin-->
<!-- ###DOCUMENT_BODY### START-->

<table border="0" cellpadding="0" cellspacing="0" width="100%" 
style="border-collapse: collapse" bordercolor="#111111" height="178">
  <!-- fwtable fwsrc="header_layout.png" fwbase="header.gif" 
fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  <tr>
    <td width="151" height="37" valign="top">
    &nbsp;</td>
    <td width="619" height="178" rowspan="3" align="left">
    [img]"header_layout_new_R.jpg"[/img]</td>
    <td width="619" bgcolor="#FFFFFF" height="37">&nbsp;</td>
  </tr>
  <tr>
    <td width="151" height="16" bgcolor="#00A7E7" align="left" valign="top">
    ###searchbox###</td>
    <td width="619" background="header_background_color.jpg" height="16">&nbsp;</td>
  </tr>

//////////////////// ...... rest van de html

  </table>
<p>
<br>

<!-- ###DOCUMENT_BODY### end -->
<!--TYPO3SEARCH_end-->

</body>
</p>

</html>

en de positie van de css zet ik in het properties veld van mijn CMS: (deze wordt herkend)

code:

1
2
3

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/templates/style.css

donderdag 26 augustus 2004 15:06

Acties:

mullah

voor die borders - probeer eens het volgende

code:

1	form {border: 0; margin: 0; padding: 0;} input {border: 1px none gray;}

Als je namelijk een onzichtbare border wilt kun je dat op twee manieren doen: border: 0; of border: width keyword = none color;
en voor een form is het altijd handig om de marges weg te halen als je niet wilt dat het opvalt.

Pagina: 1

Reageer