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 7 of 7

Thread: IE6 Issue

  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE6 Issue

    Hi, could someone take a look at the attached and let me know why it's not showing correctly in IE6?

    Download Link

    Thanks.

  • #2
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post
    IE 6 doesn't collapse margins if a height or width is applied.
    see here http://reference.sitepoint.com/css/collapsingmargins#

    Replace your heights with padding.

    Or look up conditional comments for IE.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks LE1, I replaced the heights with padding it it looks worse than the bride of Frankenstein still in IE6..

  • #4
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post
    Oh.....
    have you played around with the margins, these are interpreted different in IE.
    Again have a look at Conditional Comments
    you can use these to apply a margin change to IE6 only.

  • #5
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post
    If you are still having problems,
    If I get time i will take a look.

  • #6
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post
    I think excavator has the right idea see this post


    <!--[if lt IE 7]>
    <div id="ie6Warning">
    <h2>Time to upgrade your browser</h2>
    <p>
    If you're reading this, you're surfing using Internet Explorer 6, an eight-year-old browser that
    cannot cope with the demands of the modern internet. For the best web experience, we strongly recommend
    upgrading to <a href="http://www.getfirefox.com/">Firefox</a>, <a href="http://www.opera.com/">Opera</a>,
    <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.google.com/chrome">Google Chrome</a>,
    or a more recent version of <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet
    Explorer</a>.
    </p>
    </div>
    <![endif]-->

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,680
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello theflyingminstr,
    I'm not sure how much help I can be since I don't have IE6 to view your site with. Try making these changes -
    Code:
    <div id="wrap">
    	<div id="head">
    		<ul class="navbar">
    			<li><a href="#">Products</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Contact</a></li>
    		</ul>
    		<h1 class="title">Simpler</h1>
    	</div>
    	<div id="main">
    		<div id="splash"></div>
    			<h2 class="subtitle">Simpler - subtitle.</h2>
    		<div id="content">
    			<div class="box" id="what">
    				 <h2>What we do.</h2>
    				 <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. 
    				 Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, 
    				 accompanied by English versions from the 1914 translation by H. Rackham.</p>
    			</div>
    Code:
    body {
    	background: #ccc url('i/body_bg.png') repeat-x;
    	font: 70%/1.6em 'Lucida Sans',Verdana,sans-serif;
    	color: #333;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #wrap {
    	margin: 0 auto;
    	width: 760px;
    }
    #head {
    	background: url('i/top.png') no-repeat;
    	height: 130px;
    	overflow: auto;
    }
    #head h1.title {
    	margin: 105px 0 0 20px;
    	font-variant: small-caps;
    	color: #fff;	
    }
    #head ul.navbar {
    	padding: 0 0 0 30px;
    }
    #head ul.navbar li {
    	float: left;
    	list-style-type: square;
    }
    #head ul.navbar li a {
    	display: block;
    	padding: 18px 0 0 0;
    	margin: 0 40px 0 0;
    	font-weight: bold;
    	text-transform: uppercase;
    }
    	a:link,a:visited,a:active {
    		text-decoration: none;
    		border-bottom: #900 1px dotted;
    		color: #900;
    	}
    	a:hover {
    		color: #600;
    		border-color: #600;
    	}
    #head #title_box {
    	display: block;
    	position: relative;
    	top: 140px;
    	left: 200px;
    	width: 100px;
    	border: #c00 1px solid;
    }
    #main {
    	background: url('i/main_bg.png') center repeat-y;
    	overflow: auto;
    }
    	#splash {
    		width: 741px;
    		height: 136px;
    		margin: 0 auto;
    		background: url('i/title.jpg') no-repeat;
    	}
    	.subtitle {
    		margin: 8px 0 0 0;
    		padding: 0 15px 0 0;
    		font-variant: small-caps;
    		letter-spacing: 1px;
    		font-size: 14px;
    		text-align: right;
    	}
    #content {
    	margin: 0 10px 10px 10px;
    	text-align: justify;
    	overflow: auto;
    	background: url('i/content_sep.png') repeat-y 48% 0;
    }
    	#content div.box {
    		width: 210px;
    		margin: 0 15px 20px 15px;
    		float: left;
    	}
    		#content h2 {
    			color: #900;
    			margin: 20px 0 0 0;
    			line-height: 20px;
    			background: url('i/content_h2.png') top left no-repeat;
    			padding: 0px 0 0 15px;
    		}
    			#news ul {
    				margin: 10px 0 0 0;
    				list-style: none;
    			}
    			#news li{padding: 2px 0;}
    #footer {
    	clear: both;
    	background: url('i/bot_bg.png') center no-repeat;
    	height: 50px;
    	padding: 0 20px 5px 0;
    	text-align: right;
    	color: #999;
    }
    	#footer p{padding: 20px 0 0 0;}
    It may be, if you still have IE6 problems, that you're invoking an IE6 bug I'm not seeing. Have a look here for a good start at hunting it down.
    If that browser is having trouble with your 3 floats, adding display:inline; to them may clear up a bug? Not sure.

    I'd be curious to see a screencap.
    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


  •  

    Posting Permissions

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