SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 CSS Div Problem

    I'm having major headaches with IE. Safari and FF great but...

    This div tag is appearing in a vastly different position in IE:

    Code HTML4Strict:
    <div id="right_text_start">
                            <div class="f i_right">
                              <div id="list_product" class="text">
    				<p> Blah Blah Blah </p>                 
    			</div>
             </div>
    </div>

    Code CSS:
    * {
    margin: 0;
    padding: 0;
    }
     
    #right_text_start{margin-top: -5px; margin-left: 480px; position:absolute;}

    Could anyone give e some tips so it appears in the same position across all 3 browsers?
    Thanks,
    Malloy

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the CSS for the other 2 elements?
    Cheap cables and more.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi malloy,
    Welcome to SitePoint!
    It will help if you will refrain from using words like "text" in your selectors, keep them as short and simple as possible without whitespaces in them.

    <div class="f i_right"> is not a very good name for that class. There's to much room for error there if you ever had to debug anything. You might want to use something like "f-right"

    Anytime you are using absolute positioning you need to give top or bottom and left or right rules to the syntax. The top, right, bottom, left, width, and height properties determine the position and dimensions of an absolutely positioned element.

    This is what you have,

    #right_text_start {
    margin-top: -5px;
    margin-left: 480px;
    position:absolute;
    }

    This is an example of a 400px by 400px div centered, it has the important locations to position with.

    #right_text_start {
    position:absolute;
    top: 10px;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-left:-200px;
    }
    Your #right_text_start seems to be your main div, it could be renamed something simple like #content-right

    Make sure you have a doctype even when you are testing to get good results in all browsers.

    Can you post your complete code so we can see what is going on and what you are wanting to accomplish. There is probably a better way to go about it than absolute positioning.

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Rayzur and for replying really light.

    Here is my css code:
    Code CSS:
    * {
    	margin: 0;
    	padding: 0;
    }
     
    html {
    	background-color: #666666;
    	height: 100%;
    	width: 100%;
    }
     
     
    body {
    	background-color: #666666;
    	text-align:center;
    	font-family: Helvetica, Arial, sans-serif;
    	height: 100%;
    	width: 100%;
    }
     
     
     
    img {border: none;}
     
     
    ul{margin:0px;padding:0px;}
    li{list-style:none}
     
     
     /* CLASSES*/
     
    .gk{border:#FF0000 1px solid}
    .f{ float:left;}
     
    .left{
    	width:30px;
    	height:670px;
    	background-image: url(images/m_left.jpg);
    	background-repeat: repeat-y;
    }
     
    .left_about{
    	width:30px;
    	height:940px;
    	background-image: url(images/m_left.jpg);
    	background-repeat: repeat-y;
    }
     
    .center{ background-color:#FFFFFF;width:782px;height:670px;}
    .center_about{ background-color:#FFFFFF;width:782px;height:940px;}
     
     
    .center_bottom{background-image: url(images/bottom_center.jpg);
    	background-repeat: repeat-x;width:782px;}
     
    	.center_bottom_about{background-image: url(images/bottom_center.jpg);
    		background-repeat: repeat-x;width:782px;}
     
    .right{
    	width:30px;
    	height:670px;
    	background-image: url(images/m_right.jpg);
    	background-repeat: repeat-y;
    }
     
    .right_about{
    	width:30px;
    	height:940px;
    	background-image: url(images/m_right.jpg);
    	background-repeat: repeat-y;
    }
     
     
    .c_t_center{
    	background-image: url(images/c_t_center.jpg);
    	background-repeat: repeat-x;
    	height:35px;width:714px;
    }
     
    .info{
        width:730px;
    	background-color: #FFFFFF;
    	height: 200px;
    	}
     
    .i_left{width:240px;margin-left:30px;font-family: "Helvetica, Arial, sans-serif";}
    .product_left{width:430px;margin-left:30px;font-family: "Helvetica, Arial, sans-serif";}
    .i_center{width:200px;margin-left:26px;padding-top:10px; padding-bottom:10px;  border-right:1px #999999 solid; margin-top:15px;font-family:"Helvetica, Arial, sans-serif";}
    .i_right{width:192px;color:#808080;font-size:13px;padding-top:40px; margin-left:30px; text-align:left;font-family:"Helvetica, Arial, sans-serif"; }
     
    .footer{margin-left:380px;color:#888888; font-size: 10px; font-family:"Helvetica, Arial, sans-serif"; }
     
    .heading{
    	font-size:16px;
    	font-weight: bold;
    	padding-bottom:15px;
    	text-align:left;
    	color:#808080;
    	font-family:"Helvetica, Arial, sans-serif";
    }
     
    .heading_nobold{
    	font-size:14px;
    	padding-bottom:15px;
    	text-align:left;
    	color:#808080;
    	font-family:"Helvetica, Arial, sans-serif";
    }
     
    .sub_heading{
    	font-size:12px;
    	font-weight:bold;
    	color:#808080;
    	padding-bottom:5px;
    	font-family:"Helvetica, Arial, sans-serif";
    }
    .text{font-size:11px;color:#808080;}
    .title3{font-size:18px;color:#3593D0;font-family: "Helvetica, sans-serif";}
     
    .blue{color:#3593D0;}
     
     
     /* ID's*/
     
    #container{width:842px; background-color:#666666;padding-top:23px;margin:auto; font-size: 10px;} 
    #content{width:730px; height:670px;margin:auto; }
    #content_top{width:730px; font-size: 10px;}
    #menu{ text-align:right;margin-top:30px;width:380px; height:42px;  margin-left:68px; }
     
    #menu li{margin-right:0px;color:#CCCCCC;font-size:12px; text-align:right; }
    #menu ul{text-align:right;height:40px;}
    #footer{text-align:left;padding-left:25px; font-family:"Helvetica, Arial, sans-serif";}
    #footer_about{text-align:left;padding-left:25px; font-family:"Helvetica, Arial, sans-serif";}
     
    #right_text{top: 372px; position: absolute;}
    #right_text_product{margin-top: -5px; margin-left: 500px; position: absolute;}
    #right_text_start{margin-top: -5px; margin-left: 480px; position: absolute;}
    #quote_about{margin-left: 500px;}



    And HTML:
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"">
     
    <html xmlns="" xml:lang="en" lang="en">
    <head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<meta name="author" content="" />
    		<meta name="keywords" content="" />
    		<meta name="description" content="" />
    		<meta name="robots" content="all" />
     
    		<title></title>
     
    		<link href="style.css" rel="stylesheet" type="text/css" />
    		<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    	    <link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" />
    </head>
     
    <body>
    <div id="container">
     
    	<!-- TOP BORDER-->
         <div id="top" >
    		 <div class="f"><img src="images/cnr_top_left.jpg" width="30" height="25" /></div>
    		 <div class="f center" style="height:25px;"></div>
    		 <div class="f"><img src="images/cnr_top_right.jpg" width="30" height="25" /></div>
    	</div>
     
    	<div id="middle" >
    	      <div class="left f" ></div>
    		  <div class="f center">
    		       <div id="content">
     
     
     
    			       <div id="content_top">
    			                <div  id="logo" class="f"><img class="img" src="images/logo.jpg" width="282" height="60" alt="HubWorks!"></div>
     
     
    						<!-- NAVIGATION-->
     
    							<div id="menu" class="f" >
    				      <ul >
    					     <li class="f"><a class="homerollover" href="index.html"></a></li>
    					      <li class="f"><img src="images/spacer.gif" width="15" height="31" alt=""></li>
     
    		                  <li class="f"><a class="productrollover" href="product.html"></a></li>
    					      <li class="f"><img src="images/spacer.gif" width="15" height="31" alt=""></li>
     
    						  <li class="f"><a class="startedrollover" href="start.html"></a></li>
    					      <li class="f"><img src="images/spacer.gif" width="15" height="31" alt=""></li>
     
    						  <li class="f"><a class="aboutrollover" href="about.html"></a></li>
    					  </ul>
    					  </ul>
     
    				      </div>
    			     </div>
    			      <div style=" width:730px"><img src="images/panel_start.jpg" width="731" height="259" /></div> 
    				  <div class="f" style="width:8px"><img src="images/c_t_left.jpg" width="8" height="35" /></div>
    		          <div class="f center c_t_center" ></div>
    		          <div class="f" style="width:8px"><img src="images/c_t_right.jpg" width="8" height="35" /></div>
    				  <div id="info" >
    				   <div class="info">
     
     
                            <div class="f product_left">
    							<div class="sub_heading" style="text-align:left;">Getting started</div>
    							<div style="text-align:left;" class="text">
    							  <p><em>For services new to CCFMS</em> </p>
     							<div id="list_product">
     
    								<ul>
    							  <li>Complete the online purchase form or contact us</li>
    							  <li>Wait for your unique username and password to be sent from Gov</li>
    							  <li>Receive a user name and password to your new website and/or central existing website</li>
     
    								</ul>
    							  <br />
    							</div>
     
     
    <br />
    							<div class="sub_heading" style="text-align:left;">How to make the switch</div>
    							<div style="text-align:left;" class="text">
    							<p><em>For services already using CCFMS</em>    </p>
     
    							<div id="list_product">
    								<ul>
    							  <li>Complete the online "Transfer" form</li>
    							  <li>Complete the online purchase form or contact us</li>
    							  <li>Receive a user name and password to your new website and/or central existing website</li>
     
    								</ul>
    							</div>
    							</div>
    </div>
     
     
     
    <div class="text" style="text-align:left;"><b></b><br />
    </div>
    </div> 
     
     
                            <div class="f i_right">
    <div class="sub_heading" style="text-align:left;">How to parents register?</div>
                              <div id="list_product" class="text">
    							<ul>
    						<li>Log on to the childcare services website</li>
    						<li>Fill in the child's details</li>
    						<li>Wait for an email confirmation with login details</li>
    						</div>
                         </div>
     
     
    				   </div></div>
     
    				<!-- BOTTOM BORDER -->
     
    			   </div>
    		  </div>
    		  <div class="f right" ></div>
    	</div>
    	<div id="bottom">
    	     <div class="f"><img src="images/cnr_bottom_left.jpg" width="30" height="15" /></div>
    		 <div class="f center_bottom" style="height:15px;"></div>
    		 <div class="f"><img src="images/cnr_bottom_right.jpg" width="30" height="15" /></div>
    	</div>
     
     
     
     
    </div>
     
     
     
     
     
    </body>
    </html>

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I will check back at your thread tomorrow, it's lights out for me right now.

    For starters you have some extra closing tags and some missing closing tags.

    Run your html through the W3C validator
    And your CSS through that validator

    That will get you started fixing some errors, also tell us how you are wanting to position the div in question. Width, Height, Left, Top etc.

    I'll check back, but someone else may step in and continue where I left off.

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks Razor! You are most helpful with your replies. I will give your advice a go and let you know how I go.

    Thanks,
    Malloy

  7. #7
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Rayzur,

    your:

    #right_text_start {
    position:absolute;
    top: 10px;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-left:-200px;
    }

    trick has given me a temporary fix until I get rid of these absolute divs completely.

    Thank you very much.
    David

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your Welcome!

    You may have already figured it out, but the margin-left:-200px is simply half of the 400px width. That allows the left:50% to position the div as dead center.

    Whatever you make the width, give half as a negative left margin if you use the 50% left postion.

    If you need to position it off center then completely remove the margin-left rule and give the left position a px value.

    eg. left:20px;

    Glad it helped you out


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
  •