SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Lake Tahoe
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE/FF Float issue

    I have a multi-coloum layout that is giving me a bit of a problem. To best explain my issue you can see how the homepage and secondary pages at http://www.theliveyearbook.com/schools/.
    un: demo
    pw: demodemo

    In IE the second column is pushing down because the first div wants to take up 100% of the space. Yes I can add a witdh value in pixels to take care of that but my secondary pages don't have that second column. FF is fine of course.

  2. #2
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you post the CSS?
    David A. -- Hand coder
    Get Firefox


  3. #3
    SitePoint Member
    Join Date
    Aug 2002
    Location
    Lake Tahoe
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is....

    Code:
    /*Compass Design layout.css CSS file*/
     
     * {
     margin:0;
     paddin:0;
     }
     
     body {
     	background: url(images/big-bg.gif) repeat-y 50% 0px;
     	text-align:center; /*center hack*/
     	font-size:76.1%;
     	font-family:Verdana, Arial, Helvetica, sans-serif;
     	line-height:1.3em;
     }
     
     h1,h2,h3,h4,h5,h6,p,blockquote,form,label,dl,fieldset,address {
     margin: 0.5em 0;
     }
     li,dd {
     margin-left:1em;
     }
     fieldset {
     padding:.5em;
     }
     
     #wrap {
     	/*background-image: url(images/bg.gif);
     	background-repeat: repeat-y;*/
     
     	text-align: left;
     	width: 800px;
     	height: auto;
     	margin-right: auto;
     	margin-left: auto;
     	margin-top: 0px;
     	margin-bottom: 0px;
     	padding: 0px;
     }
     
     #header {
     	background-image: url(images/header.gif);
     	background-repeat: no-repeat;
     	height:138px;
     	text-align:left;
     }
     
     #nav {
     	background-image: url(images/nav-bg.gif);
     	background-repeat: repeat-x;
     	height:30px;
     	border-bottom: 1px solid;
     	border-color: #ffffff;
     	margin: 0px;
     	padding: 0px;
     }
     
     #footer {
     	background-image: url(images/footer-bg.gif);
     	background-repeat: repeat-x;
     	height:44px;
     	border-top: 1px solid;
     	border-color: #ffffff;
     	clear:both;
     }
     
     #main-body {
     	float:left;
     	width:516px;
     }
     
     #sidebar-2 {
     	background-color:#243139;
     	float:right;
     	width:143px;
     	overflow:hidden;
     	margin-left:-3px;
     }
     
     #content {
     	float:left;
     	overflow:hidden;
     	padding:1px;
     }
     
     #sidebar-3 {
     	float:right;
     	overflow:hidden;
     }
     
     #sidebar {
     	background-color:#243139;
     	float:left;
     	width:140px;
     	border: 0px 1px 0px 0px solid;
     	border-color: #000000;
     }
     
     .inside {
     padding:10px;
     }
     
     .moduletable-main {
     	width:349px;
     
     	
     }
     
     .moduletable-main h3 {
     	background-image: url(images/header-bg-long.gif);
     	background-repeat: no-repeat;
     	color:#ffffff;
     	font-size:12px;
     	height:20px;
     	margin:0;
     	padding: 5px 0 0 5px;
     	border: 1px solid;
     	border-color: #000000;
     }
     
     .moduletable-lside {
     	color:#ffffff;
     }
     
     .moduletable-lside #mod_login_greeting-lside {
     	padding:5px;
     }
     
     .moduletable-lside h3 {
     	padding:5px 5px 0px 5px;
     	font-size:12px;
     	color:#ffffff;
     }
     
     .moduletable-lside form {
     	padding:3px;
     }
     
     .moduletable-lside select {
     	font-size:10px;
     }
     
     .moduletable-rtside {
     	width:165px;
     	border: 1px solid;
     	border-color: #000000;
     }
     
     .moduletable-rtside th {
     	background-image: url(images/header-bg-short.gif);
     	background-repeat: no-repeat;
     	color:#ffffff;
     	height:0px;
     	padding: 5px 0 4px 5px;
     	border-bottom: 1px solid;
     	border-color: #000000;
     }
     
     .moduletable-footer {
     	padding:15px 5px 0px 5px;
     	font-size:12px;
     	color:#ffffff;
     }
     
     /*Begin: Main Site Navigation*/
     .moduletable-mainnav {
     	padding: 0; /*the padding is removed so the menu fills the whole module box*/
     	margin: 0;
     	font-family: Helvetica, sans-serif;
     	color: #ffffff;
     	font-weight:bold;
     }
     
     #navcontainer ul {
     	margin: 0;
     	padding:0px;
     	padding-top:9px;
     	list-style-type: none;
     	text-align: center;
     	height: 20px;
     }
     
     #navcontainer ul li { display: inline; }
     
     #navcontainer ul li a {
     	padding-right: 16px;
     	padding-left: 16px;
     	text-decoration: none;
     	color: #ffffff;
     
     }
     
     #navcontainer ul li a:hover {
     	padding-top: 3px;
     	padding-right: 15px;
     	padding-bottom: 5px;
     	padding-left: 15px;
     	color: #fff;
     	background-position: 0 -82px;
     	background: url(images/nav-item-bg.gif) top left repeat-x;
     	border: 1px solid;
     	border-color: #000000;
     }
     
     /*End: Main Site Navigation*/
     
     /*Begin: News Navigation*/
     
     .moduletable-test {
     	padding: 0px 0px 0px 0px; /*the padding is removed so the menu fills the whole module box*/
     }
     
     .moduletable-events {
     	text-align:center;
     	padding:0; /*the padding is removed so the menu fills the whole module box*/
     	width:349px;
     }
     
     .mainlevel-news {
     	width:100%
     }
     
     .moduletable-events ul#mainlevel-news {
     	height:20px;
     	margin-top: 5px;
     	margin-left: 0;
     	padding-left: 0px;
     	white-space: nowrap;
     }
     
     #mainlevel-news li {
     	display: inline;
     	list-style-type: none;
     	margin: 0px 0px 0px 0px;
     	padding: 0px 5px 0px 5px;
     }
     
     #mainlevel-news a { 
     	padding: 0px 5px 0px 5px; 
     	margin: 0px 0px 0px 0px;
     	background-color: #dce7ef;
     	border-top: 2px solid;
     	border-bottom: 2px solid;
     	border-color: #548bad;
     	text-decoration: none;
     }
     
     #mainlevel-news a:link, #mainlevel-news a:visited {
     	color: #000000;
     	text-decoration: none;
     }
     
     #mainlevel-news a:hover {
     	color: #ffffff;
     	background-color: #548bad;
     	border-top: 2px solid;
     	border-bottom: 2px solid;
     	border-color: #548bad;
     	text-decoration: none;
     }
     
     .moduletable-ajaxnews a {
     	color: #000000;
     }
     
     /*End: News Navigation*/
     
     /*Begin: User Navigation*/
     .moduletable-lside ul#mainlevel-usermnu {
     	margin: 0px;
     	padding: 0px;
     	list-style-type: none;
     	font-family: Arial, Helvetica, sans-serif;
     }
     
     #mainlevel-usermnu li {
     	display: inline;
     	list-style-type: none;
     	margin: 0px;
     	padding: 0px;
     	
     }
     
     #mainlevel-usermnu  a {
     	display: block;
     	padding: 3px;
     	background-color: #084162;
     	border-bottom: 1px solid #eee;
     	color: #EEE;
     	text-decoration: none;
     }
     
     #mainlevel-usermnu  a:link, #navlist a:visited {
     	text-decoration: none;
     }
     
     #mainlevel-usermnu  a:hover
     {
     background-color: #369;
     color: #fff;
     }
     /*End: User Navigation*/
     
     /*Joomla CSS*/
     a {
     	text-decoration:underline;
     	color:#336699;
     }
     a:hover{
     	color:#336699;
     }
     h1,.componentheading{
     	background-image: url(images/header-bg-longer.gif);
     	background-repeat: repeat-x;
     	color:#ffffff;
     	font-size:12px;
     	font-weight:bold;
     	height:22px;
     	width:509px;
     	margin:0px;
     	padding: 3px 0 0 5px;
     	border: 1px solid;
     	border-color: #000000;
     }
     
     /*comment out*/
     .contentpaneopen {
     	width:514px;
     	margin:0px 2px 0px 1px;
     	padding: 0px;
     	border-collapse: collapse;
     }
     .contentheading {
     	background-image: url(images/header-bg-longer.gif);
     	background-repeat: repeat-x;
     	color:#ffffff;
     	font-size:12px;
     	font-weight:bold;
     	height:22px;
     	width:513px;
     	margin:0px;
     	padding: 5px 0 0 10px;
     	border: 1px solid;
     	border-color: #000000;
     	
     }
     
     .contentpane td  {
     	padding:5px;
     }
     
     .sectiontableheader {
      background-color:#bebebe;
     }
     
     h3{
     font-size:1.3em;
     line-height:1.3em;
     }
     h4{
     font-size:1.2em;
     line-height:1.2em;
     }
     h5{
     font-size:1.1em;
     line-height:1.1em;
     }
     h6{
     font-size:1em;
     line-height:1em;
     font-weight:bold;
     }
     #footer,.small,.createdate,.modifydate,.mosimage_caption{
     font:0.8em Arial,Helvetica,sans-serif;
     color:#999;
     }
     .moduletable- spare{
     margin-bottom:1em;
     padding:5px;
     /*padding for inside text*/
     }

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

    I think you will have to give a width to that left middle column because your float without width will expand to 100% when any element that it contains has "layout" ("haslayout" see faq). This means that any other content must start underneath because there is simply no room above.

    If the content of that middle left column was layout free then the next float should slide up alongside. However any time you give a dimension (or float anything else then) effectively the parent is extended to 100% width.

    If you don't want other pages to get this width then add a class in the body and style the content for that page only.

    e.g.
    body.two-column #content{width:349px} (add the correct width in there.)
    <body class="two-column">

    That footer looks a bit odd half way up the page with the full length columns going beyond the footer. You would be better either having the columns only gouing to the footer or make sure the footer is at the bottom.

    e.g.

    http://www.pmob.co.uk/temp/3col-centred-template6.htm




    I


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
  •