[DrMerman]

Hey guys,

I'm currently tweaking the CSS on my soon-to-be-live website. Although there are on-line services where you can view your page on multiple browser versions, they usually take up to about 4hrs before you see a result.

If you answered "Yes" to the title, I was wondering if you could open the below page in your browser, and compare how it displays to the images provided. (I've been having a few problems with earlier versions of IE, but I know FF, IE6, IE7 and Safari all display it pretty accurately.) If you said "No", then...well....

A couple of notes :

* The thumbnail images are temporary, as is the blue banner ad on the right of the main page.
* Currently only the main page, links section, and contacts section are up (and the middle and right columns in the links section are the same.)
* The gallery overlay should be able to be brought up on all pages.
* The images have yet to be fully optimised, so loading takes longer than it should at present.
* Some of the text is fairly temporary.
* There will be a 3D rendered background in the top bar, aswell as some background detail at the sides of the page.

Many many many many thanks in advance, and I owe you all a beer
Dr Merman

Site : http://www.drmerman.com/mattFTP/site/mainPage_up.html

Comparison Images :

Main Page : http://www.drmerman.com/mattFTP/site/im ... inPage.jpg
Links Page : http://www.drmerman.com/mattFTP/site/im ... ksPage.jpg
Contacts Page : http://www.drmerman.com/mattFTP/site/im ... tsPage.jpg
Gallery Pop-up (Displayed on mouse-over) : http://www.drmerman.com/mattFTP/site/im ... yHover.jpg

[lebbeus]

I'll take a look under the hood when I get home tonight--firefox definitely works, IE7 is shifting colors a bit, but seems to work OK…I know there are CSS issues with older browsers (there are ways to have specific coding for them)…you could always just decide to only support IE6 and up and not worry about legacy browsers--though there could be an auto-detect to tell them that the site might not work well for them and offer them a link to upgrade.

[DrMerman]

Thanks lebbeus!

I've implemented a few hacks here and there to make up for the box-model problem that the earlier versions of IE had, as well as one or two other issues. I agree that it may not really be worth trying to make it display completely faithfully on IE 5.01 and the other older browsers, but I'm using this as an exercise in attempting to get 97% pixel perfect renderings, purely out of curiosity

Any crits are more than welcome,

Cheers,
Dr Merman

p.s The CSS has yet to be correctly organised and split up. There is a mainLayout.css file as well as some code at the top of each page. Good luck!

[lebbeus]

not making any promises, but I've got it up in Dreamweaver now…

three "fatal" errors and one "warning" (you may already know these)

"fatal errors"
line 2: dir attribute of the HTML tag is not supported (IE 5.0, 5.5, 6.0, Netscape 6.0)
line 2: the lang attribute of the HTML tag is not supported (Netscape 6.0) I'm not sure the code in line 2 is necessary
line 191: value 'table cell' is not supported for CSS property display (IE 5.0, 5.5, 6.0, Netscape 6.0)

"warnings"
line 195: support for the top, text-top, middle, bottom, and text-bottom values of the CSS property vertical line is incomplete; these values may not produce the intended effect (IE 5.0, 5.5)

doesn't seem too bad, I'll go through my bag-o-tricks and see what I can come up with…it may end up being easier setting up a splash page for users to choose between a "lite" version and the "slick" version.

[lebbeus]

just out of curiosity: what program are you coding in? I'm noticing quite a few IE specific things…I'm pretty sure there's a way to get the site to look the way you want without having to use browser specific coding (though I could be wrong )

[tokiop]

Hey Doc, it looks nice and clean here ! (safari/FF - Mac) the only crit would be the compression of the three thumnails and bottom logo, which look a bit too JPGed to my taste !

Lebbus, for curiosity, are you using a debug tool to detect fatal errors and warnings, or your an expert coder?

[JDHill]

Slick site Doc...everything is pretty much dead-on here ( IE7 on Vista ). I guess you've got a couple of hours into it by now, eh? lol...

Definetely looking super-pro...

JD

[lebbeus]

Lebbus, for curiosity, are you using a debug tool to detect fatal errors and warnings, or your an expert coder?

not an expert coder--Dreamweaver has a pretty good debug tool

[lebbeus]

on the linux machine right now (firefox) and everything looks good except the tooltip type pop-ups (or whatever they're called) when you mouse-over the thumbnails don't work. Not really a problem--it's still obvious that the mouse is over a link

[JCAddy]

Very nice Doc. I was at work using IE7 and it didn't seem to fit the screen right, but here at home using Firefox it works perfect.

It will be very nice once you get more content on there.

Hey, if you don't mind can you chime in on my "moving out of the country" thread. I've noticed that you're from the UK.

-Jason

[DrMerman]

Hey guys

Lebbeus : Thanks for putting those errors up. I've yet to properly clean up the code so that it validates correctly, so there are gonna be one or two problems here and there, and its good to know what dreamweaver suggests! The IE specific stuff is mainly related to getting the gallery popover to work without using anything but CSS, which took a WHILE

I actually code entirely in context (a notepad like text-editor.) I've just always done it that way, and although I've tried goLive, dreamweaver et al, I still find it easier to hand-code it. Oh and I'm actually going to get rid of the tool-tips anyway, I don't think they really bring anything to the site. Muchos gracias! I owe you a beer!

Tokiop: Thanks for that mate. Yeah the jpgs are all temporary at the moment, and hideously over-compressed

JDHill : I appreciate that, thanks. So far its been about 6 hours, most of which was spent trying to figure out that darn gallery

Hyperballad : Thanks dude. I'm trying to make it more than just a portfolio site, so people will be able to sign in and buy/download tutorials and scripts, and clients will have an online database of work done, contracts, timeframes etc. Fingers crossed, eh? And yep, I'll run over there right now...

Thanks to you all once again,
Dr Merman

[tokiop]

not an expert coder--Dreamweaver has a pretty good debug tool

Good to know ! must be more productive than notepad

[lebbeus]

@drMerman: no problem, glad to help--this has inspired me to finish up my own site (which unfortunately has been live for a year and is still missing things ) and if I run into anything that may help I'll shoot it your way. CSS can do some pretty amazing stuff and there's some crazy "web2.0" stuff using only java and html.

I've got Dreamweaver 8 here and MX at the office--8 is so much better than MX (so if you've only had experience with the older versions you should take a look at the new), though what you've done by hand is pretty sweet.

@tokiop: notepad is really all you need (well that and a browser, and a domain anyway), though I like being able to lay things out graphically as well

[DrMerman]

Thanks man, that would be great. I've been meaning to get round to checking out the latest versions of Dreamweaver and GoLive CS3, but out of habit I started this site the old-fashioned way

Tokiop : I agree that using a program can be better, but as lebbeus said, hand-coding is not an impossible thing. I usually work with the page loaded in Firefox, IE, and now Safari, meaning that I can code abit, refresh the pages to make sure the changes are correct, and then troubleshoot and continue. In my experience, using the web design programs is a great help, until you get to the stage where you have to figure out the hacks to make everything look as it should across all browsers. Either that or I'm old-fashioned

[tokiop]

hehe, I don't think it is old fashioned (or I am too ! ) but I found the debug impressive ! Anyway, I just tested W3C's validator, and it does much the same for free ! Sould have tested it before !

It is so satisfying to produce light & clean code with free tools, aviable on any computer, than with the expensive, fat, and monopolistic programs from Adobe