Web Analytics Made Easy -
StatCounter a small problem in IE - CodingForum

Announcement

Collapse
No announcement yet.

a small problem in IE

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • a small problem in IE

    The best way to understand the problem is to just look at.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<title>Untitled Document</title>
    	<style type="text/css">
    
    * {
    	padding: 0;
    	margin: 0;
    	z-index: 0;
    }
    
    body {
    	border: 0;
    	color: #000;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	margin-top: 10px;
    	background: #FF9F00;
    }
    
    #container {
    	min-width: 770px;
    	position: relative;
    	margin: auto;
    	height: 100%;
    }
    
    #contentContainer {
    	width: 770px;
    	position: relative;
    	margin: auto;
    }
    
    #content p {
    	padding: 10px;
    	text-align: justify;
    }
    
    #pageHeader {
    	height: 83px;
    	width: 50%;
    	background: transparent url(http://img162.imageshack.us/img162/333/bluepi0.gif) repeat-x;
    	position: relative;
    }
    
    #contentHead {
    	height: 83px;
    	text-align: left;
    	width: 770px;
    	background: url(http://img162.imageshack.us/img162/333/bluepi0.gif) repeat-x;
    	color: #FFF;
    	margin-top: -83px;
    	position: relative;
    }
    
    #contentHeadEnd {
    	width: 6px;
    	background-image: url(http://img516.imageshack.us/img516/8229/blueendog0.gif);
    	height: 82px;
    	position: absolute;
    	right: -6px;
    	top: 0px;
    }
    
    #contentHead h1 {
    	font-size: 500%;
    	padding-left: 30px;
    }
    
    #contentTextHold {
    	width: 710px;
    	background: #ffffff;
    	margin: 10px;
    	float: left;
    	padding: 20px;
    	border-bottom: 1px solid #666666;
    	border-right: 1px solid #999999;
    	border-left: 1px solid #999999;
    }
    
    #contentText {
    	width: 470px;
    	float: left;
    	border-right: 1px dashed #cccccc;
    	padding-right: 20px;
    	text-align: justify;
    }
    
    #sidebar {
    	width: 200px;
    	float: right;
    	text-align: justify;
    }
    
    #contentFootHold {
    	width: 770px;
    	position: absolute;
    	left: 50%;
    	margin-left: -385px;
    	height: 42px;
    	background: url(http://img421.imageshack.us/img421/3486/blackdh1.gif) repeat-x;
    	line-height: 42px;
    }
    
    #contentFootEnd {
    	width: 7px;
    	height: 42px;
    	position: absolute;
    	top: 0px;
    	left: -5px;
    	background: url(http://img162.imageshack.us/img162/1035/blackendnu2.gif) no-repeat;
    }
    
    #contentFootHold h1 {
    	color: #FFF;
    	font-size: 140%;
    	padding-left: 25px;
    }
    
    #footer {
    	height: 42px;
    	width: 50%;
    	background: url(http://img421.imageshack.us/img421/3486/blackdh1.gif) repeat-x;
    	position: absolute;
    	right: 0;
    }
    
    .clear {
    	clear: both;
    	font: 0;
    	line-height: 0px;
    }
    
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="pageHeader">&nbsp;</div>
    	<div id="contentContainer">
    		<div id="contentHead">
    			<h1>Title</h1>
    			<div id="contentHeadEnd"></div>
    		</div>
    		
    		<div id="contentTextHold">
    			<div id="contentText">
    				<p>This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text. This is simply some sample text.</p>
    			</div>
    			<div id="sidebar">
    				This is simply some sample text. This is simply some sample text.
    			</div>
    		</div>
    		<div class="clear">&nbsp;</div>
    	</div>
    	<div id="contentFootHold">
    		<h1>Footer Text</h1>
    		<div id="contentFootEnd"></div>
    	</div>
    	<div id="footer">&nbsp;</div>
    </div>
    </body>
    </html>
    I don't really understand why it's happening, but the problem is in the top banner. It doesn't extend as far to the right as it should (as far as it does in Firefox, Safari, Opera, etc.).

    I realize some problems are simply not worth the trouble to fix for IE and this maybe one of those, but any help is appreciated.

  • #2
    Why do you keep on breaking things people give you? Refer back to that old layout I coded for you to see where you might have messed up?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      I looked back and the problem is in the section below:

      Code:
      #contentTextHold {
      	width: 710px;
      	background: #ffffff;
      	margin: 10px;
      	float: left;
      	padding: 20px;
      	border-bottom: 1px solid #666666;
      	border-right: 1px solid #999999;
      	border-left: 1px solid #999999;
      }
      It's the margin. I think IE is breaking things here because the widths add up right (width: 710 + [padding: 20x2] + [margin: 10x2] = width of container: 770). What I'm trying to do is center the div in the container. I tried to go about it another way by setting the left and right margins to auto but it doesn't work either.

      Comment


      • #4
        I just tried this (float is gone and marins are on auto):

        Code:
        #contentTextHold {
        	width: 710px;
        	background: #ffffff;
        	margin: 10px auto;
        	padding: 20px;
        	border-bottom: 1px solid #666666;
        	border-right: 1px solid #999999;
        	border-left: 1px solid #999999;
        }

        It displays correctly in IE but is broken in everything else.
        Last edited by brettj; Oct 8, 2006, 05:22 PM.

        Comment

        Working...
        X