SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29

Thread: Float problems

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problems

    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:
    HTML Code:
    <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:

    Code:
    * {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>ul
    {
    	visibility: visible;
    	top: 100%;
    }
    
    .art-menu li li:hover>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>a .l, .art-menu li:hover>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>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>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>a span, .art-nav .art-menu ul li:hover>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 >> 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 >> 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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Post removed to it's own thread.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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&#37; width then set "haslayout" by either giving it the appropriate width (not auto) or applying a haslayout fix.

    Code:
    .container12, .container16 {
        margin-left: auto;
        margin-right: auto;
        width: 960px;
    /*_width:auto;*/
    }
    * html .container16 {
        width:100%
    }
    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:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    * {
        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>ul {
        visibility: visible;
        top: 100%;
    }
    .art-menu li li:hover>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>a .l, .art-menu li:hover>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>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>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>a span, .art-nav .art-menu ul li:hover>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 >> 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 >> 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;
    }
    </style>
    </head>
    <body>
    <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-->
    </body>
    </html>
    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.
    Code:
        <div id="wrapper" class="container16 clearfix">
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    westcoastbass . theifishgroup . com / Home2 . aspx

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Williamr4j View Post
    Maybe I will just dummy up some replies so I can post the link, what do you think?
    No don't do that just do asRryan said and obfuscate the link.

    mysite( dot )com

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    use a full doctype:

    Code:
    <!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.

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    .art-menu,.art-menu li,.art-menu ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    I notice you have saved the BOM here:

    Code:
    &#239;&#187;&#191;/* 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.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    *edit found it:

    UL LI LI

    {
    lol - I found it first

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi, You have conflicting rules Add this near the end of the stylesheet otherwise your other styles will mess it up:
    Code:
     .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.

  20. #20
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul
    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.
    Sorry I misread that to mean the .art-menu area. : )

  21. #21
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, You are awesome!

    That worked great, thank you very much.


    Moderator:

    Just so I know, if I have another website that has a small problem (the drop down menu goes behind the flash module in IE7) do I have to start a new Thread? Or can I just continue with these great bunch of guys?

    Thank you.

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so since I didn't get an answer to my question I am going to go ahead and post my site question here.

    Here is the link:
    http://www2.futureprotour.net/

    And the menu dropdown in IE is going behind the Flash.

    Thank you for your help.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Sorry, I missed this post - I'll take a look in the morning for you - if no one else chips in by then

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try setting the z-index of the menus main parent.e.g.
    Code:
    #menubg{
    position:relative;
    z-index:99;
    }

  25. #25
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    That worked like a charm. I had tried to put the z-index in there before but, forgot the position:relative.

    Thank you, you are a credit to the industry and I hope all the best for you.

    I was wondering, is there anything for IE that I can adjust the css, like firebug for FF? I know about firebuglite but, that just shows me the css, not lets me change it. Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •