Hallo everybody,

You may remember me. I posted here a month or so ago to introduce
myself; if you recall, my client was taking her sweet time when it came
to paying me.

Well she paid me and the website is almost finished.

To see the testing version of it,
http://d89051.u25.managed.web.com/testing/ mosey on over there.

I'm looking for any suggestions you guys have to offer. I know that
logo is fairly ugly; it's not mine, and I believe they've hired me to
redesign that one. The font choice in that banner isn't mine either.
But critique is absolutely welcome.

The reason I'm posting though is this: IE botches the CSS (surprise!!).
The navigation is contained within the header, which also contains the
banner. For whatever reason, in IE, the margin-top of the #nav div is
rendered improperly--as you can see, it comes too close to the banner,
cutting off the bottom of the logo in some instances. It's in the
right place in Firefox, Safari, and other standards-compliant browsers,
but not IE, and I can't figure out what to do about it. (Similarly, it
changes the padding between the tabs themselves, which I can't figure
out either.) It actually does this in other parts of the
site--"Current Projects", for example, once you click on any of the
sub-buttons, the #extracontent is pushed significantly lower than it's
supposed to go.

Which leads me to my second, and perhaps more important, dilemma. Hit
Current Projects>The Lanesborough. The #extracontent3 div has a
background color of #a89a73, which EXACTLY matches the hex value of the
decorational images within (poppy.png and poppyh3back.png). It renders
flawlessly in standards-compliant browsers, as the hex values are the
same and where the image file ends and the CSS color fill begins is
invisible. Not so in IE6/win (haven't had the chance to test it
elsewhere). There's a distinct difference in browns between the image
and the background color. What's the deal with that? It actually is
the same with the header/nav, only you can't see it because it's too
busy cutting margin-top down. If you scale the text though you'll see
that once the banner image ends and the CSS background begins, there's
a distinct color difference, despite the hex values being the EXACT
SAME (also renders correctly in Firefox/Safari/anythingworthusing).

So. Anybody know what the deal is here? This problem is driving me
bonkers.

Thanks ADG

Vincent

volfro wrote:
Well, for a start the png is what is showing a different colour, not the
flat backround, simple observation (putting the IE and FF next to each
other) shows that its not the CSS thats causing the problem.

Have you set transparency/opacity in the png? IE can't handle that very
well.

I won't crit the design, I'm not sure it would be very helpful!



--

Davémon
http://www.nightsoil.co.uk

Nahh, don't be shy, critique is welcome. This site isn't exactly my
"style", but a guy's gotta make a dime, no? I love the frontpage of
your site though.

Anyway, no, there's no transparency in the PNGs. In fact, those
background images of the poppies are only two colors--they're about as
simple as it gets. And in Photoshop, the hex values match exactly. I
even went as far as putting the RGB values in. No dice.

I'll try it with GIF and JPEG though. I wasn't aware that IE rendered
PNG colors any differently than anything else (except when used with
alpha transparency).

v

volfro wrote:
No problems with the style, I can see what you're going for, a kind of
stately homes traditional thing, which is fine, but the execution of it
just feels a little heavy handed.

Line lengths over 12 words are very hard to read.

Overuse of the caligraphic devices, more of a flourish, with finesse...

google: Jaguar, British Racing Green (the colour you're kind of using),
look up some luxury brands. Boodles, Moet, Bugatti, look at some
high-priced wine labels, etc. etc.


Thank you. It needs updating, halloween seems like ages ago!

You know what, you're right. I looked at the image in isolation, and
it's fine.

BTW the image is A79972 and the bg colour is A79A72 - and I can see a
slight line.

I think IE is pretty lame with relation to PNGs, but indeed, haven't
heard of a specific colour issue. A GIF should do the job fine.


--

Davémon
http://www.nightsoil.co.uk

"Davémon" <nospam@nowhere.no> wrote in message
news:1d981$43830b54$504427df$21295@datanet.co.uk.. .
I'm wondering if the "background: transparent" line in some of the other
styles relating to that content DIV might be the problem? What if those are
commented out, does the problem still exist?

On Tue, 22 Nov 2005 10:23:59 +0000, Davémon <nospam@nowhere.no> wrote:

Like nyah:
http://www.backwater-productions.net.../fuckinduh.png

You can get around the problem by altering the gamma on the PNG files
and then just include a script to do browser detection. Keep in mind
it's only in IE for teh PC, not an issue on the Mac version.

Here's a prototype I'm working on that uses such a method:
http://www.backwater-productions.net...tform/cbstory/

Actually it handles it just fine...just differently.

I will...it looks like pea soup...pukey...*retch*...sorry, but those
particular shades of green just don't look so good to me...more of a
personal preference. As far as the fonts...most of the text is hard
to read, only the nav buttons are decent. Overall I find the
style...boring. But at least you're not ass raping all the regular
cliches like meaningless image overlays and grids 'n shit. Oh and I'd
get rid of that great big "M", I mean really, what the fuck is that
all about? And black on dark green...dumb. Do something like this:
http://www.backwater-productions.net...uicksample.png

Gold accents on that pukey green would really spruce it up. I would
alter that shit brown/green to look more like this:
http://www.backwater-productions.net...icksample2.png

MUCH nicer looking, imho.

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net

Yeah, IE handles PNG alphas differently--it handles them WRONG. To say
it handles them "not wrong, but differently" is like saying a serial
killer's mind isn't "wrong, it's just different." It's the only major
browser in wide use that botches transparencies in PNGs so badly. The
fix is relatively quick and painless, but doesn't work on PNGs used in
the background. That's crap. It should work without javascript (or,
for that matter, senseless legacy tags that have been around since IE
4).

Thanks for your suggestion for the PNG gamma though. I'm not entirely
sure what you mean--nor am I sure of the browsersniffing script of
which you speak. Care to post code? I don't want to use JPG in that
header because all the artifacting is extremely annoying to my eyes,
but I'm sure the change will be transparent to the client. If it's too
much, though, I may just switch to JPG/GIF (which is aggravating. PNG
is better than both. grmblgrmbl).

That green color is actually their choice, down to the RGB values.
Seriously. She knew exactly what she wanted. I dont' think it looks
pukey though; it looks more velvety to me, like a dark evergreen kinda
color. It renders differently on your screen, undoubtedly.

The M is theirs too. I just offered to redo that logo (it's rather
ugly, besides being hard to work with), and she said she wants me to at
a later date, as it's not in their budget atm.

She's asked me to change some text in the header, I'll mess with the
colors a bit. I don't like the embossed gold with the dropshadow that
you suggested--it looks cheesy and overused. Or, as you so eloquently
put it, it looks like an ass-raped cliche. The color itself isn't a
half-bad idea, though, I'll mess with it a bit.

Thanks for the suggestions.

v

Thanks for your critique. I was actually worried that the curves would
look overdone, since they're behind h1 and h3. But I wanted to accent
the h3s somehow, in addition to different color/size/margin.
Suggestions? (Keep in mind that the client is married to the curves
but not necessarily their use. Also, there will be fewer of them once
the site actually has content--or it will appear so, as they'll be much
further apart, with the addition of <img>s and <p>s.) I was thinking
of making them closer to the color of the background so that it's more
subtle--and possibly adding a gradient so that it kinda "shines" off
the page, if you know what I mean.

I checked the sites you suggested, and thanks. I'll keep those in mind
as this project is finishing up.

I think I'm going to (begrudgingly) switch to strictly JPG and GIF,
since IE is crap. I hate having to support its stupidity and
bugginess. Ugh. Not to mention the fact that PNG is far superior to
either traditional format. Makes me sick, I tells ya!

The background:transparent you're referring to, I believe, is in the
#nav contained within #header. It's there so that the background isn't
solid, and the banner shows through between tabs. I'll try commenting
it out to see what happens, but I'm pretty sure this is more a problem
with IE fscking the PNGs.

Thanks for your suggestion, I'll let you know how it looks after
Thanksgiving.

v

On 23 Nov 2005 09:04:46 -0800, "volfro" <vmaglione@gmail.com> wrote:

Oh no, child, you're confused. When I said "differently", I actually
meant BETTER. IE relies on DirectX transform filters to handle the
full aspects of the PNG format, which is VASTLY SUPERIOR to the
botched compatibility that's put into Mozilla based browsers. Really,
it's not Microsoft that needs to change, it's the other browser
makers.

I'm sure you don't, but that's not really so much my problem, I'm not
an instructor, I simply pointed out how the "problem" could be
avoided.

I found this one on the net, made a couple minor mods to it and put it
in an external js file for easy portability:
http://www.backwater-productions.net/detect.js

The script is real simple and straightforward, I suppose you could
rewrite it from scratch if you really had the inclination.

....not really. No format is particularly "better" than another, it
really depends on the specific situation. Often in my sites I employ
a whole array of different image formats and use split form
techniques, using the "best" formats for the right parts.

Should be pretty easy to work with, just create a transparent layer
over the top of it and use a graphics tablet to trace it.

Again, you seem to be confused. The style in and of itself is not
new, it's most often associated with old timey banks, business, etc.
But the style isn't really the problem, it's the IMPLEMENTATION of the
style. Despite what you think I said, you misunderstood. For example
I've seen some sites that use grids and image overlays and it look
VERY nice...the point is that when they used the style they didn't go
at it like spastic tweenage muppet fuck strung out on pixie stixs.

Here's a good example of what the style being used in a general sense:
http://www.prosolutions.tv/templates/marble/

Again though, like mine, that's just a mockup, you could REALLY
develop the design though and take it to a truly artistic level. Try
this site for some inspiration:
http://www.wincustomize.com/Skins.aspx?LibID=22

Often times I like to take design ideas from OS skins/themes and
remake them for my web stuff. Like what I did here:
http://www.backwater-productions.net...ories/1-10.png

The original calendar was actually green and came from one of those
skins...I looked at it, studied it various parts and then recreated
each part and made my own from scratch. It's very cool looking and
really nice design. You can do the same, the gold and green is really
just a color scheme, Kiddo, it wasn't a design suggestion so much.

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net

With neither quill nor qualm, Onideus Mad Hatter quothed:

Doesn't seem to do Mozilla...

--
Neredbojias
Contrary to popular belief, it is believable.

Volfro:

In reply to your OP. That aint so bad, Personally Id remove the white M
and center the top text maybe make it shorter and tweak, tweak up the
tabs (http://www.alistapart.com/articles/slidingdoors/) and change the
font, and add in some custom tweak icons here and there
(http://www.websiteicons.com/), and then review it again.


--
Mimic

First day it opened I went down there, was doing a few laps and pulled
over and the manager comes over to me and says "Oi, mate! No
professionals." I said I'm not a professional. He said "Well, you should
be with moves like that you could be the best in Britain". I said, "No
thanks I'm making shit loads from computers".

[email: ZGF0YWZsZXhAY2FubmFiaXNtYWlsLmNvbQ==]
Help Stop Spam - www.hidemyemail.net

"I have come to realise that, only in death, will I find true perfection."

[Follow-ups trimmed to alt.h]

On 24/11/2005 11:35, Neredbojias wrote:

[snip]

Browser detection (by User-Agent header or object inference) is flawed,
anyway. Avoid it.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

On Thu, 24 Nov 2005 21:06:47 GMT, Michael Winter
<m.winter@blueyonder.co.uk> wrote:

It's flawed if you don't know how to implement it properly, for
example if you were looking for a Mozilla string, in which case you'd
probably get IE. The code is perfect and has been tested by dozens of
different people on multiple operating systems and browsers...so uh,
the only thing flawed is your comprehension of it apparently.

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net

On Thu, 24 Nov 2005 16:12:52 +0000, Mimic <dev@null.com> wrote:

His client wants it.

Oh boy, another "let's find a pointless use for CSS", seriously, just
do those up in yer graphics proggie and encode them properly. They
might be 3 or 4 kb bigger, but they'll look nicer, will load nicer
(instead of piece spattering) and will take less code (just use a
simple Javascript rollover). That's always been my gripe with CSS,
it's always trying to reinvent everything for n00bs who haven't
bothered to think outside the CSS box.

Those icons blow, they look like somebody hit the button on the
Wayback machine. You know you can have simple icons that don't look
like they came out of an icon package from 1992...I'm just sayin.

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net

With neither quill nor qualm, Onideus Mad Hatter quothed:

The code isn't perfect. The code is lousy. But yes, it is easy to
detect Mozilla and, separately, Firefox. Do you know how?

--
Neredbojias
Contrary to popular belief, it is believable.

On Fri, 25 Nov 2005 00:29:29 -0700, Neredbojias
<invalid@neredbojias.com> wrote:

Which part of it, Kiddo?

The code accurately detects the OS and all major browsers, maybe a
dumbass like you needs it to fuck you up the ass and give you a reach
around too, but that's on you.

....are you RETARDED?!

http://www.backwater-productions.net/detect.js

Jesus Keerist, it's like God suddenly decided to punish your parents
by making their spawn the most terminally fucking STUPID idiot on the
face of the PLANET!

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net

On 25/11/2005 03:10, Onideus Mad Hatter wrote:

[snip]

No, the technique is flawed; it isn't reliable. If the OP must provide
code for IE only, then the OP's time would be better spent investigating
its proprietary conditional comments syntax.

Once the use of IE has been well-established through this method, the
platform string can be used to limit any code to only Win32:

<!--[if IE]>
<script type="text/javascript">
if('Win32' == clientInformation.platform) {
/* ... */
}
</script>
<![endif]-->

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

On Fri, 25 Nov 2005 13:28:14 GMT, Michael Winter
<m.winter@blueyonder.co.uk> wrote:

Look, Dumbass, maybe you're just slow or something, but maybe you can
explain to everyone here why you can't seem to get that FAT head of
yours around the fact that however flawed you think it is, it's been
tested and shown to work on ALL major operating systems with ALL major
browsers. Now if you wanna run at the fuckin mouth and try and claim
it doesn't work, by all means, provide a SPECIFIC combination of OS
and browser that it DOESN'T work on, until then, yer just a fuckin
retard runnin at the mouth.

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net

On Fri, 25 Nov 2005 23:01:00 GMT, Michael Winter
<m.winter@blueyonder.co.uk> wrote:

Running away and putting up straw men isn't going to help you, Coward.

*comments restored*

Now if you wanna run at the fuckin mouth and try and claim
it doesn't work, by all means, provide a SPECIFIC combination of OS
and browser that it DOESN'T work on, until then, yer just a fuckin
retard runnin at the mouth.

Quit backpedalling and step the fuck up, Poser. Either you can name a
specific mainstream OS and browser combo that the script doesn't work
on or you're full of shit as a Thanksgiving turkey.

Sorry, Stupid, but the script is necessary. I'm sure the shit you
slurped up out of Google and didn't properly comprehend told you to
use feature detection rather than browser detection, however there is
no feature detection that can be used for PNG alpha transparency
support and PNG gamma support.

Of course, the deficients you're slurping on Google wouldn't know that
because the majority of them are so boxed in they automatically think
that full PNG support isn't even available. Check it, Stupid...
http://www.backwater-productions.net...tform/cbstory/

Now tell me how I achieved the fade effect when you scroll the text.
Now tell me of even ONE site on the whole of the fucking Inet that has
that effect. Oh hey, free cl00, YOU CAN'T.

There's a difference between being a web professional (aka college
know nothing) and being a web artist...guess which end you're
molesting out of ignorance.

--

Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net