[ultra-V]

I’m a graphic designer redoing my website and I would appreciate a little advice / help with regards to compatibility issues. This is my first attempt at using CSS positioning for layout and so far I’m enjoying it, but am not knowledgeable about what is kosher and what could problematic.

Before I build the whole thing, I would appreciate if anyone with a programming background could let me know if there are any compatibility issues with the CSS and JS as I have it now.

I have put up four sample pages – one for each level of the nav – here
Click on Portfolio > Interactive > Poly NYC to see each.
It should look generally like this.

I have tested it on a few browsers to generally good results: Safari (looks good), IE5mac (looks good), NS7mac (JS portfolio pages don’t work – why?) and IE6pc (various alignment issues). Also, is there a place I can go to download older browsers (like IE5 for pc) for testing purposes?

FYI, I haven’t spent any time optimizing images so dialup download is a little slow – like I know the background is slowing things down a bit.

Thanks!

[Synotic]

OK, well I haven't really checked out the code first, but the first thing you must absolutely 100% do is get rid of your current rollovers. 40 images (I checked ) is way to much to deal with if say you just want to change the beige/tan color. Using Pixy's CSS rollovers, you get the dual benefit of eliminating your JavaScript and removing 2/3 of your image files. You can find a nice article on it here by its creator. It's actually a pretty nice technique.

Secondly read up on Taming Lists. This will let you put your navigation into something like this:

Code:
<ul>
	<li><a>link</a></li>
	<li><a>link</a></li>
	<li><a>link</a></li>
</ul>

Don't be intimidated by the length of the article, basically to get it to look exactly like your current navigation, you'll use "list-style: none" on the ul to remove the bullets, and "padding: 0; margin: 0" to remove any spacing and margins. But the article will explain it better.

Anyways, that's a big thing right there. Luckily your design isn't too complex design wise and that seems to be one of the main things.

Alternatively (you might not like this ) you might notice that italicized Georgia is very similar to your nav font and you might be able to pull off a pure text approach for your navigation.

This is just the one thing that I noticed right away, I'll take a bit deeper look at it and see if I can provide any more tips

[ultra-V]

Using Pixy's CSS rollovers, you get the dual benefit of eliminating your JavaScript and removing 2/3 of your image files.

But I assume this only works with text-based nav? Unless I put the link names in the background file, in which I still need to make new images for each link. For my own file organization, I find just three PSD files (one for each column) not too hard to manage - letting ImageReady output all the states from layers. But if there are user benefits I could reconsider. I had planned on cutting the number of images/states by 1/3 - there are currently different ones for the two shades of background but some careful transparency will fix that.

Obviously making it text-based would save a lot, and I may still experiment with it. The reason I had not gone with Georgia originally was character width - since I need to conserve horizontal space in the deeper pages. Mrs Eaves allows considerably narrower columns at similar heights (plus I have been using it for years in my identity).

Thanks for your comments so far.

[Synotic]

Originally posted by ultra-V:
Using Pixy's CSS rollovers, you get the dual benefit of eliminating your JavaScript and removing 2/3 of your image files.

But I assume this only works with text-based nav? Unless I put the link names in the background file, in which I still need to make new images for each link. For my own file organization, I find just three PSD files (one for each column) not too hard to manage - letting ImageReady output all the states from layers. But if there are user benefits I could reconsider. I had planned on cutting the number of images/states by 1/3 - there are currently different ones for the two shades of background but some careful transparency will fix that.

Obviously making it text-based would save a lot, and I may still experiment with it. The reason I had not gone with Georgia originally was character width - since I need to conserve horizontal space in the deeper pages. Mrs Eaves allows considerably narrower columns at similar heights (plus I have been using it for years in my identity).

Thanks for your comments so far.

Luckily you caught me right before I went to sleep

No it doesn't require text based navigation at all... although it does support it. Did you check out the link? I'm not quite sure what you mean by putting "the link names in the background file". With Pixy's CSS rollovers there is the user benefit of only having one image file per rollover, which means less connections for the user, and faster loading for them. But the main benefit is not having to worry about Javascript, no initial flickering, removing a good portion of your images.

Good luck on your site, like I said earlier, I'll take a more in depth look at the site and see if I can give you any more tips tomorrow.

[Chris O'Brien]

I think it's worth pointing out that the Taming Lists technique suggested by Synotic won't work in IE/Win - just incase you are wanting to support that browser.

[Synotic]

Originally posted by Black Book:
I think it's worth pointing out that the Taming Lists technique suggested by Synotic won't work in IE/Win - just incase you are wanting to support that browser.

Are you referring to anything in particular? There isn't really a "taming lists" technique That article just outlines a few ways that you can alter the appearance of lists more creatively. I've used many of the tips there and variations successfully on MSIE.

[Chris O'Brien]

Originally posted by Synotic:
Are you referring to anything in particular? There isn't really a "taming lists" technique That article just outlines a few ways that you can alter the appearance of lists more creatively. I've used many of the tips there and variations successfully on MSIE.

Well, I jumped straight to the bottom of the link and seen the rollover effect. And, presuming I got the gist of the article, decided to say that that won't work in IE/Win (because it doesn't support :hover for anything but <a>'s...)

Next time I'll read everything before posting

[ultra-V]

"No it doesn't require text based navigation at all... although it does support it."

Yes, I looked at it and the example given has a background image (shifting positions) with a text-based link. The benefit is obviously one image file for ALL rollover links. But to do it with, say, a specific font then I guess I would have to make a background image for each link and include the link name (in my font) in each part of the image? I would then have one image for each link (with all states together in that image), yes? With no text link?

I personally don't see much benefit for my organization in 10 images with three parts each versus 30 individual images (if as you say I decide to change the background color). But if using CSS to control it rather than JavaScript will help it render better/faster, then I'm all for it. It does mention an IE flicker issue and workaround at the bottom of that article.

[Synotic]

OK, I took a bit more in depth look at it and here just some of my general thoughts.

Syntactically, your code seems to be good, no obvious syntax errors. If you want a few optimization tips there are some simple shorthands you can use:

Changing:

Code:
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

to simply:

Code:
margin: 0;

You can reduce all this:

Code:
border-top-color: #66804D;
border-top-style: solid;
border-top-width: 3px;
border-bottom-color: #66804D;
border-bottom-style: solid;
border-bottom-width: 3px;

to:

Code:
border: solid 3px #66804D;
border-width: 3px 0;

And for your line height, it might be better to change it from pixels to ems, i.e. instead of 20px, 2em. That way your line-height increases with the text.

Also, you'll want to wrap your paragraph in a <p> block.

But these are just minor things. If there was a problem, I'd say it would be mostly your reliance on absolute positioning and fixed width. This basically makes it very hard to update anything, if you add a navigation item for example, you have to reposition every single nav item.. if you have enough, then you have to redo all the graphics for the frame to make it bigger. With the fixed width, you are limited to a certain amount of text underneath your image frames. If you have too much, it spills out, too little, it looks odd. If you resize the text any bigger then the text flies out of the frame. Although it all works, foundationally it makes the layout very weak in that it's easy to break and hard to change. When you rely a little bit more on flow and allow the widths and heights to be a little more flexible, the site can adapt to more content on the page and still look good. Anyways, if you're still willing at this point to consider a structural change.. here's my suggestion



I apologize in advance for the crudeness I thought it might be better visually and required me to type less... The basic idea is that you have one main div that holds everything, no fixed size. You can choose your own method of vertically centering the entire page. If you want the best compatibility you should probably use a table.

The main things that you have that are hard to do are the full height backgrounds and vertical centering everywhere.

For the full height backgrounds on the left, I would suggest using nested divs around the frame. For your particular case it seems like you'd need 3 additional divs. One to define the top separators:



Another for the bottom and another for the fill in the middle. I didn't mention this in the diagram.

For the navigation I showed an example of what might be a nicer way of making sure everything lines up. Having two unordered lists with the same amount of items, but having some cells empty. Make sure that all the items are the same height so you know what the height of the filler list items should be. Again, vertically aligning the navigation can be pain. What I would do for your particular case is give both navigations the same top margin of something like 200 pixels (remember that they should be the same height, employing my idea). This can give you a good "initial state", but it'll still look good if there is additional text, portfolio items or if the user simply resizes his or her page. Another option if you want the position of the nav to be near (can't be perfect unless you want to use a table) the center is to find a good em value. An em is basically the size of the font in its current sate (but it seems like you know more about typography than me, so you probably already know that ) Experiment with having a top margin of 10, 15 ems. Then 13ems, then 13.5, 13.45 etc...

Anyways, that's my idea if you want to rework your design, feel free to ditch it or ask questions if you want to go with it... it's probably really confusing at this point.

[Synotic]

Originally posted by ultra-V:
"No it doesn't require text based navigation at all... although it does support it."

Yes, I looked at it and the example given has a background image (shifting positions) with a text-based link. The benefit is obviously one image file for ALL rollover links. But to do it with, say, a specific font then I guess I would have to make a background image for each link and include the link name (in my font) in each part of the image? I would then have one image for each link (with all states together in that image), yes? With no text link?

I personally don't see much benefit for my organization in 10 images with three parts each versus 30 individual images (if as you say I decide to change the background color). But if using CSS to control it rather than JavaScript will help it render better/faster, then I'm all for it. It does mention an IE flicker issue and workaround at the bottom of that article.

Yes, if I'm understand you right, that's exactly what you would do. Simply embed the font right into the image and don't put any text in the container. If you want to see an example with custom text, this is a page I messed around with a while ago. You can also see the backlight feature (which I got help with here)... the backlight states are also in the one image.

Here is the image that I used:



Just embedded the font in there and shifted the background position as needed.

Technically you're right that you're not eliminating any of your images and still have the same amount of frames. Where it could save time, is if say you had all 10 buttons as PSD files, you go to one file and edit the overall background. In my case, the yellow/green, black light and dark blue background. Then you could go over to the other 10 and quickly change the background by pasting everything in. If you wanted to change the image size or font face or color however, it would take just as much time.

[ultra-V]

Yeah, I do know I can shorten many of the CSS rules, but as I am still learning and fiddling with values, it's a bit easier for me to track what's happening this way. I'll probably shorten once finalized.

"This basically makes it very hard to update anything, if you add a navigation item for example, you have to reposition every single nav item.."

Actually, no, as I have it now I can add items and they will just add to the bottom. Each menu is set up to start 171px from the top (just above middle) and go down from there. Then I can apply a class (like "hilit3") that then shifts them up (to align the third one to the middle). I like having the main frame a fixed height for all pages, centered vertically in the window. Sure, a bit limiting in text length, but I don't want the site to be wordy. I will take a closer look at your suggestions to try to get more flexibility in width, though.

FYI, I tried a quick text-linked version just for kicks. It's here. It's nice and organized and would be easier to maintain, but I don't think I'll go with it, for visual design reasons. I'd like to keep my font. I guess the main question is - is it better (for the browser/user) to control with CSS rather than JS?

Thanks.