dtm32236
10-24-2008, 03:36 PM
Hey guys,
Unfortunately I can't post this page live for you to see, but I've posted relevant code below - which is a VERY SIMPLIFIED snippet from this page:
http://www.foremostgroups.com/K&B/index.html
My issues are with the links on the left-hand side.
CSS:
#left_nav {
float:left;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-top:15px;
}
.nav_header {
display:block;
color:#333;
font-variant:small-caps;
padding-left:5px;
background:url(/images/gradient3.jpg) repeat-x;
/* width:100%; and width:auto; doesn’t work */
}
.nav_header:hover {
color:#000;
text-decoration:underline;;
}
.Accordion {
overflow:hidden;
}
.AccordionPanel {
margin:0;
padding-left:10px;
}
.AccordionPanelTab {
margin:0;
cursor:pointer;
-moz-user-select:none;
-khtml-user-select:none;
font-size:1em;
color:#777;
text-align:left;
padding-right:15px;
}
.AccordionPanelTab a {
text-decoration:none;
color:#444;
}
.AccordionPanelContent {
margin-left:17px;
padding:0;
font-size:.9em;
text-align:left;
overflow:hidden;
}
.AccordionPanelContent a {
text-decoration:none;
color:#aaa;
}
.AccordionPanelContent a:hover {
text-decoration:underline;
color:#666;
}
<div id="left_nav">
<div id="Accordion1" class="Accordion" style="float:left;">
<a href="catagory1.html" class="nav_header">Catagory1</a>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Link Set 1</div>
<div class="AccordionPanelContent">
<a href="page1-1.html">Link 1-1</a><br>
<a href="page1-2.html">Link 1-2</a><br>
<a href="page1-3.html">Link 1-3</a>
</div>
</div>
</div>
</div>
I can't get .nav_header (Catagory1) to expand 100% in Firefox...
Strangely enough, it's working perfectly in all versions of IE and in Safari (probably because the coding is incorrect).
I've attached screenshots so you can see how it looks in Firefox and every other browser...
Any ideas? I'm completely stuck. Thanks so much for any help!
Let me know if you'd like these files in a zip...
Unfortunately I can't post this page live for you to see, but I've posted relevant code below - which is a VERY SIMPLIFIED snippet from this page:
http://www.foremostgroups.com/K&B/index.html
My issues are with the links on the left-hand side.
CSS:
#left_nav {
float:left;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-top:15px;
}
.nav_header {
display:block;
color:#333;
font-variant:small-caps;
padding-left:5px;
background:url(/images/gradient3.jpg) repeat-x;
/* width:100%; and width:auto; doesn’t work */
}
.nav_header:hover {
color:#000;
text-decoration:underline;;
}
.Accordion {
overflow:hidden;
}
.AccordionPanel {
margin:0;
padding-left:10px;
}
.AccordionPanelTab {
margin:0;
cursor:pointer;
-moz-user-select:none;
-khtml-user-select:none;
font-size:1em;
color:#777;
text-align:left;
padding-right:15px;
}
.AccordionPanelTab a {
text-decoration:none;
color:#444;
}
.AccordionPanelContent {
margin-left:17px;
padding:0;
font-size:.9em;
text-align:left;
overflow:hidden;
}
.AccordionPanelContent a {
text-decoration:none;
color:#aaa;
}
.AccordionPanelContent a:hover {
text-decoration:underline;
color:#666;
}
<div id="left_nav">
<div id="Accordion1" class="Accordion" style="float:left;">
<a href="catagory1.html" class="nav_header">Catagory1</a>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Link Set 1</div>
<div class="AccordionPanelContent">
<a href="page1-1.html">Link 1-1</a><br>
<a href="page1-2.html">Link 1-2</a><br>
<a href="page1-3.html">Link 1-3</a>
</div>
</div>
</div>
</div>
I can't get .nav_header (Catagory1) to expand 100% in Firefox...
Strangely enough, it's working perfectly in all versions of IE and in Safari (probably because the coding is incorrect).
I've attached screenshots so you can see how it looks in Firefox and every other browser...
Any ideas? I'm completely stuck. Thanks so much for any help!
Let me know if you'd like these files in a zip...