RE: [WSG] IE6 3-pixel jog victim
I have restyled a timeline but have come stuck with IE6's 3-pixel
jog.
I cannot apply the usual remedy (floating the paragraph) as I need
any
element next to the floated offender to be indented. Hence the
paragraph has a left margin which cannot be zero.
http://creativespirits.info/aboriginalculture/history/aboriginal-hist
ory-timeline.html
You haven't exhausted the 'float' property yet.
By adding...
* html ol.timelineList dl {clear: both; margin-top: 1em;}
* html ol.timelineList li p {float: right; width: 500px; margin: 1em
1em 0 0; clear: right;}
* html ol.timelineList {float: left; margin-top: -1em;}
Hi Gunlaug,
thanks very much for your solution - it works perfectly. Could you
please explain how the margin works with IE6? I wonder how the top
margin eliminates the left margin when I apply it. Thank you.
Cheers,
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] IE6 3-pixel jog victim
Jens-Uwe Korff wrote: thanks very much for your solution - it works perfectly. Could you please explain how the margin works with IE6? I wonder how the top margin eliminates the left margin when I apply it. Thank you. Not sure I understand your question - which margin eliminates what, since there's a zero margin-left on the paragraph in my example. The paragraph is hanging on its right margin - floated right with a declared width, which means a left margin isn't needed. That's the trick, and would work the same in all browsers - if they could see these styles. IE6 ignores margin-bottom on floats in your line-up - an IE6 bug, so I instead introduced margin-top for both the paragraph and the dl to preserve the vertical spacing and line-up. The negative margin on the floated ol then compensates for these top margins that are pushing the whole line-up downwards, by moving the entire ol upwards. BTW: your page suffers from the em font-resizing bug in IE5 - IE7[1]. regards Georg [1]http://www.gunlaug.no/contents/wd_additions_13.html -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE6 3-pixel jog victim
Jens-Uwe Korff wrote:
I have restyled a timeline but have come stuck with IE6's 3-pixel
jog.
I cannot apply the usual remedy (floating the paragraph) as I need
any element next to the floated offender to be indented. Hence the
paragraph has a left margin which cannot be zero.
http://creativespirits.info/aboriginalculture/history/aboriginal-history-timeline.html
You haven't exhausted the 'float' property yet.
By adding...
* html ol.timelineList dl {clear: both; margin-top: 1em;}
* html ol.timelineList li p {float: right; width: 500px; margin: 1em 1em
0 0; clear: right;}
* html ol.timelineList {float: left; margin-top: -1em;}
...you'll get rid of the 3-pixel jog and keep indentation.
The indentation will then be depending on the paragraph-width - not the
left margin, in IE6, and the whole line-up can be tuned to taste.
Note: the em font-resizing bug in IE5 - IE7...
http://www.gunlaug.no/contents/wd_additions_13.html
...is hitting your creation hard.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE6 3-pixel jog victim
Hi
Try something like this
.timelineList li {
padding-left: 5em;
position: relative;
}
.timelineList li dl {
left: -5em;
position: absolute;
top: 0;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] IE6 3-pixel jog victim
Hi, I have restyled a timeline but have come stuck with IE6's 3-pixel jog. I cannot apply the usual remedy (floating the paragraph) as I need any element next to the floated offender to be indented. Hence the paragraph has a left margin which cannot be zero. I've tried all the usual IE6 tricks (position, hasLayout, inline) to no avail. Any help is greatly appreciated. http://creativespirits.info/aboriginalculture/history/aboriginal-history -timeline.html 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] IE6 3-pixel jog victim
Add left padding to the paragraph intead? - Original Message - From: Jens-Uwe Korff [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Sunday, February 10, 2008 10:33 PM Subject: [WSG] IE6 3-pixel jog victim Hi, I have restyled a timeline but have come stuck with IE6's 3-pixel jog. I cannot apply the usual remedy (floating the paragraph) as I need any element next to the floated offender to be indented. Hence the paragraph has a left margin which cannot be zero. I've tried all the usual IE6 tricks (position, hasLayout, inline) to no avail. Any help is greatly appreciated. http://creativespirits.info/aboriginalculture/history/aboriginal-history -timeline.html 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] IE6 3-pixel jog victim
Hi Thomas, I have restyled a timeline but have come stuck with IE6's 3-pixel jog. Add left padding to the paragraph intead? Unfortunately that won't work. My aim is to have all paragraphs aligned to the left, even if they start below the year box. That's why I need to flow the year box but not the paragraphs (which would be another 3-pixel jog fix, BTW). Cheers, 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] ***
