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

    IE / Firefox - slight irregularities in both

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

  • #2
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

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

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try adding:

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


  •  

    Posting Permissions

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