Sent by Alan Gresley on 5 July 2007 01:01
David Laakso wrote:
> Josue Martinez wrote:
>> Every browser displays a gap between the page and the top of the browser
>> window, except IE7. For what it's worth, I want the page to show as IE7
>> displays it, assuming that the masthead image isn't getting cut off.
><IE questions trimmed>
>>
>> http://www.ic.sunysb.edu/clubs/phiota/test/
>
>Someone will be along to answer your IE question.
>
>The difficulty in compliant browsers is "collapsing margins." [1]
>This may close it:
>#masthead {
>width: 606px;
>height: 125px;
>/*padding: 0;*/ <--- not needed (default)
>padding-top: 1px; <--- add this
>/*margin: 0;*/ <--- not needed (default)
>background: red url(assets/images/banner.jpg);
>}
>
>[1] <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
>
>Best,
>~dL
Hi David and Josue
What is happening is just what should happen. Each browser has different default margins on various
elements.
<h1><span>Beta Chapter of Phi Iota Alpha Fraternity Inc</span></h1>
<h2><span>The oldest existing Latino fraternity</span></h2>
<h2 id="news">News</h2>
So the gap between the page header and the top of the viewpoint and the gap above the sidebar in
other browsers apart from IE is due to the default to margin of the h1 and h2 elements. If you
remove the default margins then all browser should come into line.
There can be two approaches for the headings in the masthead, the first is to removing the default
margin, but a better approach in respect to screen readers and accessibility is to use absolute
positioning. Yes Josue we been here before, but this is when it's good practice to use abs pos.
Currently the text within the spans element you have styled with display: none. Text hidden this way
can not been read by older screen readers so you removing the span elements from the code and the
selector and style for these elements and then just using this style will remove the gap above the
header.
#masthead h1, #masthead h2 {
position:absolute;
left: -999em;
}
The gap above the sidebar is removed with.
#sidebar h2 {
margin: 0;
}
Other elements that have default margins or padding that you will encounter and cause similar
differences across browserland are html, body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li.
Kind Regards, Alan
http://css-class.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
