Float problems

Williamr4j · February 26, 2010, 2:04pm

Sorry to piggy back on this issue but, I am pulling my hair out trying to figure this out. I am using DNN CMS to do this so dont mind the raunt=“server” stuff.

HTML:



<div id="bg">
<div id="wrapper" class="container16">

<div id="ControlPanel" runat="server" ></div>

<div id="menubg">
    	<div id="menu" runat="server" visible="false"></div>
        <div id="login" class="grid3">
   	  <div id="logintxt"> <dnn:USER runat="server" id="dnnUSER" />&nbsp;|&nbsp;<dnn:LOGIN runat="server" id="dnnLOGIN" /></div>
    </div>
</div>    
    
    <div class="clear"></div>
    
    
	<div id="logo" class="grid3" ><dnn:LOGO runat="server" id="dnnLOGO" /></div>
	<div id="search" class="grid4" runat="server" visible="false"></div>
	
	<div id="imgrotator" class="grid16" >
    	<div id="ContentPane" runat="server" visible="false"></div>
    
    </div>
    
<div id="panel_wrap" class="grid16" >
        	
            <div id="panel1_bg" >
            	<div id="panel1_inner" runat="server" visible="false" >
                </div>
            </div>
                        
            <div id="panel2_bg" >
            	<div id="panel2_inner" runat="server" visible="false" >
                </div>
            </div>            
            
             <div id="panel3_bg">
            	<div id="panel3_inner" runat="server" visible="false" >
                </div>
            </div>     
        
</div>

    
	<div class="clear"></div>
    
    <div id="terms" class="grid7" runat="server" visible="false"></div>
    
    <div id="copyright" class="grid8" > | Design: <a href="http://americanresults.com">americanresults.com</a></div>
    

</div><!--end container-->
</div><!--end bg-->

CSS:

* {margin:0;padding:0;}

body {
	line-height: 1;
	font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
	background:#333 url(images/Page-BgTexture.jpg) repeat left top;
	height: 900px;
	position: relative;
	min-width:960px;
	width:100%;	
}


#bg{
	background: #333 url(images/Page-BgGradient.jpg) repeat-x left top;
	height: 900px;
	position: relative;
	min-width:960px;
	left:0;
	top:0;

}
#wrapper{

	margin:0 auto;
}

a:link {
	color: #CCC;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CCC;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #CCC;
}
#logo{
	height: 90px;
	background: url(images/logo.png) no-repeat;
	z-index: 10;
	position: relative;
	margin-left: 0px;
		
}
#topsponsor{
	height:105px;
}

#login{
	border:2px solid white;
	float:right;
		
	height:30px;
	margin:5px 10px 0 0;
	text-align:center;
	width:100px;
}
#login a{
	color:#CCC;
	font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size:12px;
	margin:0;
	padding:0;
}

#logintxt {
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	margin-left:auto;
	width:160px;
	text-align: center;
	margin-right: auto;
	margin-top: 4px;
}
#search{
	float:right;
		
		
	margin:0 10px 0px;
	height:32px;
}
#menu_bg{
	position:relative;
	margin:0 auto;
}

#dnn_menu{
	color:#FFF;
	margin:0px 10px 10px 0px;
	height:32px;
	float:left;
		
	width:700px;
		_position:relative;
		
}

#imgrotator{
	width: 940px;
	height:502px;
	background: url(images/home_content.png) no-repeat;
	margin-top: -75px;
	margin-bottom: -135px;
				
}
#panel_wrap{
	margin: 0 0 0 20px;
	width:940px;
	
}

#panel1_bg, #panel2_bg, #panel3_bg{
	background:url(images/home_btm_panel.png) no-repeat;
	float:left;
	margin-left: auto;
	margin-right: auto;
	height: 126px;
	width: 306px;
		
		
		
}

#panel1_inner, #panel2_inner, #panel3_inner{

	width: 306px;
	height: 126px;
}


#dnn_ContentPane{
	margin:2px 0px 0px 2px;
	z-index:-50;
		
}

#terms{
	float:left;
	color:#FFF;
	font-size:11px;
	font-weight:bold;
	margin:20px 0 15px 10px;
}
#copyright{
	float:right;
		
	color:#FFF;
	font-size:11px;
	font-weight:bold;
	text-align:right;
	margin-top:20px;
	margin-bottom:15px;
}

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
		_float:none;
		_diaplay:inline;
	position: relative;
	z-index: 5;
	background:none;
}

.art-menu li:hover
{
	z-index: 10000;
	white-space: normal;
}

.art-menu li li
{
	float: none;
}

.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}

.art-menu li:hover&gt;ul
{
	visibility: visible;
	top: 100%;
}

.art-menu li li:hover&gt;ul
{
	top: 0;
	left: 100%;
}

.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}

.art-menu ul
{
	background-image: url(images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}





/* menu structure */

.art-menu
{
	padding: 4px 2px 0px 2px;
}

.art-nav
{
	position: relative;
	height: 35px;
	z-index: 100;
}

.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 35px;
	background-image: url(images/nav.png) no-repeat;
	
		
}

.art-nav .l
{
	left: 0;
	right:0;
}

.art-nav .r
{
	right: 0;
	width: 948px;
	_clip: rect(auto, auto, auto, 948px);
}




/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 31px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 1px;
	margin-left: 0px;
}


.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:0;
	z-index:-1;
	height: 93px;
	background-image: url(images/MenuItem.png);
}

.art-menu a .l
{
	left:0;
	right:1px;
}

.art-menu a .r
{
	width:402px;
	right:0;
	_clip: rect(auto, auto, auto, 401px);
}

.art-menu a .t 
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	color: #E3E3E3;
	padding: 0 17px;
	margin: 0 1px;
	line-height: 31px;
	text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-31px;
}

.art-menu li:hover&gt;a .l, .art-menu li:hover&gt;a .r
{
	top:-31px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-31px;
}
.art-menu a:hover .t
{
	color: #F2F2F2;
}

.art-menu li:hover a .t
{
	color: #F2F2F2;
}

.art-menu li:hover&gt;a .t
{
	color: #F2F2F2;
}


.art-menu a.active .l, .art-menu a.active .r
{
	top: -62px;
}

.art-menu a.active .t
{
	color: #DEDEDE;
}


/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url(images/subitem-bg.png);
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 1px;
	border-style: solid;
	border-color: #696969;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul 

a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #F5F5F5;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #F0F0F0;
	border-color: #696969;
	background-position: 0 -20px;
}

.art-menu ul li:hover&gt;a
{
	color: #F0F0F0;
	border-color: #696969;
	background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #F0F0F0;
}

.art-nav .art-menu ul li:hover&gt;a span, .art-nav .art-menu ul li:hover&gt;a span span
{
	color: #F0F0F0;
}


/* end MenuSubItem */



/*reset css*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*text css*/


a:focus {
	outline: 1px dotted;
}

hr {
	border: 0 #ccc solid;
	border-top-width: 1px;
	clear: both;
	height: 0;
}

/* `Headings
-----------------------------------------------------------------------------------------------

-----*/

h1 {
	font-size: 25px;
}

h2 {
	font-size: 23px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 19px;
}

h5 {
	font-size: 17px;
}

h6 {
	font-size: 15px;
}

/* `Spacing
-----------------------------------------------------------------------------------------------

-----*/

ol {
	list-style: decimal;
}

ul {
	list-style: disc;
}

li {
	margin-left: 30px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
	margin-bottom: 20px;
}

/*960 frame css*/

/*
	960 Grid System ~ Core CSS.
	Learn more ~ http://960.gs/

	Licensed under GPL and MIT.
*/

/* `Containers
-----------------------------------------------------------------------------------------------

-----*/

.container12,
.container16 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
		_width:auto
		
}

/* `Grid &gt;&gt; Global
-----------------------------------------------------------------------------------------------

-----*/

.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12,
.grid13,
.grid14,
.grid15,
.grid16 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

.container12 .grid3,
.container16 .grid4 {
	width: 220px;
}

.container12 .grid6,
.container16 .grid8 {
	width: 460px;
}

.container12 .grid9,
.container16 .grid12 {
	width: 700px;
}

.container12 .grid12,
.container16 .grid16 {
	width: 940px;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------------------------------------------------------------------

-----*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}


/* `Grid &gt;&gt; 16 Columns
-----------------------------------------------------------------------------------------------

-----*/

.container16 .grid1 {
	width: 40px;
}

.container16 .grid2 {
	width: 100px;
}

.container16 .grid3 {
	width: 160px;
}

.container16 .grid5 {
	width: 280px;
}

.container16 .grid6 {
	width: 340px;
}

.container16 .grid7 {
	width: 400px;
}

.container16 .grid9 {
	width: 520px;
}

.container16 .grid10 {
	width: 580px;
}

.container16 .grid11 {
	width: 640px;
}

.container16 .grid13 {
	width: 760px;
}

.container16 .grid14 {
	width: 820px;
}

.container16 .grid15 {
	width: 880px;
}


/* `Clear Floated Elements
-----------------------------------------------------------------------------------------------

-----*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
	zoom: 1;
}

The menu doesn’t want to play well, the float is all off in IE and it almost seems like everything is not inside of the main page container.

Thank you in advance for your help. Let me know if it would be easier to attach the HTML and CSS here or if you can get it from the link.

-Will

PaulOB · February 26, 2010, 2:25pm

Post removed to it’s own thread.

PaulOB · February 26, 2010, 2:41pm

Hi Williamr4j welcome to Sitepoint.

I have moved your thread to a topic of it’s own as it is bad etiquette to hijack other threads even if the questions are similar.

Do you have a link to the problem page as it’s hard to debug something when you can’t see what’s going on?

I don’t understand why you have set 900px heights on the body and on your wrappers. Is you site always to be a fixed height and never grow? That sounds unlikely and of course would break on text-resize anyway.

It looks as the wrapper elements is lacking “haslayout” in iE6 because you have set it to width auto whereas other browsers are getting a 960px width. If IE6 needs to be 100% width then set “haslayout” by either giving it the appropriate width (not auto) or applying a haslayout fix.


.container12, .container16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
/*_width:auto;*/
}
[B]* html .container16 {
    width:100%
}[/B]

I removed the heights and coloured a few elements to see what it looked like but it’s hard for me to tell if anything is wrong from this:


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style&gt;
* {
    margin:0;
    padding:0;
}
body {
    line-height: 1;
    font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
    background:#333 url(images/Page-BgTexture.jpg) repeat left top;
    position: relative;
    min-width:960px;
}
#bg {
    background:red url(images/Page-BgGradient.jpg) repeat-x left top;
    position: relative;
    min-width:960px;
}
#wrapper {
    margin:0 auto;
    background:blue;
}
a:link {
    color: #CCC;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #CCC;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #CCC;
}
#logo {
    height: 90px;
    background:yellow url(images/logo.png) no-repeat;
    z-index: 10;
    position: relative;
    margin-left: 0px;
}
#topsponsor {
    height:105px;
}
#login {
    border:2px solid white;
    float:right;
    height:30px;
    margin:5px 10px 0 0;
    text-align:center;
    background:orange;
    width:100px;
}
#login a {
    color:#CCC;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
    font-size:12px;
    margin:0;
    padding:0;
}
#logintxt {
    color:#FFFFFF;
    font-size:12px;
    font-weight:bold;
    margin-left:auto;
    width:160px;
    text-align: center;
    margin-right: auto;
    margin-top: 4px;
}
#search {
    float:right;
    margin:0 10px 0px;
    height:32px;
}
#menu_bg {
    position:relative;
    margin:0 auto;
}
#dnn_menu {
    color:#FFF;
    margin:0px 10px 10px 0px;
    height:32px;
    float:left;
    width:700px;
    _position:relative;
}
#imgrotator {
    width: 940px;
    height:502px;
    background: url(images/home_content.png) no-repeat;
    margin-top: -75px;
    margin-bottom: -135px;
}
#panel_wrap {
    margin: 0 0 0 20px;
    width:940px;
}
#panel1_bg, #panel2_bg, #panel3_bg {
    background:url(images/home_btm_panel.png) no-repeat;
    float:left;
    margin-left: auto;
    margin-right: auto;
    height: 126px;
    width: 306px;
}
#panel1_inner, #panel2_inner, #panel3_inner {
    width: 306px;
    height: 126px;
}
#dnn_ContentPane {
    margin:2px 0px 0px 2px;
    z-index:-50;
}
#terms {
    float:left;
    color:#FFF;
    font-size:11px;
    font-weight:bold;
    margin:20px 0 15px 10px;
}
#copyright {
    float:right;
    color:#FFF;
    font-size:11px;
    font-weight:bold;
    text-align:right;
    margin-top:20px;
    margin-bottom:15px;
}
/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover {
    text-align:left;
    text-decoration:none;
    outline:none;
    letter-spacing:normal;
    word-spacing:normal;
}
.art-menu, .art-menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
}
.art-menu li {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    _float:none;
    _diaplay:inline;
    position: relative;
    z-index: 5;
    background:none;
}
.art-menu li:hover {
    z-index: 10000;
    white-space: normal;
}
.art-menu li li {
    float: none;
}
.art-menu ul {
    visibility: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background:none;
}
.art-menu li:hover&gt;ul {
    visibility: visible;
    top: 100%;
}
.art-menu li li:hover&gt;ul {
    top: 0;
    left: 100%;
}
.art-menu:after, .art-menu ul:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
.art-menu, .art-menu ul {
    min-height: 0;
}
.art-menu ul {
    background-image: url(images/spacer.gif);
    padding: 10px 30px 30px 30px;
    margin: -10px 0 0 -30px;
}
.art-menu ul ul {
    padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
}
/* menu structure */

.art-menu {
    padding: 4px 2px 0px 2px;
}
.art-nav {
    position: relative;
    height: 35px;
    z-index: 100;
}
.art-nav .l, .art-nav .r {
    position: absolute;
    z-index: -1;
    top: 0;
    height: 35px;
    background-image: url(images/nav.png) no-repeat;
}
.art-nav .l {
    left: 0;
    right:0;
}
.art-nav .r {
    right: 0;
    width: 948px;
    _clip: rect(auto, auto, auto, 948px);
}
/* end Menu */

/* begin MenuItem */
.art-menu ul li {
    clear: both;
}
.art-menu a {
    position:relative;
    display: block;
    overflow:hidden;
    height: 31px;
    cursor: pointer;
    text-decoration: none;
    margin-right: 1px;
    margin-left: 0px;
}
.art-menu a .r, .art-menu a .l {
    position:absolute;
    display: block;
    top:0;
    z-index:-1;
    height: 93px;
    background-image: url(images/MenuItem.png);
}
.art-menu a .l {
    left:0;
    right:1px;
}
.art-menu a .r {
    width:402px;
    right:0;
    _clip: rect(auto, auto, auto, 401px);
}
.art-menu a .t {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    color: #E3E3E3;
    padding: 0 17px;
    margin: 0 1px;
    line-height: 31px;
    text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r {
    top:-31px;
}
.art-menu li:hover&gt;a .l, .art-menu li:hover&gt;a .r {
    top:-31px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r {
    top:-31px;
}
.art-menu a:hover .t {
    color: #F2F2F2;
}
.art-menu li:hover a .t {
    color: #F2F2F2;
}
.art-menu li:hover&gt;a .t {
    color: #F2F2F2;
}
.art-menu a.active .l, .art-menu a.active .r {
    top: -62px;
}
.art-menu a.active .t {
    color: #DEDEDE;
}
/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a {
    display:block;
    text-align: center;
    white-space: nowrap;
    height: 20px;
    width: 180px;
    overflow:hidden;
    line-height: 20px;
    margin-right: auto;
    background-image: url(images/subitem-bg.png);
    background-position: left top;
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: solid;
    border-color: #696969;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span {
    display: inline;
    float: none;
    margin: inherit;
    padding: inherit;
    background-image: none;
    text-align: inherit;
    text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span {
    text-align: left;
    text-indent: 12px;
    text-decoration: none;
    line-height: 20px;
    color: #F5F5F5;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
}
.art-menu ul ul a {
    margin-left: auto;
}
.art-menu ul li a:hover {
    color: #F0F0F0;
    border-color: #696969;
    background-position: 0 -20px;
}
.art-menu ul li:hover&gt;a {
    color: #F0F0F0;
    border-color: #696969;
    background-position: 0 -20px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span {
    color: #F0F0F0;
}
.art-nav .art-menu ul li:hover&gt;a span, .art-nav .art-menu ul li:hover&gt;a span span {
    color: #F0F0F0;
}
/* end MenuSubItem */



/*reset css*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*text css*/


a:focus {
    outline: 1px dotted;
}
hr {
    border: 0 #ccc solid;
    border-top-width: 1px;
    clear: both;
    height: 0;
}
/* `Headings
-----------------------------------------------------------------------------------------------

-----*/

h1 {
    font-size: 25px;
}
h2 {
    font-size: 23px;
}
h3 {
    font-size: 21px;
}
h4 {
    font-size: 19px;
}
h5 {
    font-size: 17px;
}
h6 {
    font-size: 15px;
}
/* `Spacing
-----------------------------------------------------------------------------------------------

-----*/

ol {
    list-style: decimal;
}
ul {
    list-style: disc;
}
li {
    margin-left: 30px;
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
    margin-bottom: 20px;
}
/*960 frame css*/

/*
    960 Grid System ~ Core CSS.
    Learn more ~ http://960.gs/

    Licensed under GPL and MIT.
*/

/* `Containers
-----------------------------------------------------------------------------------------------

-----*/

.container12, .container16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;/*_width:auto*/
}
* html .container16 {
    width:100%
}
/* `Grid &gt;&gt; Global
-----------------------------------------------------------------------------------------------

-----*/

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12, .grid13, .grid14, .grid15, .grid16 {
    display: inline;
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}
.container12 .grid3, .container16 .grid4 {
    width: 220px;
}
.container12 .grid6, .container16 .grid8 {
    width: 460px;
}
.container12 .grid9, .container16 .grid12 {
    width: 700px;
}
.container12 .grid12, .container16 .grid16 {
    width: 940px;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------------------------------------------------------------------

-----*/

.alpha {
    margin-left: 0;
}
.omega {
    margin-right: 0;
}
/* `Grid &gt;&gt; 16 Columns
-----------------------------------------------------------------------------------------------

-----*/

.container16 .grid1 {
    width: 40px;
}
.container16 .grid2 {
    width: 100px;
}
.container16 .grid3 {
    width: 160px;
}
.container16 .grid5 {
    width: 280px;
}
.container16 .grid6 {
    width: 340px;
}
.container16 .grid7 {
    width: 400px;
}
.container16 .grid9 {
    width: 520px;
}
.container16 .grid10 {
    width: 580px;
}
.container16 .grid11 {
    width: 640px;
}
.container16 .grid13 {
    width: 760px;
}
.container16 .grid14 {
    width: 820px;
}
.container16 .grid15 {
    width: 880px;
}
/* `Clear Floated Elements
-----------------------------------------------------------------------------------------------

-----*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
/*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix, *:first-child+html .clearfix {
    zoom: 1;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="bg"&gt;
    &lt;div id="wrapper" class="container16"&gt;
        &lt;div id="ControlPanel" runat="server" &gt;&lt;/div&gt;
        &lt;div id="menubg"&gt;
            &lt;div id="menu" runat="server" visible="false"&gt;&lt;/div&gt;
            &lt;div id="login" class="grid3"&gt;
                &lt;div id="logintxt"&gt;
                    &lt;dnn:USER runat="server" id="dnnUSER" /&gt;
                    &nbsp;|&nbsp;
                    &lt;dnn:LOGIN runat="server" id="dnnLOGIN" /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;div id="logo" class="grid3" &gt;
            &lt;dnn:LOGO runat="server" id="dnnLOGO" /&gt;
        &lt;/div&gt;
        &lt;div id="search" class="grid4" runat="server" visible="false"&gt;&lt;/div&gt;
        &lt;div id="imgrotator" class="grid16" &gt;
            &lt;div id="ContentPane" runat="server" visible="false"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="panel_wrap" class="grid16" &gt;
            &lt;div id="panel1_bg" &gt;
                &lt;div id="panel1_inner" runat="server" visible="false" &gt; &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="panel2_bg" &gt;
                &lt;div id="panel2_inner" runat="server" visible="false" &gt; &lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="panel3_bg"&gt;
                &lt;div id="panel3_inner" runat="server" visible="false" &gt; &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;div id="terms" class="grid7" runat="server" visible="false"&gt;&lt;/div&gt;
        &lt;div id="copyright" class="grid8" &gt; | Design: &lt;a href="http://americanresults.com"&gt;americanresults.com&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!--end container--&gt;
&lt;/div&gt;
&lt;!--end bg--&gt;
&lt;/body&gt;
&lt;/html&gt;

Do you have a real link that we could look at.

You already have the clearfix class in place so add that to any parents that hold only floated children.

e.g.


    &lt;div id="wrapper" class="container16 [B]clearfix[/B]"&gt;

I also note that you are using the grid system and I believe that your grid elements are always supposed to add up to the container grid setting.

If you have a container_16 the the grid elements should add up to 16 if I’m not mistaken but yours don’t seem to.

The menu doesn’t want to play well, the float is all off in IE

Which version of IE and which element exactly and what is happening?

As we are working from code without images you will need to mention specific elements by name so that we can test those. It’s a bit like working in the dark when there’s not a site to look at so you will need to be as detailed as possible so that we can help you

Williamr4j · February 26, 2010, 2:50pm

I will review and fix what you have suggested. This is my first time posting so I wasn’t sure as to how to start a post, sorry for hijacking.

I would give you the link to the site but, I have not posted 5 times yet and Sitepoint wont let me put links on my replies. Maybe I will just dummy up some replies so I can post the link, what do you think?

Thank you again for such a fast response.

RyanReese · February 26, 2010, 2:54pm

Bad case of divitis there…anyway could you post a link to the page in question? It’d make it easier for us to debug rather then copying all of hte code you posted into a file

[edit]Post like this
sitehere . com / page . php[/edit]

Williamr4j · February 26, 2010, 2:59pm

westcoastbass . theifishgroup . com / Home2 . aspx

PaulOB · February 26, 2010, 3:01pm

No don’t do that just do asRryan said and obfuscate the link.

mysite( dot )com

PaulOB · February 26, 2010, 3:28pm

Hi,

You have a partial doctype which is forcing ie into quirks mode and making it behave more like IE5.

use a full doctype:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I also think you should be centering IE6 also so remove this hack.


.container12,
.container16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
[B]    /*    _width:auto*/[/B]
        
}

Williamr4j · February 26, 2010, 3:38pm

SOLVED!!!

Thank you all for your help, this was soooo much faster then the 5+ hours I spent trying to figure this out.

So, from there my quandry was how to set the DOCTYPE in a DNN Portal. Well, In 4.4 and above, you are able to define the xhtml mode as a part of the skin by adding an xml file that that is named [SKINNAME].doctype.xml. Within this xml file you should declare one node SkinDocType. Then, within a CDATA tag, you add the doctype declaration to be used for this skin. For example, if your page uses Portal.ascx as the skin, you would create Portal.doctype.xml in the same directory. Be careful though, changing the DOCTYPE might have nasty side effects on some skins.

But mine was copied from another xml doctype that was “page.doctype.xml” instead of “index.doctype.xml”.

Again, Thank you very much and have a great day. (Cause of this, I know I will)

-Will

Williamr4j · February 26, 2010, 4:44pm

I dont know if I need to put this in a new post because it is on a different issue but, same template different, hopefully small, problem:

IE7 problem (again),

On the home page if you hover over the schedule menu button you will see that it pushes the main content pane down, has padding between each drop down item, and a list-style of disc next to each of them. I looked at my <li> tags and found that the list-style is none and there shouldn’t be all that padding.

Thank you.

-Will

Edit: It is in FF too.

Rayzur · February 26, 2010, 5:29pm

Hi,
You have five posts now so you should be able to post a link. I could not find the page with the Home2 link you gave.

http://westcoastbass.theifishgroup.com/Home2.aspx

I can get to this page by using Home only, is that the correct page?

http://westcoastbass.theifishgroup.com/Home.aspx

PaulOB · February 26, 2010, 5:31pm

The forum is playing up and my post went missing

You have defined list marker styles for the list element (li) higher up in the code so you will need to address that element also.

e.g.


.art-menu,[B].art-menu li,[/B].art-menu ul{
    margin:0;
    padding:0;
    list-style:none;
}

I notice you have saved the BOM here:


[B]&#239;&#187;&#191;[/B]/* background color for the content part of the pages */
Body

Those three characters are the BOM (byte order mark) and could possibly upset one or more rules so make sure it’s turned off in your css editor.

Williamr4j · February 26, 2010, 5:34pm

I apologize, your are correct here is the link:
http://westcoastbass.theifishgroup.com/Home.aspx

I fixed it, there needs to be at least 2 drop down items to see it.

Thank you.

-Will

Edit: I dont mean the problem is fixed, I mean fixed it to see what the issue is, sorry.

Williamr4j · February 26, 2010, 5:37pm

Paul O’B,

I did what you suggested and it worked as far as not dropping the other div when the menu drops down but, the menu still has a list-style and the padding in-between.

Thank you very much. You guys are awesome.

Stomme_poes · February 26, 2010, 5:53pm

I’m not getting the list style but in one of your various css sheets there’s a top margin on the sub ul anchors (like margin-top 3px or something) which could maybe be causing the gap between the two sub lists.

Arg, this reminds me of magento… extremely difficult to deal with because the same styles are repeated over and over again in multiple stylesheets, and then you’re supposed to “just override them all” with some main stylesheet… but it’s never that easy, it’s like overriding styles blindfolded. Good luck, man.

*edit found it:

UL LI LI

{

list-style-type: disc;

}

in default.css

it’s hitting the art sub ul li’s

FF won’t show it because the display states had been played with, meaning it’s no longer display: list-item anymore as far as FF is concerned, but IE figures it still is, and so shows bullets.

Williamr4j · February 26, 2010, 5:56pm

Thank you Stomme poes,

I wouldn’t use DNN if I didn’t have to, it is a headache everytime I go to do anything.

The list style is only showing IE7 not FF.

Thank you for your help.

PaulOB · February 26, 2010, 6:00pm

lol - I found it first

Williamr4j · February 26, 2010, 6:04pm

Thanks guys!

That fixed the list-style problem and I took the 3px margin-top off and it worked for FF but, big surprise here, IE is still having an issue with it. But I will try to just _margin-bottom:-3px; or something what is your suggestion?

Thank you.

Edit: nope didnt do it for IE7.

PaulOB · February 26, 2010, 6:18pm

Hi, You have conflicting rules Add this near the end of the stylesheet otherwise your other styles will mess it up:

 .art-menu li li{     float:left;     clear:left;     list-style:none; } .art-menu li li a{margin:0;}

You have to float list items in IE to kill the whitespace.

Stomme_poes · February 26, 2010, 6:20pm

Sorry I misread that to mean the .art-menu area. : )