Forum Moderators: not2easy
in IE there appears to be a chunk of my 'quality module' jumping centre page directly below what should be the closing tag of this div, I can't figure out what's causing this :(
if that isn't clear take a look in IE no personal detail please
CSS
/*MENU ----------*/
#navlist{display: inline; float: left; margin: 0; padding: 0;width: 136px; font-size:90%}
#navlist ul{list-style: none;margin: 0 0 0 0;padding: 0 0 0 0;text-align: left;}
#navlist li{list-style: none;margin: 0 0 2px 0;padding: 0 0 0 0;text-align: left;}
#navlist li a{display: block;height: 16px;padding: 3px 0 0 4px;margin: 0px 0 0 0;
border-left: 3px solid #F4F4F4;border-bottom: 1px solid #F4F4F4;background: url(img/menubgd.gif);
text-decoration: none;color: #9A9A9A;font-weight: 300;}
html>body #navcontainer li a { width: 136px;}
#navlist li a {font-family: verdana;}
#navlist li a:hover{color: #7A7A7A;border-color: #E1E1E1;}
#navlist #active{border-left-color: #FAA400;color: #3A3A3A;font-weight: 500;}/*CONTENT ----------*/
.contentcol {display: inline; float: left; margin: 0 0 0 20px;padding: 0; width: 286px; height:auto; background-color:#006633}
/*QUALITY MODULE ----------*/
.modulecol {display: inline; float:left; margin: 0 0 0 20px; padding: 0; width: 244px; height: auto;
background: #00CC00 url(img/module-orange-bgd.jpg) top repeat-y;}
.modulehead{display: block; background: url(img/orange-quality.jpg) top no-repeat; height: 78px; margin: 0; padding: 0;}
.modulebody {display: block; margin: 0; padding: 0; height: auto;}
.calendarmonth {display: block; background: url(img/calendar/monthrotate.php) top no-repeat; height: 31px; margin: 0;padding: 0;}
.calendardate {display: block; background: url(img/calendar/daterotate.php) top no-repeat; height: 42px; margin: 0; padding: 0;}
HTML
<!-- CONTENT WRAPPER -->
<div class="rowwrap">
<!-- MENU -->
<div id="navlist"><ul>
<li><a href="index.php?id=o201" id="active">HOME</a></li>
<li><a href="index.php?id=o202" >COMPANY PROFILE</a></li>
<li><a href="index.php?id=o203" >PROCUREMENT</a></li>
<li><a href="index.php?id=o204" >SOLUTIONS</a></li>
<li><a href="index.php?id=o205" >MANAGED SERVICES</a></li>
<li><a href="index.php?id=o206" >SUPPORT</a></li><li><a href="index.php?id=o207" >DISPOSAL</a></li>
<li><a href="index.php?id=o208" >LEASING</a></li>
<li><a href="index.php?id=o209" >CONTACT</a></li>
<li><a href="index.php?id=o210" >CHARITY SPONSORS</a></li>
</ul></div>
<!-- BODY -->
<div class="contentcol"><h1>Welcome to Orange IS</h1>
<p>HelloHello</p>
<p>HelloHello</p></div>
<!-- ORANGE QUALITY MODULE -->
<div class="modulecol">
<div class="modulehead"></div>
<div class="modulebody"><p>test</p><p>test</p></div>
<div class="calendarmonth"></div>
<div class="calendardate"></div>
</div><!-- MAIN CONTAINER END -->
[edited by: SuzyUK at 2:18 pm (utc) on Feb. 21, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
in IE there appears to be a chunk of my 'quality module' jumping centre page directly below what should be the closing tag of this div,
IE6? - If so sounds it sounds like it might the "Duplicating Characters Bug" (which is fixed in IE7)
I see a few <!-- comments --> in that snippet of source code, try removing them or putting them "inside" the divs - I can't tell from the bit of code you have there which ones it might be but it doesn't really matter, it can occur when there a lots and they come between certain floats.. and the easiest way to find out is to remove them.. if it is that and you need them put them back inside the divs
instead of
<!-- ORANGE QUALITY MODULE -->
<div class="modulecol"> ...
change to
<div class="modulecol"><!-- ORANGE QUALITY MODULE -->
...
and do that with all the comments in and around floated divs
let us know
Suzy
you hit the nail on the head there - thanks for the tip!
(and sorry for the url post! should of read rules properly)
