View User's Journal

Welcome to Gaia! :: View User's Journal | Gaia Journals

New site layout, new workarounds!

Here are the CSS rules I'm using to make various sections of Gaia fit comfortably into an 800x600 window with no horizontal scrolling. Let me know if I missed anything?

These rules were tested in Firefox 3.0, and should go into $PROFILE/chrome/userContent.css, as described in my earlier journal entry.

/* Make main header fit within 800x600 window */
@-moz-document domain(www.gaiaonline.com) {
#gaia_header {
min-width: 800px !important;
}
#gaia_header .header_content {
width: 800px !important;
}
#gaia_header .header_content .accountQuickLinks {
left: 460px !important;
}
#gaia_header #gaia_shortcuts_menu {
left: 460px !important;
}
#gaia_header .header_content #dailyReward {
left: 450px !important;
}
#gaia_header .header_content .accountCurrency {
left: 460px !important;
}
#gaia_header .header_content .needGold {
display: none !important;
}
}
/* Make main forum posts fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/forum/),
url(http://www.gaiaonline.com/news/){
html body {
min-width: 770px !important;
}
#inline_review, #inline_review .hd, #inline_review .bd {
max-width: 770px !important;
}
#inline_review .post {
max-width: 760px !important;
}
.postcontent img {
max-width: 530px !important;
}
td.say_b2 {
max-width: 560px !important;
}
}

/* Make guild posts fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/guilds/) {
div.postcontent {
max-width: 560px !important;
}
span.postbody img {
max-width: 530px !important;
}
}
/* Make guild posts fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/marketplace/) {
#content-padding {
max-width: 782px !important;
}
#item_info {
max-width: 770px !important;
}
.box_header_stretched, .box_footer_stretched {
max-width: 770px !important;
}
.searchbox_stretched_header, .searchbox_stretched_footer {
max-width: 770px !important;
}
.box_content_stretched, .searchbox_content_stretched, .searchbox_content {
max-width: 766px !important;
}
.item_rows_header, .item_rows_footer, .item_rows {
width: 770px !important;
}
.item_rows_header #header_avgprice {
margin-left: 330px !important;
}
.item_rows_header #header_type {
margin-left: 110px !important;
}
.item_rows_header #header_listingcount {
margin-left: 70px !important;
}
.vend_rows_ex_header, .vend_rows_ex_footer, .vend_rows_ex {
width: 770px !important;
}
.vend_rows_ex_header #header_buyprice {
margin-left: 195px !important;
}
.vend_rows_ex_header #header_bidprice {
margin-left: 100px !important;
}
.vend_rows_ex_header #header_seller {
margin-left: 80px !important;
}
.vend_rows_ex_header #header_timeleft {
margin-left: 50px !important;
}
#userstore_content {
max-width: 634px !important;
}
#vend_rows_sh_container, .vend_rows_sh_header, .vend_rows_sh_footer {
max-width: 634px !important;
}
.vend_rows_sh {
max-width: 630px !important;
}
.vend_rows_sh_item_field {
width: 240px !important;
}
.vend_rows_sh_buybid {
width: 105px !important;
}
.vend_rows_sh_header #header_item {
margin-left: 120px !important;
}
.vend_rows_sh_header #header_buyprice {
margin-left: 100px !important;
}
.vend_rows_sh_header #header_bidprice {
margin-left: 30px !important;
}
.vend_rows_sh_header #header_timeleft {
margin-left: 45px !important;
}
.edit_store_header, .edit_store_footer {
max-width: 630px !important;
}
.edit_store_content {
max-width: 625px !important;
}
.edit_store_content form textarea {
max-width: 620px !important;
}
}
/* Make Customize Avatar fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/profile/inventory.php) {
#bd {
max-width: 770px !important;
}
#char_image {
height: 306px !important;
width: 216px !important;
}
.alt_palette {
left: 250px !important;
top: 70px !important;
}
/* Always show clickable tile for an item, even if image is broken */
div.inv_item, div.inv_item_over {
min-height: 30px !important;
min-width: 30px !important;
}
}
/* Make Private Messages fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/profile/privmsg.php) {
#bd {
max-width: 770px !important;
}
div.w_skyscraper {
display: none !important;
}
}
/* Make Friendlist fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/friends/),
url-prefix(http://www.gaiaonline.com/profile/friendlist.php) {
#content-padding {
max-width: 770px !important;
}
#header {
max-width: 770px !important;
}
#listdetail thead {
max-width: 680px !important;
}
#listdetail tbody {
max-width: 680px !important;
}
}
/* Make Quests fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/quest/) {
#bd {
max-width: 770px !important;
}
table.queststatustable {
max-width: 750px !important;
}
}
/* Make Account Settings fit within 800x600 window */
@-moz-document url-prefix(http://www.gaiaonline.com/account/) {
#bd {
max-width: 770px !important;
}
#main {
max-width: 580px !important;
}
#p_sidebar {
left: 600px !important;
}
}

pirhan
Community Member

Offline

Sun Aug 10, 2008 @ 08:28pm

I don't understand a lot of CSS, but I never understood why they didn't make the page adjustable to the users screen. I'm running Safari at 1024 x 768 and I have horizontal scroll too. emo

Deciare
Community Member

Sun Aug 10, 2008 @ 08:42pm

Yeah, it looks like many parts of the site specifically require you to have a window at least 990 pixels in width (excluding scrollbars and window borders). The marketplace, for example, uses specific pixel offsets for its column headers, so they look out-of-place if you just shrink the table underneath.

The main forum area has a forced min-width of 990 pixels, so the page stretches even without any large images or long lines of text.

The Customize Avatar page is the worst... It uses images to do the stretching, and doesn't tag those images with IDs or classes, so I don't think there's anything I can do about it. sad

It's really depressing how more and more Web designers expect everyone to have large screens with maximised windows. I hate maximising, personally, because I like seeing what's going on in other windows.

Welcome to Gaia! :: View User's Journal | Gaia Journals

More Information