Good afternoon, everyone. This problem concerns a "alternate" stylesheet for a project where the primary stylesheet is complete, but is entirely unfriendly to font scaling. This alternate stylesheet is meant to be much friendlier for font enlargement.
The example page is: http://www.lostinxlation.net/sandbox3/portfolio/cybernomics3.php The CSS is: http://www.lostinxlation.net/sandbox3/css/alternate.css The problematic element(s): #portNav, possibly #mainContent / #portDetails The problem: The "1 2 3" links (which are in ul#portNav) are not displaying roughly 20px under the images in the main content area. This is somehow caused by the ul existing as it's own entity separate of the #mainContent and #portDetails in the XHTML (necessary for proper display in the original / "primary" layout). Completely removing sizing and positioning ends up with it displaying at the top of the right column, above the #portDetails #subNav. Attempting to write it as a float: left seems to locate it below the main content area, but positions it MUCH too far down the screen, and also positions #portDetails under it, instead of in the right sidebar area. Part of the positioning issue may have to do with the #mainContent {margin-bottom: 60px;}, however that is in place to maintain whitespace between the content text and the green #mainNav area (assigning margin-top: 60px to #mainNav did NOT work for achieving this, nor did assigning margin-bottom: 60px to #wrap, or padding-bottom: 60px to #mainContent or #wrap). In FF/NN/Op/Saf, the links are currently displaying ABOVE the #mainContent area, and the #portDetails are displaying where they should in the right sidebar area. IE7, of course, is borking it completely and putting both #portNav and #portDetails underneath the #mainContent (this may or may not be a result of my current dimensions, since I haven't been actively testing for IE up until this point). How it should display: The "1 2 3" links should display right-aligned (lined up with the right-side of the images), roughly 20px below the #mainContent, and should maintain a 60px margin at the bottom, between them and the green #mainNav area. The #portDetails should entirely display in the right column, with the top roughly aligned with the top of the images. Both #mainContent and #portDetails should be positioned starting 60px below the green #banner. Scaling the font size up should not impact the 60px of whitespace below the "1 2 3" links, or the 20px of whitespace above it, or the 60px of white space between #mainContent / #portDetails and #banner. Does anybody have any ideas as to how to make this work? So far, the rest of it seems to be working fairly well through a handful of font enlargements, and this is the one sticking point that is throwing a monkey wrench into everything. (Also, please note, unlike with the original stylesheet, there is no longer a corner-rounding javascript for which to compensate. I removed it as I found that no matter how nice it looked, the myriad downsides of using it were ultimately not worth it.) Thank you in advance for your time and attention. ~~J. Hodge "treswife at gmail dot com" ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
