close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

dropdown gaps in IE8

Thread began 3/01/2010 9:35 am by CraigR | Last modified 3/03/2010 1:22 am by CraigR | 2047 views | 6 replies |

CraigRBeta Tester

dropdown gaps in IE8

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/

Sign in to reply to this post

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.

Sign in to reply to this post

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;*/
}

Sign in to reply to this post

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;
}

Sign in to reply to this post

web_assist_mail157665

why is the menu marked up in such a way that it affected by css in the body tag?

Sign in to reply to this post

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.

Sign in to reply to this post

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.

:)

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...