Avatar of AidenA

asked on 

CSS size difference between IE and firefox.

Hi, I have the CSS (attched below) which is creating a small issue. As you can see from the pictures, in IE I have it aligned properly... you can see that the bottom of the upper box aligns correctly with the top of the lower box (more or less). But, when I view the same thing in firefox, the lower box is slighly smaller in width. Any idea what could create such a situation?

At the top of my css page I also have

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td, ul, li {      margin: 0;      padding: 0;border: 0;}

so as to set all margins and padding to zero. The upper box has a ul with li which has been causing me problems trying to understand how it sets things, so not sure if that's part of the problem. I can't see what the issue is here...

 In IE
 In Firefox
#leftcol {display:inline; float:left; width:30%; height:435px; overflow:hidden}
#footer {display:inline; clear:both; width:100%; height:70px; overflow:hidden}

/* leftcol */
#divManualTasksHeader {width:100%; height:8em;}
#hManualTasksHeader {padding-left:1em; padding-top:1em}
#pManualTasksHeader {padding-left:5em; padding-top:5.5em; Font-Size:small;}
#divManualTasksOptions {display:inline; float:left; width:14.75em; margin-left:3em; border: 0.4em groove;}
#divManualTasksOptions ul{width:13.75em; list-style: none; padding: 0.5em;}

/* footer */
#txtTypeDesc{display:inline-block; float:left; width:17.75em; height:4em; margin:0em; padding:0em; border: 0.4em groove;}
#btnShowTasks{margin-left:2em; margin-top:1.25em}

Open in new window


Avatar of undefined
Last Comment

8/22/2022 - Mon