marahmarie: (M In M Forever) (Default)
MM Writes ([personal profile] marahmarie) wrote in [community profile] style_system2011-01-30 03:16 pm
  • Add Memory
  • Share This Entry
Entry tags:

Hi, [community profile] style_systemers, a question about link positioning...

A few weeks ago [personal profile] foxfirefey gave me wonderful code that produces a link back to the top of the page (Transmogrified normally lacks this link). I love it and have gently coaxed it to do everything I want except stop moving around. It has a mind of its own so depending on what resolution you use, it will hop, skip and jump all over the place.

I've been unable to conjure any CSS and/or HTML that will keep it in place.

The only resolution it currently behaves at is 1440 x 900 - my native res - because I beat it down hard until it did. But when you change screen res, it waltzes off wherever the heck it feels like it.

Examples at three resolutions:



at 1440 x 900


at 1280 x 768


at 800 x 600


Can anyone tell me how to make it behave? I've tried floats, absolute positioning, margins, padding, text-align:center - it's all failed to tame it.

Flat | Top-Level Comments Only
marahmarie: (M In M Forever) (Default)

[personal profile] marahmarie 2011-01-31 01:18 am (UTC)(link)
It's under .top, and it's not affecting anything. I'm leaving the page broken so you can see what I mean when you view it in my style, and I can update the CSS to remove the code completely if you want, but it makes no difference. I already deleted it using web dev and...same problem.

This is the current (probably no-longer-applicable but also not-breaking-anything code):

.top /* thanks to foxfirefey for the s2 this CSS hooks to */
{background: url("http://intoolate.files.wordpress.com/2011/01/return-to-top1.png");
background-repeat: no-repeat; padding-left:1.6em; position:absolute!important;left: 21.8em; right: 0em;
margin-top: -18em; font-family: corbel, "trebuchet ms", sans-serif;letter-spacing: 1px;}
.top a {color: #8d8d8d!important;font-size: 1em;font-variant: small-caps; font-style: oblique;font-weight:bold;}
.top a:hover {color: #af230c!important;}
.page-entry .top, .page-reply .top,.page-archive .top, .page-month .top, .page-day .top, .page-tags .top, .page-read .top, .page-network .top {margin-top: -12em;}

ETA: Just to be clear, I found the back-to-top link on the entry view (still don't see it on recent) (finally found it buried in the last paragraph of the last entry on the page - whew) but the page is broken from the new s2 whether I leave in the current .top CSS or take it out.

ETA 2: I'll take out my .top CSS now just to make sure it's not something on my end.

ETA 3: Took it out - same deal - except now the back-to-top link is more viewable, instead of floating around in entry text and comment boxes, but the sidebar is still broken.
Edited (more info) 2011-01-31 01:32 (UTC)
foxfirefey: A picture of GIR. (gir)

[personal profile] foxfirefey 2011-01-31 02:37 am (UTC)(link)
I think I found my silly mistake, try this:

function Page::print()
{
    """
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>""";
        $this->print_head();
        $this->print_stylesheets();
        $this->print_head_title();    
    println "</head>";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """
            <div id="container">
            <div id="top"></div>
            <div id="header">
    """;
    """
                <a name="top">
    """;
    $this->print_global_title();
    """
                </a>
            </div>
    """;
    $this->print_module_section("one");
    """
            <div id="wrap">
            <div id="content">
    """;
    $this->print_body();
    """
            <div class="top"><a href="#top">Top of Page</a></div>
            </div>
    """;
    $this->print_module_section("two");
    """
            </div><div style="clear:both;"></div>
        </div>
        <div id="footer">
    """;
    $this->print_module_section("three");
    """
        </div>
    """;
    $this->print_wrapper_end();
    """
    </html>
    """;
}
Flat | Top-Level Comments Only