Weird IE margin problem

this is a weird margin problem that occurs only in IE

[Ben_Johnson]

Ok I have a weird problem that occurs only in Internet Explorer. It has to do with margins. I am completely clueless and have no idea how to fix this, so I figured maybe someone else has had this problem and figured out how to fix it.

Im not going to post the CSS because its really long and wouldnt do any good. Here are some screen shots of my problem though:

Here is the problem. Notice there is no margin between the fieldsets when I have a 40px margin set.
<Sorry, no personal URLs. See TOS [webmasterworld.com]>

Then I put my mouse on one of my options in the leftnav and it for some reason adds the margin inbetween them like it should. Notice that one of the leftnav options is selected and my mouse is over it.

Anyone have any ideas why this only happens in IE?

Any help is greatly appreciated. Thanks.

[edited by: tedster at 10:46 am (utc) on April 14, 2004]

[hafnius]

Hi Ben_Johnson

would it be posible for you to make a simple html/css mockup that isolates the problem so that we can help you.

In my experience IE does have some weird Margin behavior sometimes but theres nearly always a quick workaround.

/Kind Regards
Hafnius

[Ben_Johnson]

I will try my best to post the css and explain it. It's kind of complicated, but maybe you will understand it. It's pretty much self explanitory. Anyways when you first load the page in IE there is no 20px margin below the <fieldset block. Then I put my mouse over an option in the #categorynav and it instantly adds the 20px margin there. I had screenshots posted but for some reason Im not allowed ot post screenshots.

Also this is the general settings section. So I am using all of the generalSettings classes.

<style type="text/css">
<!--
/***************************************************/
/* HTML Tags */
/***************************************************/
body {
background-color: #E6E2D4;
margin: 0;
padding: 0;
}

a {
color: #616161;
}

a:hover {
color: #F48900;
}

a img {
border: 0px none;
}

/***************************************************/
/* Layout Divs */
/***************************************************/
#container {
width: 95%;
border: 1px solid #000;
margin: 0 auto 2px auto;
background: #FFF url(images_sunrise/wrapperbg.gif) repeat-y top left;
}

#header {
height: 74px;
background: #FFF url(images_sunrise/headerbg.gif) repeat-x top left;
}

#content {
margin: 0 0 0 204px;
padding: 0 20px 20px 20px;
}

ul#categoryNav {
list-style: none;
margin: 0 0 40px 0;
padding: 0;
background-color: #E6E2D4;
float: left;
width: 204px;
}

#footer {
clear: both;
background: #C9C9C9 url(images_sunrise/footerbg.gif) repeat-x top left;
height: 21px;
text-align: center;
white-space: nowrap;
}

/***************************************************/
/* Navigation */
/***************************************************/
ul#categoryNav li {
border-bottom: 1px solid #FFF;
}

ul#categoryNav li.title {
background-color: #CFCBBE;
font: bold 11px/1 Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
padding: 4px;
background-image: none;
}

ul#categoryNav li a {
display: block;
width: 176px;
padding: 1px 3px 1px 25px;
font: 10px/1.7 Verdana, Arial, "Lucida Grande", sans-serif;
color: #959292;
text-decoration: none;
background: url(images_sunrise/menu_option_arrow.gif) no-repeat top left;
}

ul#categoryNav li a:hover {
background-color: #CFCBBE;
color: #616161;
}

/***************************************************/
/* #content HTML tags */
/***************************************************/

#content fieldset {
font: 0.8em Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
margin: 0 0 20px 0;
padding: 4px;
}

#content label {
display: block;
margin-top: 15px;
}

#content label.first {
margin-top: 0;
}

#content legend {
font-weight: bold;
color: #F48900;
}

#content table {
font: 0.8em Verdana, Arial, "Lucida Grande", sans-serif;
color: #616161;
background-color: #CFCBBE;
width: 99.5%;
/* In IE 100% width causes the table to clear the category nav. So 99.5% fixes this problem. */
}

#content td {
background-color: #FFF;
text-align: center;
padding: 3px;
}

#content td a {
text-decoration: none;
font-weight: bold;
}

/***************************************************/
/* #footer HTML tags */
/***************************************************/
/* Opera aligns the images at the top of the div. This fixes that. */
#footer img {
margin-top: 8px;
}

/***************************************************/
/* "General Settings" Section */
/***************************************************/
fieldset.generalSettings {
padding: 0!important;
}

fieldset.generalSettings table {
font-size: 1em!important;
}

fieldset.generalSettings td {
white-space: nowrap;
}

fieldset.generalSettings a {
font-weight: normal!important;
}

fieldset.generalSettings a:hover {
color: #616161;
}

fieldset.generalSettings a.highlight {
font-weight: bold!important;
color: #F48900;
}

fieldset.generalSettings label {
padding-left: 15px;
display: inline!important;
}

fieldset.generalSettings input.textbox {
width: 200px;
}
-->
</style>

[DanA]

I have the same problem as soon as there iss ol, ul in a page.
I "fixed" it by removing the background-color in

ul#categoryNav li a:hover {
background-color: #CFCBBE;
color: #616161;
}

and added it in non-microsoft browsers

I would be interested in a solution

[Ben_Johnson]

well thanks for the help

I am still completely clueless. Ive talked to a few other people having the same problems and they were clueless as well.

[hafnius]

HI

Firstly, the problem with personal URLs as outlined in the TOS link in 1#msg is that the test URL most likely will not work in a month or so and will therefore be of no value to subsequent visitors. Believe me you a not the first... i did it to in the beginning.

Now to the prob at hand.
To be honest with you - and some of the older guys might correct me - it is easyer to get a response if you post "copy and paste" code examples that we can test ourselves immediately to identify the prob.

I would suggest a search on this site in Google:

IE margin problem site:www.webmasterworld.com (copy/paste)

And check your Doctype - IE renders the page differently depending on the Doctype.

Hope you find a solution

Kind Regards
/Hafnius