dropdown gaps in IE8

3/01/2010 6:35 am | #1 CraigRBeta Tester

another problem with this page (in addition to the post on CSSSculptor)

i have created a 2 level menu with CSSMenuwriter, which appears to be ok under FF, but in IE8 the second level menu (under services) is 1 px lower than FF and there is a 1px? gap between each menu item.

test page is here...test3.stonepits.com/

3/01/2010 7:44 am | #2 CraigRBeta Tester

update

This looks like a problem with my IE8 using compatability view

I turned it off and the submenu looks ok.

Is it still likely to be a problem in IE7 ?? and if so, is there a workaround.

3/01/2010 10:47 am | #3 Jason ByrnesWebAssist

the gap is being caused buy the line height attribute being applied to the body tag in the screen.css file:
body {
background-color: #000000;
background-image: url("../newstonepits_newdesign_images/layout_01.jpg");
background-position: top center;
background-repeat: repeat-x;
color: #463F47;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
/*overflow: auto;*/
}

3/01/2010 11:10 am | #4 neilo

Alternatively, if you wanted to keep the line height as it is, you could change the menu.css

ul#cssmw0 ul.level-1 > li > a {
background-color: #FFCC00;
background-image: url("../cssmw0_images/");
border-color: #FFCC00;
color: #173232;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
margin: 0 0 -2px 0; /* give the bottom margin a negative value */
padding: 8px 5px; /* increase value of top and bottom padding to compensate */
text-align: center;
text-decoration: none;
text-transform: lowercase;
width: 160px;
}

3/02/2010 4:59 pm | #6 Jason ByrnesWebAssist

this is the cascading nature of css.

styles applied to a parent element will be inherited by cild elements unless they are over riden.

take for example the following page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background-color:#F00;}
</style>
</head>

<body><div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

this will create a page with a background of red, including the test div. the only way to set a unique background for the test div, is to reset the color:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background-color:#F00;}
.testDiv { background-color:#fff;}
</style>
</head>

<body><div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

where the menu is a child of the body tag, styles applied to the body tag will be inherited by the menu.

3/02/2010 10:22 pm | #7 CraigRBeta Tester

great replies

thanks for all the input.

the thing i find difficult in when developing a site (paradoxically) is the use of wizards.
Knowing what every element does and how it affects everything else is the key to understanding it all

rarely do things work first time out of the box, so getting into the code is the only way i feel comfortable that i am in control of the process.

:)

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

dropdown gaps in IE8

3/01/2010 6:35 am | #1 CraigRBeta Tester