...
PDA

IE / Firefox - slight irregularities in both

niemie
07-12-2005, 12:16 AM
In Firefox my page is dropping the center orange header for some reason. And in IE the text under the orange headers is moving over for an image that is floated to it's left, even though the text div's left margin is set high enough to clear it. Any help would be apprciated.

Page is here: http://yourthreshold.com/staging/Ricochet/NEW_DEV3.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;
}
#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;
}
#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;
/*list-style-image:url(images/subnav_arrow_blue.gif);*/
background-image:url(images/subnav_background1.gif);
height:22px;
clear:both;
border:1px solid #CECECE;
/*border-bottom:0;*/
color:#999999;
}
#subnav li {
width:124px;
height:18px;
text-align:center;
float:left; /*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:#888888; /*CHANGE ME TO BLUE, ORANGE, OR SOMETHING*/
}
#subnav li a:active {
color:#334C99;
}
#midbanner {
height:170px;
background-image:url(images/banner.gif);
margin-bottom:3px;
}
#bottomcontent {
text-align:left;
color:#000000;
}
#leftboxes {
width:190px;
height:auto;
padding:5px 8px 0 1px;
float:left;
border-right:1px dashed #cccccc;
}

.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
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 {
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;
}

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

.packageimg1, .packageimg2, .packageimg3 {
width:45px;
height:49px;
margin:25px 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:535px;
margin-top:10px;
border:1px solid orange;
}

/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<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="#">Tools</a></li>
<li><a class="inactive" href="#">About</a></li>
</ul>
<ul id="subnav">
<li><a href="#">Subnav 1</a></li>
<li><a href="#">Subnav 2</a></li>
<li><a href="#">Subnav 3</a></li>
<li><a href="#">Subnav 4</a></li>
<li><a href="#"><img src="images/subnav_arrow_orange1_2.gif" border="0">Subnav 5</a></li>
<li><a href="#">Subnav 6</a></li>
</ul>
<div id="midbanner"></div>
<div id="bottomcontent">
<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="rightboxes">
<div class="rightbox1">
<p class="packagetitle">PERSONAL</p>
<div class="packageimg1">&nbsp;</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>
</div>
</div>
<div class="rightbox3">
<p class="packagetitle">CORPORATE</p>
<div class="packageimg3">&nbsp;</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>
</div>
</div>
<div class="rightbox2">
<p class="packagetitle">SMALL BUSINESS</p>
<div class="packageimg2">&nbsp;</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>
</div>
</div>
<div id="bottombox">Ad #4</div>
</div>
</div>
</div><!--end Wrapper-->
</body>
</html>
Courtnie
07-12-2005, 01:02 AM
Well... there is always going to be SLIGHT differences... I know it is hard, but sometimes it can't be perfect...

One thing I would try, in the little circle images, take out the space
<div class="packageimg1">&nbsp;</div>
You don't need it, just put in an empty div and set the width and height in the css

I am assuming these are you titles with the orange background:
<p class="packagetitle">PERSONAL</p>
I would go like this
<div class="packagetitle"><p>PERSONAL</p></div>

then you can set the orange part as a background image on the DIV and then position the P so that it fits right in the box
either that or end the class="rightbox1" right after, what is happening is you are putting the image in the whole box that is surrounding everything and then setting it to no-repeat top, you don't need that, just put it in it's OWN div and then give it a width and hight and position it

that's what I would do anyway, good luck!
niemie
07-12-2005, 01:40 AM
Thanks for the note - none of those changes helped with either of the two problems I mentioned though. The main one is the middle orange banner dropping down when displayed in Firefox...
harbingerOTV
07-12-2005, 04:25 AM
try adding:


p {
margin: 0;
padding: 0;
}


to your css

if that doesn't do it. Try floating all 3 of your right boxes left and adjusting the width of them to space them out correctly.

I "think" it's something to do with the p's in the floated elements being handled differently than the p in the middle box (non-floated)

fiddle with those and see if eiter option works.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum