RE: [WSG] Equidistant floats in a container
> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Jens-Uwe Korff
> Sent: Monday, September 08, 2008 4:40 PM
> To: wsg@webstandardsgroup.org
> Subject: [WSG] Equidistant floats in a container
>
> Hi all,
>
> I need to float elements in a container so that they have the same
> margin between them.
>
> I've seen somewhere a technique how this can be done without additional
> classes, but can only remember part of it.
>
> This works in Firefox and Chrome, but not in both IEs:
>
>
>
> content...
> content...
> content...
> content...
> content...
> content...
>
>
>
> CSS: I want a 3px margin between the elements:
>
> ul {list-style-type:none;margin-left:-3px}
> ul li {float:right;margin:0 0 3px 3px}
This may help:
http://css-tricks.com/equidistant-objects-with-css/
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Equidistant floats in a container
> if you're viewing in IE6 it will be the double-margin bug >> Would be easier to say for sure if there was some code to view. I thought of the double-margin bug too, but that seems not to be the issue here. Since the code's still in development I cannot provide a link unfortunately. I had assigned a width & height to the s, but not to the . Doing so indeed convinced IE to render the list properly. Thanks, Todd! If anyone of you knows a fix without assigning a width please let me know though because I wanted to keep the component flexible for other containers. Thanks, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Equidistant floats in a container
Quoting Todd Budnikas <[EMAIL PROTECTED]>:
I need to float elements in a container so that they have the same
margin between them.
I've seen somewhere a technique how this can be done without additional
classes, but can only remember part of it.
This works in Firefox and Chrome, but not in both IEs:
content...
content...
content...
content...
content...
content...
CSS: I want a 3px margin between the elements:
ul {list-style-type:none;margin-left:-3px}
ul li {float:right;margin:0 0 3px 3px}
While FF and Chrome show me the intended 3 elements x 2 row array in the
container div, both IE show a 2x3 matrix. Somehow they get the margin
wrong, but I cannot remember how to cure this.
Any ideas?
If i understand correctly, you may want to add a width to both the UL
and the LI items:
ul {list-style-type:none;margin-left:-3px; width:600px;}
ul li {float:right;margin:0 0 3px 3px; width:196px;}
That should make sure that 3 list items fit inside the 600px wide UL
before wrapping to the next line. Would be easier to say for sure if
there was some code to view.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Hi Jens, if you're viewing in IE6 it will be the double-margin bugadd
display:inline to the 's and that should snap them into place.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Equidistant floats in a container
I need to float elements in a container so that they have the same
margin between them.
I've seen somewhere a technique how this can be done without
additional
classes, but can only remember part of it.
This works in Firefox and Chrome, but not in both IEs:
content...
content...
content...
content...
content...
content...
CSS: I want a 3px margin between the elements:
ul {list-style-type:none;margin-left:-3px}
ul li {float:right;margin:0 0 3px 3px}
While FF and Chrome show me the intended 3 elements x 2 row array in
the
container div, both IE show a 2x3 matrix. Somehow they get the margin
wrong, but I cannot remember how to cure this.
Any ideas?
If i understand correctly, you may want to add a width to both the UL
and the LI items:
ul {list-style-type:none;margin-left:-3px; width:600px;}
ul li {float:right;margin:0 0 3px 3px; width:196px;}
That should make sure that 3 list items fit inside the 600px wide UL
before wrapping to the next line. Would be easier to say for sure if
there was some code to view.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Equidistant floats in a container
Hi all,
I need to float elements in a container so that they have the same
margin between them.
I've seen somewhere a technique how this can be done without additional
classes, but can only remember part of it.
This works in Firefox and Chrome, but not in both IEs:
content...
content...
content...
content...
content...
content...
CSS: I want a 3px margin between the elements:
ul {list-style-type:none;margin-left:-3px}
ul li {float:right;margin:0 0 3px 3px}
While FF and Chrome show me the intended 3 elements x 2 row array in the
container div, both IE show a 2x3 matrix. Somehow they get the margin
wrong, but I cannot remember how to cure this.
Any ideas?
Thanks,
Jens
The information contained in this e-mail message and any accompanying files is
or may be confidential. If you are not the intended recipient, any use,
dissemination, reliance, forwarding, printing or copying of this e-mail or any
attached files is unauthorised. This e-mail is subject to copyright. No part of
it should be reproduced, adapted or communicated without the written consent of
the copyright owner. If you have received this e-mail in error please advise
the sender immediately by return e-mail or telephone and delete all copies.
Fairfax does not guarantee the accuracy or completeness of any information
contained in this e-mail or attached files. Internet communications are not
secure, therefore Fairfax does not accept legal responsibility for the contents
of this message or attached files.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
