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
foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2011-01-31 01:12 am (UTC)(link)
Hmmm, it's there, but I bet your current CSS styling of it is the thing hiding it. It's right under the #entries div. Try taking out the current CSS styling for div.top and see what happens.

Not sure about what it's done to the sidebar, though! I'm hoping it's related to the CSS applied on the div.top, though, and that taking it away will fix it.
Edited 2011-01-31 01:12 (UTC)
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