Things I hate about IE6? everything... for one it renders like a Picasso painting compared to compliant browsers. This is mainly because of the way IE6 translates the box model. For example If I declare my CSS like so:

Div#menubox {
Border: 1px solid red
Padding: 5 px
Width: 50px;
}

Modern browsers will see that as a box with a total calculated width of 62px, that makes sense to me, because I told the box to be 50px wide, then added padding on all sides, which does the math 5px (R side) + 5px (L side) = 10px. Then I added a 1px border which would be the same; 1px on each side. So the total should be 62px right?

IE6 tried to make it easier, but actually made it less intuitive in my opinion. And calculates the entire width as 50px, sticking the border and padding inside the box I believe. Another problem is margins, if you set up a margin-right: 10px; it will actually give you 20px! I don’t get this, and leave it for smarter people to figure out the reasoning.

There are many reasons it is the Picasso of browsers and I won’t go into them all here is a good site that delves a little deeper into the whole IE6 bug thing.

...I think of PNG... I touch myself

I will point out the one thing that really holds us back. That is the lack of support for 24bit PNGs. It does support 8bit, but if you could use a GIF why bother.

24bit PNGs are wondrous creatures great and small. With a PNG you can do Photoshop like transparencies with really smooth graduation. They really open up the box of the net, and allow for much more dynamic and interesting designs.

There is a great fix I use for PNGs in my other designs. But! It has to be loaded under the same domain, so no-go on socialgo. So what do we do if we want to use modern CSS and images in our Socaigo Designs? One thing that I often do is declaring a style sheet only IE6 can see. You can do this with other IE browsers too.

Here is the rule of thumb I went buy: Majority rules – Comply or get used to ugly.

Analytics – Show me the way!

Google Analytics has a feature that will show you what browsers your members and visitors are using. You can find it under visitors section in the left sidebar. You way you make decisions on IE6 is much like a Politian makes decisions when running for office. A Politian would not waste his or her or it’s resources on a minority UNLESS that minority was large enough to swing a vote.

Much like the Hispanics of America. At one time they were not considered in a campaign because their numbers were not great enough to impact the bottom line, plus, minorities of small numbers or less likely to vote. So when I decide whether to or not to support my friendly IE6 users, I use the political minority factor and I do so specifically as a CSS Republican because CSS Democrats still design for IE5 for Buda’s sake.

I use the political minority factor and I do so specifically as a CSS Republican because CSS Democrats still design for IE5 for Buda’s sake.

After tracking my hits for a few months in beta version I can get a good feel for how many users of my product, in our case “Social Networks” still rely on older browsers. With some of my sites, such as my Network Logic site, I see a good 20% still using IE6, and 2% using IE5. 20% is a big minority! They have the swing vote because they could bring significant amount of business.

So I go to their IE6 local donut shop and pinch their little baby’s faces because they could swing my vote easily. What I’ve found with my social networks is a consistent 1% usage of IE6, which to me is a minority not worth my time. I believe it is such a small number because those that Social Network are mostly younger users who are a little more savvy. But, if you run a geriatric dating site, you might find in your own statistics a larger number of IE6 users. In that case, if it hovers around 12%-20%, defiantly support their browser and declare an IE6 style sheet.

IE6 and especially IE5 users are used to ugly by now. They must think designers have gone to pot in the last few years. So don’t worry too much if a few people hit your site driving their classic browser they are not worth your time, and need to be forced into compliance, much like the people in the US that were still using rabbit ear antenna to watch TV. This year all of their stations shut down, and they were forced to face the future the live in.

if you want to style it and drop it in your social network, watch the podcast #4.

This is an accompanying post for the Pro Socialgo podcast #4. The podcast was a little rushed so I thought I’d post the information so you can follow along with the video. We will be creating a Dreamweaver CS3 Dropdown menu using the collapsible panel spry. This is a great way to add some meaningful content to your socialgo social network without taking up to much space. We will be dropping a Poll in our drop down, but the possibilities are endless with what you can put in these drop downs. This will show you how to create the drop down.

 

Step #1: Create Sprys

After creating a new document place your curser in between the body tags. You will notice a “Spry” tab on your jump menu. Press the tab to reveal the sprys available. Go to code view, there is no reason to have design view open.

 

We will be using four Collapsible Panels. So click the Collapsible Panel icon four times. It will populate your document with this code, in four different instances.

Tab
Content

Now save the document and click ok when it tells you it’s going to create two files. Collapsiblepanel.js & Collapsiblepanel.css

Step #2: Enter Content

Select the Entire row of the div with a ID of CollapsiblePanel#. there are for of them so they will be numbered  "CollapsiblePanel1, 2, 3, 4."

 

If your properties panel is not open, open it from "window" in your menu bar. Now you should see two choices. (you might have to refresh, if you don't see them, select the div again, in code or design view) The first is "display" the second is "Default State." they are both set to "open." Set the drop down to "closed for the "default State."

 

 

Step #3: Enter Content

Look for this div in each instance of your sprys. This is where you will enter your content. Be it a youtube video, a poll, chat room, iframe with embedded site… it’s all the same procces.

Content

your content

Step #4: Style the tabs

Now, to make it a horizontal menu, you will need to float the panels left. Open up your “files view from the “window” drop down, top right of Dreamweaver. Look for the collapsiblepanel.css, open it.

The first selector you will see will be .CollapsiblePanel {} Insert a attribute of Float: and a value of “left;”

.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
        float: left;

Now insert the width you would like the tabs to be.

width: 160px;

And then a little margin.

margin-right: 10px;

And finaly find the selector “.CollapsiblePanelContent” and Clear: both; this will allow you to enter a very wide width, such as a iframe web site without it hanging up on the tab.

.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
clear: both;
}

This is what you get. Now you can style it to look like your network and insert it into the proper html panel in your admin. There is allot more details in the podcast. Have fun.


Note: this will only work in the top package of socialgo networks because it uses Java Script. 

Ran across this cool and very simmple adobe air app that allows you to coustomize CS3 icons and web 2.0 badges to your own needs called icon generator. You might only use it once, but it's a nice little tool for those without photoshop. 

 

I came across this thirty day challenge, which is basically a challenge to start your online business and make your first buck, or ten bucks, during the 30 days. I'm going along at about "4 days" a day because most of it I've learned from other sources. But, I find little gems here and there, especially in the area of SEO tools.

One product that I fell head over heals for is a SEO/Adwords app that works both on the mac and PC. If you’ve been trying to do SEO on a mac for any length of time, you know the programs available are sparse as Democrats in Dallas.

If you’ve been trying to do SEO on a mac for any length of time, you know the programs available are sparse as Democrats in Dallas.

It’s called Market samurai, and it is a real workhorse. Talking all your keyword research needs such as longtail, adwords, competition, and page volume and rank. That’s just the half of it. It also has a full area dedicated to finding content and promotion, with all kinds of ways to analyze the content. A few upcoming upgrades will dedicated processes for  “publish content,” Monetization” and “adwords.”  I love it, and if you have a SocialGo Social Network with a hanker’n to make some bucks, Defiantly check it out. The Keyword tools are free; you have to pay to get the rest. But, the free stuff is very useful.

I would suggest the 30 day challenge to Network Owners who are new to promoting their site, advertising (SEM), SEO and all the other fun acronyms. But, it’s also a great start for those who want to use Market Samurai. They have allot of real world application, plus you learn what all the Samurai acronyms stand for.  

It’s all-free, but, they do have your email. And I get something like once a week from one of the guys, but some of it’s actually pretty useful. I would gladly trade useful spam for my extensive catalogue of penis enlargement email.

Our first Market insider will be dealing with Keyword research, so even if you don’t do the challenge, download Market Samurai, we will be using it in our research.  

Hello all! Haven’t heard from me in awhile? Well, there is a good reason. I came back from out of town on Friday and found that a pink crayon had vandalized my fully loaded Powerbook. I was able to remove most of the damage with a clean wipe. But it appears the damage went beyond the screen and body, and somehow the little vandal broke the whole thing… by the mildew smell and stickiness, I suspect lemonade or milk was the culprit. Anyway it’s fried. If my daughter was not my daughter, and was not only two, I would have her strung up by her ears in the hot sun until she confessed, but, instead I just hid the crayons and put all electronics out of reach like a good daddy. Saying that, I will be sparse while it is being repaired. 

Just playing around last night and made a few new actions for you to enjoy. These actions work best if the object effected is white, but, feel free to experiment. 

Instalation:  Goto your actions pallet and open the drop-down on the right corner, there you will see a option to "load Actions" navigate to the PSGsmokey action and load-er up. You can edit the action by double clicking on any of the options in the action, you might want to first copy it by dragging it to the new action button in the lower right of the pallet.

There are three actions to choose frome > Smokey glass > Smokey dark & Smokey fade. Good luck and let me know what you think. 

Download Photoshop Action Smokey








 

I love it when you find a little short-cut by accident that makes your life so much easier. I dragged a layer to the wrong button in the layer pallet in Photoshop CS3 and walla.. Now I've calculated that the time I will save making groups over my life time, will allow me to crochet

7 mittens, bake 13 soufflé or learn to spell "scit-so-phrin-eia".

Here is what you do. Shift or command select the layers you want in a group, then drag them to the "new Group" folder at the bottom of your layer pallet and you have grouped those layers. If you are in a earlier CS, I believe you can only command select, but the same should apply. 



 

 

Update

I don't know if I just missed it or they added this feature in the last few days. Anyhow, you can now upload your favicon directly into SG in the account details area. Well, now if you have another site, you'll know how to do it. 

You've worked hard on your network, creating it unique to you and your vision, but there is one small detail I bet, at least some of you, have over-looked. In the url bar of your browser is a neat little icon of your logo (well it will be once you get your favicon in there). Right now, if you havn't set your favicon it's socialgo's icon your sport'n to all your members. This icon shows up in the url bar, tabs and bookmarks.

Now you can use any format of an image file you want, but the proper way to do this would be to define the profile in your head tag, which we can't do since we don't have access to the head tag, and then to define the "type" inside of the link. This is what it will look like:

type="image/gif"
HREF="http://www.networklogic.net/prosocial/favicon.gif"/>

Another way would be to use a ICO file and skip defining the TYPE:

Now all we need to do is make a ICO, png or gif file. Here is the plug-in you will need for an ICO file format in Photoshop.

ICO Photoshop Plugin This is also tested to work in Paint shop Pro and Photoshop Elements. Instal the plugin by putting it in your Photoshop Foler > Plugins > File Format. Then close and restart Photoshop.

The size of a Favicon is 16x16 and we will transform and optimize our image using photoshop. 

1) create a blank 16x16px file in photoshop

2) copy and paste your logo into this document, before you click enter, resize the image to fit the 16x16px.

3) aply filter "unsharpen mask" to image (filter>Sharpen>unsharpmask). I really crunch it because it's so small and blurry - my settings are:

• Amount - 40
• Radius - 1.8
• Threshhold - 3

4) save file as ICO

5) upload to you server

6) insert Code above into the head of your Ads/HTML area of Admin, Make sure to replace the url with the Url of your image. Tada!

One Problem I've found:

Once you set up your own URL, it seems to work seamlessly.

If you have not set-up your own url and pointed it at the socialgo servers you will have a flicker of the socialgo favicon when a page first loads. Once you set up your URL though, it seems to work seamlessly.

The point of this series is to effect just the elements of your blog posts. We want to control, at least a little, what your members insert into your blog. And, the one thing I can't stand is un-styled lists.

Ordered Lists

These things are ugly if left naked

These things are ugly if left naked. We're going to try to give our list a little pizzazz and make it compliment the design of our site. This site has a bit of a formal, classic design, so why not use roman numerals instead of numbers.

 

Here is the shameful list before, look at how it cowers in its nakedness:

We're going to go about it in the same way by parenting the .blog-entry to the ol, so it won't effect other ol's:

First a little padding, notice on the "right" padding there is allot more than the rest, this might only be particular to my site, because of overriding CSS somewhere else I had to compensate, so play with it.

.blog-entry ol{
        padding: 3px 19px 4px 0;
}

Next I'll give it a light yellow background, then compliment that with a ornate image I made in Photoshop, notice it's a PNG., they are great for doubling up on background color and imagery. The options are limitless. I also float the image to the right and knock it a bit out of the frame with the -20px.

.blog-entry ol{
        padding: 3px 19px 4px 0;
        background: #eaeecb url(../img/ornateborder.png) no-repeat right -20px;
}

Last for the OL is a nice complementary border.

.blog-entry ol{
        
        padding: 3px 19px 4px 0;
        background: #eaeecb url(../img/ornateborder.png) no-repeat right -20px;
        border: 1px solid #cdcd8e;
}

Now for the LI. I'm going to change the list style to lower-roman and place the list "INSIDE." the reason for this is that I want the BORDER-BOTTOM to spread across the entire box and this is the only way to do it. You could use padding to get the LIs inside your box, but the BORDER would be too.

.blog-entry ol li{
        
        list-style: lower-roman ;
    list-style-position: inside;
                
}

The rest is just your own preference. I chose to go for 100% for the reason that in my posts, OL lists will usually be longer as well as Bullets.

.blog-entry ol li{
        
        list-style: lower-roman ;
    list-style-position: inside;
        border-bottom: 1px dotted #cdcd8e;
        padding-left: 15px;
        width: 100%;
        color: #9a9c62;
                
}

 

And Here is the Result:

1. Look At my list
   
2. Aint it great
   
3. no more messing up my post with lists
   
4. Yepee

Unordered Lists

This is what we start off with (it should say unordered list): 

 

The UL is unstoppable. There is almost no end to what you can do with this property. I'm going to just box it like the OL, but there are many possibilities to explore on your side.

Take a look at the border color differences on opposing sides. This gives a slight 3-d effect.

.blog-entry ul{
        border: 1px dotted #dfdfdf;
        border-bottom-color: #a2a2a2 ;
        border-left-color: #a2a2a2 ;
        background-image: url(../img/ulbg.png);
}

And then just a very light gradient to finnish off the 3-d effect.

.blog-entry ul{
        border: 1px dotted #dfdfdf;
        border-bottom-color: #a2a2a2 ;
        border-left-color: #a2a2a2 ;
        background-image: url(../img/ulbg.png);
}

I want to drop the default bullets from the list first.

.blog-entry ul li{
        list-style:none;
}

Then make room for my new image bullet.

.blog-entry ul li{
        list-style:none;
        text-indent: 23px;
    margin-left: 10px;
        
}

I drop my image bullet into place and notice the top position of the image is set to %50. this is very necessary when the user has the ability to change size of text in the blog pane. At 50% it will always keep it aligned in the middle.It's a good idea to use EM and Percents anyway, at least as much as possible because you never know what size the user is displaying there fonts at on their browser.

.blog-entry ul li{
        list-style:none;
        text-indent: 23px;
    margin-left: 10px;
                background: url(../images/bullets2_03.jpg) no-repeat left 50%;
border-bottom: 1px dotted #dfdfdf;
        font-weight: bold;
        color: #949494; 
}

The rest is up to your imagination.

.blog-entry ul li{
        list-style:none;
        text-indent: 23px;
    margin-left: 10px;
                background: url(../images/bullets2_03.jpg) no-repeat left 50%;
border-bottom: 1px dotted #dfdfdf;
        font-weight: bold;
        color: #949494; 
}
 

Here is the Result:

• Look At my list
• Aint it great
• no more messing up my post with lists
• Yepee

<1 2 3 4

The point of this series is to effect just the elements of your blog posts. We want to control, at least a little, what your members insert into your blog.

Links

Want your links on your posts to stand out, be a bit different than the rest of the links on your site? Well here we go...

I'm not going to do much because links are used in so many different ways.

Here it is:

Here is my link 

I'm not going to do much because links are used in so many different ways.

You want to be careful not to put any margin or padding on them, except for maybe the left, like I have done. for the reason that links are usually inline and that would push peoples paragraph’s all out of whack. I'm going to put a small image that I will use later to do a CSS pop up PREVIEW of where the link is pointed.

 

Here it is, there is nothing to it. I floated the image at 50% again and made room for the image with a little padding.

.blog-entry .entry-body a {
        background: url(../img/images/linkbullet.png) no-repeat left 50%;
        padding-left: 18px;
        border-bottom: 1px dotted #bbb;
        }

<1 2 3 4