On 15/07/2011 11:03 AM, Alex Mitchell wrote:
On Thu, Jul 14, 2011 at 6:17 PM, Laurie Landry<
[email protected]> wrote:
Hi,
I am working on a website, and while this works on some browsers, IE7
doesn't quite work.
The website is:
www.centralcaribooarts.com
and the stylesheet being used is
http://www.centralcaribooarts.com/css/base.css
In Firefox and safari, it works well, but in IE7, the wrapper is being
overlapped over the header.
It has been a long while since I last developed a website, so my memory is
foggy. I think it has to do with margins and floats, but I'm hoping someone
here would be able to help pinpoint the issue and give suggestions on how to
fix it.
A helpful way to debug this would be to put a distinct border around the
#contentwrapper and #header divs to show their boundaries. While looking at
the developer tools in IE9 (which happens to include an IE7 emulator) I
noticed that the #header div has a specified height of 10px, and this is, in
fact, causing your issue. The #contentwrapper div is starting where the 10px
header ends. Remove the 10px definition on the #header div,then there will
be some more to play with in regards to positioning the #nav div
specifically for IE6/7
I hope this helps,
Alex
A see Alex has mentioned the core issue. Now the a change for all browsers.
#header {
width: 1000px;
height: 117px; /* CHANGE */
margin: 0;
padding: 0;
padding-bottom: 2px; /* ADD to create space between the menu links
and the border-bottom of this element */
border: thin solid #FFF;
}
A fix for IE7.
*+html #header #logo {
margin-bottom: -116px; /* this allows the div#main_nav to rise */
}
*+html #header #nav #main_nav {
margin-top:96px;
margin-left: 206px;
}
and a fix for IE6 (untested).
*+html #header #logo {
margin-bottom: -116px; /* this allows the div#main_nav to rise */
}
* html #header #nav #main_nav {
margin-top:96px;
margin-left: 206px;
}
Another solution would be to position the menu absolutely from the
bottom of the div#header which "should" work with the same CSS in all
browsers.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
