Script: DD Tab Menu (<!-- m --><a class="postlink" href="http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm">http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm</a><!-- m -->)
My Sample Page: HERE (<!-- m --><a class="postlink" href="http://www.sarendebityfilms.com/nav_test.htm">http://www.sarendebityfilms.com/nav_test.htm</a><!-- m -->)
Hi all,
I'm having a problem with the DD Tab Menu. It's not the script itself, but rather something to do with my CSS.
I've completely customized the menu to suit my needs, and of COURSE it works flawlessly in IE. My problem is I cannot, for the life of me, get it to work properly in Firefox (Mozilla, NS6, whatever
).
You can view the menu HERE (<!-- m --><a class="postlink" href="http://www.sarendebityfilms.com/nav_test.htm">http://www.sarendebityfilms.com/nav_test.htm</a><!-- m -->)
If you view source, you can see I have the unedited javascript, my stylesheet, and the XHTML. I'm sure this is definately a CSS issue, but I just can't nail it down. I've been working on it all week!
If any CSS gurus can give me a hand with this issue, I would be MOST grateful. This is a project for work, and I'm completely stuck at this point.
Thanks in advance!!
-RobI changed your css a little, so it should work now:
<style media="screen" type="text/css">
body {
background: #679902;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* Main containers */
#container {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border: 0px;
width: auto;
background: #679902;
}
#nav {
position: absolute;
left: 0px;
top: 48px;
width: 800px;
padding: 0px;
margin: 0px;
}
/* BEGIN NAV STYLE */
#tablist {
height: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
cursor: hand;
font-size: 9px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;/* letter-spacing: 1px; */
}
#tablist li {
width: auto;
height: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 2px 0px 0px;
list-style: none;
display: inline;
}
#tablist li a {
width: auto;
height: 20px;
padding: 3px 4px 3px 5px;
text-decoration: none;
text-align: center;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: none;
background: #003399;
}
#tablist li a:link, #tablist li a:visited {
color: #FFFFFF;
background: #003399;
}
#tablist li a:hover {
color: #FFFFFF;
background: #B7CFE7;
}
#tablist li a:active {
color: #003399;
background: #B7CFE7;
}
#tabcontentcontainer {
width: 800px;
height: 21px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.tabcontent {
height: 21px;
padding: 3px 0px 0px 40px;
margin: 0px 0px 0px 0px;
display: none;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #003399;
background: #B7CFE7;
border-bottom: 1px solid #006699;
border-left: 1px solid #FFFFFF;
}
.tabcontent a, .tabcontent a:link, .tabcontent a:visited {
color: #003399;
text-decoration: none;
}
.tabcontent a:hover, .tabcontent a:active {
color: #0000FF;
}
</style>claire_m : Thank you VERY much for taking the time to play with the CSS. I really appreciate that.
Now that the menu tabs are all aligned, we are definately headed in the right direction. Although, I still am unable to get the tabs closer together. If you look at the link (<!-- m --><a class="postlink" href="http://www.sarendebityfilms.com/nav_test.htm">http://www.sarendebityfilms.com/nav_test.htm</a><!-- m -->) in IE, you can see what I really am trying to accomplish. For some reason, NS6 seems to place a 5px margin or padding in between and under each tab. In my CSS I have the tab margin and padding set to 0px. What gives?
My ultimate goal is to have the menu fit inside my 750px wide nav container - like it does in IE.
Thanks again for helping me cure my migrane.Change your CSS to this.
body {
background: #679902;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* Main containers */
#container {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border: 0px;
width: 750px;
background: #679902;
}
#nav {
position: absolute;
left: 0px;
top: 48px;
width: 750px;
padding: 0px;
margin: 0px;
}
/* BEGIN NAV STYLE */
#tablist {
/* This was 20px, changing it didn't seem to affect IE, but
it did affect Mozilla. 15px will bring the links down enough
so they just touch the top of the lightblue bar*/
height: 15px;
/* ***** */
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
cursor: hand;
font-size: 9px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase; /* letter-spacing: 1px; */
}
#tablist li {
width: auto;
height: 20px;
padding: 0px 0px 0px 0px;
/* I changed this. Mozilla gets the first line,
which puts a 1px negative margin for each side of the li,
which brings the links closer together. IE gets the second
line, which is the original line that was there */
margin: 0 -1px 0 0 !important;
margin: 0 2px 0 0;
/* ***** */
list-style: none;
display: inline;
}
#tablist li a {
width: auto;
height: 20px;
padding: 3px 4px 3px 5px;
text-decoration: none;
text-align: center;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: none;
background: #003399;
}
#tablist li a:link, #tablist li a:visited {
color: #FFFFFF;
background: #003399;
}
#tablist li a:hover {
color: #FFFFFF;
background: #B7CFE7;
}
#tablist li a:active {
color: #003399;
background: #B7CFE7;
}
#tabcontentcontainer {
width: 750px;
height: 21px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.tabcontent {
height: 21px;
padding: 3px 0px 0px 40px;
margin: 0px 0px 0px 0px;
display: none;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #003399;
background: #B7CFE7;
border-bottom: 1px solid #006699;
border-left: 1px solid #FFFFFF;
}
.tabcontent a, .tabcontent a:link, .tabcontent a:visited {
color: #003399;
text-decoration: none;
}
.tabcontent a:hover, .tabcontent a:active {
color: #0000FF;
}Paul Jr
THANK YOU SO MUCH
seriously, thanks very much for taking the time to help me out with this.. works so much better now.You're welcome.
My Sample Page: HERE (<!-- m --><a class="postlink" href="http://www.sarendebityfilms.com/nav_test.htm">http://www.sarendebityfilms.com/nav_test.htm</a><!-- m -->)
Hi all,
I'm having a problem with the DD Tab Menu. It's not the script itself, but rather something to do with my CSS.
I've completely customized the menu to suit my needs, and of COURSE it works flawlessly in IE. My problem is I cannot, for the life of me, get it to work properly in Firefox (Mozilla, NS6, whatever
).You can view the menu HERE (<!-- m --><a class="postlink" href="http://www.sarendebityfilms.com/nav_test.htm">http://www.sarendebityfilms.com/nav_test.htm</a><!-- m -->)
If you view source, you can see I have the unedited javascript, my stylesheet, and the XHTML. I'm sure this is definately a CSS issue, but I just can't nail it down. I've been working on it all week!
If any CSS gurus can give me a hand with this issue, I would be MOST grateful. This is a project for work, and I'm completely stuck at this point.
Thanks in advance!!
-RobI changed your css a little, so it should work now:
<style media="screen" type="text/css">
body {
background: #679902;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* Main containers */
#container {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border: 0px;
width: auto;
background: #679902;
}
#nav {
position: absolute;
left: 0px;
top: 48px;
width: 800px;
padding: 0px;
margin: 0px;
}
/* BEGIN NAV STYLE */
#tablist {
height: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
cursor: hand;
font-size: 9px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;/* letter-spacing: 1px; */
}
#tablist li {
width: auto;
height: 20px;
padding: 0px 0px 0px 0px;
margin: 0px 2px 0px 0px;
list-style: none;
display: inline;
}
#tablist li a {
width: auto;
height: 20px;
padding: 3px 4px 3px 5px;
text-decoration: none;
text-align: center;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: none;
background: #003399;
}
#tablist li a:link, #tablist li a:visited {
color: #FFFFFF;
background: #003399;
}
#tablist li a:hover {
color: #FFFFFF;
background: #B7CFE7;
}
#tablist li a:active {
color: #003399;
background: #B7CFE7;
}
#tabcontentcontainer {
width: 800px;
height: 21px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.tabcontent {
height: 21px;
padding: 3px 0px 0px 40px;
margin: 0px 0px 0px 0px;
display: none;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #003399;
background: #B7CFE7;
border-bottom: 1px solid #006699;
border-left: 1px solid #FFFFFF;
}
.tabcontent a, .tabcontent a:link, .tabcontent a:visited {
color: #003399;
text-decoration: none;
}
.tabcontent a:hover, .tabcontent a:active {
color: #0000FF;
}
</style>claire_m : Thank you VERY much for taking the time to play with the CSS. I really appreciate that.
Now that the menu tabs are all aligned, we are definately headed in the right direction. Although, I still am unable to get the tabs closer together. If you look at the link (<!-- m --><a class="postlink" href="http://www.sarendebityfilms.com/nav_test.htm">http://www.sarendebityfilms.com/nav_test.htm</a><!-- m -->) in IE, you can see what I really am trying to accomplish. For some reason, NS6 seems to place a 5px margin or padding in between and under each tab. In my CSS I have the tab margin and padding set to 0px. What gives?
My ultimate goal is to have the menu fit inside my 750px wide nav container - like it does in IE.
Thanks again for helping me cure my migrane.Change your CSS to this.
body {
background: #679902;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* Main containers */
#container {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border: 0px;
width: 750px;
background: #679902;
}
#nav {
position: absolute;
left: 0px;
top: 48px;
width: 750px;
padding: 0px;
margin: 0px;
}
/* BEGIN NAV STYLE */
#tablist {
/* This was 20px, changing it didn't seem to affect IE, but
it did affect Mozilla. 15px will bring the links down enough
so they just touch the top of the lightblue bar*/
height: 15px;
/* ***** */
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
cursor: hand;
font-size: 9px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase; /* letter-spacing: 1px; */
}
#tablist li {
width: auto;
height: 20px;
padding: 0px 0px 0px 0px;
/* I changed this. Mozilla gets the first line,
which puts a 1px negative margin for each side of the li,
which brings the links closer together. IE gets the second
line, which is the original line that was there */
margin: 0 -1px 0 0 !important;
margin: 0 2px 0 0;
/* ***** */
list-style: none;
display: inline;
}
#tablist li a {
width: auto;
height: 20px;
padding: 3px 4px 3px 5px;
text-decoration: none;
text-align: center;
border-top: 1px solid buttonhighlight;
border-left: 1px solid buttonhighlight;
border-bottom: none;
background: #003399;
}
#tablist li a:link, #tablist li a:visited {
color: #FFFFFF;
background: #003399;
}
#tablist li a:hover {
color: #FFFFFF;
background: #B7CFE7;
}
#tablist li a:active {
color: #003399;
background: #B7CFE7;
}
#tabcontentcontainer {
width: 750px;
height: 21px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.tabcontent {
height: 21px;
padding: 3px 0px 0px 40px;
margin: 0px 0px 0px 0px;
display: none;
font-size: 10px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
color: #003399;
background: #B7CFE7;
border-bottom: 1px solid #006699;
border-left: 1px solid #FFFFFF;
}
.tabcontent a, .tabcontent a:link, .tabcontent a:visited {
color: #003399;
text-decoration: none;
}
.tabcontent a:hover, .tabcontent a:active {
color: #0000FF;
}Paul Jr
THANK YOU SO MUCH
seriously, thanks very much for taking the time to help me out with this.. works so much better now.You're welcome.