Topic: New personal webpage... opinions?

It should qualify as XHTML Transitional standard however certain bits of the .CSS and javascript ruin both XHTML and CSS validations. However if I removed the Javascript and re-worked how images are handled, it would be XHTML transitional. Blame Internet Explorer.

http://blackhat.boss-gamers.com/

I tried using DIV's this time around. I want everything to the left. I dont want the content centered in the page. However I designed it on 1024x768 resolution. Would one of you be kind enough to take a snapshot at the highest resolution possible please and post it here?

Other than that, Im open to comments, complaints, and everything else.

[quicky]

I like the overall design.
But WTF is that Requirements section ?! I thought these were gone after Browser war 1.0. Please don't make FireFox the new Internet Explorer. As they say here, please, open the web. All the more that your site works like a charm in Opera ( even in SSR, small screen rendering ), and is quite ok in Lynx. ( Don't have Safari )

[/quicky]

The reason I had added the Requirements listing is simply because I know for a fact IE will screw shit up. I've already gone against some of my principles to make sure certain things look ok in IE but I really didn't test it in IE. How did the code turn out IYO? Did you click one of the pictures? I love that script.

How did I do using layers for the very first time instead of tables?

(Edited by Black Hat on 01-23-2006 11:19)

And another thing, I.E doesn't handle transparency too well. Features on this site require transparency.

(Edited by Black Hat on 01-23-2006 11:21)

2560x2048

(Edited by reisio on 01-23-2006 11:53)

Awsome, thanks Reisio.

You've not added the 'type' attribute to your script tags, and you've used the proprietry 'align' attribute for one of your spans.

Apart from the transparency you can create your layout and functionality to work easily in IE just as well as in Firefox without being invalid CSS or XHTML.

Transparency can be acheived using the special IE AlphaImageLoader filter (I think it's may be an ActiveX thing), but for your image popup, you could even use a 2x2 gif with 2 transparent pixels.

Poi's right, you shouldn't try and fight IE, especially as it's the most used browser by a long way.

Cheers,

@ Blaise:

I'll fix the align issue. Thank you for pointing that one out.

As far as the transparency goes, I'm already using the AlphaImageLoader in my .css for the images. Getting a completely XHTML friendly page isn't going to happen because of the way I am having to handle the images. The CSS is messed up because of the following:

* html #overlay {
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

Sadly, it was the only way to make it work with I.E that I could find.

The XHTML compliance is blown out of the water by the follow code used for images to work with the image loader javascript:

<a rel="nofollow" href="images/sleeping_giants_full.jpg" rel="lightbox" title="My cats, Puf-n-Stuf and Zeus."> <img src="images/sleeping_giants_thumb.jpg" alt="My two cats, Zeus and Puf-n-Stuf." width="100" height="100" hspace="2" border="1" /></a>

As you can see, with these two things... both the CSS compliance and XHTML compliance isn't going to happen.

(Edited by Black Hat on 01-23-2006 12:52)

wow reisio, what monitor do you have?

quote:

---

Black Hat said:

The reason I had added the Requirements listing is simply because I know for a fact IE will screw shit up.

---

Other than the image script, there is nothing on that page that would be even slightly difficult to code properly for IE.

It is important to get this out: the image script is nothing but fluff. If that is what you are banking on for this site, you need to take a better look at what you are doing and why. The transparency, while adding a nifty effect, is basically irrelevant. If the design works, and the images are good, the transparency will make no difference. If the design is good, and the images are good, but you can't see it because the site is designed for sepcific browsers, then none of it matters anyway.

On my site, IE users comrise 64% of my visitors. That's a pretty significany amount. Firefox falls somewhere around 27% - and that's with me using Firefox and my site set as my start page.

Odds are good your visitors will have IE.
And while IE may suck, it won't be going away any time soon.

quote:

---

Black Hat said:
How did the code turn out IYO?

---

1) Lay off the inline styles! The point of CSS is to remove the style information from your markup.
You have assigned id's to your divs, but you don't use those id's in your CSS to define their style - this makes no sense. Get the style declaration out of the div tag, and into the style sheet.

2) Blockquote? I don't see anything on your page that is a quotation of any kind, yet it looks like every paragraph contains a blockquote element. What for??

3) <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Use them!
Using spans inside of p's to mark your headers is just the wrong way to do it. You have headers - code them as headers!

Same goes with lists. Even though the section should be removed , you have a list of requirements. Code them as a list!

4) You seem to have a lot of empty paragraphs - why? If there is no paragraph, there should be no paragraph tag. If you need extra space around certain elements, this should be handled by the CSS. That's what the CSS is for. You also have the 'align' attribute in many of your tags, not just the one Blaise pointed out. Again: that's the whole point of CSS.


It's good that you have finally stopped styling with tables. But there is definitely work to do still!

FWIW

Ok Black Hat I see your point with regards the CSS, it is ahack afterall, and if transparency is part of your requrements then I wouldn't worry too much about itn ot vailidating, unless those requirements are higher up the list. You could just offer an alternative for IE users, but that would take a lot of work I imagine.

But what's wrong with your XHTML? I notice you're using the hspace attribute for the image, I'm not sure why this is necessary for your image loading script, but I would get rid of all your image attributes apart from alt and src as you can do the rest with CSS if need be.

@Reiso, That looks like the XFCE dektop, are you using Xubuntu by any chance? If so do you ever have any troubles with booting up and it freezing at the 'starting hotplug subsystem' stage?

Cheers,

quote:

---

Blaise said:

the proprietry 'align' attribute

---

Well, deprecated, anyways (and probably invalid for span).

quote:

---

GRUMBLE said:

wow reisio, what monitor do you have?

---

I just resized the browser.