Two <Div> not appearing in IE

[Lanmind]

Hello again everybody,

On my page I have a two <div>'s placed on top of each other to make a
complete line across the top of my page. On the CSS one is set to
left: 0; and the other right: 0; so the entire width of the screen
will be covered.

It works fine in Mozilla but in IE I can't find the <div>'s on screen
at all. Debuger doesn't even point them out. I'm not sure what's wrong
and I've tied lots of different combination's to no avail.

Here is the page: http://www.dockhawk.com/default_test.html

CSS: http://www.dockhawk.com/default_test.css

Thank you.

 

[dorayme]

Hello again everybody,

On my page I have a two <div>'s placed on top of each other to make a
complete line across the top of my page. On the CSS one is set to
left: 0; and the other right: 0; so the entire width of the screen
will be covered.

It works fine in Mozilla but in IE I can't find the <div>'s on screen
at all. Debuger doesn't even point them out. I'm not sure what's wrong
and I've tied lots of different combination's to no avail.

Here is the page: http://www.dockhawk.com/default_test.html

CSS: http://www.dockhawk.com/default_test.css

Thank you.

Check your site at

http://validator.w3.org/

and

http://jigsaw.w3.org/css-validator/

 

[Lanmind]

So what you wind up with is one division showing.
You can't have two empty divisions occupying the same space.
As you have both set to a width of 100%, that means both are going the
full width of the container.
What is the purpose of two side by side empty divisions?
Neither has content so neither is going to show anything but maybe a
blank space at the most.

dorayme,

Thanks you I've not ever validated a page before though I should have.
I'm partly validated as XHTML Strict but I still have some errors
related to a script I'm using for Google Maps. I need to talk to
Google Maps API peeps to figure all those out. Validating did work
though, I think IE went into quirks mode, Thanks again : )

richard,

I've left the two lines at different positions so you can see what I
was trying to accomplish in IE. The lines fill the left and right
edges of the screen. It seems that I wouldn't need to do that in
Firefox though? Thanks.

 

[Lanmind]

From your css this is what I see is happening.

#header_division2 {

                position: absolute;
                top: 20px;
                right: 0;
                width: 100%;
                height: 0;
                margin: 0em 0em 0em 0em;
                border-Top: 1px solid #EBEBEB;
                border-right: none;
                border-bottom: none;
                border-left: none;

                }

Position this division absolutely 20px from the top, zero px from the
right. Make it as wide as the container but give it no height.
Duh wait a second. No height? Yet you want it to show something you
define later? Ain't gonna happen.

As I see it, you want both divisions to have a top border of the same
color. With both being 100% wide. Well duh, why not eliminate the 2nd
division?

As you give no floating properties, the 2nd division will drop down
below the first automagically. Ok so why not use a horizontal rule to
serve the same purpose?

Now clean up your css and get rid of the extra border with none. They
ain't needed. Or you could just say border: 1px 0px 0px 0px solid
#000000.

margin as 0 all the way around is not needed.

I'm sorry Richard (I lied) I said I would leave the <div>'s at two
different heights but I was doing some more editing when you looked at
it, so I didn't have the <div>'s at different positions.

If you look again now they are again at different positions. 1 is at
top: 20px; and 2 is at top: 24px;. Now you can see on IE one <div>
won't cover the whole screen.

I tried using a horizontal rule but it wasn't covering the whole
screen even with the width set at 100%. I suppose I could have done
the same thing I'm doing now; put one to the left and one right but
I'm content with the <div>'s now.

I will clean up my CSS soon, thanks on that : )

 

[Lanmind]

Just use one division. Give it a height of 1px or 2 px and set your
top border as needed. Width 100%. Done.

Ok I have done that here is the CSS:

#header_division1 {

position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 2px;
margin: 0em 0em 0em 0em;
border-Top: 1px solid #EBEBEB;
border-right: none;
border-bottom: none;
border-left: none;

)

I have left the CSS like above and in IE there is a gap on the right.
If I were to remove the left: 0; It's just be centered with gaps on
both sides.

It still doesn't cover the whole screen. When I set anything to width:
100% it never covers the whole screen horizontally. For example my
<div id="wrap"> has two gaps on either side. Is it possible to fill
the whole screen with <div>'s or other elements?

 

[Els]

#header_division1 {

position: absolute;
top: 20px;
left: 0;
width: 100%;

100% of what? ;-)
It's 100% of its parent's width. Its parent would be "body".
And body's parent is "html".

I have left the CSS like above and in IE there is a gap on the right.
If I were to remove the left: 0; It's just be centered with gaps on
both sides.

It still doesn't cover the whole screen. When I set anything to width:
100% it never covers the whole screen horizontally. For example my
<div id="wrap"> has two gaps on either side. Is it possible to fill
the whole screen with <div>'s or other elements?

Add this to your stylesheet:
html,body{
padding:0;
margin:0;
}

Now you can leave out the position absolute, and have no gaps!

 

[Lanmind]

100% of what? ;-)
It's 100% of its parent's width. Its parent would be "body".
And body's parent is "html".



Add this to your stylesheet:
html,body{
        padding:0;
        margin:0;

}

Now you can leave out the position absolute, and have no gaps!

Thanks Els,

I've been slowly getting towards what you've said all day but never
thought to set the html as 100%. I see now how that works, It just
didn't dawn on me that about the body's parentnode. This should help
me, I'm off to bed.

Thanks again Richard for all the constructive criticism : )

 

[dorayme]

dorayme,

Thanks you I've not ever validated a page before though I should have.
I'm partly validated as XHTML Strict but I still have some errors
related to a script I'm using for Google Maps. I need to talk to
Google Maps API peeps to figure all those out. Validating did work
though, I think IE went into quirks mode, Thanks again : )

I have often wondered if telling anyone to go to this or that validator
has ever done anyone any good. It always sounds so severe. But the truth
is that it is a source of useful information.