On 7/24/06, Janet Chang <[EMAIL PROTECTED]> wrote about
http://www3.law.northwestern.edu/macarthur:
> Sorry, hope you don't mind me asking another similar image-related
> question....
>
> The picture inside the content area is supposed to line up with the first
> sentence of the paragraph to the left but it's not doing so in IE. This
> seems like the same issue as my first problem, but when I tried setting
>
> #content img.home {
> display: block;
> }
>
> it didn't really change. I'm assuming it's probably another small thing
> that I'm missing, but could maybe help point me in the right direction?
This gets tricky. It appears that you are trying to align the image
with the first paragraph, even though the image is placed before the
header. The quick-and-dirty solution is to zero out margins and
padding on paragraphs and the header, and give them explicit margins
and padding:
#content h2 {
/* 13px/12px = 1.083 */
font-size: 1.083em;
margin: 0 0 1em;
padding: 0;
}
#content p {
/* 20px/12px ~ 1.67 (not quite, but looks close) */
line-height: 1.67;
margin: 0 0 1em;
padding: 0;
}
#content img.home {
...
/* 1-1/12 + 1-1/12 + 2/3 = 2-5/6 */
padding: 2.833em 0 5px 20px;
}
OK, I've added two confusions for the price of one:
1) I've changed the font definitions from pixels to ems
Pixels are good for aligning images with each other, but not so good
at aligning images with text. Since font sizes can be adjusted, it's
better -- although more complex -- to use dimensions based upon
whatever the font size might be. So I've replaced "font-size: 13px"
with "font-size: 1.083em", since 1.083 is approximately 13/12, the
default for the site.
2) I've lined up the image, based on those ems
Making the top padding on the image em-based makes it shift up and
down depending on the font size, so that it doesn't stick there even
if the header font gets bigger or smaller. I figured out the number
using the following information:
* The header font size is 1-1/12em.
* The header has a bottom margin of 1em. Since em-based margins and
paddings are based upon the font size of the current item, the
1em-bottom margin for the header is 1-1/12 the size of 1em outside of
the header.
* Since the paragraph text is aligned to the baseline of the text, the
extra 0.67 of line spacing is simply added to the top of the line, so
we need to add that extra 2/3em.
The problem with doing it this way is that it assumes that the header
text will never wrap. At larger font sizes, this may not be a valid
assumption.
The easiest way to resolve this is by moving the image below the
header. Then you could remove the top padding and let it float like it
normally would.
If you want to keep the source order as is, it'll be time for some
positioning and floating shenanigans. We have to do two things:
1) Align the top of the image with the bottom of the header.
To do this, we can wrap the header and image in a relatively
positioned div, and absolutely position the image with "top: 100%".
This says "put the top of the image 100% from the height of the
container", or put the top of the image at the bottom of the div. We
also use "right: 0" to get it over to the right side of the content.
2) Make space in the content for the image.
Since we're no longer floating the image, but absolutely positioning
it, the content sldies right underneath it, becoming unreadable. To
get the content to "wrap" around the image, we float an empty span and
give it the same width and height as the absolutely positioned image.
See http://www.michael4css.info/examples/justice-center.html for how I did this.
This may be more trouble than it's worth, but it lets the header be as
long as it needs without actually having the image between the header
and the content, at the cost of having a fairly useless <span> tag
floating around. It's not very extensible to other parts of the site,
as the span is the exact height of the image. But it does suggest that
there are multiple ways to skin a cat!
> And on a separate issue, would you happen to know how I can make the
> subheader "MacArthur Justice Center" text more bold without increasing the
> font size? Is that even possible? "Font-weight: bolder;" didn't seem to do
> anything.
You may want to change the color from your default #333 to #000.
HTH,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
