...

View Full Version : Is this IE 3px bug?



niemie
07-13-2005, 07:00 PM
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/Ricochet/indexTest.htm

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>

mcdougals4all
07-13-2005, 08:05 PM
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.



.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:


.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;
}

niemie
07-13-2005, 09:13 PM
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).

mcdougals4all
07-13-2005, 10:06 PM
Using the code I posted you should be able to remove this snippet altogether. At least from my testing locally things all lined up.

/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */

niemie
07-13-2005, 10:34 PM
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

mcdougals4all
07-13-2005, 10:59 PM
Try this in your CSS:


#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:


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

niemie
07-13-2005, 11:13 PM
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.

_Aerospace_Eng_
07-13-2005, 11:18 PM
Looks fine to me, did you fix it?

niemie
07-13-2005, 11:28 PM
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/Ricochet/indexTest.htm

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

niemie
07-14-2005, 12:14 AM
I should clarify that it's there in IE not Firefox...

_Aerospace_Eng_
07-14-2005, 12:34 AM
You might need to use an !important full something like this

#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
}

niemie
07-14-2005, 12:57 AM
That did it.... I am about to go crazy with all the IE bugs and fixes though. Go FireFox!!!!!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum