On 7/28/06, Amy Ostrom <[EMAIL PROTECTED]> wrote about
http://www.jocohistory.net:
> Known problems:
> *extra code is necessary to keep navigation and content sitting side by
> side in gecko and Microsoft browsers
As long as were talking about a few extra divs, versus dozens, that
should be fine. You might want to look at some of the multi-column
layouts on the Wiki for other ideas.[1]
> *links in <ul> horizontal (list-style: none, display: inline) for global
> navigation stay vertical in Mac IE (oddly we still get a lot of Mac IE hits)
I'm assuming you are talking about the #world link list? No idea why
inline isn't working, but you might be able to get a similar design
using Sliding Doors.[2]
> *printing in IE does not place the URL after the hyperlink like happy
> Firefox does (I know IE does not like the pseudo :after, has anyone found a
> solution for this?)
The only solution I can think of is to feed IE some JavaScript that
reads the URL of the link, then creates a span inside the link with
the URL that is hidden by the main stylesheet and displayed with a
print stylesheet. Nothing can be doe strictly with CSS for this.
> *widescreens seem to throw off a lot of the elements (do not have
> widescreens to test this)
> *front page content needs to create less whitespace between navigation and
> self (gets unruly on large monitors)
For these two issues, it seems like a problem with the fact that #main
is floated right, while your nav is floated left. You might want to
consider floating #main left, also, giving it adequate left-margin,
and go from there.
> *to make the CSS valid, the negative padding/margin value needs to be
> removed from the front page heading elements, any ideas?
Indeed! Where possible, replace negative padding with negative margin.
If for some reason you need negatives for both properties (say, -1px
to compensate for a border, and -1em to compensate for em-based
padding) consider using relative positioning and negative opposite
margin to trick the system:
#negatived-thing {
position: relative;
margin-left: -1em;
left: -1px;
margin-right: -1px /* allows the element to expand right to use
the 1px we lost when pushing over the element[3] */
}
When possible, do this type of thing as a last resort, as it's not
going to be very easy for someone else to immediately grasp what's
going on, and IE has fun with relatively positioned elements anyways.
HTH,
Michael
[1] http://css-discuss.incutio.com/?page=CssLayouts
[2] http://www.alistapart.com/articles/slidingdoors -- it talks about
using floats for design's sake, but at the end it also discusses how
to make floats shrink-wrap the content in Mac IE, which is the
important part here.
[3] http://www.w3.org/TR/CSS21/visudet.html#blockwidth explains
mathematically why the -1px right margin expands the content area by
an additional 1px.
______________________________________________________________________
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/
