Problems with IE compatability

liunx

Guest
I've been going nuts for the past three hours trying to figure this out, to no avail.

<!-- m --><a class="postlink" href="http://diptychdesigns.com/Toastmasters_site/doctemplate.htm">http://diptychdesigns.com/Toastmasters_ ... mplate.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://diptychdesigns.com/Toastmasters_site/style.css">http://diptychdesigns.com/Toastmasters_site/style.css</a><!-- m -->

.vertline{
position: absolute;
left: 45px;
top: 0px;
height: 99%;
width: 1px;
border-right: 1px;
border-right-style: solid;
border-right-color: #000000;
border-top: none;
border-bottom: none;
border-left: none;
}

There is supposed to be a vertical line (.vertline) that extends from the box under "Northline Nooners." It works perfectly in NN7, but it won't even show up in IE6. (Don't have any other browsers to test in)

I've tried every sytax variation that should yield the same effect, that I could think of, but I haven't gotten the result I want. Both HTML and CSS files are valid.

It's probably something simple...hopefully a fresh set of eyes will be able to catch my mistake.

Thanks!Have you tried this: border: 1px solid #000;
border-width: 0 1px 0 0;Originally posted by lavalamp
Have you tried this: border: 1px solid #000;
border-width: 0 1px 0 0;

Just did, no luck :(Way too much markup for something as simple. All you need are 3 blocks:
One for the Description box
Second for the vertical text
Third for the content - this one has top and left borders that make those lines and top and left margins that provide desired offset.Originally posted by Vladdy
Way too much markup for something as simple. All you need are 3 blocks:
One for the Description box
Second for the vertical text
Third for the content - this one has top and left borders that make those lines and top and left margins that provide desired offset.

Yeah, thats what I had originally, but it did the same thing, so it gradually got morphed into what you saw.

Anyway, I tried to reimplement that plan and saw what was going on because the zindex was screwed up. In IE6, the left border extends to the point where there is text, and thats it. Check out the site again, you should see what I mean.

In other words, different code, same problem, though I now know whats going on, but still dont know how to fix it :)

Anyway, here is the new CSS:
.documentcontent{
position: absolute;
top: 45px;
left: 45px;
width: 95%;
height: 95%;
border-bottom: none;
border-right: none;
border-top: 1px solid #000;
border-left: 1px solid #000;
}Perhaps it would be easier to make a 1px by 1px black square and use that as the background image of your body:body{
background:#E3E0B7 url(blackness.png) repeat-y;
background-position:top 45px;
}Got it...kind of...

I tried implementing your BG image technique, and it worked in IE, but not NS. So I created a div with a background, and that worked in NS, but not IE. So I put both in there, and it works in both ^^;

The markup is way too clunky for my liking, but this stupid page is been causing me so much grief, I don't care anymore as long as it works :)

Thanks again!Here's a layout that's less taggy and uses the background technique. Can't explain in detail right now because I have to go, sorry.
 
Back
Top