Problems with div's and css...

I've recently decided to take a leap from table-based design, and step into the world of div's/css.

I am working on a site for my band, and have run into some issues that bugs me...

First...some notes:
The site did validate (once at least) as xhtml 1.1, and the CSS validated also. I haven't checked that in a while, since I had to use a javascript to get m$ie to accept the png transparency. The page then wouldn't validate as xhtml (strict) since I needed the language="javascript" attribute.

Ok...here's the main issues...

Number one
msie6 - like I want the top/menu section of the page to look:


The bottom, when I scroll down (also msie6):


Opera 7.54 - the menu part:


...and the bottom of the page:


Number two:
I can't figure out a way to get the fade-effect on the right side of the page, like this:

I can get it if I use position:absolute on all the elements, but then the scrolling won't work (even in IE).

I have now removed/replaced all my position:absolute in my css-file, since people on other boards have told me that that might be the problem. The only position:absolute I have left is to place the image below the header - the "The List" image.

To sum up:
1. How can I place "name.jpg" (the "The List image) where it's supposed to be without using position:absolute?
2. How can I get the fade-thingy back on the site?
3. How do I fix the spacing/height between the <p> and the <hr> in my header div? I want it to look like it does in IE, and not like in Opera (too much air between the <p> and the <hr>.
4. How come the "main text" is "smudged" into the menu in Opera, and not in IE?
5. How do I fix the scroll-issue in opera (and probably other browsers as well?

...that's about all I can come up with right now.
Thanks in advance if anyone takes the time to peek at it.

This is what I'd like the page to look ultimately: click

CSS: here
HTML(php): here
HTML(php) source: here

Okay... I love the layout

Have you tried the layout in Firefox?
The top part looks okay, the To Be Continued is on a the background [not the solid colour]

Personally I design all my pages to look proper in Firefox... as when it looks proper in firefox, its usually only IE that acts silly [and again only minor fixes]... but enough Preaching... =)

Your fade might be best acheived using a small image set to x-repeat on the right of the main DIV.

In Firefox, your HR isn't dipslaying the way you expect it... and its a little off to the left.

In your CSS, what's the purpose of declaring "html", "body", AND "html, body"... the last one overwrites the other two...

I have a few more constructive hints for some awesome design... but I'll get into them later... [gotta love the tableless!]

Haven't tried it in Firefox yet. I use FF on my Gentoo box, but the CPU is ****ed right now, and I haven't found the time to install a new one, or to install FF on my Win machine.
The problems you describe in FF are the same that I see in Opera.

I try to make my pages look good in Opera, and when they do, they usually work out nicely in IE too. If I go the other way around, things won't work


I've now made a 660px wide 2px high image that goes behind the #around. That works ok.


I really don't know. I guess I've messed up when I've been struggling with that other stuff

I've had some progress now, wich can be seen here: http://paperandwine.com/remake/remake/index.php?menu=band.php but there's still some stuff that's bothering me.

1. The page seems to stretch out much more than I want it to. How come?
2. The main content won'r position itself in Opera untill you put the cursor over the "the band" link in the menu. WFT?

(please note: the content on this last "version" may change, as this is my working dir, and I'll always find new stuff to try...)

1. Stretch out to much? You mean in height? With your design I would use a different approach to get the height 100%. I would use a plain, simple repeating background-image in body.
More about your method and the one I mentioned here:
http://www.paradoxia.org/index.php?subaction=showfull&id=1097532499&archive=&start_from=&ucat=1
(I presume you are Norwegian based on those in the band because this website is in Norwegian)

2. Don't know. But you still have lot's of html and body declarations, for all I know things like that could fu.. up.

Regarding javascript, you don't have to use language="javascript". This will do and then you can validate your page again:
<script type="text/javascript" src="sleightbg.js" ></script>

If you are from Norway I would recommend http://www.norskwebforum.no, lot's of knowledge there regarding CSS. You will find the author of paradoxia.org there amoung others.

Thanks.
I'll try that solution. I've done it once before on another site.

One question: Do I make a background-image with only the brown background and the fade, and anotherone with the pattern I have, or do I make a superwide one that contains both on top of eachother?

Catch my drift?

Is it possible to display two backgroundimages at once, one in html, the pattern one, and one on top of that in body, the brown with the fade?

(sorry. I suck at explaining )

[edit]

'cuz if I make one superwide, like this: http://www.paperandwine.com/remake2/images/bg.png (in case someone has a large screen with kembo resolution) the site looks super in Opera 7.54, but IE6 squeezes the backgroundimage together and everything turnes out like an ugly 70's coloured lsd trip...
Checkit: http://www.paperandwine.com/remake2/index.php?menu=band.php
Is there some code I can put in so that IE won't squeese the image like that? I've played around with background-attachement: fixed and stuff, but it don't seem to work. It'd be sexy if I could just put in a line of code and everything had turned out right

Hm. (Note to myself: Think before you write). Your approach is most correct, mine not. Totally forgot to think of your background image. But I would have used float instead of your way of positioning things, I'm not sure if the solution will work 100% with your approach to the problem.

I would take a look at the sourcecode at www.bzabza.com, he is using 100% height (his article is here: http://www.bzabza.com/css/1/)

You will also find him at www.norskwebforum.no

Ok...I've done some cleaning up and re-thinking here now, and the page now looks good in IE6, Opera7.54 and FF1.

There's only two things that's bothering me now:

1. The page still stretches too much. I think it's because of the header. I don't know. Is there a wey I can get #around to be 100% minus 172px high?

2. I had a load of problems trying to use <hr> under the menu. The positioning just wouldn't go in all the mentioned browsers. Firefox applied extra margin on the right etc. So I just made a small image and put it in there instead.
Now...the height between the menu and this line is bugging me. In IE it's a bit too small, so the line is too close to the menu, but in FF and Opera, it's a few pixels to large...how do I fix that?

Page: http://www.paperandwine.com/remake2/index.php?menu=band.php
CSS: http://www.paperandwine.com/remake2/style.css

[edit]
Three errors when I think of it...
The last one is the spaceing/distance from the menu/line down to the main text. I want it like it is in IE. Opera and FF shows too small space...

works in FireFox, but not Opera and IE. (The header image is 172px high)

The site actually looks best in Opera now. The spaceing and stuff in the menu. FF gives too much space, and IE to little.

Ok...I've gotten a lot of feedback on different forums, and I've now started building the site from scratch again.
I have two different questions now:

1. How come the line below the menu is displayed 2px high, when the image is 1px, and I have put heigjt: 1px; in my CSS?

2. Why won't IE6, FF1 and Opera 7.54 position the menu at the same place? Isn't a pixel a pixel? How do I fix that? (I want it like it is in IE)

Index: http://www.paperandwine.com/ny
CSS: http://www.paperandwine.com/ny/style.css

Your placement problem is likely due to the Box Model issue that IE has.

Apparently Internet explorer doesn't render a block the way the W3C expects it to, thus misinterpretting the margin and padding.
There's a way around it called the Box Model hack.

You can read about it here

Also, check here

Or refer to Google.

Ok. Now the site works as planned, except one thing...

The menu don't work in IE. How come?

http://paperandwine.com/ny/index.php?menu=band.php

[edit]

...and...doesn't IE understand "background-attachment: fixed;" ???

looks okay in IE to me...
can you explain the menu problem a bit?

I'm curious why your names are using a span with class strong... why not simply use <strong> tags?

Also, your heading, The List, is <h4>... why not simply <h1>?
This ensures your document would be parsed properly by some program creating an outline... [might as well plan for the future]

I found out what your menu problem is... hehe...
Sure it *looks* fine, but it doesnt seem to function...
Weird..

You could try taking the <p> out... I don't think its necessary there...

I'll see if there's anything else
What does the Javascript do?

The reason I have the <span> is because I'm going to include some more code in the class later on. Wait and see...

The JavaScript fixes the png-transparency crap in IE.

I'll try removing the <p>. Thanks for the tip

Why h4? I don't know. Hehe. That's just how it turned out.
Please explain the "some program creating an outline" thingy. I'm kinda slow today

...nope. Removing <p> didn't help

*bump*

Hmm...the menu seems to work in IE if I don't load the background image. WFT?
Anyone know of a solution to this annoying bug?