First, let me say that I have solved this problem by floating one div to the left within the container and the other to the right so that they no longer overlap. I am posting this question to get a better understanding of css, hoping that someone can tell me why the <div> with the green border is overlapping the one with the blue border, and why it is only overlapping halfway. If half, why not all?
The code isn't all than long, but you can see it here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/overlap.htm">http://www.sonora-sw.com/test/overlap.htm</a><!-- m -->) and the css files here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/alignment.css">http://www.sonora-sw.com/test/alignment.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/pixelfont.css">http://www.sonora-sw.com/test/pixelfont.css</a><!-- m -->).
I am really curious about this behavior. Thanks in advance.the borders do not overlap. its all to do with color theory.
your eyes may think they are overlapping because the colors 'bleed' into each other.
but they are not acually overlapping.
andythe borders do not overlap. its all to do with color theory.
your eyes may think they are overlapping because the colors 'bleed' into each other.
but they are not acually overlapping.
andy
If you look at it in FF, they are on the same horizontal plane and do overlap. If you look at them in IE they are on separate horizontal planes and don't overlap.I should have tested in IE, you're right, they are in different horizontal strata.
In Firefox the green-bordered div half covers the button and kills the link for the right half of the button. Mouseover the button and you will see the hand cursor on the left half of the button, outside the green border, and no hand inside the green border because that div is on top of the link. Definitely an overlap.
I know of nothing that causes divs to overlap, and I know of nothing that prevents the overlap from being 100% instead of just halfway. If it is going to overlap at all, why does it only go halfway? But... why does it overlap at all?
The code isn't all than long, but you can see it here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/overlap.htm">http://www.sonora-sw.com/test/overlap.htm</a><!-- m -->) and the css files here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/alignment.css">http://www.sonora-sw.com/test/alignment.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/pixelfont.css">http://www.sonora-sw.com/test/pixelfont.css</a><!-- m -->).
I am really curious about this behavior. Thanks in advance.the borders do not overlap. its all to do with color theory.
your eyes may think they are overlapping because the colors 'bleed' into each other.
but they are not acually overlapping.
andythe borders do not overlap. its all to do with color theory.
your eyes may think they are overlapping because the colors 'bleed' into each other.
but they are not acually overlapping.
andy
If you look at it in FF, they are on the same horizontal plane and do overlap. If you look at them in IE they are on separate horizontal planes and don't overlap.I should have tested in IE, you're right, they are in different horizontal strata.
In Firefox the green-bordered div half covers the button and kills the link for the right half of the button. Mouseover the button and you will see the hand cursor on the left half of the button, outside the green border, and no hand inside the green border because that div is on top of the link. Definitely an overlap.
I know of nothing that causes divs to overlap, and I know of nothing that prevents the overlap from being 100% instead of just halfway. If it is going to overlap at all, why does it only go halfway? But... why does it overlap at all?