Template Coding Issue

[Kubi 0]

Heyo, I'm coding this template here; http://forums.xisto.com/no_longer_exists/ , and I need some help.

In firefox, it looks fine. No problems what-so-ever. Safari, the last nav link appears to be "Home" instead of "Music" which is fixable, I think I might has mistyped the css. But then in IE everything is choppy. The entire page is missaligned, the nav all appears to be "home", and is looks horrible. I'm not sure what I did wrong with the coding. It must be something with the css because it was fine till I coded the nav.


The style sheet is located here; http://forums.xisto.com/no_longer_exists/. What I did with the nav was make it one complete image, the rollover state, and the mouse out. So what the css does is move the image up xx pixels(in the case, 15) so it'll show the rollover. The reason I do this is for faster load times. instead of loading one image, and then having to load another when you rollover, it'll load one image at the start and that's it. Well, it seems I did *something* wrong, and now the page is all screwy. Go ahead and look at my source and style, I don't mind. Just need to get this fixed.

Thanks for lookin'.

[garbage 0]

it just looks like one of the content boxes size might be off and it looks like it might be the one on the banner area..check all widths and heigths, also it could be the table for the nav that might be throwing it off.

[Kubi 0]

As far as I know all the sizes are correct...It only misaligns when I edit the nav.

[garbage 0]

try making the nav table a bit smaller

[Kubi 0]

Why smaller? It's the same size as it was before I put it into CSS.

[jlhaslip 4]

Kubi, First thing you need to do is add a Doc Type Declaration at the very top of the page to try to force IE out of Quirks Mode and into Standards Compliant Mode. Firefox and Opera both look fine, but IE will be in Quirks Mode which is a nightmare to make presentable as a cross-browser page. I would suggest html 4 Loose/Transitional for the Table-based layout you have there.Also, ID'd items can only appear once on a page. Your menu has duplicate ID's for the container and Menu. These should be "classes" since they occur more than once on the page. I can't assist any more than that because I have never done a 'sliced' page before, but these two things will be enough to cause you the grief you are incurring, so fix them and then post back to see what the page look s like then.

[Saint_Michael 3]

Well from looking at the coding and adjusting the heights of some of the images it seems all your problems are steming from your header, because every time I tried to adjust your index_06.gif image it wouldn't align properlu with the rest of the header.

 

What I suggest is that you re-slice your template with the follow slices, mind you this is a rough sketch of where the slices should be, but you should be able to get an idea on where to slice the template

 

as you can see it cuts the number of images down just a bit, but of course I am assuming that you will want the site to expand the content I would recommend this type of slice

 

 

Also make sure when your checking hte sizes that you have px next to the number so not to quirk mode the browser, that could the problem that you were haveing with the images because you just had the number and not the px next to it. This should give an idea what to look for and or redo.

Edited May 8, 2007 by Saint_Michael (see edit history)

[Robbie.Knox 0]

I had trouble like this with one of my old sites after I built it for Firefox. I ended up recoding it for IE, and then using Javascript (or PHP can't remember which lol) to see which browser the user is browsing in, and then give them the appropriate stylesheet.