Personal Portfolio Site Up (Looking for IE CSS assitance)

[michaelrjohnson]

Greetings all.

There seems to be a trend on MR for those of us with our portfolio sites to offer them up for criticism and assistance. I would like to throw mine on the pile.

portfolio.michaelrjohnson.com

The site has been active for awhile, but I'm mostly looking for some assistance in getting my site to render properly cross-browser. The site is 100% hand-coded CSS, and, well, it's broken in IE. If you are able to offer some assistance, please let me know. (First view it in a webkit/gecko browser, then view in IE.)

If you have some other comments, leave them here!

 

[dornoforpyros]

hey I dig it, it's clean and simple. Personally I'm not usually a fan of minimalist design like this but you've done an excellent job.

My only suggestion as far as design would be to center it on the screen instead of having it hug the top left corner like that. But it's not a big issue at all.

 

[michaelrjohnson]

hey I dig it, it's clean and simple. Personally I'm not usually a fan of minimalist design like this but you've done an excellent job.

My only suggestion as far as design would be to center it on the screen instead of having it hug the top left corner like that. But it's not a big issue at all.

Thanks, I appreciate the compliment.

As for the alignment, I'm using it as my tricky way of keeping my site within an 800x600 window. (Which still is the current standard maximum, despite my site stats showing that I have a very low 800x600 hit rate.)

More imporatantly, though, the grid structure is (obviously) very important to this site, and I feel that the upper-left corner really needed to anchor the site. By "hanging" the whole site off the upper-left corner which features my name, I'm hoping to increase the chance of a viewer remembering my all-too-common name.

 

[kaboutertje]

You should make it cover the whole screen, but center it (like said before).
It shows ok in firefox, but it's all messed up in IE. The idea is nice though.

 

[michaelrjohnson]

You should make it cover the whole screen,

What do you mean? It currently spans the whole width of the browser window.

It shows ok in firefox, but it's all messed up in IE.

What do you mean by "shows ok"? The site renders properly (read: as designed) in Firefox. What are you seeing that isn't rendering properly?

...and I'm aware that it doesn't display properly in IE. That's why I'm asking for assistance! (Read first post)

 

[kaboutertje]

With ok, I meant that the colored lines aren't properly aligned with the text (and line mouseover) on the right.
Now that I look at it it's not that it isn't aligned right, but the mouseover line is thicker, maybe you should make the lines on the left as thick as the mouseover? And have you tried connecting the mouseover with the line on the left?
Ah sorry didn't knew about the IE problem. With covering the whole screen I actually meant that you should keep it that way, but that it might look better centered.

 

[Lixivial]

With ok, I meant that the colored lines aren't properly aligned with the text (and line mouseover) on the right.

Yes, that also is happening in Safari, Opera, and Firefox (1.0.x and 1.5.x). IE is an obtuse beast that has no defined method to its insanity. Are you talking about IE for Mac, which has become a very small minority, or the more predominant IE for Windows? ... Or both? They're vastly different beasts, you know. I'm not even going to touch IE: Mac issues, as I consider it a dead browser and I've been quite happy since MS torched it.

You have a problem in that you've arbitrarily stretched an image past its original size and to an absurd length -- this isn't a standard or compliant way of doing things and it's certainly not a necessary way of doing things. If you wanted to do that, you could have made a 1x1 px background with that color and set it to the background of a div. Better yet, you could have set the background-color property of that div and stretched to the remainder of the portal window using percentages.

The problem with how you implemented it is that not every browser handles stretched images the same (they don't even handle CSS the same, but at least it's a defined standard.) You'll also come into problems when someone, or rather if, someone has a wider screen than you've set. Plus, you've not set those images to be the same length.

I'm also trying to figure out why you chose to use a frame -- the only thought I can come across is that you wanted to retain the URL across all pages, but that's not always a good idea...

Anyroad, the premise of your site is quite nice, but you may want to reconsider how you did the right-hand stretched color bars.

 

[michaelrjohnson]

Thanks for the post, there's some good stuff in there... I'll try to respond point-to-point.

Yes, that also is happening in Safari, Opera, and Firefox (1.0.x and 1.5.x). IE is an obtuse beast that has no defined method to its insanity. Are you talking about IE for Mac, which has become a very small minority, or the more predominant IE for Windows? ... Or both? They're vastly different beasts, you know. I'm not even going to touch IE: Mac issues, as I consider it a dead browser and I've been quite happy since MS torched it.

The reason I didn't specify that I was talking about IE for the Windows is because I know IE for Mac is dead (It's not even available for download since January). So I completely wrote it off as if it never existed.

You have a problem in that you've arbitrarily stretched an image past its original size and to an absurd length -- this isn't a standard or compliant way of doing things and it's certainly not a necessary way of doing things. If you wanted to do that, you could have made a 1x1 px background with that color and set it to the background of a div. Better yet, you could have set the background-color property of that div and stretched to the remainder of the portal window using percentages.

I chose to do it this way, because all of the text on the left side (navigation, headers, etc) are not in separate divs, they're relying on the specific text rendering of each browser to maintain proper spacing. If I were to use a DIV method on the right with the color bars, I would not get the same spacing as the text. (Far more unreliably then the "thickness" problem). I've tried the method you mentioned, and its results are far more distracting than the thickness problem. If you know of a way that I can accomplish even spacing with the text flow on the left, without stretching images in a list, I'd appreciate the tip!

I'm also trying to figure out why you chose to use a frame -- the only thought I can come across is that you wanted to retain the URL across all pages, but that's not always a good idea...

I was actually unaware of frame usage. Upon further investigation, I had "frame-based forward" option selected on my URL-forwarding. I've since removed it. Thanks for pointing it out.

Anyroad, the premise of your site is quite nice, but you may want to reconsider how you did the right-hand stretched color bars.

Thanks.

 

[pavetheforest]

kudos