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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    ie broken but firefox/chrome work fine (3-part header right broke)

    I'm working on a page and get it to work fine in firefox and chrome, only to find that ie isn't working properly.

    I made a 3 column layout with a 3 part header. There is also a shortbar between the header and columns. It displays exactly like I want it to in the other browsers but ie is giving me a headache.

    html:
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untilted</title>
    
    <link href="percentfun.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    
    <div id="totalcontent">
    
    <div id="headerright">
    	<h1>login</h1>
      </div>
      
    <div id="headermiddle">
    	<h1>search</h1>
        </div>
    
    <div id="headerleft">
    
    	<h1>header</h1>
    </div>
    
    
    
    
    <div class="colmask threecol">
    <div class="colmid">
    		<div class="colleft">
    			<div class="col1">
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    <p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<!-- Column 1 end -->
    	    </div>
    			<div class="col2">
    				<!-- Column 2 start -->
    				<h2>&nbsp;</h2>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
          <p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<!-- Column 2 end -->
    	    </div>
    			<div class="col3">
    				<!-- Column 3 start -->
    				<div id="ads">
    				  <p>&nbsp;</p>
    				  <p>&nbsp;</p>
    				</div>
    			  <h2>&nbsp;</h2>
    			  <p>right</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    			  <p>&nbsp;</p>
    <p>&nbsp;</p>
    				<!-- Column 3 end -->
    			</div>
    		</div>
    	</div>
    </div>
    <div id="footer">
    	<p>foooooooooooter</p>
    </div></div>
    </body>
    </html>
    css
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	margin:0;
    	padding:0;
    	border:0;			/* This removes the border around the viewport in old versions of IE */
    	width:100%;
    	background:#fff;
    	min-width:600px;		/* Minimum width of layout - remove line if not required */
    					/* The min-width property does not work in old versions of Internet Explorer */
    	font-size:90%;
    }
    
    
    #totalcontent
    {
    	margin-left: 5px;
    	margin-right: 5px;
    	background:#fff
    }
    
    #shortbar
    {
    	margin-right:28%;
    	margin-left: 28%;
    	top: 73px;
    	height: 20px;
    }
    	
    
    #headerleft
    {
    	position: absolute;
    	top: 0;
    	left: 0;
    	height:73px;
    	margin-right:75%;
    	border: ridge thin #777;
    
    
    	//margin-right:208px;
    	width: 25%;
    }
    
    #headermiddle
    {
    	height:73px;
    	margin-left:25%;
    	margin-right:25%;
    	border: ridge thin #777;
    }
    #headerright
    {
    	clear:none;
    	position:absolute;
    	top: 0;
    	right: 0;
    	height:73px;
    	border:ridge thin #777;
    	float: right;
    	width: 25%;
    	margin-left: 75%;
    	//width: 206px;
    	//right: 15px;
    	//top: 16px;
    }
    /* column container */
    .colmask {
    	position:relative;	/* This fixes the IE7 overflow hidden bug */
    	clear:both;
    	float:left;
    	width:100%;			/* width of whole page */
    	overflow:hidden;		/* This chops off any overhanging divs */
    }
    /* common column settings */
    .colright,
    .colmid,
    .colleft {
    	float:left;
    	width:100%;			/* width of page */
    	position:relative;
    }
    .col1,
    .col2,
    .col3 {
    	float:left;
    	position:relative;
    	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
    					only padding top and bottom is included here, make it whatever value you need */
    	overflow:hidden;
    }
    /* 3 Column settings */
    .threecol {
    	background:#eee;		/* right column background colour */
    }
    .threecol .colmid {
    	right:25%;			/* width of the right column */
    	background:#fff;		/* center column background colour */
    }
    .threecol .colleft {
    	right:50%;			/* width of the middle column */
    	background:#f4f4f4;	/* left column background colour */
    }
    .threecol .col1 {
    	overflow:scroll;
    	width:46%;			/* width of center column content (column width minus padding on either side) */
    	left:102%;			/* 100% plus left padding of center column */
    }
    .threecol .col2 {
    	width:21%;			/* Width of left column content (column width minus padding on either side) */
    	left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    }
    .threecol .col3 {
    	width:21%;			/* Width of right column content (column width minus padding on either side) */
    	left:85%;			/* Please make note of the brackets here:
    					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    }
    /* Footer styles */
    #footer {
    	clear:both;
    	float:left;
    	width:100%;
    	border-top:1px solid #000;
    }
    #footer p {
    	padding:10px;
    	margin:0;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It's not a good practice to use too much absolute positions as they have some pitfalls. I'd recommend you to check http://bonrouge.com/3c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,

    Your coding is working good. I didn't found any mistake in that.

    It was Opening exactly what you have designed.

    Opening good in Firefox, Chrome, IE8.

    Try it Again.


    ------------
    internet marketing services
    plr

  • Users who have thanked Seo-Services for this post:

    thecssshack (08-01-2010)

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi Seo-Services,

    you are right.

    This coding is working well.

    I checked this coding with firefox 3.6.8, Chrome 5.0.3 and IE 8.

    I am getting eaxct display in all of this three browsers.


    ----------
    8th Wonder Income Marketing System

  • Users who have thanked eighthwonder for this post:

    thecssshack (08-01-2010)

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hmm its strange cause I am still having the same problem in my ie, maybe it is a problem with my version or something that is wrong with it. Its good to know that it is working on others ie though. My ie is really buggy on vista so I think that might be the problem. Thanks for checking guys!

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks for checking guys!
    They were just two spams
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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