Re: [css-d] IE6 adds extra space before paragraph
Seona Bellamy wrote:
> Can someone please have a look at
> http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills
> in IE6 and tell me:
>
> a) are the first two lines indented slightly (a couple of pixels-worth) more
> than the rest of the article,
Yes, it's the '3px jog bug'[1], present in IE6/win and older versions.
> and
> b) if so, how can I fix it?
The simplest and most solid "fix" in your case, is to remove the space
occupied by the float, in all browsers, since the float will push the
article-text in all browsers anyway if enough font-resizing is introduced...
#date {margin-bottom: -1000px;}
The float-text will then eventually overlap the article-text instead of
pushing it. This "fix" is therefore like exchanging one weakness with
another, so it depends on which weakness you, or the designers, find
most acceptable.
The fix recommended in the '3px jog bug'[1] article isn't working any
better in your case - it's just more complex.
regards
Georg
[1]http://www.positioniseverything.net/explorer/threepxtest.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 adds extra space before paragraph
On Mon, 6 Aug 2007, Seona Bellamy wrote:
> I've had a look, and the date part doesn't seem to be taking up
> any more space than it needs to (it doesn't actually have an explicit width
> allocated).
Yet it may take up more width than effectively reserved for it in the page
layout. It's possible that there is _also_ a bug like the three-pixel jog
involved.
> It certainly would remove a lot of headaches if I could move the date.
> Sadly, that's out of my control. The designers created the design, the
> client approved it, I just put bits of it together. *sigh*
Sigh indeed. If the decision on design only specifies the appearance, not
the technical implementation, you might still be able to avoid the problem
by using table layout. But it would be a major change and would have
problems of its own, at least in clarity and maintainability of code.
> So here's the code that sets up those two "columns" for the date and the
> text:
- -
> #article {
>margin: 0 0 20px 110px;
Here 110px is effectively what you reserve for the date, since if the date
text is wider, it will push the first few text lines to the right. When
your font suggestions (11px Arial) are applied, there might be no problem
visible, except perhaps due to a browser bug. But when they are
overridden or ignored, problems may arise, especially for relatively large
font sizes. Something like 6.5em instead of 110px would be more robust,
though even it is too small if the font actually used is, say, Verdana
(which has rather wide glyphs).
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 adds extra space before paragraph
On 06/08/07, Ingo Chao <[EMAIL PROTECTED]> wrote: > > I'd say its the 3px text jog, and the usual fix would be to > > apply haslayout to #article (height: 1%) > subtract 3px from the #article left margin (actually, subtracting 5 px > would be better here): 105px instead of 110px > apply margin-right: -3px to #date. > > all inside a Conditional Comment lte IE 6 Ah, you're a lifesaver! That has indeed fixed the problem just fine. And on the plus side, I actually understood why it did, so hopefully won't make the same mistake again. :) Of course, on the down side I feel like slapping myself for missing something so obvious something is wrong with other dimensions, for instance, the doubled > margin bug on floats: #date should have display:inline > > Check for more doubled margin bugs in your page. Will be doing that over the coming days, methinks. :) A refreshing read on P.I.E would be a good idea once you find some time. > Yes, I think you're right. It's obviously been far too long since I browsed there, and I'm forgetting some of the basics. Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 adds extra space before paragraph
Seona Bellamy wrote:
>> http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills
> So here's the code that sets up those two "columns" for the date and the
> text:
>
> #date {
> float: left;
> margin-left: 20px;
> font-weight: bold;
> color: #009de9;
> }
>
> #article {
> margin: 0 0 20px 110px;
> }
> #article p {
> margin-left: 0;
> padding-left: 0;
> }
>
I'd say its the 3px text jog, and the usual fix would be to
apply haslayout to #article (height: 1%)
subtract 3px from the #article left margin (actually, subtracting 5 px
would be better here): 105px instead of 110px
apply margin-right: -3px to #date.
all inside a Conditional Comment lte IE 6
something is wrong with other dimensions, for instance, the doubled
margin bug on floats: #date should have display:inline
Check for more doubled margin bugs in your page.
A refreshing read on P.I.E would be a good idea once you find some time.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 adds extra space before paragraph
On 06/08/07, Jukka K. Korpela <[EMAIL PROTECTED]> wrote:
>
> >
> http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills/in
>
> The correct URL appears to be
>
> http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills
> (i.e., without the trailing characters "/in").
That's very true. I'm not entirely certain where that extra bit came from.
:(
> a) are the first two lines indented slightly (a couple of pixels-worth)
> more
> > than the rest of the article, and
>
> On IE 7, such a problem cannot be seen, except when I tell the browser to
> ignore font sizes specified on web page and I set font size to "Larger" or
> "Largest".
>
> I guess this, and what might appear on IE 6, is caused by the width of the
> "paragraph" containing the date (25.07.2007). It's probably a floated
> element - the markup and the CSS code are too complicated for me to
> analyze now - and this would explain why it pushes the first few text
> lines to the right a bit more than you expected.
Interesting. I've had a look, and the date part doesn't seem to be taking up
any more space than it needs to (it doesn't actually have an explicit width
allocated). I played around with it a bit, changing the width and adding or
subtracting margins and paddings, and I couldn't seem to make that extra
indent change, much less go away.
You can't really know the width needed for a string, in an environment
> where fonts may vary. If you wish to rely on having your primary font
> suggestion obeyed by browsers, you can probably estimate the width needed
> for a numeric date strings in em units - if the font has "tabular" digits
> (i.e., digits with the same width), as most popular fonts have. You need
> to be careful, though, and it's best to make the estimate a bit too large,
> for safety. What's most important is that you use the same estimate when
> setting the width of (e.g.) a floated element and when setting some margin
> that is supposed to align content in a tabular manner.
>
> (Actually, using a table would save quite some estimation work and
> headache. On the other hand, it does not look very natural to put the date
> on the left of text when there is just a single date and not different
> dates relating to different parts of the text - and a simpler idea, like
> putting the date on a line of its own, would lead to easier styling
> challenges.)
It certainly would remove a lot of headaches if I could move the date.
Sadly, that's out of my control. The designers created the design, the
client approved it, I just put bits of it together. *sigh*
So here's the code that sets up those two "columns" for the date and the
text:
#date {
float: left;
margin-left: 20px;
font-weight: bold;
color: #009de9;
}
#article {
margin: 0 0 20px 110px;
}
#article p {
margin-left: 0;
padding-left: 0;
}
IE6 gets a modification to #date in its own stylesheet to give it only 10px
of left margin, because it's like that.
So what would you suggest to do to this to make it a bit more bulletproof
(aside from sticking it into a table)?
Cheers,
Seona.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 adds extra space before paragraph
On Mon, 6 Aug 2007, Seona Bellamy wrote: > Can someone please have a look at > http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills/in > IE6 and tell me: The correct URL appears to be http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills (i.e., without the trailing characters "/in"). > a) are the first two lines indented slightly (a couple of pixels-worth) more > than the rest of the article, and On IE 7, such a problem cannot be seen, except when I tell the browser to ignore font sizes specified on web page and I set font size to "Larger" or "Largest". I guess this, and what might appear on IE 6, is caused by the width of the "paragraph" containing the date (25.07.2007). It's probably a floated element - the markup and the CSS code are too complicated for me to analyze now - and this would explain why it pushes the first few text lines to the right a bit more than you expected. You can't really know the width needed for a string, in an environment where fonts may vary. If you wish to rely on having your primary font suggestion obeyed by browsers, you can probably estimate the width needed for a numeric date strings in em units - if the font has "tabular" digits (i.e., digits with the same width), as most popular fonts have. You need to be careful, though, and it's best to make the estimate a bit too large, for safety. What's most important is that you use the same estimate when setting the width of (e.g.) a floated element and when setting some margin that is supposed to align content in a tabular manner. (Actually, using a table would save quite some estimation work and headache. On the other hand, it does not look very natural to put the date on the left of text when there is just a single date and not different dates relating to different parts of the text - and a simpler idea, like putting the date on a line of its own, would lead to easier styling challenges.) -- Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 adds extra space before paragraph
Hi guys, Can someone please have a look at http://www.dairyfarmers.com.au/df/ournews/latestnews/2007/07/25/from-rock---n-roll-to-rolling-hills/in IE6 and tell me: a) are the first two lines indented slightly (a couple of pixels-worth) more than the rest of the article, and b) if so, how can I fix it? I've tried playing with margins and paddings, to no avail. I just can't figure out where this extra space is coming from, so an extra set of eyes would be greatly appreciated. Cheers, Seona. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
