...

View Full Version : nested div tags don't look right in IE



davegk
07-14-2007, 04:51 PM
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:


<?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:



*{
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!

koyama
07-14-2007, 08:16 PM
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:


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

davegk
07-16-2007, 05:18 PM
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:


<?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:


/************* 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!

koyama
07-16-2007, 05:42 PM
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:


#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:


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/BrowserBugsSection/MSIE6Bugs/TextAlignCenterAbsPosBug.html

davegk
07-16-2007, 06:31 PM
Ok, thanks...I'll try redoing with floats. Back with more questions soon :)

davegk
07-16-2007, 06:48 PM
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!

koyama
07-16-2007, 07:02 PM
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/explorer/doubled-margin.html

davegk
07-16-2007, 07:53 PM
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.

koyama
07-16-2007, 08:25 PM
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 (http://www.quirksmode.org/css/clearing.html):


#main-section {
overflow: hidden;
}


So why is IE6/7 expanding #main-section even without overflow: hidden ? That is because you have triggered hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) 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/publications/containing-floats/

davegk
07-16-2007, 09:52 PM
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.

koyama
07-16-2007, 10:13 PM
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:


<div id="top-bar"></div>

together with this:


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


<div id="top-bar"><!----></div>


[1] http://bonrouge.com/~faq#shortdiv

davegk
07-16-2007, 10:37 PM
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

koyama
07-16-2007, 10:51 PM
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:


#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:


<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 (http://www.positioniseverything.net/explorer/expandingboxbug.html).

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}.

davegk
07-16-2007, 11:31 PM
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?

TsNMouse
07-16-2007, 11:33 PM
Give koyama a goram medal or at least a beverage of his choice! :)

davegk
08-19-2007, 08:44 PM
another question...trying to setup a hover element to the main menu at the top of the page. The mouseover effect works fine in Safari, but when I got to try it in IE, the right image shows the effect but the left image doesn't. How can I fix that?



.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:hover{
float:left;
padding:0px;
margin-left:3px;
background:url(../images/topmenuleft-hover.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:hover{
display:block;
padding:10px 15px;
color:#ffffff;
text-decoration:none;
background:url(../images/topmenuright-hover.gif) no-repeat right top;
}


http://www.thecreativemusiccenter.com/index.php

Thanks,
David



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum