[CTCVISTA] Any CSS gurus out there?

Thanks for the response, Matt.



DTD is XHTML 1.0 transitional.



Serving as text/html, charset ISO-8859-15.



I'm including the XML declaration at the top of the page, because
otherwise IE doesn't treat the navigation links (an unordered list)
correctly (quirks mode?).  Removing the XML declaration didn't fix the
Firefox problem and the IE problem returned.



Validation-wise, the XHTML is valid.  As far as the CSS, the W3C's site
is very slow to respond right now.  Other programs have
declared my CSS valid, but they're not the W3C.



Good call on the server's content-type.  I don't know much about how
that affects page display.

Change these two items in your style sheet:

div#linksmenu
{width: 182px; float:left; clear:both}

div#content
{position: relative;
margin-left: 182px;
top: 0px;
margin-top: 10px;
width:auto;}

-dina

On 10/31/06, John Miller wrote:
> Hey everyone,
>
> I'm running into a few bugs with the CSS layout for slice.thecsl.org, a
> site (work-related) which I'm trying to get ready to go live in the next
> week or two.
>
> As the site currently stands, I have two main sections, with ids
> "linksmenu" and "content," each positioned using the CSS "position:
> absolute" attribute. I have deliberately left the width of the
> "content" section unspecified, so that it will take up all horizontal
> space to the right of the "linksmenu" section. This doesn't happen
> under Mozilla Firefox (all OSs); there's a gap left at the right side of
> the browser. What's weird is that the size of the gap changes as you
> resize your browser window, like the browser's recalculating something.
>
> Thankfully the gap doesn't appear in IE (I used the position attribute
> to avoid some of IE's float nonsense), but Firefox still has a good
> 10-15% of the browser market. Help!
>

Dina,

Thank you for the specific advice. Unfortunately, it doesn't quite
work. The tough bit comes in the main text directly after the end of the
left-floated navigation stuff. Text is no longer flush at the left
edge--like there's two different values of padding or something. I
wouldn't mind it on my own site, but the SLICE brass noticed it and want
it fixed. Perhaps I've done something goofy with my
margins/padding/height/width in the child elements?

Why the "clear: both" bit for the links, and why the "position:
relative" stuff for the floated section? Are these browser
workarounds? If so, I've got some studying to do!

Once again, I do appreciate the help very much. It's nice to be able to
converse with people who actually understand this stuff.

Hi Matt,

Works perfectly in Konqueror. As for padding, margins, and widths,
there are lots, but I think that most need to stay where they are.
Perhaps time for me to recreate the stylesheet....

Whew! No kidding! And thank you for all you help thus far. I remember
seeing some comparison site like that too. Please do send it my way if
you find it.

Okay--another try, which appears to work:

div#content
{position: absolute;
 top: 0;
 left: 182px;
 right: 0px;
 margin-top: 10px;}
The "right: 0px;" seems to have done the trick.  The tip-off was in
O'Reilly's Web Design in a Nutshell, 3rd Ed., page 379:
"Notice that it is possible to set the dimensions of an element
indirectly by defining the positions of its four sides relative to the
containing block."



That's essentially six person-hours' worth of work for one CSS rule
that is slap-your-forehead simple, but not at all obvious.  This is a
good topic for a blog entry!