Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nested div tags don't look right in IE

    Greetings!

    I'm creating a joomla-based website and having issues getting the layout to render properly in IE. I checked it with safari and firefox on both Windows and Mac and it works great, but IE is having issues...

    The site is at:
    http://www.thecreativemusiccenter.com

    html:
    Code:
    <?php
    defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
    $iso = split( '=', _ISO );
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <?php
    if ( $my->id ) {
    	initEditor();
    }
    mosShowHead();
    ?>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
    </head>
    <body class="templateBody">
    <div id="top-bar"></div>
    <div id="top-section">
    	<div id="logo-section"></div>
    </div>
    <div id="main-section">	
    
    	<div id="top-navigation">
    		<?php mosLoadModules('top',-2); ?>
    	</div>
    	<div id="welcome-image">
    	</div>
    	<div id="creative-music"><h1>The Creative Music Center</h1>
    	</div>
    	<div id="left-column">
    		<?php mosLoadModules('left',-2); ?>
    	</div>
    	<div id="right-column">
    		<?php mosLoadModules('right',-2); ?>
    	</div>	
    </div>
    <div id="center-bottom">
    </div>
    <div id="bottom-section">
    	<div id="center-hours">
    	</div>
    </div>
    <div id="bottom-out">
    </div>
    	
    </body>
    </html>
    and CSS:
    Code:
    *{
    	padding:0px;
    	margin:0px;
    }
    
    html{
    	height:100%
    }
    
    body{
    	padding:0; margin:0;
    	}
    
    ul{
    	list-style-type:none;
    }
    
    ol{
    	padding-left:20px;
    }
    
    a{
    	text-decoration:none;
    }
    
    a:link, a:visited{
    	color:#666666;
    }
    
    a:hover{
    	color:#777777;
    }
    
    a:active{
    	color:#444444;
    }
    
    fieldset{
    	width:510px;
    	margin:0px;
    	padding:5px;
    	border:1px solid #515151;
    	overflow:hidden;
    }
    
    fieldset a {
    	font-weight:bold;
    }
    
    p{
    	margin:15px 0px;
    	line-height:1.7em;
    }
    
    pre {
    	background:url(../images/bgcolor.gif) repeat;
    	color: #d0d0d0;
    	padding: 10px;
    	border: 1px solid #666666;
    	margin:10px 0px;
    	color:#66FFCC;
    	font-family:"Courier New", Courier, mono;
    	/*width:100%;*/
    }
    
    h2, h3, h4, h5, h6 {
       margin-bottom: 5px;
       color:#ffffff;
    }
    
    h1{
    	margin-top: 7px;
    	margin-left: 9px;
    	   color:#F6D624;
    }
    
    
    
    .mceContentBody{
    	background-image:none;
    	background-color:white;
    	text-align:left;
    	color:#333333;
    	font-size:12px;
    }
    
    body.templateBody{
    	text-align:center;
    	background:url(../images/bgcolor.gif) repeat;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:1.5em;
    	color:#EEEEEE;
    }
    
    #top-bar{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:10px;
    	width:876px;
    	background:url(../images/top.gif) no-repeat;
    	height:9px;
    
    }
    
    #top-section{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	padding-top:20px;
    	width:876px;	
    	background:url(../images/mainback.gif) repeat; 
    	color:#FFFFFF; 
    	height:176px;
    }
    
    #logo-section{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:818px;
    	background:url(../images/logosection.gif) no-repeat; 
    	height:176px;
    
    }
    
    #main-section{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;	
    	background:url(../images/centerback.gif) repeat; 
    	color:#FFFFFF; 
    	height:450px;
    }
    
    
    
    
    
    div#top-navigation{
    	/*text-align:right;*/
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	height:33px;
    	width:806px;
    	background:url(../images/topmenuback.gif) repeat-x top left; 
    }
    
    div.moduletable-topMenu{
    	/*height:34px;*/
    }
    
    .moduletable-topMenu ul#mainlevel-top{
    list-style-type:none;
    padding:0 0 33px 10px;
    margin-right:0px;
    }
    
    .moduletable-topMenu ul#mainlevel-top li{
    float:left;
    padding:0px;
    margin-left:3px;
    background:url(../images/topmenuleft.gif) no-repeat left top;
    }
    
    .moduletable-topMenu ul#mainlevel-top li a.mainlevel-top{
    display:block;
    padding:10px 15px;
    color:#ffffff;
    text-decoration:none;
    background:url(../images/topmenuright.gif) no-repeat right top;
    }
    
    .moduletable-topMenu ul#mainlevel-top li a.mainlevel-top#active_menu{
    
    }
    
    
    
    #mainPanel{
    	text-align:left;
    	width:100%;
    	margin-top:10px;
    }
    
    
    div#welcome-image{
    	display:block;
    	position:absolute;
    	width:540px;
    	height:244px;
    	float:left;
    	margin-left:35px;
    	margin-top:0px;
    	padding:0px;
    	background:url(../images/storerendering.jpg) no-repeat left top;
    }
    
    div#creative-music{
    	text-align:left;
    	display:block;
    	position:absolute;
    	width:540px;
    	height:244px;
    	float:left;
    	margin-left:35px;
    	margin-top:244px;
    	padding:0px;
    	background:url(../images/creativemusicback.jpg) no-repeat left top;
    }
    
    div#left-column{
    	text-align:left;
    	position:absolute;
    	width:520px;
    	float:left;
    	margin-left:45px;
    	margin-top:285px;
    	padding:0px;
    }
    
    div#right-column{
    	text-align:left;
    	position:absolute;
    	width:265px;
    	float:left;
    	margin-left:576px;
    	padding:0px;
    }
    
    
    #center-bottom{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;
    	background:url(../images/bottom.gif) no-repeat; 
    	height:17px;
    }
    
    #bottom-section{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;	
    	background:url(../images/mainback.gif) repeat; 
    	height:49px;
    }
    
    #bottom-out{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;	
    	background:url(../images/bottom2.gif) repeat; 
    	height:11px;
    }
    
    #center-hours{
    	text-align:left;
    	position:absolute;
    	width:455px;
    	height:99px;
    	float:left;
    	margin-left:80px;
    	margin-top:7px;
    	background:url(../images/centerhours.gif) no-repeat; 
    	padding:0px;
    }
    
    
    #right-column .moduletable{
    	width:265px;
    	text-align:left;
    	margin-bottom:10px;
    	
    }
    
    #right-column .moduletable h3{
    	width:255px;
    	height:26px;
    	background:url(../images/menutitleback.gif) repeat-x;
    	font-size:14px;
    	font-weight:100;
    	padding-top:3px;
    	padding-left:10px;
    	margin-bottom:0px;
    }
    
    #right-column .moduletable ul#mainlevel{
    	line-height:30px;
    	padding-top:5px;
    }
    
    #right-column .moduletable ul#mainlevel li{
    }
    
    #right-column .moduletable ul#mainlevel li a{
    	text-decoration:none;
    	display:block;
    	padding-left:0px;
    }
    
    #right-column .moduletable ul#mainlevel li a:link, a:visited, a:active{
    	color:#666666;
    }
    
    #right-column .moduletable ul#mainlevel li a:hover{
    	color:#ffffaa;
    	background-color:#4C4C4C;
    }
    
    
    
    #mainBody{
    	text-align:left;
    	position:relative;
    	margin:0 auto;
    	width:770px;
    	background-color:#383838;
    	height:100%;
    	overflow:hidden;
    }
    
    .padding-1{
    	padding:10px 0px 10px 10px;
    }
    
    .padding-2{
    	padding:10px 10px 10px 0px;
    }
    Thanks!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    You cannot simultaneously float and absolutely position an element [1]. More correctly, when you try to do so, the floating is ignored. Look what you have:
    Code:
    div#welcome-image{
    	display:block;
    	position:absolute;
    	width:540px;
    	height:244px;
    	float:left;
    	margin-left:35px;
    	margin-top:0px;
    	padding:0px;
    	background:url(../images/storerendering.jpg) no-repeat left top;
    }
    You need to decide on whether the element should be floated or absolutely positioned. Currently it is absolutely positioned, but with no explicit offsets top, right, bottom, or left. As you can see, with auto offsets IE and Firefox may disagree on where to actually put the element.

    [1] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I removed the floats and tried positioning all the divs absolutely within one main div and the top margins are okay, but the left ones are all screwed up in IE. What am I missing that would fix these margins?

    html:
    Code:
    <?php
    defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
    $iso = split( '=', _ISO );
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <?php
    if ( $my->id ) {
    	initEditor();
    }
    mosShowHead();
    ?>
    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
    </head>
    <body class="templateBody">
    <div id="main-section">	
    	<div id="top-bar"></div>
    	<div id="top-section">
    		<div id="logo-section"></div>
    	</div>
    	<div id="top-navigation">
    		<?php mosLoadModules('top',-2); ?>
    	</div>
    	<div id="welcome-image">
    	</div>
    	<div id="creative-music"><h1>The Creative Music Center</h1>
    	</div>
    	<div id="left-column">
    		<?php mosLoadModules('left',-2); ?>
    	</div>
    	<div id="right-column">
    		<?php mosLoadModules('right',-2); ?>
    	</div>	
    </div>
    <div id="center-bottom">
    </div>
    <div id="bottom-section">
    	<div id="center-hours">
    	</div>
    </div>
    <div id="bottom-out">
    </div>
    	
    </body>
    </html>
    CSS:
    Code:
    /************* Global Reset *************/
    *{
    	padding:0px;
    	margin:0px;
    }
    /***************************************/
    
    /************** HTML Tags **************/
    html{
    	height:100%
    }
    
    body{
    	padding:0; margin:0;
    	}
    
    ul{
    	list-style-type:none;
    }
    
    ol{
    	padding-left:20px;
    }
    
    a{
    	text-decoration:none;
    }
    
    a:link, a:visited{
    	color:#666666;
    }
    
    a:hover{
    	color:#777777;
    }
    
    a:active{
    	color:#444444;
    }
    
    fieldset{
    	width:510px;
    	margin:0px;
    	padding:5px;
    	border:1px solid #515151;
    	overflow:hidden;
    }
    
    fieldset a {
    	font-weight:bold;
    }
    
    p{
    	margin:15px 0px;
    	line-height:1.7em;
    }
    
    pre {
    	background:url(../images/bgcolor.gif) repeat;
    	color: #d0d0d0;
    	padding: 10px;
    	border: 1px solid #666666;
    	margin:10px 0px;
    	color:#66FFCC;
    	font-family:"Courier New", Courier, mono;
    	/*width:100%;*/
    }
    
    h2, h3, h4, h5, h6 {
       margin-bottom: 5px;
       color:#ffffff;
    }
    
    h1{
    	margin-top: 7px;
    	margin-left: 9px;
    	   color:#F6D624;
    }
    
    /***************************************/
    
    
    .mceContentBody{
    	background-image:none;
    	background-color:white;
    	text-align:left;
    	color:#333333;
    	font-size:12px;
    }
    
    body.templateBody{
    	text-align:center;
    	background:url(../images/bgcolor.gif) repeat;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:1.5em;
    	color:#EEEEEE;
    }
    
    #main-section{
    	display:block;
    	margin-top:14px;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;	
    	background:url(../images/centerback.gif) repeat; 
    	color:#FFFFFF; 
    	height:700px;
    }
    
    #top-bar{
    	display:block;
    	position:absolute;
    	margin-left:0px;
    	margin-top:0px;
    	width:876px;
    	background:url(../images/top.gif) no-repeat;
    	height:9px;
    
    }
    
    #top-section{
    	display:block;
    	position:absolute;
    	margin-left:0px;
    	margin-top:9px;
    	width:876px;	
    	background:url(../images/mainback.gif) repeat; 
    	color:#FFFFFF; 
    	height:176px;
    }
    
    #logo-section{
    	display:block;
    	position:absolute;
    	margin-left:29px;
    	margin-top:22px;
    	width:818px;
    	background:url(../images/logosection.gif) no-repeat; 
    	height:176px;
    
    }
    
    
    
    
    
    
    div#top-navigation{
    	/*text-align:right;*/
    	display:block;
    	position:absolute;
    	margin-left:35px;
    	margin-top:207px;
    	height:33px;
    	width:806px;
    	background:url(../images/topmenuback.gif) repeat-x top left; 
    }
    
    div.moduletable-topMenu{
    	/*height:34px;*/
    }
    
    .moduletable-topMenu ul#mainlevel-top{
    list-style-type:none;
    padding:0 0 33px 10px;
    margin-right:0px;
    }
    
    .moduletable-topMenu ul#mainlevel-top li{
    float:left;
    padding:0px;
    margin-left:3px;
    background:url(../images/topmenuleft.gif) no-repeat left top;
    }
    
    .moduletable-topMenu ul#mainlevel-top li a.mainlevel-top{
    display:block;
    padding:10px 15px;
    color:#ffffff;
    text-decoration:none;
    background:url(../images/topmenuright.gif) no-repeat right top;
    }
    
    .moduletable-topMenu ul#mainlevel-top li a.mainlevel-top#active_menu{
    
    }
    
    
    
    
    /************************************Pathway & Search Starts*********************************/
    
    div#welcome-image{
    	display:block;
    	position:absolute;
    	width:540px;
    	height:244px;
    	margin-left:35px;
    	margin-top:240px;
    	padding:0px;
    	background:url(../images/storerendering.jpg) no-repeat left top;
    }
    
    div#creative-music{
    	text-align:left;
    	display:block;
    	position:absolute;
    	width:540px;
    	height:35px;
    	margin-left:35px;
    	margin-top:484px;
    	padding:0px;
    	background:url(../images/creativemusicback.jpg) no-repeat left top;
    }
    
    div#left-column{
    	text-align:left;
    	position:absolute;
    	width:520px;
    	margin-left:45px;
    	margin-top:529px;
    	padding:0px;
    }
    
    div#right-column{
    	text-align:left;
    	position:absolute;
    	width:265px;
    	margin-left:576px;
    	margin-top:240px;
    	padding:0px;
    }
    
    
    #center-bottom{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;
    	background:url(../images/bottom.gif) no-repeat; 
    	height:17px;
    }
    
    #bottom-section{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;	
    	background:url(../images/mainback.gif) repeat; 
    	height:49px;
    }
    
    #bottom-out{
    	display:block;
    	margin-left:auto;
    	margin-right:auto;
    	width:876px;	
    	background:url(../images/bottom2.gif) repeat; 
    	height:11px;
    }
    
    #center-hours{
    	text-align:left;
    	position:absolute;
    	width:455px;
    	height:99px;
    	float:left;
    	margin-left:80px;
    	margin-top:7px;
    	background:url(../images/centerhours.gif) no-repeat; 
    	padding:0px;
    }
    
    /************************************Pathway & Search Ends*********************************/
    /************************************Left Panel Starts*********************************/
    
    
    
    #right-column .moduletable{
    	width:265px;
    	text-align:left;
    	margin-bottom:10px;
    	
    }
    
    #right-column .moduletable h3{
    	width:255px;
    	height:26px;
    	background:url(../images/menutitleback.gif) repeat-x;
    	font-size:14px;
    	font-weight:100;
    	padding-top:3px;
    	padding-left:10px;
    	margin-bottom:0px;
    }
    
    #right-column .moduletable ul#mainlevel{
    	line-height:30px;
    	padding-top:5px;
    }
    
    #right-column .moduletable ul#mainlevel li{
    }
    
    #right-column .moduletable ul#mainlevel li a{
    	text-decoration:none;
    	display:block;
    	padding-left:0px;
    }
    
    #right-column .moduletable ul#mainlevel li a:link, a:visited, a:active{
    	color:#666666;
    }
    
    #right-column .moduletable ul#mainlevel li a:hover{
    	color:#ffffaa;
    	background-color:#4C4C4C;
    }
    
    
    
    /************************************Main Body Starts*********************************/
    
    #mainBody{
    	text-align:left;
    	position:relative;
    	margin:0 auto;
    	width:770px;
    	background-color:#383838;
    	height:100%;
    	overflow:hidden;
    }
    
    .padding-1{
    	padding:10px 0px 10px 10px;
    }
    
    .padding-2{
    	padding:10px 10px 10px 0px;
    }
    
    /************************************Left Panel Starts*********************************/
    
    #leftPanel{	
    	width:225px;
    	float:left;
    	display:block;
    	/*margin:10px 0px 10px 10px;*/
    }
    
    #leftPanel .moduletable{
    	width:215px;
    	text-align:left;
    	margin-bottom:10px;
    	background:url(../images/contentBG.gif) repeat;
    }
    
    #leftPanel .moduletable h3{
    	width:205px;
    	height:25px;
    	background:url(../images/menuHeader.gif) no-repeat #347E82;
    	color:#DFFDFF;
    	font-size:16px;
    	font-weight:600;
    	padding-top:5px;
    	padding-left:10px;
    	margin-bottom:0px;
    }
    
    #leftPanel .moduletable ul#mainlevel{
    	line-height:30px;
    	padding-top:5px;
    }
    
    #leftPanel .moduletable ul#mainlevel li{
    }
    
    #leftPanel .moduletable ul#mainlevel li a{
    	text-decoration:none;
    	display:block;
    	padding-left:10px;
    }
    
    #leftPanel .moduletable ul#mainlevel li a:link, a:visited, a:active{
    	color:#666666;
    }
    
    #leftPanel .moduletable ul#mainlevel li a:hover{
    	color:#00F3FF;
    	background-color:#4C4C4C;
    }
    
    /************************************Login Module Starts*********************************/
    
    #leftPanel .moduletable form table{
    	margin-top:10px;
    }
    
    
    input#mod_login_username{
    	width:150px;
    	margin-bottom:10px;
    	height:20px;
    	border:1px solid #F2C17E;
    	padding-top:3px;
    	padding-left:7px;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	background-color:#70593A;
    	color:white;
    	
    }
    
    input#mod_login_password{
    	width:150px;
    	margin-bottom:10px;
    	height:20px;
    	border:1px solid #F2C17E;
    	padding-top:3px;
    	padding-left:7px;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	background-color:#70593A;
    	color:white;
    }
    
    #leftPanel .moduletable form table input.button{
    	margin:10px 0px;
    	padding:3px 10px;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	border:1px solid #F2C17E;
    	color:white;
    }
    
    /************************************Login Module Ends*********************************/
    
    /************************************Left Panel Ends*********************************/
    
    /************************************Content Panel Starts*********************************/
    
    #contentPanel{
    	width:535px;
    	float:right;
    	/*margin:10px;*/
    	display:block;
    }
    
    /************************************Content Panel Ends*********************************/
    
    /************************************Main Body Ends*********************************/
    
    /************************************Main Panel Ends*********************************/
    
    /************************************Main User Modules Starts*********************************/
    
    #main-userModules{
    	text-align:center;
    	overflow:hidden;
    	width:100%;
    	background:url(../images/imgGallery-bg.gif) repeat #4C4C4C;
    	margin-top:0px;
    }
    
    #userModules{
    	text-align:left;
    	background-color:#222222;
    	margin:0 auto;
    	width:770px;
    	overflow:hidden;
    	/*padding:10px;*/
    	border-top:3px solid #66F8FF;
    }
    
    #userModules h3{
    	color:#82DADE;
    	padding-bottom:5px;
    	margin-bottom:0px;
    }
    
    #userModules ul{
    	list-style-type:none;
    	list-style-image:url(../images/list-arrow1.gif);
    	margin-left:20px;
    	line-height:1.7em;
    }
    
    #userModules li{
    	border-bottom:1px dotted #515151
    }
    
    #userModules a{
    color:#F1C07D;
    }
    
    #userModules a:hover{
    color:#E1E1E1;
    }
    
    #user1Mod{
    	float:left;
    	width:50%;
    }
    
    #user1Mod .moduletable{
    	margin:10px 5px 10px 10px;
    	background-color:#1C1C1C;
    	padding:10px;
    }
    
    #user2Mod{
    	float:right;
    	width:49.9%;
    	
    }
    
    #user2Mod .moduletable{
    	margin:10px 10px 10px 5px;
    	background-color:#1C1C1C;
    	padding:10px;
    }
    
    
    /************************************Main User Modules Ends*********************************/
    
    /************************************Footer Starts*********************************/
    
    #main-footer{
    	width:100%;
    	text-align:center;
    }
    
    #footer{
    	position:relative;
    	width:770px;
    	margin:0 auto;
    	text-align:left;
    	background:url(../images/footer-bg.gif) repeat-x #AA8859;
    	height:97px;
    	border-top:3px solid #CAB08B;
    }
    
    #footer-text{
    	position:absolute;
    	top:20px;
    	left:30px;
    	color:#483A28;
    	font-size:12px;
    }
    
    #footer-text span{
    	color:#FFCD8E;
    	text-transform:uppercase;
    }
    
    #footer-text a{
    	color:white;
    }
    
    #footer-text #validate{
    	margin-top:8px;
    }
    
    /************************************Footer End*********************************/
    
    /************************************Joomla ********************************/
    
    
    /************************************Search Starts********************************/
    input#search_searchword{
    	width:150px;
    	height:20px;
    	border:1px solid #F2C17E;
    	padding-top:3px;
    	padding-left:7px;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	background-color:#70593A;
    	color:white;
    }
    
    table.searchintro{
    	width:100%;
    	margin:20px 0px 10px;
    	background:#333333;
    	padding:10px;
    	border:1px solid #614D33;
    }
    
    table.searchintro b{
    	color:#EEBE7C;
    }
    span.highlight{
    	color:#EEBE7C;
    }
    
    select#search_ordering{
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	border:1px solid #F2C17E;
    	color:white;
    }
    /************************************Search Ends********************************/
    
    /************************************mosImage Starts********************************/
    .mosimage{
    	background-color:#333333;
    	border:1px solid #444444; 
    	margin:10px;
    	padding:5px;
    }
    
    /************************************mosImage Ends********************************/
    
    input.button{
    	/*margin:10px 0px;*/
    	padding:2px 3px;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	border:1px solid #F2C17E;
    	color:white;
    }
    
    
    table.blog{
    	background:url(../images/contentBG.gif) repeat;
    	padding:5px;
    }
    
    table.contentpaneopen, table.blog, table.contentpane{
    	/*width:auto!important;*/
    	width:100%;
    	/*border-collapse:collapse;
    	border-spacing:0;*/
    }
    
    div.contentpane, div.contentpaneopen{
    	/*width:100%;*/
    }
    
    .contentheading{
    	font-size:20px;
    	color:#FF9266;
    }
    
    td.buttonheading{
    	font-size:10px;
    	white-space:nowrap;
    }
    
    span.small, td.createdate, td.modifydate, div.mosimage_caption{
    	font-size:12px;
    	color:#999999;
    }
    
    td.createdate{
    	padding-bottom:5px;
    	border-bottom:1px dotted #e1e1e1;
    }
    
    span.content_rating, span.content_vote{
    	font-size:12px;
    	padding:0px;
    	color:#E0E0E0;
    }
    
    span.content_rating img{
    	margin:0px 2px 5px 0px;
    	
    }
    
    .componentheading{	
    	/*margin-right:10px;*/
    	height:25px;
    	background: url(../images/compHeading.gif) repeat-x #83DBE0;
    	background-position:0px 0px;
    	color:#132F30;
    	padding-left:10px;
    	padding-top:5px;
    	margin-bottom:20px;
    	font-size:14px;
    	font-weight:bold;
    }
    
    div.message{
    	/*width:515px;*/
    	border:1px dotted #555555;
    	padding:20px;
    	margin-bottom:10px;
    	color:#66CCFF;
    	text-align:center;
    }
    
    th.pagenav_next,th.pagenav_prev{
    	font-size:14px;
    	font-weight:normal;
    }
    
    table.contenttoc{
    	margin:0px 0px 10px 10px;
    	width:200px;
    	background-color:#333333;
    	border:1px solid #444444; 
    }
    
    table.contenttoc td{
    	padding:2px 10px;
    	border-bottom:1px dotted #555555;
    }
    
    table.contenttoc th{
    	background-color:#999999;
    }
    
    input#contact_name, input#contact_email, input#contact_subject{
    	width:150px;
    	height:20px;
    	border:1px solid #F2C17E;
    	padding-top:3px;
    	padding-left:7px;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	background-color:#70593A;
    	color:white;
    
    }
    textarea{
    	border:1px solid #F2C17E;
    	background:url(../images/loginInputBG.gif) repeat #70593A;
    	background-color:#70593A;
    	color:white;
    	padding-top:3px;
    	padding-left:7px;
    }
    
    td.contentdescription{
    	/*padding-bottom:15px;*/
    }
    tr.sectiontableentry1, td.sectiontableentry1{
    	background-color:#525252;
    }
    
    tr.sectiontableentry2, td.sectiontableentry2{
    	background-color:#454545;
    }
    
    tr.sectiontableentry1 td, tr.sectiontableentry2 td {
    	padding:3px;
    }
    
    td.sectiontableheader{
    	padding:5px;
    	background-color:#31777B;
    }
    
    table.adminform textarea {
      width: auto;
    }
    Thanks!

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by davegk View Post
    I removed the floats and tried positioning all the divs absolutely within one main div and the top margins are okay, but the left ones are all screwed up in IE. What am I missing that would fix these margins?
    If you insist on using absolute positioning then you will usually want to specify a horizontal and a vertical offset for every absolutely positioned element. Example:
    Code:
    #logo-section{
    	display:block;
    	position:absolute;
    	left: 0;
    	top: 0;
    	margin-left:29px;
    	margin-top:22px;
    	width:818px;
    	background:url(http://thecreativemusiccenter.com/templates/creative_music/images/logosection.gif) no-repeat; 
    	height:176px;
    }
    I think that this should solve for IE7, but in IE6 there is unfortunately a bug [1] so that an absolutely positioned block-level element is affected by the value or text-align for the parent even when explicit offsets are specifed. You need to get rid of the red part:
    Code:
    body.templateBody{
    	text-align:center;
    	background:url(../images/bgcolor.gif) repeat;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:1.5em;
    	color:#EEEEEE;
    }
    Really I would recommend that you use floats instead of absolute positioning. Although the concept of absolute positioning may seem simpler than floating it will cause you head ache in the future. There are certain limitations with what one can do with absolutely positioned elements.

    [1] http://www.gtalbot.org/BrowserBugsSe...AbsPosBug.html

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks...I'll try redoing with floats. Back with more questions soon

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, one issue I'm having is that when I set the left margin for a nested div, the pixel count is double in IE than it is in Safari/Firefox. For example, I set margin-left:10px; and in Safari it leaves a 10 pixel margin while in IE it puts a 20 pixel margin.
    Thoughts?
    Thanks!

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by davegk View Post
    Okay, one issue I'm having is that when I set the left margin for a nested div, the pixel count is double in IE than it is in Safari/Firefox. For example, I set margin-left:10px; and in Safari it leaves a 10 pixel margin while in IE it puts a 20 pixel margin.
    Thoughts?
    Thanks!
    http://www.positioniseverything.net/...ed-margin.html

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, fixed the left margins - thanks! Getting closer to where I want it...
    Next issue I'm having is there is some extra padding/spacing vertically on the page in IE between some of the div sections.
    www.thecreativemusiccenter.com

    Also, the main outer div has a background image that I want to extend through the entire height of the divs contained within. The main content areas will stretch vertically as more text is added. How can I set the height of the main div so that the background will stretch with the inner divs? Notice too that in IE, that background image is currently showing below the bottom border.

    Thanks again! I really appreciate the help and I'm learning a ton about CSS.

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by davegk View Post
    Also, the main outer div has a background image that I want to extend through the entire height of the divs contained within. The main content areas will stretch vertically as more text is added. How can I set the height of the main div so that the background will stretch with the inner divs? Notice too that in IE, that background image is currently showing below the bottom border.
    Remember that a float does not under normal conditions expand its container [1]. Therefore (in Firefox) your #main-section has effective height 0. (Because it only has floated contents)

    To get #main-section to contain its floats my favorite techniques is to use overflow: hidden:
    Code:
    #main-section {
    	overflow: hidden;
    }
    So why is IE6/7 expanding #main-section even without overflow: hidden ? That is because you have triggered hasLayout by setting an explicit width. And when you do that it will automatically contain its floats in IE6/7. From a non-IE point of view this is really a bug because hasLayout is a non-CSS concept. Had you not triggered hasLayout then it wouldn't have expanded to contain its floats.

    In IE7 overflow other than visible will trigger hasLayout, but this is not the case with IE6 and overflow: hidden does not always work as expected.

    I think we better look at the other issues after you get this fixed.

    [1] http://www.complexspiral.com/publica...aining-floats/

  • #10
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    added the overflow:hidden; line and the background now extends correctly.

    Now, the issue with the extra vertical spacing between some divs...it seems like that extra space is being added on the bottom of some divs, pushing the following ones down too far in IE.

  • #11
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by davegk View Post
    Now, the issue with the extra vertical spacing between some divs...it seems like that extra space is being added on the bottom of some divs, pushing the following ones down too far in IE.
    Under certain conditions IE will not allow a div to be smaller in height than the current font-size. There are various ways to solve this problem [1].

    Example. You have this:
    Code:
    <div id="top-bar"></div>
    together with this:
    Code:
    #top-bar{
    	display:inline;
    	position:relative;
    	float:left;
    	margin-left:0px;
    	margin-top:0px;
    	width:876px;
    	padding:0;
    	background:url(../images/top.gif) no-repeat;
    	height:9px;
    }
    When I view the page in IE6 then #top-bar is 15 pixels high. The bug has been partially fixed in IE7.

    It turns out that the problem can be solved by putting in a comment within the empty div, but there are other fixes that use CSS instead.
    Code:
    <div id="top-bar"><!----></div>
    [1] http://bonrouge.com/~faq#shortdiv

  • #12
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool...setting the font size to 1 fixed the gaps at the top and bottom...still having trouble closing the gap under the top-section and under top-navigation

  • #13
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by davegk View Post
    cool...setting the font size to 1 fixed the gaps at the top and bottom...still having trouble closing the gap under the top-section and under top-navigation
    Be careful with the sizes of your elements. You have this:
    Code:
    #top-section{
    	display:inline;
    	position:relative;
    	float:left;
    	font-size:1px;
    	margin-left:0px;
    	margin-top:0px;
    	width:876px;	
    	padding:0;
    	background:url(../images/mainback.gif) repeat; 
    	color:#FFFFFF; 
    	height:176px;
    }
    #logo-section{
    	display:inline;
    	position:relative;
    	float:left;
    	font-size:1px;
    	margin-left:29px;
    	margin-top:22px;
    	width:818px;
    	padding:0;
    	background:url(../images/logosection.gif) no-repeat top left; 
    	height:176px;
    }
    together with this:
    Code:
    	<div id="top-section">
    		<div id="logo-section"></div>
    	</div>
    Clearly, #top-section is not tall enough to completely hold #logo-section. Use the DOM inspector in Firefox to quickly find such errors.

    IE6 shows a different rendering because of the IE6 expanding box problem.

    As a side note you are not using CSS efficiently. For example why set padding: 0 for so many elements. You can do this once and for all using e.g div {padding: 0}.

  • #14
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sweet...finally got it fixed...thanks so much for your help!!
    I might have a few more questions later - are you very familiar with joomla?

  • #15
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Give koyama a goram medal or at least a beverage of his choice!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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