Forums: Projects Theory and Miscellanea:

Hoping to launch our new site in a few weeks.

I'm still in development/css edits while I'm getting stuff back from my programmer, but would you guys get me a site check?

LINK REMOVED

The store is mostly the portion that is still in dev, but I'm updating on a daily basis.


One thing that is really bugging me is the small space below the footer. I can't figure out how to get rid of it.

any tips, refinement, help is much appreciated.

Sure you have enough css files?


If you're using some sort of container div that the footer sits at the bottom of, try adding

min-height: 100%

lol...i like organizizizing my css. I'm actually using a master css file that imports, makes theming a bit easier for me down the road.

I'll mess with the min-height. I have it applied to my wrapper, but that seemed to do nothing :|

cheers....I'm hoping to get this thing wrapped up soon, I'll post again when i'm in beta and have a more complete site to check.

I liked the look of it, wasn't sure about the space you were talking about tho ..no complaints from me, just praise

the logo is pixelated here as well.

Also, the login button doesn't line up with the text on the reset password page and this line: "Your password and further instructions have been sent to your e-mail address." is right up against the left hand side of the site with no space.

EDIT:-- Also, the pages in about are VERY text heavy. I'd consider ditching a lot of it or breaking it up somehow...

FF 2.0.0.8 Mac OS X

Minor things really, but I like the design overall, very cool. I especially like the cool colours of the site offset by the warm photos.

awesome feedback so far.

EWF - we haven't yet themed the profile/user pages, so those are default styles that are inherited from my normal css.

I'm assuming you're talking about the Direct Trade page? Yeah....it's super text heavy but it's all relevant. It's kind of our coffee buying manifesto. I'll see if I can break it up into 2 or 3 pages instead of one long one.


Do you guys have any suggestions for fixing the logo? I had it looking amazing with a PNG-24 image, but then it's craptasticly non-transparent in IE6, 7. I started making a pixel version of the logo according to some of the tutorial sites out there, but my problem was with some of the anti-ailiasing techniques. I'll try again with no anti-ailiasing.

I need it transparent and able to work against both the dark bg as it appears, but also against a light background (just an image with sky) for when i don't have a link in that box which won't appear if i take the link away eventually.

Can you integrate the logo, preferably in vector form, into your Flash?

Originally posted by: mclarkson
Can you integrate the logo, preferably in vector form, into your Flash?

the logo...

Why can't you use a transparent .gif? The only reason you would need to use a .png is if it had a dropshadow or something...

If there is still a problem, use javascript to identify what version of explorer the user is using... newer versions use the png, older versions, use the gif.

This is the one I use.

I use it to get around all the fucking annoying IE6 CSS fuck ups as well as per this thread

Never use Javascript browser detection.

Am surprised you had issues with Alpha PNG transparency in IE7, Riddla, any chance you could put up a test page with the issue?

As for IE 6, you could use IE's DHTML filter to get the transparency sort of working. There are a number of tutorials on the net for this. linky or for an .htc behaviour so you dn't pollute your CSS files, there's this method

For either method, you can utilise IE's conditional comments feature. Other browsers ignore it and it's a hell of a lot more bulletproof than browser detection.

OK, here are all the variations that I have come up with:

LINKS REMOVED

Firefox shows PNG 24 to be the best.
IE6 shows the same, but i have a grey background (unless I'm missing a CSS hack).
IE7 shows proper transparency with PNG 24.

So it looks like IE 6 is my only nemesis...any ideas? IE CSS hack?
How's it look in Safari/FF on Mac?

found this JScript that seems to do the trick

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progidXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Originally posted by: OvineWorrier
Never use Javascript browser detection.

Because I said so.


Come on, that not a good enough answer?

*long sigh*

Okay, how about the view stated on the detection script you linked to:

From your link

If you're new to JavaScript, don't use this script. Please read the object detection page first.

From his Object Detection page

Browser detection - No

If you want to know whether the browser that views your page supports certain objects you want to use in your code, you should never EVER use a browser detect. Sure, you know that this–and–that browser will support your code while such–and–so browser won’t. But how about other browsers, obscure browsers?

While browser detection works well enough for 90% of your visitors, some obscure browsers won't be treated correctly and browsers that appear after you've written the page may not be adequately covered either. The results would be either a stream of error messages or a script that isn't called while the browser can easily handle it. In both cases, you're cheating your end users and coding incorrectly.

<!-- [if (gte IE 5.5) & (lt IE 7)] -->

thanks for the explanation, OW... that makes perfect sense.

Conditional comments are better. I'll write it on the chalkboard 100 times.

I still can't see me doing Object Detection though, what a hassle!

so, my correct solution is to use the PNG-24 image with this script?

<!-- [if (gte IE 5.5) & (lt IE 7)] -->
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   for(var i=0; i<document.images.length; i++)
   {
	 var img = document.images[i]
	 var imgName = img.src.toUpperCase()
	 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	 {
		var imgID = (img.id) ? "id='" + img.id + "' " : ""
		var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		var imgStyle = "display:inline-block;" + img.style.cssText 
		if (img.align == "left") imgStyle = "float:left;" + imgStyle
		if (img.align == "right") imgStyle = "float:right;" + imgStyle
		if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
		var strNewHTML = "<span " + imgID + imgClass + imgTitle
		+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
		+ "filter:progidbig grinXImageTransform.Microsoft.AlphaImageLoader"
		+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		img.outerHTML = strNewHTML
		i = i-1
	 }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->