It appears that Mozilla 1.4 does not support the CSS attribute "width:." Maybe it's me? This is really going to cramp my style, no pun intended, because I need the width attribute. Before, I just used padding, and that worked for both IE and Moz, but that won't work this time. I've got a specific piece of code handy to demonstrate, if you need it.Go ahead. Are you referring to the fact Moz adds padding/margins etc to the width attribute, whilst IE subtracts them from the width attribute?With the supplied code, change the width of the "#sub a" element, and watch nothing happen.
<html><head><title>Test</title>
<style type="text/css">
#main {
width:420px;
border:3px ridge #F00;
border-bottom:transparent;
padding:10px;
margin:0px;
text-align:center;
}
a:link,a:visited {
height:25px;
background-color:#BDBDBD;
text-decoration:none;
padding:2px 10px 2px 10px;
margin:0px;
color:#626262;
border:1px solid #000;
}
a:hover {
background-color:#626262;
text-decoration:underline;
color:#BDBDBD;
}
a:active {
background-color:#FFF;
color:#000;
text-decoration
verline;
}
#sub {
padding:10px 0px 0px 0px;
visibility:hidden;
position:absolute;
top:53px;
left:111px;
border:3px ridge #F00;
border-top:transparent;
height:75px;
}
#sub a:link, #sub a:visited {
width:60px;
height:18px;
background-color:#626262;
text-decoration:none;
font-size:12px;
padding:2px;
margin:0px;
color:#BDBDBD;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="main">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='visible';" onMouseOut="document.getElementById('sub').style.visibility='visible';">About</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Links</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Gallery</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Contact</a>
</div>
<div id="sub" onClick="this.style.visibility='hidden';" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Me</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site</a>
</div>
</body>
</html>
I supplied all the code, so you can just save it, and run it.Inline elements (such as <a> tags) can not contain a width. If you want to set a width on it, you'll have to set the display to block:
#sub a {
display: block;
}Oooooooooooooooooooooooh. I can't believe I forgot about that. How embarassing.I figured I'd save some resources and not open another thread; just post my problem here.
Anyhoo, if you copy and paste this into notepad, save it, blah blah blah, you know the drill. Open it up in IE and Mozilla, the sub menu appears where it's supposed to in Moz, because that's the browser I'm testing it in. The problem, is that it does not display correctly in IE. I'm not sure how I can fix this, seeing how I use absolute positioning to get the menu where I want it. I'm not sure of what I can do to move it in IE but have it remain where it is in Moz.
<html><head><title>Test</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:#000;
}
#main {
width:420px;
border:3px solid #F00;
border-bottom:transparent;
padding:10px;
margin:0px;
text-align:center;
}
#main a:link,#main a:visited {
height:25px;
background-color:#000;
text-decoration:none;
padding:2px 10px 2px 10px;
margin:0px;
color:#F00;
border:1px solid #F00;
}
#main a:hover {
background-color:#F00;
text-decoration:underline;
color:#000;
border:1px solid #000;
cursor:url('C:\Documents and Settings\Paul James\My Documents\cursor.cur');
}
#main a:active {
background-color:#FFF;
color:#000;
text-decorationverline;
}
#sub {
padding:0px;
visibility:hidden;
position:absolute;
top:35px;
left:119px;
border:3px solid #F00;
border-top:transparent;
height:43px;
width:61px;
text-align:center;
}
#sub a:link, #sub a:visited {
display:block;
width:56px;
height:15px;
background-color:#F00;
text-decoration:none;
font-size:12px;
padding:2px;
margin:0px;
color:#000;
border:1px solid #000;
}
#sub a:hover {
background-color:#000;
color:#F00;
border:1px solid #F00;
text-decorationverline;
}
</style>
</head>
<body>
<div id="main">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='visible';" onMouseOut="document.getElementById('sub').style.visibility='hidden';" onClick="document.getElementById('sub').style.visibility='hidden';">About</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Links</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Gallery</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Contact</a>
</div>
<div id="sub" onClick="this.style.visibility='hidden';" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Me</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site</a>
</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.echoecho.com/cursor.cur">Cursor</a>
</body>
</html>
Also, just as a thought, is there a way to get the CSS for the submenus the same, so I just have to add a different id/class for the positioning? That'll keep me from having all that code duplicated for each submenu. Just the positioning id/class.
Hope I explained well enough what I'm trying to accomplish. Your help is appreciated -- a lot
Didn't look through the code, so there may be an simple fix, but here's the hack:
<style type="text/css">
/*All browsers will receive this*/
#test {
color: blue;
background: transparent;
}
/*IE will not understand the below rule, as it does not understand CSS2 selectors*/
body>#test {
color: red;
background: transparent;
}
</style>Also, if you want both menus to use the same styles, just wrap them in a <div> with a class set, and use the child/parent relationship in your CSS document to set up the styles.Originally posted by pyro
Didn't look through the code, so there may be an simple fix, but here's the hack:
<style type="text/css">
/*All browsers will receive this*/
#test {
color: blue;
background: transparent;
}
/*IE will not understand the below rule, as it does not understand CSS2 selectors*/
body>#test {
color: red;
background: transparent;
}
</style>Also, if you want both menus to use the same styles, just wrap them in a <div> with a class set, and use the child/parent relationship in your CSS document to set up the styles.
Alright, I get the first part I think, but I'm a bit fuzzy on the whole child/parent relationship thing here. I'll tool around and see what I can come up with, thanks for your help.Perhaps this will help you understand it better:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mydiv { /*#mydiv is a child of body, and we could use: body #mydiv*/
width: 400px;
border: 1px solid #000;
}
#mydiv span { /*span is child of #mydiv (which is a child of body)*/
color: #900;
background: transparent;
font-weight: bold;
}
#mydiv ul li { /*li is a child of ul, which is a child of #mydiv (which is a child of body)*/
color: #069;
background: transparent;
}
#mydiv ul li em { /*em is child of li, which is a child of ul, which is a child of #mydiv (which is a child of body)*/
color: #f00;
background: transparent;
}
</style>
</head>
<body>
<div id="mydiv">
<span>foo</span>
<ul>
<li><em>foo</em> item</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>Ooh, alright. I get it now. Thanks.You bet...A small correction:
The space (div#mydiv span) is a decendent selector and not child selector.
div#mydiv>span means "span that is a child of div".
for example:
<div id="NestedLists">
<ul>
<li><ul>...</ul></li>
...
</ul>
div#NestedLists ul
refers to both the <ul>s. The first one is a child of div#NestedLists while the second is a grand-child.
div#NestedLists>ul
refers to only the first ul, because the second one is not a child of the div.
Hope this clarifies any possible misconceptions.
Ref: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/selector.html#q1You">http://www.w3.org/TR/CSS2/selector.html#q1You</a><!-- m --> are, of course, correct. My bad. I was stumbling around for terminology there...Upate: Things are working smoothly!
Pyro:
Thanks for that hack, works like a charm.
Niket:
Thanks for that information, cleared things up for me a lot.
<html><head><title>Test</title>
<style type="text/css">
#main {
width:420px;
border:3px ridge #F00;
border-bottom:transparent;
padding:10px;
margin:0px;
text-align:center;
}
a:link,a:visited {
height:25px;
background-color:#BDBDBD;
text-decoration:none;
padding:2px 10px 2px 10px;
margin:0px;
color:#626262;
border:1px solid #000;
}
a:hover {
background-color:#626262;
text-decoration:underline;
color:#BDBDBD;
}
a:active {
background-color:#FFF;
color:#000;
text-decoration
verline;}
#sub {
padding:10px 0px 0px 0px;
visibility:hidden;
position:absolute;
top:53px;
left:111px;
border:3px ridge #F00;
border-top:transparent;
height:75px;
}
#sub a:link, #sub a:visited {
width:60px;
height:18px;
background-color:#626262;
text-decoration:none;
font-size:12px;
padding:2px;
margin:0px;
color:#BDBDBD;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="main">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='visible';" onMouseOut="document.getElementById('sub').style.visibility='visible';">About</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Links</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Gallery</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Contact</a>
</div>
<div id="sub" onClick="this.style.visibility='hidden';" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Me</a> <br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site</a>
</div>
</body>
</html>
I supplied all the code, so you can just save it, and run it.Inline elements (such as <a> tags) can not contain a width. If you want to set a width on it, you'll have to set the display to block:
#sub a {
display: block;
}Oooooooooooooooooooooooh. I can't believe I forgot about that.
How embarassing.I figured I'd save some resources and not open another thread; just post my problem here.Anyhoo, if you copy and paste this into notepad, save it, blah blah blah, you know the drill. Open it up in IE and Mozilla, the sub menu appears where it's supposed to in Moz, because that's the browser I'm testing it in. The problem, is that it does not display correctly in IE. I'm not sure how I can fix this, seeing how I use absolute positioning to get the menu where I want it. I'm not sure of what I can do to move it in IE but have it remain where it is in Moz.
<html><head><title>Test</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:#000;
}
#main {
width:420px;
border:3px solid #F00;
border-bottom:transparent;
padding:10px;
margin:0px;
text-align:center;
}
#main a:link,#main a:visited {
height:25px;
background-color:#000;
text-decoration:none;
padding:2px 10px 2px 10px;
margin:0px;
color:#F00;
border:1px solid #F00;
}
#main a:hover {
background-color:#F00;
text-decoration:underline;
color:#000;
border:1px solid #000;
cursor:url('C:\Documents and Settings\Paul James\My Documents\cursor.cur');
}
#main a:active {
background-color:#FFF;
color:#000;
text-decoration
verline;}
#sub {
padding:0px;
visibility:hidden;
position:absolute;
top:35px;
left:119px;
border:3px solid #F00;
border-top:transparent;
height:43px;
width:61px;
text-align:center;
}
#sub a:link, #sub a:visited {
display:block;
width:56px;
height:15px;
background-color:#F00;
text-decoration:none;
font-size:12px;
padding:2px;
margin:0px;
color:#000;
border:1px solid #000;
}
#sub a:hover {
background-color:#000;
color:#F00;
border:1px solid #F00;
text-decoration
verline;}
</style>
</head>
<body>
<div id="main">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='visible';" onMouseOut="document.getElementById('sub').style.visibility='hidden';" onClick="document.getElementById('sub').style.visibility='hidden';">About</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Links</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Gallery</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onMouseOver="document.getElementById('sub').style.visibility='hidden';">Contact</a>
</div>
<div id="sub" onClick="this.style.visibility='hidden';" onMouseOut="this.style.visibility='hidden';" onMouseOver="this.style.visibility='visible';">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Me</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site</a>
</div>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.echoecho.com/cursor.cur">Cursor</a>
</body>
</html>
Also, just as a thought, is there a way to get the CSS for the submenus the same, so I just have to add a different id/class for the positioning? That'll keep me from having all that code duplicated for each submenu. Just the positioning id/class.
Hope I explained well enough what I'm trying to accomplish. Your help is appreciated -- a lot
Didn't look through the code, so there may be an simple fix, but here's the hack:<style type="text/css">
/*All browsers will receive this*/
#test {
color: blue;
background: transparent;
}
/*IE will not understand the below rule, as it does not understand CSS2 selectors*/
body>#test {
color: red;
background: transparent;
}
</style>Also, if you want both menus to use the same styles, just wrap them in a <div> with a class set, and use the child/parent relationship in your CSS document to set up the styles.Originally posted by pyro
Didn't look through the code, so there may be an simple fix, but here's the hack:
<style type="text/css">
/*All browsers will receive this*/
#test {
color: blue;
background: transparent;
}
/*IE will not understand the below rule, as it does not understand CSS2 selectors*/
body>#test {
color: red;
background: transparent;
}
</style>Also, if you want both menus to use the same styles, just wrap them in a <div> with a class set, and use the child/parent relationship in your CSS document to set up the styles.
Alright, I get the first part I think, but I'm a bit fuzzy on the whole child/parent relationship thing here. I'll tool around and see what I can come up with, thanks for your help.Perhaps this will help you understand it better:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#mydiv { /*#mydiv is a child of body, and we could use: body #mydiv*/
width: 400px;
border: 1px solid #000;
}
#mydiv span { /*span is child of #mydiv (which is a child of body)*/
color: #900;
background: transparent;
font-weight: bold;
}
#mydiv ul li { /*li is a child of ul, which is a child of #mydiv (which is a child of body)*/
color: #069;
background: transparent;
}
#mydiv ul li em { /*em is child of li, which is a child of ul, which is a child of #mydiv (which is a child of body)*/
color: #f00;
background: transparent;
}
</style>
</head>
<body>
<div id="mydiv">
<span>foo</span>
<ul>
<li><em>foo</em> item</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>Ooh, alright. I get it now. Thanks.You bet...
A small correction:The space (div#mydiv span) is a decendent selector and not child selector.
div#mydiv>span means "span that is a child of div".
for example:
<div id="NestedLists">
<ul>
<li><ul>...</ul></li>
...
</ul>
div#NestedLists ul
refers to both the <ul>s. The first one is a child of div#NestedLists while the second is a grand-child.
div#NestedLists>ul
refers to only the first ul, because the second one is not a child of the div.
Hope this clarifies any possible misconceptions.
Ref: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/selector.html#q1You">http://www.w3.org/TR/CSS2/selector.html#q1You</a><!-- m --> are, of course, correct. My bad. I was stumbling around for terminology there...
Upate: Things are working smoothly! Pyro:
Thanks for that hack, works like a charm.
Niket:
Thanks for that information, cleared things up for me a lot.