SitePoint Sponsor

User Tag List

Results 1 to 25 of 29

Thread: Float problems

Hybrid View

  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,355
    Mentioned
    179 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,355
    Mentioned
    179 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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,593
    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. Willing to do it cheap to build portfolio!

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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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
    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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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.

  15. #15
    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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 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;
    }

  18. #18
    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.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Williamr4j View Post
    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.
    I believe there are some developer tools for IE but I tend to have 3 or 4 browsers open at the same time and just test in each as I go. I use Firebug for looking at code but when testing I work on the real code and load it into each browser.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,593
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    For me I just do basically the same as Paul, I look at hte code for FF and then if I spot something that could be an issue I go test it and that's generally good enough for me .

    I tend to not even bother with IE develoepr toolbars (or chrome developer) because there isn't a real need for it. IE developer toolbar is quite horrible IMHO
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I use Firebug and IE developer toolbar almost exclusively for figuring out other people's pages... and mostly it's just the outline of Inspect Element. This has actually helped me figure out what IE has done with a disappearing element (I have found dropped and hidden floats in IE on others' pages using that). IE dev toolbar also tells you if IE considers the element to have Layout.

    If it's my own code, it's faster to add background colours.

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the advise, all great. I know where I am going anytime I have an issue, I cant solve myself within an hour, SITEPOINT rules.

    Thank you all 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
  •