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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with IE and 3 Column layout

    Hi,

    Hopefully some one will have an easy answer to this, which I have overlooked.
    I am having a random problem with my page on IE6. The link to the page is here http://www.southampton.gov.uk/super.asp If you look at this page and refresh it a few times or reduce your IE window slightly, you will see that the white background ends halfway down the page rather than continue right to the bottom, this only happens every so often. Does any one have any clue why this only does this in IE and only does it occasionally?

    Any help would be greatly appreciated.

    Here is the CSS code.

    Code:
    /* rounded corners layout */
    .roundtop-sm
    { 
       background: url(/images/sm-ntr_tcm9-62146.gif) no-repeat top right; 
    }
    .roundbottom-sm 
    {
       background: url(/images/sm-nbr_tcm9-62145.gif) no-repeat bottom right; 
    }
    img.corner-sm {
       width: 7px;
       height: 7px;
       border: none;
       display: block !important;
    }
    /* box layout */
    .nodisplaytext
    {
       background-color: #9FB3DE; 
       vertical-align: top;
       color: white;
       height: 20px; 
       padding-top: 2px; 
       padding-right: 5px; 
    }
    .cityweb-logo
    {
       width: 245px;
       float: left; 
       margin-top: 13px; 
       margin-left: 3px; 
       margin-bottom: 3px; 
    }
    .scc-logo
    {
       width: 56px;
       float: right; 
       margin-top: 3px; 
       margin-left: 3px; 
       margin-right: 5px; 
       margin-bottom: 3px; 
    }
    .iip-logo
    {
       width: 60px;
       float: right; 
       margin-top: 5px; 
       margin-left: 20px; 
       margin-right: 10px; 
       margin-bottom: 3px; 
    }
    .toolbar
    {
       width: 775px; 
       background-color: #FFFFFF; 
    }
    .search-form
    {
       width: 170px;
       float: right; 
       margin-top: 3px; 
       margin-left: 3px; 
       margin-bottom: 3px; 
    }
    .search-form-name
    {
       font-size: 80%; 
       font-weight: bold;
    }
    .search-form-go
    {
       font-size: 70%; 
       font-weight: bold;
       width: 25px;
    }
    .breadcrumbs
    {
       width: 100%;  
       clear: both;  
       text-align: left; 
       margin-top: 1px; 
       margin-bottom: 1px; 
       font-size: 80%;
    }
    /*----- Starts HTML element styles ----- */
    a
    {
       text-decoration: none;
    }
    img 
    {
       border: none;
    }
    form
    {
       margin: 0px; 
       padding: 0px; 
    }
    h1, h2, h3 {
       padding: 0px; 
       margin: 0px;
       text-align: left;
    }
    h1 {
       font-weight: normal;
       font-size: 140%;
    }
    h2 {
       font-weight: normal;
       font-size: 130%;
    }
    h3 {
       font-weight: normal;
       font-size: 120%;
    }
    /* ----- Starts Class Selectors -----*/
    .textual-explaination
    {
       font-size: 75%;
       text-align: left;
    }
    p.link-lists
    {
       padding: 0px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       margin-left: 11px; 
       text-align: left;
    }
    p.hp-maps
    {
       text-align: center;
    }
    .link-lists
    {
       padding: 0px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       margin-left: 20px; 
       text-align: left;
    }
    .link-lists li
    {
       margin-left: 5px; 
       text-align: left;
    }
    .link-lists-l1
    {
       padding: 0px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       margin-left: 10px; 
       text-align: left;
    }
    .link-lists-l1 li
    {
       margin-left: 10px; 
       text-align: left;
       list-style-type: disc;
       font-size: 80%;
    }
    .link-lists-l2
    {
       padding: 0px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       margin-left: 7px; 
       text-align: left;
    }
    .link-lists-rhs
    {
       font-size: 80%;
       padding: 0px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       margin-left: 10px;
       margin-right: 5px; 
       text-align: left;
    }
    span.summary-spacing
    {
      height: 10px;
      margin-bottom: 20px; 
    }
    span.section-summary
    {
       padding-left: 10px;
       font-size: 85%;
    }
    img.left
    {
       float: left;
    }
    img.right
    {
       float: right;
    }
    h3.section-summary {
       font-weight: bold;
       font-size: 85%;
       padding-left: 10px;
       margin-top: 0px; 
       margin-bottom: 0px; 
    }
    a.section-summary:link {
       color: blue;
       font-weight: bold;
       text-decoration: none;
    }
    a.section-summary:visited {
       font-weight: bold;
       color: blue;
       text-decoration: none;
    }
    a.weather-summary {
       color: black;
       text-decoration: none;
       font-size: 90%;
    }
    a.webcam-summary {
       color: black;
       text-decoration: none;
       font-size: 90%;
    }
    h2.center-news {
       color: black;
       padding: 5px 0px; 
       margin: 0px;
       font-weight: normal;
       font-size: 130%;
    }
    p.center-news
    {
       font-size: 85%;
       padding-bottom: 15px;
       text-align: left;
    }
    p.center{
    text-align: center;
    }
    h1.section-heading {
       color: black;
       padding: 5px 0px; 
       margin: 0px;
       font-weight: normal;
       font-size: 130%;
    }
    h2.section-heading {
       color: black;
       padding: 5px 10px; 
       margin: 0px;
       font-weight: normal;
       font-size: 130%;
       vertical-align: top;
       float: left;
    }
    li.whatsnew {
       color: black;
       padding: 5px 5px; 
       margin: 0px;
       font-weight: bolder;
       font-size: 95%;
       list-style-image: none;
       list-style-type: none;
    }
    p.citywebname
    {
       display: none;
    }
    a.advanced-search
    {
       font-size: 100%;
    }
    p.top-tool-bar
    {
       margin: 0px;
       padding : 0px;
       font-size: 90%;
       text-align: center; 
       text-transform : lowercase;
    }
    span.council-address
    {
       font-size: 80%;
    }
    /* Search Pages */
    .toolbar-top
    {
       padding : 0px;
       width: 100%;
       font-size: 100%;
       background-color: #FFFFFF;
    }
    /*------Approved Home Page Styles------*/
    .boxheader
    { 
       width: 100%;  
       clear: both;  
    }
    .banner-image
    {
       width: 600px;
       float: left; 
       margin-top: 3px; 
       margin-left: 0px; 
       margin-bottom: 3px; 
    }
    .boxlogos
    { 
       clear: both;  
       margin-bottom: 0px;
       margin-left: 0px;
       margin-right: 0px;
    }
    .boxlogosprint   
    {
       display: none;  
    }
    .search-detail
    {
       margin-left: 0px; 
       margin-right: 0px; 
       margin-top: 0px; 
       margin-bottom: 0px; 
       padding : 0px;
       font-size: 80%;
       width: 150px;
       font-weight: bold;
       background-color: #FFFFFF;
       font-family: 'Andale Mono','Courier New', Courier, monospace;
    }
    .aaa-link {display: none !important}
    /*My be able to take this P definition out or at least remove the padding*/
    p
    {
       margin: 0px;
       text-align: left;
    }
    .hp-news-full
    {
       float:none;
       width: 98%;
       min-height: 125px;
    }
    .hp-news-left
    {
       float:left;
       width: 213px;
    }
    .hp-news-right
    {
       float:right;
       width: 213px;
    }
    .hp-weather
    {
       float:left;
       text-align: center;
    }
    .hp-webcam
    {
       float:right;
       text-align: center;
    }
    
    img.center-news
    {
       padding-top: 5px; 
       padding-bottom: 5px; 
       padding-left: 8px; 
       padding-right: 0px; 
       float: right;
    }
    p.weathertext
    {
       display: none;
    }
    /* -----Homepage Layout styles----- */
    body {
    	margin-right:50px; padding:0;
    	margin-left:50px; padding:0;
    
                    font-family: Verdana, Arial, Helvetica, sans-serif;
    	background:#9FB3DE;
    	}
    #header {
    	margin:0; padding:0;
    	background:#9FB3DE;
    	}
    
    #footer {
    	margin:0; padding:0;
    	background:#9FB3DE;
    	}
    #main1 {
    	margin:0; padding:0;
    	background:url("/images/superleftcolumn.gif") white top left repeat-y;
    	}
    #main2 {
    	margin:0; padding:0;
    	background:url("/images/superrightcolumn.gif") top right repeat-y;
    	}
    #main3 {
    	margin:0; padding:0;
    	background:url("/images/sm-nbl_tcm9-62144.gif") bottom left no-repeat;
    
    	}
    #main4 {
    	margin:0; padding:0;
    	background:url("/images/sm-nbr_tcm9-62145.gif") bottom right no-repeat;
    	}
    #left {
    	float:left;
    	width:173px;
    	margin:0; padding:0;
    	background:url("/images/sm-ntl_tcm9-62147.gif") top left no-repeat;
    	font-size:80%;
    	}
    #right {
    	float:right;
    	width:173px;
    	margin:0; padding:0;
    	background:url("/images/sm-ntr_tcm9-62146.gif") top right no-repeat;
    	font-size:80%;
    	}
    #middle {
    	margin:0 173px;
    	background:white;
    	font-size:80%;
    	}
    .column-in {
    	margin:0; padding:0.5em 1em;
    	}
    .cleaner {
    	clear:both;
    	height:1px;
    	font-size:1px;
    	border:none;
    	margin:0; padding:0;
    	background:transparent;
    	}
    .copy { text-align:center; font-size:80% }
    .line {
    	border-style: none none solid none;
    	border-bottom-width: 3px; 
    	border-color: #9FB3DE;
    	}
    Thanks,

    Nick

  • #2
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    I don't see a problem with the white background. Unless you've fixed it. I refreshed 5 times and nothing changed. Also on some systems your internet will not fully load 100% of the content, or it will start loading a picture halfway and then stop loading it. I believe this is caused by too much or too large of files on one webpage.

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi,

    Thanks for your reply, it only seems to do it sometimes on my version of IE 6, but for other people in the office, it happens every time they open it or resize the window. I can't seem to work out why it would be doing this. I will have a look at reducing the amount of content on the page, just to rule that out.
    Does any one else have any ideas?

    Thanks,

    Nick

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Just in case this helps any one else, I had to put the following in my stylesheet to fix the problem I was having in IE.

    * html #middle,
    * html #main3,
    * html #main4,
    * html #column-in {
    height:1px;
    }

    Thanks,

    Nick


  •  

    Posting Permissions

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