% problem in ie

[qthenoo]

Hey

Trying to get two divs to be 100% high but its not playing ball in ie. Heres the page:

http://www.raw-nerve.co.uk/greenwichvillage/

Its this is the culprits:

<div id="line1"></div>

And this is the css;

#line1{
width: 2px;
height: 100%;
position: absolute;
left: 44px;
top: 150px;
border-left: 2px solid #FF6699;
border-right: 2px solid #FF6699;
z-index: 10;

}


Any help much appreciated, thanks

chris

[VIPStephan]

I guess you need to set

html, body {height: 100%;}

too, in order to get that 100% thing working.

Woh, woh, wait a second.... Am I seeing right? Is that about the pink lines on the left?? I guess that's the most stupid method to draw 2 vertical lines that I've ever seen. Sorry for being so harsh but it's just stupid.
At first there ain't no 0.2 pixels so you can't set a border of 1.2px, either one or two.. or two million (have you ever seen a half pixel? That'd be 0.5... not even this is possible, but 0.2? No way!).
Secondly: Why are you using two divs for that?? There is probably a way to use the markup you have (without adding divs just for that purpose) and even if not you only need one div and set left and right borders... saves you HTML code and a lot of CSS.

[Arbitrator]

Last time I got height: 100% working in Internet Explorer it was because I had the XML prolog over my DTD, which put IE into quirks mode.

[Bill Posters]

<div id="line1"></div>
<div id="line2"></div>

...

#line1{
width: 1px;
height: 100%;
position: absolute;
left: 44px;
top: 150px;
border-left: 1.2px solid #FF6699;
z-index: 10;
}

#line2{
width: 1px;
height: 100%;
position: absolute;
left: 48px;
top: 150px;
border-left: 1.2px solid #FF6699;
z-index: 10;
}

Why not use one box with left and right border?

i.e.
#line1{
position: absolute;
width: 4px;
height: 100%;
left: 44px;
top: 150px;
border-left: 1px solid #f69;
border-right: 1px solid #f69;
z-index: 10;
}

Better yet, start the leftnav div further over to the left, give it enough padding to position the leftnav content where it is now and give it (the leftnav div) a left-aligned, vertically-tiled background graphic of two vertical pink lines?
It would mean you aren't adding markup purely for the sake of a decorative effect (which is something we should be avoiding).


Even if you decide to stick with using two elements...
#line1, #line2 {
position: absolute;
width: 1px;
height: 100%;
left: 44px;
top: 150px;
border-left: 1.2px solid #FF6699;
z-index: 10;
}

#line2 {
left: 48px;
}

No point in repeating it all twice.

[qthenoo]

Thanks all for your points and critisicm, and i have sinced realised the pointlessness of having two sep divs or maybe any at all, all i can say was that the lines were a designers after thought and deadlines were looming, im new to css and it needed a quick fix that i didnt think all the way through. However, the problem is not creating two lines, the problem is making them 100% high in ie, i did try repeating a gif along the y axis, but it still needs to be in a div and that has to be 100%. Can anyone shed any light?

[VIPStephan]

I don't see the problem? It looks the same to me in IE6 and Fx 1.5.0.3. However there is a scrollbar (alothough there's not that much content) because the div is so long.
Why don't you try this:
You just create an image with the two lines (has to be just 1 pixel high) and put it as background (using CSS) directly into the body. Like this:

body {background: url(images/[image name]) 30px 100px repeat-y;}


You can of course adjust the pixel values. I just guessed what it could be.