Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

CSS, IE i fieldset

0 views
Skip to first unread message

megamusic

unread,
May 20, 2008, 8:37:45 PM5/20/08
to
Na koji nacin natjerat IE da ispravno renderira padding i margine u
fieldsetu?.
Npr u ovom kodu sva 3 botuna bi trebala biti jednako udaljena od livog ruba
ali IE kao da zanemaruje padding fieldset-a:

<html>
<style>
form {
margin:0px;
padding:5px;
border:1px dotted red;}
fieldset, div {
background:blue;
margin:0px -5px;
padding:5px;}
</style>
<body>
<form>
<fieldset><input type="submit" /></fieldset>
<div><input type="submit" /></div>
<input type="submit" />
</form>
</body>
</html>

Bruno Babic

unread,
May 21, 2008, 3:53:29 AM5/21/08
to
megamusic wrote:
> Na koji nacin natjerat IE da ispravno renderira padding i margine u
> fieldsetu?.

Za pocetak, uvijek u CSS-u napravi (na pocetku):

* { margin: 0; padding: 0; border: none}

Tako si se rijesio svih defaultnih margina, paddinga i bordera.

Nakon toga dodajes paddinge i margine samo tamo gdje su doista potrebni.

Evo npr. kako kod mene radi bez problema:
* { margin: 0; padding: 0; border: none}


form {
margin:0px;
padding:5px;
border:1px dotted red;}
fieldset, div {
background:blue;

padding: 5px 0px 5px 0px;}

--
bbabic(a)globalnet.hr
2b||!2b?

megamusic

unread,
May 21, 2008, 6:22:20 AM5/21/08
to

"Bruno Babic" <a@b.c> wrote in message news:g10kem$fdm$1...@ss408.t-com.hr...
E, ali to nije to :)
Plavi blok bi trebao biti sirok koliko i form (zbog toga negativne margine)
a botun unutar njega treba biti maknut 5px.
U firefoxu radi bez problema a u IE ne radi za fieldset.
Slika: http://www40.brinkster.com/radiommf/download/IE%20fieldset.jpg


Šime Vidas

unread,
May 21, 2008, 12:42:30 PM5/21/08
to

Sto se tice buttona, sva tri su savrseno poravnana u oba browsera.

Nisam skuzio gdje zelis plavu pozadinu - samo ispod prva dva buttona?

I da li uopce zelis da fieldset ima border?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">


form {
margin:0px;
padding:5px;
border:1px dotted red;
}

fieldset {
margin:0;
padding:0;
border:none;
margin-bottom:5px;
}

div {
margin:0;
padding:0;
border:none;
margin-bottom:5px;
}
</style>
</head>
<body>

<form action="">

megamusic

unread,
May 21, 2008, 2:19:59 PM5/21/08
to

"姆me Vidas" <sime.vi...@OVOfer.hr> wrote in message
news:1hxd1tnw690nb$.wcs3kdql56qw.dlg@40tude.net...

>
> Sto se tice buttona, sva tri su savrseno poravnana u oba browsera.
>
> Nisam skuzio gdje zelis plavu pozadinu - samo ispod prva dva buttona?
>
> I da li uopce zelis da fieldset ima border?
>
>

Pogledaj http://www40.brinkster.com/radiommf/download/IE%20fieldset.jpg,
trebalo bi izgledati kao u firefoxu.
Ono sto je cudno je da ako umjesto fieldset stavim DIV stvar radi iako su
identicno deklarirani.
IE je 6.028 na win 2k pro sp4


Šime Vidas

unread,
May 21, 2008, 2:37:59 PM5/21/08
to

Ono sto si ti napravio je lose.
Form-elementu si definirao padding iako zelis da plava pozadina "ide" do
ruba, pa si zato morao za div i fieldset definirati negativne margine.

Dakle, form element mora imati padding 0, a div i fieldset moraju imati
padding recimo 5px kako bi buttoni bili odmaknuti od ruba i to je to...

Inace input element se ne smije nalaziti direktno unutar form elementa kao
sto je to slucaj kod buttona 3, nego se mora nalaziti unutar div, p ili
fieldset elementa recimo....


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
form {

margin:0;
padding:0;


border:1px dotted red;
}
fieldset, div {

margin:0;
padding:5px;
border:none;
background-color:blue;
}
.inputElement {
margin:5px;
}
</style>
</head>
<body>

<form action="">

<fieldset><input type="submit" /></fieldset>

<div><input type="submit" /></div>

<input type="submit" class="inputElement" />

</form>

</body>
</html>

megamusic

unread,
May 21, 2008, 3:38:25 PM5/21/08
to

"姆me Vidas" <sime.vi...@OVOfer.hr> wrote in message
news:97sl7isvkisf.1e...@40tude.net...

>
> Ono sto si ti napravio je lose.
> Form-elementu si definirao padding iako zelis da plava pozadina "ide" do
> ruba, pa si zato morao za div i fieldset definirati negativne margine.
>
Znam da to nije najbolje ali mislim da je to jedino rjesenje.Naime ta forma
se generira dinamicki CGI aplikacijom (koju nije moguce mijenjati) a ciji
output je <form...>,2 hidden polja i ovisno o slucaju par linija texta, a ja
na to dodajem par polja i zatvaram formu.Zbog ovog texta moram definirati
padding form elementu.

> Dakle, form element mora imati padding 0, a div i fieldset moraju imati
> padding recimo 5px kako bi buttoni bili odmaknuti od ruba i to je to...
>
> Inace input element se ne smije nalaziti direktno unutar form elementa kao
> sto je to slucaj kod buttona 3, nego se mora nalaziti unutar div, p ili
> fieldset elementa recimo....
>

Taj 3. input je tu samo za ilustraciju problema. Medjutim nije mi jasno
zasto stvar radi za DIV a ne radi za fieldset.

Šime Vidas

unread,
May 21, 2008, 4:32:23 PM5/21/08
to
On Wed, 21 May 2008 21:38:25 +0200, megamusic wrote:

> Taj 3. input je tu samo za ilustraciju problema. Medjutim nije mi jasno
> zasto stvar radi za DIV a ne radi za fieldset.


Pa div i fieldset su razliciti HTML elementi - nije "grijeh" da ih IE
razlicito interpretira.

Ako ta CGI skripta generira text izravno u form element onda radi protiv
HTML standarda... Tekst treba biti unutar container elementa kao sto je
paragraph element... dakle da skripta radi svoj posao kako spada, ti ne bi
imao problema jer bi tekst bio u P elementu za koji bi definirao CSS
svojstvo padding 5px.


0 new messages