View previous topic :: View next topic |
Author |
Message |
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
Posted: 27.10.2009 15:44 Post subject: stiliziranje legend elementa |
|
|
na ovoj stranici nalaze se primjeri mog problema.
1. koristi div umjesto legend i prikazuje se upravo onako kako želim. radi, ali nije semantički ispravno.
2. legend vulgaris koji ignorira moja CSS nastojanja.
3. legend + span koji se malo bolje ponaša, ali opet ne floata kao 1. primjer.
legend ne trza na resetiranje margina, paddinga, position..
ima li netko ideju?
Last edited by nel`chee on 01.04.2010 14:55; edited 1 time in total |
_________________ ♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥ |
|
Back to top |
|
|
niksy
Joined: 29 Sep 2003 Posts: 727
|
Posted: 27.10.2009 20:57 Post subject: |
|
|
Jesi probala sa apsolutnim pozicioniranjem span-a? Stiliziranje legend elementa je inace pain in the ass… |
|
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 28.10.2009 11:40 Post subject: |
|
|
niksy wrote: | Jesi probala sa apsolutnim pozicioniranjem span-a? |
Yep, u firefoxu ce jedino tako raditi.
fieldset { position:relative }, a onda legend span { position:absolute; } s tim da onda i
.colwide treba floatat desno. Dobije se zeljeni layout, ali sa extra markupom.
niksy wrote: | Stiliziranje legend elementa je inace pain in the ass… |
Word.
Related bug reports (firefox):
https://bugzilla.mozilla.org/show_bug.cgi?id=507786
https://bugzilla.mozilla.org/show_bug.cgi?id=269908
Semantics #fail in this case |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
niksy
Joined: 29 Sep 2003 Posts: 727
|
Posted: 28.10.2009 20:37 Post subject: |
|
|
Jos jedna solucija bi bila sakriti legend element "off-left" tehnikom (position:absolute sa left i top -9999px — zbog accessibilityja), floatat .colwide desno i fieldsetu dati pozadinu sa upisanim željenim tekstom. Nije skroz pristupacno (zbog slike koja glumi tekst), ali semanticki ispravno. |
|
|
Back to top |
|
|
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
Posted: 28.10.2009 21:19 Post subject: |
|
|
ovo sa slikom je neizvedivo jer stranica ima nekoliko desetaka formi i višejezična je.
u mom layoutu .colwide ne može biti desno jer je forma fluidna mislim, mogu ograničiti širinu, ali zbog vizualnih elemenata moram dodavati markup što bih voljela izbjeći..
ali ako ništa drugo ne radi morat ću, njurg. |
_________________ ♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥ |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 28.10.2009 23:17 Post subject: |
|
|
IMO, fuckas <legend>, stavi <div> i bok
Ako je glupo i radi, nije glupo |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
Posted: 01.04.2010 14:42 Post subject: |
|
|
na kraju tako i bješe.
no ne dam se ja, ovaj put malo drugačije situacija::
Firefox predstavlja problem, dok se Opera, Safari, Chrome i (!) IE ponašaju očekivano, tj bez rupe ispod legend-a.
Code: | * {
margin: 0;
padding: 0;
border: none;
text-decoration: none;
outline: none;
}
label {
float: left;
clear: both;
padding: 3px 0;
margin-bottom: 10px;
background: lightblue;
}
legend {
clear: both;
font-weight: bold;
font-size: 120%;
color: #335287;
/*padding: 0 0 5px 0;*/
margin: 0;
background: red;
}
input, textarea, select {
font: inherit;
background: #e4ecf9;
border: 1px solid #698ac5;
padding: 2px;
color: #335287;
} |
dakle, nema margina ni na jednom elementu a opet u Firefoxu dobijem prazan prostor.
mijenjanje display-a, line-heighta, position-a ne pomaže. (osim ako želim apsolutno pozicionirati, a to mi je posljednja opcija).
razlog nije new line jer i kad stavim elemente u isti red postoji rupa.
kad sakrijem legend izgleda isto cross browser, dakle isključivo u njemu je problem.
ideje? |
_________________ ♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥ |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 01.04.2010 15:12 Post subject: |
|
|
Bilo bi lakse da ima neki test page online ili html+css koji se da copy/pasteat pa cackat.
Ovak napamet bez igranja s firebugom, mozda je zbog nekog paddinga na fieldsetu,
ili nekog drugog komada css-a koji browseri interno postavljaju, a neke od njih nije ni
moguce mijenjati.
Ovo je recimo dio moz forms.css-a:
Code: |
legend {
padding-left: 2px;
padding-right: 2px;
border: none;
position: static ! important;
float: none ! important;
width: -moz-fit-content ! important;
min-width: 0 ! important;
max-width: none ! important;
height: auto ! important;
min-height: 0 ! important;
max-height: none ! important;
white-space: nowrap;
} |
Mozda floatanje legenda pomogne, ali sudeci po ovom u form.css, vjerojatno nece ni
to sljakat, jer je taj njihov !important prilicno testko overrideat.
Stavit <span> unutar <legend> pa njega styleat si probala pretpostavljam? Mozda bude
konzistentnije? |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
|
Back to top |
|
|
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
Posted: 01.04.2010 15:38 Post subject: |
|
|
dakle, ja sam idiot (ponekad).
Firefox je skužio jedan stil koji nijedan drugi browser nije, a ja logično pomislila da je manjina u krivu.
a i Firefox je isto idiot jer je margin: 10px 0 0 0; doživio kao top i bottom.
Last edited by nel`chee on 01.04.2010 15:40; edited 1 time in total |
_________________ ♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥ |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 01.04.2010 15:40 Post subject: |
|
|
nel`chee wrote: | Firefox je skužio jedan stil koji nijedan drugi browser nije, a ja logično pomislila da je manjina u krivu. |
\o/ bitno da radi
koji stil? for the sake of generations to come |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
Posted: 01.04.2010 15:40 Post subject: |
|
|
editirah gornji post
EDIT:
dakle, kolega i ja smo malo pokeali po CSSu i ispada da zaista, kad se legend elementu pridoda samo gornja margina, Firefox isti iznost pridoda i donjoj mada je ona nominalno 0. |
_________________ ♥ art & design portfolio ♥ free Photoshop brushes stuff ♥ sketchblog ♥ facebook ♥ |
|
Back to top |
|
|
|