{"id":173,"date":"2007-02-18T10:36:00","date_gmt":"2007-02-18T18:36:00","guid":{"rendered":"http:\/\/www.mccambridge.org\/blog\/2007\/02\/its-the-scrollbar-idiot\/"},"modified":"2022-09-11T00:40:44","modified_gmt":"2022-09-11T00:40:44","slug":"its-the-scrollbar-idiot","status":"publish","type":"post","link":"http:\/\/www.mccambridge.org\/blog\/2007\/02\/its-the-scrollbar-idiot\/","title":{"rendered":"It's the scrollbar, idiot!"},"content":{"rendered":"

Update:<\/strong> As Craig pointed out, the original version of my page flashed blue before changing orange. That was my bad. Here’s what was wrong, as an FYI:<\/p>\n

Original Stylesheets:<\/p>\n


\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"csdeptb.css\" title=\"Blue Layout\" \/><\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"csdepta.css\" title=\"Orange Layout\" \/><\/p>\n

...<\/p>\n

<body onload=\"setActiveStyleSheet('Orange Layout');\"><\/p>\n

<\/code><\/p>\n

The problem? Both stylesheets were loaded by default as preferred stylesheets, and since the blue sheet is listed first, it took precedence, rendering the page blue. Then on page load, I fired off a javascript call to set the orange sheet as active. This was to work around a weird IE glitch where it didn’t always load the second style sheet. BUT, this resulted in the page being blue until it fully loaded, and then changing orange. The solution? List orange first, and make the blue an alternate stylesheet, like so:<\/p>\n


\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"csdepta.css\" title=\"Orange Layout\" \/><\/p>\n

<link rel=\"alternate stylesheet\" type=\"text\/css\" href=\"csdeptb.css\" title=\"Blue Layout\" \/><\/p>\n

...<\/p>\n

<body onload=\"setActiveStyleSheet('Orange Layout');\"><\/p>\n

<\/code><\/p>\n

[\/Update]<\/strong><\/p>\n

So I’ve been having fun over the past couple days playing with HTML and CSS for a CS 640 (Intro to Computer Networks) assignment. The assignment is pretty trivial: basically, create the homepage for a fictitious Computer Science department. The home page should include 3 HTML documents (a home page, a faculty page, and a course listing), and two interchangible Cascading Stylesheets to play with colors. I put the shell of the page together pretty quickly, and then I’ve been spending some time playing with fancy CSS effects instead of doing my circuits homework \ud83d\ude42<\/p>\n

The page, for any who are interested, is located here: CCM University’s Computer Science Department<\/a><\/p>\n

One annoying “bug” I kept running into was that my nicely-centered TABLE (yeah, I know… <TABLE>s are SO<\/em> Web 1.0. Get over it.) kept shifting slightly to the right on the main page (index.html), and then back slightly to the left on the other two pages. I looked into this for probably 30 minutes, trying to find some extraneous tags or something that were screwing up the spacing.<\/p>\n

(It’s a little hard to see on the thumbnails, but note the scrollbar appearing. The motion is easy to see in the fullsize pics.)<\/em><\/p>\n

Main page (shifted right):<\/p>\n

<\/a><\/p>\n

Faculty page (shifted left):<\/p>\n

<\/a><\/p>\n

Then on one refresh, I noticed that the scrollbar appeared, and I slapped myself in the face. DUH. Longer pages (faculty.html and courses.html) –> don’t fit on one screen –> Need a vertical scrollbar –> Need to shrink the size of the content pane –> A centered element shifts to the left by half the distance of the scrollbar’s width.<\/p>\n

My forehead hurts in shame.<\/p>\n

To attempt to redeem myself, here’s a 30-second code snippet for centering stuff in CSS:<\/p>\n

index.html<\/strong><\/p>\n

...<\/p>\n

<LINK REL=\"stylesheet\" TYPE=\"text\/css\" HREF=\"style.css\" \/><\/p>\n

<BODY><\/p>\n

<TABLE class=framework> <!-- Desire to center this table --><\/p>\n

...<\/p>\n

<\/code><\/p>\n

style.css<\/strong><\/p>\n

...<\/p>\n

body { text-align: center; } \/\/ Center for IE<\/p>\n

.framework {<\/p>\n

     margin: 0px auto; \/\/ Center for Mozilla<\/p>\n

     width: 800px;<\/p>\n

     text-align: left; \/\/ Prevent IE hack from inheriting<\/p>\n

}<\/p>\n

...<\/p>\n

<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Update: As Craig pointed out, the original version of my page flashed blue before changing orange. That was my bad. Here’s what was wrong, as an FYI: Original Stylesheets: <link rel=”stylesheet” type=”text\/css” href=”csdeptb.css” title=”Blue Layout” \/> <link rel=”stylesheet” type=”text\/css” href=”csdepta.css” title=”Orange Layout” \/> … <body onload=”setActiveStyleSheet(‘Orange Layout’);”> The problem? Both stylesheets were loaded by default […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/posts\/173"}],"collection":[{"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":1,"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":1722,"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/posts\/173\/revisions\/1722"}],"wp:attachment":[{"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/categories?post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mccambridge.org\/blog\/wp-json\/wp\/v2\/tags?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}