Stylesheets - Unable to see the bottom of border

Author

Unable to see the bottom of border

eomer

2005-12-16, 7:56 pm

Hi all,

If you were to go to the following web site -
http://www1.esc.edu/personalstu/fhartnet/grade7.html

and take a look at the content panel using IE6, you will notice that
the border bottom does not really show. If using Mozilla it is visible
(sort of).

I'm not certain how to fix this? Here is the CSS. Thanks in advance.

div#gr7content{
position: absolute;
left: 29%;
top: 5px;
width: auto;
border: 2px double #7FC07F;
background: white;
color: black;
padding: 2px;
/*margin-right: 5px;*/
}

div#gr7content h3{
background: #92E292;
color: black;
text-align: center;
letter-spacing: 1px;
/*color: black;*/
margin-top: 0px;
padding: 2px;
border-bottom: 1px solid black;
}

Jim Moe

2005-12-16, 7:56 pm

eomer wrote:
>
> If you were to go to the following web site -
> http://www1.esc.edu/personalstu/fhartnet/grade7.html
>
> and take a look at the content panel using IE6, you will notice that
> the border bottom does not really show. If using Mozilla it is visible
> (sort of).
>
It's the position:absolute that is causing it. When positioned in such a
way, any padding specs, default or explicit, are ignored.
Since the nav panel is also position:absolute, there is no need to
position the main content that way.
In div#gr7content
remove:
position: absolute;
left: 29%;
top: 5px;
add:
margin-left: 29%;

P.S.: You have not specified a fore- and background color for <body> in
your CSS. Set your browser to non-defaults for those and see how your site
looks then.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)