Right.
It happens because the alt text for the Skype Icon image is way too long to wrap neatly in the space provided. When mystatus.skype.com is down/slow/dodgy the image does not load and as per HTML spec the alt text is diaplyed instead.
It's too long and it pushes the non fixed max-width table on the left out = messy as hell (and pretty sloppy coding also)
Example:
We can however fix it in browsers that support custom CSS.
This is what the fixed result looks like:
For Opera
Download the following custom .css
ocuk_skypeiconfix_opera.css
Right click anywhere on an OcUK forum page. Click 'Edit Site Preferences'. Click 'Display' Tab Click 'Choose' in the bottom and browse to the opera custom css file. Select and click Open.
Okay out of the Site Preferences options.
Reload the page and it will force the maximum width of an image in that location to 175px - the same width as the area in which it lives. No alignment issues occur.
For Firefox
Firefox 12 actually wraps the alt text properly into the div it lives in. but for any other versions that it might affect here is the process anyway:
Download the following custom .css
ocuk_skypeicon_fix.zip
Close Firefox if already open.
Extract userContent.css to <firefox profile path>\<userprofilepath>\chrome\
If the chrome folder does not exist, create it.
Open Firefox. max-width will be enforced for this element on overclockers forums.
If you already use an OcUK Dark theme or other userContent.css elements then add the following to your existing file:
Code:
@-moz-document domain(forums.overclockers.co.uk){
td.alt2 img {
max-width: 175px;
}
}
Internet Explorer
Sucks. You cannot do site specific client side css and the old ways of hacking it were removed.
Eitherway you can apply the below at your own risk. If any other site uses the same css code in the source it will apply there also.....
Use at your own peril, and blame IE for being lame.
Download the following custom .css
ocuk_skypeiconfix_ie.css
Tools > Internet Options > Accessibility
Tick "Format documents using my style sheet"
Click 'Browse' > select custom css file for ie > click Open > Click Ok > Click Ok
Exit IE and reload
Fix is now applied.
Chrome
No idea how to go about defining site specific custom client side CSS in Chrome. For anyone who knows this is the css code that fixes the issue:
Code:
td.alt2 img {
max-width: 175px;
}
)