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
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Is this IE 3px bug?

    In Firefox this is fine, but in IE, my right hand border doesn't line up as it should, but instead pushes out a few pixels. I tried messing with the width and putting in something to combat this in IE but to no avail. The section in question (I think) is this:

    #rightboxes, #rightcontent {
    width:535px;
    padding:5px 0 0 0;
    margin-left:210px;
    }

    The page is up here so you can see it: http://www.yourthreshold.com/staging.../indexTest.htm

    Code:

    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></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    
    html,body {
    	margin:0;
    	padding:0;
    	text-align: center; /* IE5/Win fix */
    	height:100%;
    	font-size:11px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	background-color:#FFFFFF;
    	color:#333333;
    	}
    #wrapper {
    	width:750px;
    	margin:auto;
    	position:relative;
    	padding-bottom:5px;
    	}
    #top {
    	width:750px;
        height:60px;
        padding:5px 1px 0 3px;
        position:inherit;
        }
    #toplink {
    	height:60px;
    	width:365px;
    	margin-left:380px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color:#666666;
    	}
    #logohead {
    	position:absolute;
    	width:250px;
    	height:57px;
    	background-repeat:no-repeat;
    	left:28px;
    	top:22px;
    	z-index:5000;
    	}
    #nav {
    	list-style:none;
    	width:416px;
    	float:right;
    	width:420px; !important
    	}
    #nav li {
    	width:100px;
    	height:20px;
    	margin-left:4px;
    	float:left;
    	position:relative;
    	}
    a.inactive, a.inactive:link, a.inactive:visited, a.inactive:active {
    	display:block;
    	height:15px;
    	background-image:url(images/inactive.gif);
    	background-repeat:no-repeat;
    	color:#999999;
    	text-align:center;
    	text-decoration:none;
    	padding-top:5px;
    	font-weight:bold;
    	}
    a.inactive:hover {
    	color:#888888;
    	}
    a.active, a.active:link, a.active:visited, a.active:active {
    	display:block;
    	position:absolute;
    	width:100px;
    	height:16px;
    	top:0;
    	left:0;
    	z-index:1;
    	background-image:url(images/active.gif);
    	background-repeat:no-repeat;
    	color:#334C99;
    	text-align:center;
    	text-decoration:none;
    	padding-top:5px;
    	font-weight:bold;
    	}
    #subnav {
    	list-style:none;
    	background-image:url(images/subnav_background1.gif);
    	height:22px;
    	clear:both;
    	border:1px solid #CECECE;
    	color:#999999;
    	}
    #subnav li {
    	width:105px; /*124px*/
    	height:18px;
    	text-align:center;
    	float:right; /*Change order of subnavs high to low or low to high*/
    	}
    #subnav li a, #subnav li a:link, #subnav li a:visited, #subnav li a:active {
    	display:block;
    	height:14px;
    	padding-top:4px;
    	text-decoration:none;
    	} 
    #subnav li a, #subnav li a:link, #subnav li a:visited {
    	color:#999999;
    	}
    #subnav li a:hover {
    	color:#777777; /*CHANGE ME TO BLUE, ORANGE, OR SOMETHING*/
    	}
    #subnav li a:active {
    	color:#334C99;
    	}
    #midbanner {
    	height:170px;
    	background-image:url(images/bannerblue.gif);
    	background-repeat:no-repeat;
    	/*margin-bottom:3px;*/
    	}
    #bottomcontent {
    	text-align:left;
    	color:#000000;
    	border:1px solid #DDDDDD;
    	border-bottom:0;
    	padding-bottom:10px;
    	}
    	#leftboxes {
    		width:188px;
    		height:auto;
    		padding:5px 5px 0 5px;
    		float:left;
    		/*border-right:1px dashed #CCCCCC;*/
    		}
    		
    			.leftbox, .leftboxBottom {
    			height:80px;
    			width:98%;
    			border:1px solid #DDDDDD; /*#CCCCCC*/
    			background-image:url(images/leftboxstripSM.gif);
    			background-repeat:repeat-x;
    			background-position:top;
    			color:#334C99;
    			font-family:Verdana, Arial, Helvetica, sans-serif;
    			font-size:11px;
    			font-weight:bold;
    			padding-top:2px;
    			}
    			
    			.leftbox{
    			margin-bottom:10px;
    			}
    		
    		#rightboxes, #rightcontent {
    		width:535px;
    		padding:5px 0 0 0;
    		margin-left:210px;
    		}
    			.rightbox1, .rightbox2, .rightbox3 {
    			position:relative;
    			height:176px;
    			width:165px;
    			background-image:url(images/teststrip8z.gif);
    			background-repeat:no-repeat;
    			background-position:top;
    			color:#ffffff;
    			font-weight:bold;
    			}
    			
    			.rightbox1 {
    			float:left;
    			}
    			
    			.rightbox2 {
    			margin-left:183px;
    			padding-top: 1px;
    			}
    			
    			.rightbox3 {
    			float:right;
    			}
    			
    			.packagetitle {
    			margin: 5px 0 0 28px;
    			font-size:12px;
    			}
    			
    			.packagecontent {
    			margin: 12px 0 0 50px;
    			font-size:9px;
    			font-weight:normal;
    			color:#666666;
    			line-height:15px;
    			height:1%; /*Holly Hack for IE*/
    			}
    			
    			.packageimg1, .packageimg2, .packageimg3 {
    			width:45px;
    			height:49px;
    			margin:30px 0 0 0;
    			background-repeat:no-repeat;
    			float:left;
    			}
    			
    			.packageimg1 {
    			background-image:url(images/pkg_personal1.gif);
    			}
    			
    			.packageimg2 {
    			background-image:url(images/pkg_smallbiz1.gif)
    			}
    			
    			.packageimg3 {
    			background-image:url(images/pkg_corporate1.gif);
    			}
    			
    		#bottombox {
    			height:80px;
    			width:525px;
    			margin-top:10px;
    			border:1px solid #DDDDDD;
    			}
    		
    /* hide from IE/Mac \*/
    * html #bottomcontent,* html #midbanner {
      width:750.5px;
      wid\th:750px;
      }
    /* end hide */
    #footer {
    	position:relative;
    	background: #FFFFFF url("images/footer_main2.gif") top left repeat-x;
    	height:30px;
    	margin:0 0 5px 0;
    	padding:0px;
    	border-top:1px solid #EEEEEE;
    	}
    #footercontent {
    	position:relative;
    	left:auto;
    	right:auto;
    	top:2px;
    	font-size:9px;
    	color:#999999;
    	}
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="top">
    		<div id="logohead"></div>
    		<div id="toplink" align="right"><img src="images/arrows2_1.gif">Client Login</div>
      </div>
    	<ul id="nav">
    		<li><a class="active" href="#">Home</a></li>
    		<li><a class="inactive" href="#">Hosting</a></li>
    		<li><a class="inactive" href="#">Network</a></li>
    		<li><a class="inactive" href="#">About</a></li>
    	</ul>
    	<ul id="subnav">
    		<li><a href="#">&nbsp;</a></li>
    	</ul>
    	<div id="midbanner"></div>
    	 <div id="bottomcontent">
    		<div id="leftboxes">
    			<div class="leftbox"><img src="images/bluearrows2.gif"></div>
    			<div class="leftbox"><img src="images/bluearrows2.gif"></div>
    			<div class="leftboxBottom"><img src="images/bluearrows2.gif"></div>
    		</div>
    		<div id="rightboxes">
    			<div class="rightbox1">
    				<div class="packagetitle"><p>&nbsp;</p></div>
    				<div class="packageimg1"></div>
    				<div class="packagecontent">
    					<p>300MB Disk Space</p>
    					<p>3GB Transfer</p>
    					<p>Unlimited Subdomains</p>
    					<p>Unlimited Emails</p>
    					<p>Unlimited Databases</p>
    					<p>Free Setup</p>
    					<p>24/7 Support</p>
    					<p><a href="#">More</a> | <a href="#">Order</a></p>
    				</div>
    			</div>
    			<div class="rightbox3">
    				<div class="packagetitle"><p>&nbsp;</p></div>
    				<div class="packageimg3"></div>
    				<div class="packagecontent">
    					<p>1000MB Disk Space</p>
    					<p>8GB Transfer</p>
    					<p>Unlimited Subdomains</p>
    					<p>Unlimited Emails</p>
    					<p>Unlimited Databases</p>
    					<p>Free Setup</p>
    					<p>24/7 Support</p>
    					<p><a href="#">More</a> | <a href="#">Order</a></p>
    				</div>
    			</div>
    			<div class="rightbox2">
    				<div class="packagetitle"><p>&nbsp;</p></div>
    				<div class="packageimg2"></div>
    				<div class="packagecontent">
    					<p>500MB Disk Space</p>
    					<p>5GB Transfer</p>
    					<p>Unlimited Subdomains</p>
    					<p>Unlimited Emails</p>
    					<p>Unlimited Databases</p>
    					<p>Free Setup</p>
    					<p>24/7 Support</p>
    					<p><a href="#">More</a> | <a href="#">Order</a></p>
    				</div>
    			</div>
    			<div id="bottombox">Ad #4</div>
    		</div>
      </div>
      <div id="footer">
    	  <img src="images/footer_left2.gif" style="float: left">
    	  <img src="images/footer_right2.gif" style="float: right">
    	  <div id="footercontent"></div>
      </div>
      <div id="footer2">
      	<div id="f2left"></div>
    	<div id="f2right"></div>
      </div>
    </div><!--end Wrapper-->
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think your implementation of the Holly Hack is quite right. You've got 1% percent height on .packagecontent but you're feeding it to all browsers, not just IE. And the area you have commented out at the bottom to hide from IE/Mac actually seems to be the problem. Also AFAIK, pixels measurements should be whole numbers.

    Code:
    .packagecontent {
    	margin: 12px 0 0 50px;
    	font-size:9px;
    	font-weight:normal;
    	color:#666666;
    	line-height:15px;
    	height:1%; /*Holly Hack for IE*/
    	}
    			
    	.packageimg1, .packageimg2, .packageimg3 {
    	width:45px;
            height:49px;
    	margin:30px 0 0 0;
    	background-repeat:no-repeat;
    	float:left;
    	}
    			
    .packageimg1 {
    	background-image:url(images/pkg_personal1.gif);
    	}
    			
    .packageimg2 {
    	background-image:url(images/pkg_smallbiz1.gif)
    	}
    			
    .packageimg3 {
    	background-image:url(images/pkg_corporate1.gif);
    	}
    			
    #bottombox {
    	height:80px;
    	width:525px;
    	margin-top:10px;
    	border:1px solid #DDDDDD;
    	}
    		
    /* hide from IE/Mac \*/
    * html #bottomcontent,* html #midbanner {
      width:750.5px;
      wid\th:750px;
      }
    /* end hide */
    Try this instead:
    Code:
    .packagecontent {
    	margin: 12px 0 0 50px;
    	font-size:9px;
    	font-weight:normal;
    	color:#666666;
    	line-height:15px;
    	}
    
    	/* hide from IE/Mac \*/
    	* html .packagecontent { height:1%; }
            /* end hide */
    
    .packageimg1, .packageimg2, .packageimg3 {
    	width:45px;
    	height:49px;
    	margin:30px 0 0 0;
    	background-repeat:no-repeat;
    	float:left;
    	}
    
    .packageimg1 {
    	background-image:url(images/pkg_personal1.gif);
    	}
    
    .packageimg2 {
    	background-image:url(images/pkg_smallbiz1.gif)
    	}
    
    .packageimg3 {
    	background-image:url(images/pkg_corporate1.gif);
    	}
    
    #bottombox {
    	height:80px;
    	width:525px;
    	margin-top:10px;
    	border:1px solid #DDDDDD;
    	}
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the pointers, I reimplemented the holly hack as you suggested.

    What exactly about the bottom portion should I change? You say it should be in whole numbers, but even when it is I still get the problem I posted about where the right border jets out a few pixles and does not line up (in IE only).
    Last edited by niemie; 07-13-2005 at 10:15 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the code I posted you should be able to remove this snippet altogether. At least from my testing locally things all lined up.
    Code:
    /* hide from IE/Mac \*/
    * html #bottomcontent,* html #midbanner {
      width:750.5px;
      wid\th:750px;
      }
    /* end hide */
    Last edited by mcdougals4all; 07-13-2005 at 11:09 PM.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That works great! The only problem now is that the 2nd level pages appear to need that removed section... when I take it out, even though I set a min-height, the footer jumps up the page on the 2nd level...

    What am I missing?

    http://yourthreshold.com/staging/Ricochet/about.htm

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this in your CSS:
    Code:
    #footer {
            clear:both;
    	position:relative;
    	background: #FFFFFF url("images/footer_main2.gif") top left repeat-x;
    	height:30px;
    	margin:0 0 5px 0;
    	padding:0px;
    	border-top:1px solid #EEEEEE;
    	}
    #footercontent {
    	position:relative;
    	left:auto;
    	right:auto;
    	top:2px;
    	font-size:9px;
    	color:#999999;
    	}
    #footer2 {
    	height:20px;
    	font-size:8px;
    	color:#999999;
    	}
    #f2right {
    	float:right;
    	}
    .clear { clear:both; }
    And in your HTML:
    Code:
    <div id="midbanner2"></div>
    	 <div id="bottomcontent" style="background:red;">
    		<div id="leftboxes">
    			<div class="leftbox"><img src="images/bluearrows2.gif">Service Gurantee</div>
    			<div class="leftbox"><img src="images/bluearrows2.gif">Earn $ For Referrals</div>
    			<div class="leftboxBottom"><img src="images/bluearrows2.gif">Domain Lookup</div>
    		</div>
    		<div id="rightcontent">
    			<h1>Our Network</h1>
    			 <p>30 Day Money Back Guarantee</p>
    			 <p>99.5% Uptime Guarantee</p>
    		</div>
    		<div class="clear"></div>
    	</div>
      	<div id="footer">
    	  <img src="images/footer_left2.gif" style="float: left">
    	  <img src="images/footer_right2.gif" style="float: right">
    	  <div id="footercontent">Ricochet Network<br />&copy; 2005 | All Rights Reserved</div>
      	</div>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #7
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah that basically did it - if you look real close at the 2nd level page, at the bottom - the footer expands past the edges by about 1px on each side for some reason now.... this has to be the last hurddle.

    Thanks for all your help, I really appreciate it.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Looks fine to me, did you fix it?

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nope, it's still there.... it's VERY minor but if you go to the first link and then the 2nd you can tell. It's right where the border meets the footer.

    http://www.yourthreshold.com/staging.../indexTest.htm

    http://yourthreshold.com/staging/Ricochet/about.htm

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I should clarify that it's there in IE not Firefox...

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You might need to use an !important full something like this
    Code:
    #footer {
    	clear:both;
    	background: #FFFFFF url("images/footer_main2.gif") top left repeat-x;
    	height:30px;
    	margin:0 auto 5px auto;
    	padding:0px;
    	border-top:1px solid #EEEEEE;
    	width:750px; !important
    	}
    Last edited by _Aerospace_Eng_; 07-14-2005 at 01:43 AM.

  • #12
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That did it.... I am about to go crazy with all the IE bugs and fixes though. Go FireFox!!!!!!!!


  •  

    Posting Permissions

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