Would really appreciate testers!

Hi,

Just converted this site from tables and Transitional html to Strict and CSS, it's not 100% complete but I'd like some feedback on how it works on your system. I don't have access to IE (ptur!) but I suppose it must be tested in that non-the-less. I have also converted from javascript to CSS roll-overs on the category selection buttons, quite chuffed that I got that to work Knowing IE, it will be broken in that browser though.



I am going to add click-through linking to larger format images, this has not been implemented yet but will be adding that next (might even be done by the time you read this, but right now I need a break).

Here it is:
http://www.jonathanmortimer.co.uk/test2

I have tested in Firefox and Safari. I have not validated it yet. Any comments on style are also welcome

Thanks!

Hi Jonny,

The Critique is broken at the moment because of the upgrade, so you need to post your address

__________________
Jack Franklin - Webforumz Moderator
(x)HTML | CSS | PHP | MySQL | JQuery (Javascript)
Contact: My Blog | Twitter | Delicious
Want Lessons? PM me.
If you think I've helped, please press the 'Thanks' Button.

Ignore the colours on the contact page form, that was just me experimenting.

It is broken in IE6. (What isn't?)

The transparent PNGs have a light blue outline instead of transparency, and there's a lot of flicker when the images switch.

And I receive an "unknown runtime error" from JavaScript when clicking on portfolio pages in the bottom nav bar.

Thanks for the feedback. Typical bloody IE! I would be interested to know if my nature site works for you - http://www.jonathanmortimer.co.uk/nature
It uses the same javascript technology.

If anyone has any suggestions why this does not work in IE, please do tell! Perhaps I should ask this in the Javascript forum.

I'm using the Virtual PC version of IE 6 (the version Microsoft distributes for testing web pages), so it might actually work in a real version of IE 6.

But for me, the nature site has the same "unknown runtime error" problem.

To sort out your transparency issue in ie6 use the pngfix.

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Can't help with the javascript error though.

Pat

Thanks, though when I tried to incorporate this to my pages it didn't do anything, it could be because I have not set width and height for my PNG images but I don't know how to do that when using the CSS background (url) method.

OK, I cheated and placed a white background on my PNG's. One IE failing down, several dozen to go..

One thing I don't understand is why my CSS is broken in IE wrt underlined links.. anybody?

Don't cheat

Code: Select all

#test {
background: url(images/blahblah.png) no-repeat;
width:whateverpx;
height:whateverpx;
}

#test {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/blahblah.png', sizingMethod='scale');
}

And what specifically are you having issues with underlined links? It helps if you explain your problem in detail rather than some broad question.

your contact page failed validation

And html tidy only found 10 warnings, if you don't have the html tidy plugin for firefox i highly reccomend you getting it

HTML TIDY REPORTS:

<img> attribute "width" has invalid value "740px" HTML width and height attributes do not need "px"; their units are always assumed to be pixels.


Incorrect: <img src="example.png" alt="Example" width="740px" height="40px" />

Correct: <img src="example.png" alt="Example" width="740" height="40" />



Other than that runs perfectly fine in firefox, launchin IE will crash my pc so i'll leave that to other people to do

Just my input... hope it's in someway helpful

thats in regards to the pages with the gallerys, it's nothing important, passes validation either way W3C don't regard it as important.

Thanks for the advice! I will try and use that code once I've sorted out the javascript problem (featuring exclusively in an IE near you! )

I seem to have fixed the css underline links problem now, just a CSS thing that IE didn't handle properly.

I also sorted my pages so that they all validate (well, all except the one with a form on it, I will look at that another day) and so does the CSS.

I never knew about the px thing, thanks

I remembered I can run WinXP and IE 6 in Qemu on my Mac, it's slow but it does the job (eventually).

OK, I don't understand changing the background to transparent, that just gets rid of my image completely in Firefox and Safari.

in which case just you could just wrap it in a conditional comment.

there are dozens of articles on the png hack, some offering different methods

A conditional comment


Although they validate, and work, they're still not the best way to go.

There are dozens of articles on why not to use them, and others on how to implement them so people are split on wether to use them or not.

They're really just a quick fix, there are alternatives to fixing problems that often take longer, but conditional comments

Code: Select all

#test {
background: url(images/blahblah.png) no-repeat;
width:whateverpx;
height:whateverpx;
}

<!--[if IE 6]>
#test {
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/blahblah.png', sizingMethod='scale');
}
<![endif]-->

If you google it, you'll end up trawling through hundreds of articles on different fixes. Most involve conditional comments, some javascript and some take other approaches.

Very strange. Thats copied directly from a website I've done recently and I have no issues in either FF or Safari