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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile IE lowers content away from page

    Hey guys,

    My site looks fine in firefox but in IE6 it lowers the content section away from the page, see the link.

    http://winuser.widget-it.com

    Can anyone suggest away to fix this ?

    Thanks for your time,

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Try adding this to the VERY TOP of your CSS:
    Code:
    * {margin:0;padding:0;}
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, I just tried it but im afraid it didnt make any difference.

    Any other ideas ?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I don't have IE 6 on this machine so I can only guess at random from this point on. The margin:0;padding:0; is often the solution, but if it's not working for your page you'll need to find another workaround.

    One idea is to use a conditional statement for IE6 to add a separate CSS file. This separate CSS file would only need to include the code snippet to fix the margin or padding that offends your design.

    Run a google search on conditional statements in HTML for IE6 to get a start.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    I just did a browsershot of your page in IE6 here (http://api.browsershots.org/png/orig...bd922951c7.png). I see what you are talking about. That looks like an issue with width. Decrease the width of either your floated div or the other content div and see if that slides up.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for doing that.

    I have tried experimenting with the content width but it seemed to make no difference.

    It was the .main width I was editing

    I have included some of the code that controls the structure to show you.

    Your time is really appreciated.

    Code:
    /*---------------------------------------------------------structure---*/
    
    #body {
    	background:#4c618b url(uploads/images/tail.gif) repeat-x 0 0;
    }
    .main 	{
    	width:911px;
    }
    
    /*-------------------------------------header---*/
    #top {
    	height:122px;
    	overflow:hidden;
    }
    #header {
    	background:url(uploads/images/header.jpg) no-repeat right 12px;
    	height:235px;
    	overflow:hidden;
    }
    
    #logo {
    	float:left;
    	width:500px	
    }
    #logo .space {
    	padding:39px 0px 0px 38px;
    }
    #topmenu {
    	height:51px;
    	padding:0px 10px 0px 10px;
    }
    #search {
    	float:right;
    	width:249px;
    }
    #banner {
    	height:230px;
    	margin-bottom:10px;
    }
    #banners {
    	background:url(uploads/images/banners-bg.jpg) repeat-x 0 0 #204381;
    	min-height:112px; height:auto !important; height:112px; 
    	margin-bottom:10px;
    	width:100%;
    	overflow:hidden;
    }
    	.banners-top-right {
    		background:url(uploads/images/banners-top-right.jpg) no-repeat right 0;
    	}
    	.banners-top-left {
    		background:url(uploads/images/banners-top-left.jpg) no-repeat 0 0;
    	}
    	.banners-bottom-right {
    		background:url(uploads/images/banners-bottom-right.jpg) no-repeat right bottom;
    		min-height:112px; height:auto !important; height:112px; 
    	}
    	.banners-bottom-left {
    		background:url(uploads/images/banners-bottom-left.jpg) no-repeat 0 bottom;
    	}
    
    /*-------------------------------------content---*/
    #content {
    	width:100%;
    }
    .corner-top-left {
    	background:url(uploads/images/corner-top-left.gif) no-repeat 0 0 #fff;
    }
    .corner-top-right {
    	background:url(uploads/images/corner-top-right.gif) no-repeat right 0;
    }
    .corner-bottom-left {
    	background:url(uploads/images/corner-bottom-left.gif) no-repeat 0 bottom;
    	width:100%;
    }
    .corner-bottom-right {
    	background:url(uploads/images/corner-bottom-right.gif) no-repeat right 0;
    	width:100%;
    }
    .border-bottom {
    	background:#fff;
    	margin:0px 14px 0px 14px;
    }
    #content-indent {
    	padding:9px 10px 0px 10px;
    }
    #indent {
    	padding:33px 20px 0px 26px;
    }
    #content-indent .width {
    	overflow:hidden;
    	}
    .article-top-left {
    	background:url(uploads/images/article-top-left.gif) no-repeat 0 0 #fff6bf;
    }
    .article-top-right {
    	background:url(uploads/images/article-top-right.gif) no-repeat right 0;
    	width:100%;
    }
    .article-bottom-left {
    	background:url(uploads/images/article-bottom-left.gif) no-repeat 0 bottom;
    }
    .article-bottom-right {
    	background:url(uploads/images/article-bottom-right.gif) no-repeat right bottom;
    }
    	#right, #left {
    		background:url(uploads/images/box-top.gif) no-repeat 0 0 #d4e3f6
    	}
    	#right .bottom, #left .bottom {
    		background:url(uploads/images/box-bottom.gif) no-repeat 0 bottom;
    		z-index:99;
    		padding:0px 0px 5px 0px;
    	}
    	#right {
    		float:right;
    		width:218px;
    	}
    	#left {
    		float:left;
    		width:218px;
    	}
    	#container {
    		margin:0px 226px 0px 226px;
    	}
    	* html #container {
    		margin:0px 223px 0px 223px;
    	}
    	#container2 {
    		margin:0px 226px 0px 0px;
    	}
    	* html #container2 {
    		margin:0px 223px 0px 0px;
    	}
    	#container3 {
    		margin:0px 0px 0px 226px;
    	}
    	* html #container3 {
    		margin:0px 0px 0px 223px;
    	}
    	#container23 {
    		margin:0px 0px 0px 0px;
    	}
    	* html #container23 {
    		margin:0px 0px 0px 0px;
    	}
    .content-top {
    	background:url(uploads/images/content-top.gif) repeat-x 0 0;
    	width:100%;
    }
    .content-top-left {
    	background:url(uploads/images/content-top-left.gif) no-repeat 0 0;
    }
    .content-top-right {
    	background:url(uploads/images/content-top-right.gif) no-repeat right 0;
    	min-height:242px; height:auto !important; height:242px; 
    }
    .comp-cont {
    	width:100%;
    }
    .clr {
    	clear:both;
    }
    .user1, .user2, .user3 {
    	width:25%;
    	float:left;
    }
    .user4 {
    	width:24%;
    	float:left
    }
    .user1, .user2, .user3 {
    	background:url(uploads/images/banners-border.gif) repeat-y right 0;
    	min-height:112px; height:auto !important; height:112px; 
    }
    .user1 .space, .user2 .space, .user3 .space, .user4 .space {
    	padding:15px 10px 10px 23px;
    	color:#c2e3ff;
    	font-size:13px;
    }
    
    .user1 a, .user2 a, .user3 a, .user4 a {
    	color:#c2e3ff;
    	font-size:13px;
    }
    .user1 a:hover, 
    .user2 a:hover, 
    .user3 a:hover, 
    .user4 a:hover,
    .user1 a:visited, 
    .user2 a:visited, 
    .user3 a:visited, 
    .user4 a:visited {
    	color:#c2e3ff;
    	font-size:13px;
    }

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello spngbob111,
    I keep coming back to this and looking but I still haven't found a cause.
    Float drop can be really hard to debug, especially if you don't have the code/images local so you can test code as you edit.
    At first I thought it might be your box model but it appears to be right - as long as I didn't miss something else in your huge CSS files.
    I suppose it could be that IE6 is not seeing your * html hack... that would mean the 3px bug is what's dropping your float. Maybe.
    Maybe you can have a look through this page and see if you're being affected by any of the better known bugs - http://www.positioniseverything.net/explorer.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks guys, but still no luck,

    I have added a style sheet that I was using before is fixed some issues with the text but still not the major issue.

    Heres the new style sheet:

    Code:
    /* CSS Document */
    *		{
    	padding:0px 0px 0px 0px; 
    	margin:0px 0px 0px 0px;
    }
    
    html	{
    	height:100%
    }
    
    body 	{
    	text-align:center
    }
    
    table 	{
    	border-collapse:collapse; 
    	border:0px; 
    	width:100%;
    }
    
    td 		{
    	vertical-align:top
    }
    
    th 		{
    	text-align:left; 
    	vertical-align:top
    }
    
    img		{
    	border:none
    }
    
    h1 		{
    	font-size:130%
    }
    h2 		{
    	font-size:120%
    }
    h3 		{
    	font-size:110%
    }
    h4		{
    	font-size:110%
    }
    
    
    p		{
    	padding:0px 0px 10px 0px;
    }
    
    textarea .inputbox {
    	width:300px; 
    	height:100px; 
    	margin:0px 0px 5px 0px;
    }
    
    select	{
    	height:auto; 
    	margin:0px 0px 2px 0px; 
    	vertical-align:middle
    }
    
    ul {
    	list-style:disc;
    	margin:0px 0px 0px 15px;
    }
    ol {
    	margin:0px 0px 0px 15px;
    }
    
    
    .width	{
    	width:100%
    }
    .main	{
    	margin:auto; 
    	text-align:left
    }
    Last edited by spngebob111; 02-22-2009 at 07:02 PM.

  • #9
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    If its this hard to solve, would you guys recommend just leaving it. I dont think that many people use IE6 ?

    Thanks again,

  • #10
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    The problem is in your stylesheet_4.css file:
    Code:
    .content-top {
    	background:url(../images/content-top.gif) repeat-x 0 0;
    	width:100%;
    }
    This 100% is inheriting a width of 619px from it's parent. You can fix this by assigning a fixed value to the width:
    Code:
    .content-top {
    	background:url(../images/content-top.gif) repeat-x 0 0;
    	width:616px;
    }
    This should solve your problem. You have a "3 pixel jog" in ie6, so by making it 3 pixels less, it moves up.

  • Users who have thanked Fisher for this post:

    spngebob111 (02-23-2009)

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by spngebob111 View Post
    If its this hard to solve, would you guys recommend just leaving it. I dont think that many people use IE6 ?

    Thanks again,
    Alienating up to 20% of the visitors to your site does not seem like good business.


    Good catch on the 3px jog Fisher!
    spngebob111, you need to give him a thanks for that one. Just hit that "Thank user for this helpful post" button.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    spngebob111 (02-23-2009)

  • #12
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I just wanted to thank you both for all your time and effort. I wouldnt have been able to solve it without you guys.

    The only problem is it kind of shrinks the content area to much so its not aligned with the banner above it. I fixed this by changing 616 to 665 im not sure why that worked though ?
    Last edited by spngebob111; 02-24-2009 at 12:06 AM.


  •  

    Posting Permissions

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