Forum FAQForum FAQSearchSearch MemberlistMemberlist Forum ignore listForum ignore list RegisterRegister ProfileProfile Log in to check your private messagesLog in to check your private messages Log inLog in
stiliziranje legend elementa

 
Post new topic   Reply to topic    mi3dot.org Forum Index -> Client-side
View previous topic :: View next topic  
Author Message
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 27.10.2009 15:44    Post subject: stiliziranje legend elementa Add user to your forum ignore list Reply with quote

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? Smile

Last edited by nel`chee on 01.04.2010 14:55; edited 1 time in total

_________________
art & design portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
niksy



Joined: 29 Sep 2003
Posts: 727

PostPosted: 27.10.2009 20:57    Post subject: Add user to your forum ignore list Reply with quote

Jesi probala sa apsolutnim pozicioniranjem span-a? Stiliziranje legend elementa je inace pain in the ass
Back to top
View user's profile Send private message Visit poster's website Twitter profile
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 28.10.2009 11:40    Post subject: Add user to your forum ignore list Reply with quote

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 Smile

_________________
[+]I[+]am[+]my[+]own[+]religion[+]
Back to top
View user's profile Send private message Visit poster's website Twitter profile
niksy



Joined: 29 Sep 2003
Posts: 727

PostPosted: 28.10.2009 20:37    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website Twitter profile
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 28.10.2009 21:19    Post subject: Add user to your forum ignore list Reply with quote

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 Confused 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 portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 28.10.2009 23:17    Post subject: Add user to your forum ignore list Reply with quote

IMO, fuckas <legend>, stavi <div> i bok Smile
Ako je glupo i radi, nije glupo Smile

_________________
[+]I[+]am[+]my[+]own[+]religion[+]
Back to top
View user's profile Send private message Visit poster's website Twitter profile
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 01.04.2010 14:42    Post subject: Add user to your forum ignore list Reply with quote

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 portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 01.04.2010 15:12    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website Twitter profile
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 01.04.2010 15:24    Post subject: Add user to your forum ignore list Reply with quote

evo: http://wip.inobscuro.com/legend/

mda, probala sam span i floatanje, kod floata se istina zalijepi za donje labele, ali iznad njega bude veća rupa i :after clear ne radi pa nije neko rješenje.

hm ne vidim koji bi od ovih defaulta mogao biti izvor mog problema Confused

_________________
art & design portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 01.04.2010 15:38    Post subject: Add user to your forum ignore list Reply with quote

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 portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
zytzagoo
mi3.crew


Joined: 25 Aug 2003
Posts: 1842
Location: Zagreb, Hrvatska

PostPosted: 01.04.2010 15:40    Post subject: Add user to your forum ignore list Reply with quote

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 Smile

koji stil? for the sake of generations to come Smile

_________________
[+]I[+]am[+]my[+]own[+]religion[+]
Back to top
View user's profile Send private message Visit poster's website Twitter profile
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 01.04.2010 15:40    Post subject: Add user to your forum ignore list Reply with quote

editirah gornji post Very Happy

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 portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
Display posts from previous:   
Post new topic   Reply to topic    mi3dot.org Forum Index -> Client-side All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group