I have created a drop-down menu using Dreamweaver and have edited the display using the css file that Dreamweaver created. On IE there is a border around the entire sub menus, but in FF in only appears around the left half. I added in border-right, border-top, border-bottom, etc. to try and fix the problem, but nothing is helping.
Does anyone have any suggestions?!?!?!
Jump to PostIt really depends on the element as well as elements around it. Can you post the code or at least some of it so somebody can try debug it?
Jump to PostIE puts the border inside the measured space
width:50; border:2; in IE means the width is actually 46 plus a border
Mozilla puts the border outside the measured space
width:50 border:2; means the div is 54 wide, and the right margin is pushed 4px out of visible space,
the border …
It really depends on the element as well as elements around it. Can you post the code or at least some of it so somebody can try debug it?
The site is posted on a temporary url --> http://www.whitmerstuco.com (just for viewing purposes)
Here is the css codinng - I did the drop-down in Dreamweaver and edited the coding that it created:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
background-color: #6f9640;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
width: 100px;
border: 10px;
border-color: #6f9640;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 145px;
padding: 0.05em;
background-color: white;
border-color: #6f9640;
border: 10px #6f9640;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: 0% 0 0 100%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: 0px;
top: 4px;
background-color: #6f9640;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
padding: 0.05em 0.05em;
border: 10px #6f9640;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #ebebeb;
padding: 0.75em 1.915em;
color: #6f9640;
text-decoration: none;
border: 10px #6f9640;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #6f9640;
color: #ebebeb;
border: 10px #6f9640;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover
{
background-color: #6f9640;
color: #ebebeb;
border: 10px #6f9640;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #6f9640;
color: #ebebeb;
border: 10px #6f9640;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 500;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
}IE puts the border inside the measured space
width:50; border:2; in IE means the width is actually 46 plus a border
Mozilla puts the border outside the measured space
width:50 border:2; means the div is 54 wide, and the right margin is pushed 4px out of visible space,
the border is likely there, but invisible
much of development is fudging the difference between IE and mozilla,
I use a javascript to check for browsertype where there are obvious problems, its not perfect, but.. neither are the browsers and doesnt work at all where javascript is disabled.
There is a tutorial on Mozilla's document model on the mozilla help pages
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false; //test for IE
if (dom) {document.write('style="width:50;"'}
else {document.write('style="width:56;"') }
//--></script>code has not been tested for your purposes it is presented as an aide to problem solving
Do I put that code in the css document? Sorry a beginner here!?!?
THANKS SO MUCH FOR YOUR HELP!
It's javascript, paste it into the head of your document
Its a javascript, that just writes either of 2 width values depending on whether the DOM is true(IE) or false(Mozilla) browsers
it goes wherever you want to differentiate the measurement for either browser type
example
<body>
<h1>this is a header</h1>
<div> this is somet to do with your body text</div>
<script language="javascript" type="text/javascript">
(document.getElementById) ? dom = true : dom = false;
if (dom) {document.write('<div class='menu' style="width:50;">'}
else {document.write('<div class='menu' style="width:56;">') }
</script>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
<li>menu item 6</li>
<li>menu item 7</li>
</ul>
</div>
<p> more body stuff</p>
<form>
<!-- blah blah blah -->
</form>
</body>
<script language="javascript" type="text/javascript">
image1 = new Image();
image1.src = "oemlogo1.jpg";
image2 = new Image();
image2.src = "oemlogo2.jpg";
image3 = new Image();
image3.src = "oemlogo3.jpg";
</script>
</html>javascripts do not always belong in the <head>.
Most do
image preloaders end up between </body> and </html> so the page displays before the rollover images download
appearance of faster pages
code has not been tested for your purposes it is presented as an aide to problem solving.
Sorry, my mistake.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.