Welcome to Gaia! ::

wombat - i am's avatar

Dapper Dabbler

User Image - Blocked by "Display Image" Settings. Click to show.
            my issue is that in the section headers i have a transition effect, and also my profile buttons change on hover. however, if i use the standard padding-right method to hide the scrollbar, it covers the about and profile buttons and they wont work (as in, no transition on about and profile buttons are useless)

            the profile

            the code

            /**PROFILE BY THEY GO OF WOMBAT DESIGNS @ GAIA, FOR SEOULOBSESSION. DO NOT REDISTRIBUTE, CLAIM AS YOUR OWN, OR RIP. KTHXBAI**/

            @font-face {
            font-family: 'Sarina';
            font-style: normal;
            font-weight: 400;
            src: local('Sarina'), local('Sarina-Regular'), url(http://themes.googleusercontent.com/static/fonts/sarina/v2/h7Ev9o3IBMcwkqJNFo7Mbg.woff) format('woff')
            }

            BODY {
            color: #333;
            font-size: 11px;
            line-height: 120%;
            font-family: georgia;
            background: #333;
            overflow-x:hidden;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/hong_kong_at_night-1280x800.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            }

            #site {
            border: none;
            overflow: hidden;
            width: 800px; height: 550px;
            margin-left: auto; margin-right: auto; margin-top: 30px;
            }

            #content {
            width: 683px; height: 517px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/content2.png') no-repeat top center;
            }
            .section {
            border: none;
            background: none;
            }

            /*------------GAIA HEADER----------*/

            #gaia_header {
            background: #191919;
            }
            #header_left li, #header_right li { color: #cdc4b3;
            }
            #gaia_header #header_left {
            color: #ADC68D;
            background: #191919;
            }
            #gaia_header #header_right {
            color: #ADC68D;
            background: #191919;
            }
            #gaia_header a {
            font-size: 11px;
            font-family: arial;
            cursor: nw-resize;
            text-decoration: none;
            color: #cdc4b3!important;
            }
            #gaia_header a:link, #gaia_header a:visited, #gaia_header a:active {
            font-size: 11px;
            font-family: arial;
            text-decoration: none;
            color: #cdc4b3!important;
            }
            #gaia_header a:hover {
            font-size: 11px;
            cursor: pointer;
            font-family: arial;
            text-decoration: none;
            color: #cdc4b3!important;
            }

            /*----------LINKS-----------*/

            a:link, a:active, a:visited {
            font-size: 10px;
            font-weight: bold;
            font-family: arial;
            text-decoration: none;
            color: #dd0000!important;
            }
            a:hover {
            font-size: 10px;
            font-weight: bold;
            font-family: arial;
            text-decoration: none;
            color: #3e3d3d!important;
            }

            /*----------PROFILE----------*/

            #profile {
            background: none;
            width: 0px; height: 0px;
            }
            #avatar_dropbox { display: none !important;
            }

            /*----------PROFILE BAR----------*/

            #profile .avatar {
            display:none;
            }
            #profile h2 {display:none;}

            #profile #bar {
            background: none;
            }
            #profile #bar #addButton a {
            position: absolute;
            left: 655px; top: 200px;
            width: 72px; height: 48px;
            text-indent: -5000px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/a.png') no-repeat;
            }
            #profile #bar #msgButton a {
            position: absolute;
            text-indent: -5000px;
            left: 655px; top:250px;
            width: 113px; height: 95px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/mhover.png') no-repeat;
            }
            #profile #bar #tradeButton a {
            position: absolute;
            text-indent: -5000px;
            left: 655px; top: 300px;
            width: 113px; height: 95px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/t.png') no-repeat;
            }

            #profile #bar #addButton a:hover {
            position: absolute;
            text-indent: -5000px;
            left: 655px; top: 200px;
            width: 152px; height: 48px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/add.png') no-repeat;
            }
            #profile #bar #msgButton a:hover {
            position: absolute;
            text-indent: -5000px;
            left: 550px; top:500px;
            width: 106px; height: 72px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/msg.png') no-repeat;
            }
            #profile #bar #tradeButton a:hover {
            position: absolute;
            text-indent: -5000px;
            left: 655px; top: 250px;
            width: 152px; height: 54px;
            background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/seoulobsession/trade.png') no-repeat;
            }

            /*----------WISHLIST----------*/

            #wishlist {display:none;
            }

            /*----------ABOUT ME----------*/

            #about {
            width: 331px; height: 406px;
            margin-left: 92px; margin-top: 81px;
            overflow-y:auto;overflow-x:hidden;

            }

            #about h2 {width: 311px;
            background-color: #493745; padding: 20px; text-align: center; color: #fff;
            font-family: 'Sarina';
            text-transform: lowercase;
            letter-spacing: 1px;
            font-size: 40px;
            font-weight: normal;
            -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;}
            #about h2:hover {background-color: #000e2e;}



            /*-----------MULTIMEDIA-----------*/

            #multimedia h2:hover {background-color: #000e2e;}
            #multimedia h2 {background-color: #493745; padding: 10px; text-align: center; color: #fff; width: 264px;
            font-family: 'Sarina';
            text-transform: lowercase;
            letter-spacing: 1px;
            font-size: 20px;
            font-weight: normal;
            -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;}

            #multimedia {position: absolute; left: 25px; top: 443px; height: 80px;}
            #multimedia embed, #multimedia object {height:25px; width: 30px;}
            /*----------COMMENTS----------*/

            #comments {
            overflow-y:auto;overflow-x:hidden;
            position: absolute;
            width: 282px; height: 288px;
            margin-left: -216px; margin-top: -416px;
            -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;
            }

            #comments h2:hover {background-color: #000e2e;}
            #comments h2 {background-color: #493745; padding: 20px; text-align: center; color: #fff;
            font-family: 'Sarina';
            text-transform: lowercase;
            letter-spacing: 1px;
            font-size: 40px;
            font-weight: normal;
            -o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;}

            .caption {
            border: none;
            font-size: 11px;
            background: none;
            line-height: 95%;
            font-family: arial;
            padding-top: 2px;
            border-bottom: 1px dotted #fff;
            }
            .caption2 {
            border: none;
            font-size: 11px;
            background: none;
            line-height: 95%;
            font-family: arial;
            border-bottom: 1px dotted #fff;
            }
            .caption .message, .caption2 .message {
            font-size: 11px;
            background: none;
            }
            #comments .caption .date {
            color: #058789;
            font-size: 10px;
            font-family: arial;
            font-style: normal;
            }
            #comments .caption2 .date {
            color: #058789;
            font-size: 10px;
            font-family: arial;
            font-style: normal;
            }
            #comments dl dd { margin: 0px; 0px;
            }
            /*------------UNWANTED CODES----------*/

            #extendedProfileBody #header h1, #details, #friends, #journal, #signature, #profile .caption, #profile ul.items,

            #profile #bar #onlineButton, #profile #bar #offlineButton, #profile #bar #ignoreButton a, #avatar_menu, #comments dl dt.avatar

            img, #comments dl dt.avatar2 img, .caption:before, .caption:after, .caption2:before, .caption2:after, #comments .links + p

            ,#alerts_banner { display: none;
            }

            #content #main {border:none;}
            #content, #header {border-right:none;}

Knight Yoshi's avatar

Noble Genius

they go


It's not a "standard method". In fact, hidden scroll bars is really only done here on Gaia. Secondly, don't use padding then. It's not a good idea to have a hidden scroll bar anyway. People without a mouse cannot scroll the content so well if at all, there's no indications that the content can be scrolled, and devices such as smartphones and tablets cannot scroll the content at all.

The method you're using is a bad method anyway as padding does not get clipped, which is why you are having your problem. Just set the element with the scroll bar width 22px wider than that of the parent. But again, still a bad idea.

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games