Trouble with fieldsets between IE7 and firefox
hi,
fieldset menus which i have created display fine in firefox, no issue.
however in IE7 there is a larger than preferable space between the parent item and the first child item in the menus.
I've been looking through IE developer to try and pinpoint the problem but whatever i have tried to fix in my style sheet does not work....i want the menu items to display how they are meant to (as they do in firefox) in IE
It's just another cross browser problem (IE of course) which is a pain, but i have spent hours and simply cannot get it right
I've pasted my style.css below if that helps,
I have the fieldsets disabled at the moment because of the shitty look in IE, http://fullforcefitness.com.au/info/?q=fieldseteg will show a fieldset on the bottom of the left sidebar, you'll notice when the parent is clicked on and becomes collapsible that there is ugly spacing present - not present in firefox....
thanks in advance for your help,
Tom
/* $Id: style.css,v 1.19 2006/12/27 13:17:15 drumm Exp $ */
/*
** HTML elements
*/
body {
margin: 0 auto;
width: 100%;
padding: 0;
background: #ffffff;
color: #000;
font: 82% Segoe UI, Arial, Helvetica, sans-serif;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
}
h1 {
background: transparent;
font-size: 1.4em;
color: #000000;
text-align: center;
margin-bottom: 0em;
margin-top: 0em;
padding: 3px;
}
h2 {
background-image: url('redh21611.gif');
font-size: 1.2em;
text-align: center;
color: #ffffff;
margin-bottom: 0.3em;
margin-top: 0.3em;
padding: 3px 7px 3px 7px;
}
h3, h4, h5, h6 {
font-size: 1.0em;
}
p {
margin-top: 0.3em;
margin-bottom: 0.3em;
}
a {
text-decoration: none;
font-weight: bold;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #CD0000;
text-decoration: underline;
}
fieldset {
border: 0px solid #000000;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
font-size: 12px;
border: 1px solid #ddd;
}
table {
/* make sizes relative to body size! */
font-size: 1em;
}
.form-item label {
font-size: 1em;
color: #222;
}
.item-list .title {
font-size: 1em;
color: #222;
}
.links {
margin-bottom: 0;
}
.comment .links {
margin-bottom: 0;
}
/*
** Page layout blocks / IDs
*/
#content {
background-color: #ffffff;
width: 960px;
margin: 0 auto;
padding: 0;
}
#top {
width: 960px;
margin: auto;
}
#header {
background: #ffffff url('head1611.gif') no-repeat scroll center top;
width: 960px;
height: 110px;
margin: 0 auto;
margin-top: 0.5em;
}
#logo {
vertical-align: middle;
border: 0;
}
#logo img {
float: center;
padding: 5px 20px 0px 25px;
border: 0;
}
#menu {
padding: 0em 0em 0 0em;
text-align: right;
vertical-align: middle;
}
#navlist {
font-size: 1.0em;
padding: 0 0.8em 1.2em 0;
color: #9cf;
}
#navlist a {
font-weight: bold;
color: #fff;
}
#subnavlist {
padding: 0.5em 1.2em 0.4em 0;
font-size: 0.8em;
color: #9cf;
}
#subnavlist a {
font-weight: bold;
color: #9cf;
}
ul.links li {
border-left: 1px solid #9cf;
}
ul.links li.first {
border: none;
}
#search .form-text, #search .form-submit {
border: 1px solid #369;
font-size: 1.1em;
height: 1.5em;
vertical-align: middle;
}
#search .form-text {
width: 8em;
padding: 0 0.5em;
}
#mission {
background-color: #369;
padding: 1.5em 2em;
color: #fff;
}
#mission a, #mission a:visited {
color: #9cf;
font-weight: bold;
}
.site-name {
margin: 0.6em 0 0 0;
padding: 0;
font-size: 2em;
}
.site-name a:link, .site-name a:visited {
color: #fff;
}
.site-name a:hover {
color: #369;
text-decoration: none;
}
.site-slogan {
font-size: 1em;
color: #eee;
display: block;
margin: 0;
font-style: italic;
font-weight: bold;
}
#main {
/* padding in px not ex because IE messes up 100% width tables otherwise */
background-color: #ffffff;
padding: 0px;
vertical-align: top;
margin: 0 auto;
}
#mission, .node .content, .comment .content {
line-height: 1.4em;
}
#help {
font-size: 0.9em;
margin-bottom: 1em;
}
#content h1 a{
color:#000000;
font-size: 0.7em;
text-decoration: none;
}
#block .node {
border: 0px solid #ffffff;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
.block {
background: #ffffff url('lgreyblock.gif') no-repeat scroll center bottom;
padding: 0px 0px 30px;
margin-bottom: 1em;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
}
#sidebar-left, #sidebar-right {
background-color: #ffffff;
width: 200px;
/* padding in px not ex because IE messes up 100% width tables otherwise */
vertical-align: top;
}
#block-block-8 {
background: #fafafa;
vertical-align: top;
height: 100px;
margin-bottom: 0px;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
}
#block-block-8 h2 {
background: #fbfbfb;
color: #000000;
}
#block-block-7 {
background: #ffffff url('frontimage1611.gif') no-repeat scroll right top;
vertical-align: top;
height: 100px;
width: 715px;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
margin-bottom: 0.5em;
}
#block-block-7 h2 {
background: #ffffff;
padding: 0px;
}
#block-block-10 {
background: #ffffff;
vertical-align: top;
height: 100px;
width: 245px;
margin-top: 0em;
border-bottom: 0px solid #000000;
border-right: 0px solid #000000;
border-left: 0px solid #000000;
}
#block-block-10 h2 {
padding: 0px;
}
#view-content-recentnews {
font-size: 0.8em;
text-decoration: none;
}
#block-views-recentnews, #block-views-consultation, #block-views-specialoffers {
background: #ffffff url('greyblock2.png') no-repeat scroll center top;
height: 250px;
}
#block-views-recentnews h2, #block-views-consultation h2, #block-views-specialoffers h2 {
padding: 40px 0px 10px 95px;
font-size: 1em;
background: transparent;
color: #000000;
border-bottom: 0px solid #000000;
}
.topleft {
vertical-align: top;
margin: auto;
}
.topmiddle {
vertical-align: top;
margin: auto;
}
#footer {
margin: 0 auto;
width: 960px;
background: #eee;
padding: 1em 0em 1em 0em;
font-size: 1em;
text-align:center;
}
/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
.breadcrumb {
display: none;
}
.links {
color: #999;
}
.links a {
font-weight: bold;
}
.block, .box {
padding: 0px 0px 25px 0px;
}
.block .title {
margin-bottom: 0.1em;
margin-top: 0em;
}
.box .title {
font-size: 1.1em;
}
.block ul {
padding: 0 20px 0 20px;
}
.node {
background: transparent;
padding: 5px 20px 5px 20px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.sticky {
background: #fbfbfb;
border: 1px solid #e4e3e3;
padding: 5px 20px 25px 20px;
margin-bottom: 1px;
margin-top: 0px;
margin-left: 1em;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .taxonomy {
color: #999;
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
/**
* Collapsible fieldsets
*/
fieldset {
margin: 0.1em 0;
padding: 0px 3px 0px 10px;
border: 0px solid #d9eaf5;
background: transparent;
}
html.js fieldset.collapsed {
background: transparent;
padding-top: 0;
padding-bottom: .2em;
}
html.js fieldset.collapsible legend a {
padding-left: 0.5em;
background: transparent;
}
html.js fieldset.collapsed legend a {
background: transparent;
}
html.js fieldset.wrapper {
margin-top: 0.1em;
margin-bottom: 0em;
padding-bottom: 3px;
}
/*
** Module specific styles
*/
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color: #999;
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em;
}
#forum td.forum, #forum td.posts {
background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
background-color: #ddd;
}
#forum td.container {
background-color: #ccc;
}
#forum td.container a {
color: #555;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
div.admin-panel .description {
color: #999;
}
div.admin-panel .body {
background: #f4f4f4;
}
div.admin-panel h3 {
background-color: #69c;
color: #fff;
padding: 5px 8px 5px;
margin: 0;
}
