Welcome to Gaia! ::

Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources
<3 </3
Reply
1 2 >

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
User Image


This is an informative guide, not a CSS tutorial ! Please do not post your tutorial questions here.



Many of you have really nice profiles. In most cases, one browser will display everything just right. Unfortunately, there are some known errors that may be seen in other browsers. As many people would say, "The devil is in the details".
This guide will cover errors seen on commonly used browsers on both Macs and PC's:

Those that are discussed will include:
Safari (mac)
Firefox (mac/pc)
Opera (mac/pc)
Internet Explorer (mac/pc)
Netscape (mac/pc)


If you discover something, do not Pm me ! Please post in this thread with the following:


[b]Operating System (mac/windows/linux)[/b]
[b]Name of browser/ what version[/b]
[b]Profile version (Old school or Version 2)[/b]
[b]Description of error[/b]
[b]Possible solution (if there is any)[/b]

A screenshot is optional, but it can help others understand your situation ...



Affiliates/ Links:
- For those that want to understand CSS a little better see: Elindranyth`s Guide to CSS.

- Complete List of CSS Text Editors

Updates:
List of CSS Text Editors added - 1/7/07


Acknowledgments:
* Many thanks to Alienarose (and those who volunteered their profiles) for letting me take screenshots for the tutorial.

* Elindranyth for the thread idea.

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
User Image
Safari™ (v. 1.3.2.) on OSX 10.3.9 - Mac
*These errors may (or may not show) on new releases of Safari.





User Image
Profile Style: Old version
Problem: "Multimedia embed" does not display properly in Safari.

    Fix: *still working on the fix*
    Known Information:
    Sample code:
    #multimedia embed{height:150px; width: 255px;}


    This is a sample screenshot of the error seen in Safari. This is what it should look like in Firefox V.2 (mac)

    The "multimedia embed" code works fine in Firefox 2.0, but not in Safari 1.3.2. (OSX 10.3.9). This has not been verified in newer versions of Safari and Version 2 profiles as of yet.




User Image
Profile Style: Old version
Problem: "{background: transparent url()}" CSS code shows a white box in Safari. However, Firefox displays the command properly.



    Fix:
    Add a picture to fill up that space. If you're proficient in Photoshop, this is easy as pie. Knowing HTML for image placements also helps. HINT: ( "View>Snap", "Marquee>Fixed Size", rulers, and guides are your friends in Photoshop)

    1. In this diagram, I'm copying the background behind the navigation buttons. This will go in my #profile background window. screenshot 1

    2. This is the area selected (with the navigation buttons hidden) screenshot 2 Use the marquee tool to select your image and press shift+command+c / shift+control+c (PC) to copy that layer and whatever visible image lies underneath that layer.

    3. Your final result. Upload your finished image into Photobucket and you're ready to go. screenshot 3

    Known Information:
    Safari doesn't seem to handle transparent windows very well. This hasn't been verified for Version 2 code.
    {background: transparent url()}





User Image
Profile Style: Old version and Version 2.
Problem: "Alpha Opacity" sometimes hides YouTube media (affects Firefox and Safari)
    Fix:
    *unknown at this time*


    Known Information:
    "Alpha Opacity" is something that has been in in both MySpace and Gaia profiles. I've noticed that most YouTube clips are hidden until you hover your cursor over the media player.



User Image
Profile Style: Old version
Problem: "CSS Typo(s)"
    Fix:
    It's all in the code. Take note of the indent after "overflow-y: auto;". Another thing is missing here: "overflow: scroll;"

    #comments {position: absolute; top: 654px; left: 580px; width: 180px; height: 490px; overflow-x: hidden; overflow-y: auto;

    text-align: center;}
    #comments dl dd {margin: 0 10px 0 10px;}
    #comments .links, #comments .date {text-align: center;}


    The corrected code. (This prevents the comment box from "running away" and contains the text within the comments window).


    #comments {position: absolute; top: 654px; left: 580px; width: 180px; height: 490px; overflow: scroll; overflow-x: hidden; overflow-y: scroll; text-align: center;}



    Known Information:
    The following picture shows a "runaway" comment box. Here is how Firefox displays the same image. If you also notice, the green background is absent. The "corners" of the caption bubbles also show up in Safari, but are hidden in Firefox. Both of these things can be remedied with careful CSS coding.

    Firefox is forgiving about CSS code that is absent. However, Safari is not the case. This error also shows up in Opera for mac.



User Image
Profile Style: Old version
Problem: "Flash Display Error"
    Fix: *Revision of CSS code*

    Known Information:
    Even Version 2 coding isn't foolproof.

    The following featured profile is from "Bluessence". Bluessence has a beautiful profile layout. Unfortunately, the transparent background shows a white background. the "play" button and the status bar has also become misaligned. Also, the "latest posts" has been moved aside. Once again, Firefox does not display this problem.

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
User Image
Firefox™ (v. 2.0)- Mac/PC





User Image
Profile Style: Old version and Version 2.
Problem: "Alpha Opacity" sometimes hides YouTube media.

    Fix:
    *unknown at this time*


    Known Information:
    "Alpha Opacity" is something that has been in in both MySpace and Gaia profiles. I've noticed that most YouTube clips are hidden until you hover your cursor over the media player.



User Image
Profile Style: Old version (may also affect Version 2). Added 1/4/2007
Problem: (User Error) Improper code tag closing in comments section.

    Fix:
    For the sake of this situation, the best solution is to do the URL code:


    [url=http://www.websitename.com]Webpage Title[/url]


    If you have quilt patches with your code links posted in a custom sized window in your profile, you can do two things:

    - Indent the code to shorten the length (the code will naturally stretch with many characters) however, this can cause problems if you're not careful with your typing.
    - Post the quilt patch link to your patch in your journal.


    Known Information:

    This display error is actually universal in all browsers since the "code" tag stretches the entire code. Even though this is not a browser glitch, this is a mistake many forum members make. Slow down and click the preview button after you type before you post anything.


    Close your code tags ! Every code tag should have two parts. For example:


    [b]<----The letter "b" in brackets makes everything between these tags bold---->[/b]

    [i]<----The letter "i" in brackets makes everything between these tags italic---->[/i]


    [u]<----The letter "u" in brackets makes everything between these tags underlined---->[/u]

    [strike]<----"strike" in brackets makes everything between these tags show a line through them---->[/strike]

    [quote]<----"quote" in brackets makes everything between these tags show a line through them---->[/quote]


    URL's are easy to do:

    [url=http://www.websitename.com]Webpage Title[/url]


    If you forget all this, there's even a link that says "close all tags".

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
User Image
Opera™ (v. 9.10) - Mac/PC




User Image
Profile Style: Old version
Problem: Centered comment text behaves in a "zig-zag" pattern in Opera.

    Fix: *still working on the fix*
    Known Information:
    Sample code:

    #comments
    {background: transparent url(http://img.photobucket.com/albums/v40/shway/comment_box.jpg)
    no-repeat; border: none; width: 400px; height: 200px; overflow: scroll; overflow-x: hidden; overflow-y: scroll; color: #000000; position: absolute; top: 800px; left: 195px; text-align: center;}
    .caption:before, .caption:after, .caption2:before, .caption2:after {display:none;}
    #comments .avatar img, #comments .avatar2 img {display:none;}
    #comments .links, #comments .date {text-align: center;}{display:none;}
    #comments dl dd strong {display:none;}


    This is a sample screenshot of the error seen in Opera. Firefox and Safari does not show the same problem.




User Image
Profile Style: Old version
Problem: "overflow-x: hidden;" results in a horizontal scrolling bar to show up in Opera.


    Fix: *still working on the fix*
    Known Information:
    Sample code:

    {overflow: scroll; overflow-x: hidden; overflow-y: scroll; color: #000000; position: absolute; top: 800px; left: 195px; text-align: center;}


    This is the same screenshot as the previous error. Once again, Firefox and Safari does not show the same problem. "overflow-x: hidden;" is an attribute that should hide a horizontal scrollbar. For some reason, Opera disregards this CSS function.

    Changing the header of "overflow: scroll;" to "overflow: none;" may remedy this, but that would mean "overflow-y: scroll;" may have no scrollbar... *hmm*



User Image
Profile Style: Old version
Problem: "Name links fail to show up in comment postings."
    Fix: *Not sure if this is a CSS error, or a browser glitch*

    Known Information:
    As you can see, the name links have disappeared, For some odd reason, the area where the commenter's name is located is gone. The word "image" shows up in its place instead. Here

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
User Image
Internet Explorer™ (v. 5.2)- Mac
(Version 7 - PC)

*Internet Explorer has been discontinued for the mac platform. Mac users should stick with Firefox or Safari as their default browsers.*


User Image
Profile Style: Old version
Problem: #about .links, pictures, and comment text display incorrect in Gaia profile. Affects Internet Explorer V. 7 (Windows)

    Fix: *No known fix at this time*
    Known Information:
    *reported by Zarka* 1/7/07

    This is a display error that has been found in Internet Explorer (Windows). Most profiles are best seen in Firefox/ Opera (Mac/PC) and Safari (Mac).


User Image
Profile Style: Old version
Problem:Gaia profiles shows up as a blank white page. Affects Internet Explorer v. 5.2 (mac).

    Fix: *No known fix at this time.*
    Known Information:
    Many sites are known to be quite "unfriendly" to Internet Explorer such as DeviantArt and some forums. There are HTML codes that are made for display problems experienced in Internet Explorer. PC versions of Explorer may not show this same behavior.

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
User Image
Netscape™ v. 7.2 - Mac
(Version 8.1.2. - PC)



User Image
*So far, no display errors listed*

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
This thread is now open !

Offline
User Image - Blocked by "Display Image" Settings. Click to show.
Awesome thread! Kudos. I'll subscribe to it at Fatesong.

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
PML Tester
User Image - Blocked by "Display Image" Settings. Click to show.
Awesome thread! Kudos. I'll subscribe to it at Fatesong.


Thank you very much ! ^_^

Offline
Type of Comp:Windows
Browser: Internet Explorer Version 7
Profile Type: Old School
What's happening: The "View Guilds" "About me" "view posts" tags are all overlapping eachother along with all my pictures and coments overlapping eachother as well.
Fix:Unknown

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
Zarka
Type of Comp:Windows
Browser: Internet Explorer Version 7
Profile Type: Old School
What's happening: The "View Guilds" "About me" "view posts" tags are all overlapping eachother along with all my pictures and coments overlapping eachother as well.
Fix:Unknown



Thank you for sending the information ! *adds to list*

Offline
You might want to make a note about IE For mac. It's actualy a discontinued browser. It's out of date, security ridden, and obvously dosen't suport the newer things.
That's why things don't work right.

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
dantman
You might want to make a note about IE For mac. It's actualy a discontinued browser. It's out of date, security ridden, and obvously dosen't suport the newer things.
That's why things don't work right.


Yes, you're right about that. 3nodding

Enduring Elder

14,675 Points
  • Elocutionist 200
  • Conversationalist 100
  • Megathread 100
Offline
bump

Offline
sup
Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources

Quick Reply

Submit
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More
//
//

Join Now

// //

Have an account? Login Now!

//
//