SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 5.5 margin or padding issue

    Hello, I can't seem to fix this one (perhaps 2 sctually)problem I'm having with IE 5.5. On the right side of this page the "tab" (#tab) has a 1 pixel background gif. Inside the div is an h1 (with background image for the left side of the tab) and an image for the right side of the tab. past the right side, however, the bg image shows and I can't get the end of the div flush with the right side of the image.

    Also, the white margin running along the right side in the blue content area shouldn't be there, the blue should go up to the edge.

    page can be viewed here:

    http://www.aftermath-creative.com/te...USA_offer2.htm

    CSS:

    Code:
    /* mac hide\*/
    html, body {height:100%}
    /* end hide */
    html,body {
    	padding:0;
    	margin:0;
    	text-align: center;
    }
    body{	
    	text-align:center;
    	min-width:800px;/* for mozilla*/
    	background-color: #666666;
    	color: #000000;
    }
    #outer{
    	height:99.9%;
    	width:800px;
    	border: 1px solid black;
    	color: #000000;
    	text-align:left;
    	margin:auto;
    	margin-top: 15px;
    	position:relative;
    	background: #FFFFFF;
    }
     
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:800px;
    	height:145px;
    	background:#FFFFFF;
    	overflow:hidden;
    	color: #000000;
    	z-index:100;
    }
    
    .headtable {
    	border-bottom:12px solid #EBEBEB;
    	margin-bottom: 4px;
    	padding-bottom: 15px;
    }
    
    .headertext {
    	color: #003399; 
    	font-size: 18px;
    	font-family: Arial, Helvetica, sans-serif; 
    	font-weight: Bold; 
    	text-align: left;
    	padding-left: 30px;
    }
    
    
    #left {
    	position:relative;/*ie needs this to show float */
    	width:207px;
    	float:left;
    	padding-top:145px;/*needed to make room for header*/
    	text-align: center;
    }
    #left p {padding-left:10px;padding-right:0px; padding-top: 5px; padding-bottom:0px; margin: 0;}
    
    #footer {
    	width:800px;
    	clear:both;
    	background-color: #FFFFFF;
    	color: #000000;
    	text-align:center;
    	height: 86px;
    
    }
    
    }
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    #centercontent {
    	width: 591px;
    	float:right;
    	margin-right: 0px;
    	background-color: #6699FF;
    	position: relative;
    	padding-top: 145px;/*make room for header*/
    	margin-bottom: 7px;
    	display: inline;
    }
    * html #centercontent {padding-top:140px; padding-bottom: 0px;}
    
    #centercontent p {padding-left:3px}
    
    
    html >body #minHeight{float:left;width:0px;margin-bottom:-88px;} /*safari wrapper */
    
    #tab {
    	width: 572px;
    	background-image: url(images/tabBackground.gif);
    	background-repeat: repeat-x;
    	margin: 0px 10px 0px 0px;
    	position: relative;
    	float: right;
    	padding: 5px 0px 0px 0px;
    }
    * html #tab {margin-right: 2px; padding-right: 0px;}
    #tab img {
    	margin: -5px 0px 0px 0px;
    }
    
    h1 {
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-weight: bold;
    	color: #CC0000;
    	background-image: url(images/tabLeftSide.gif);
    	background-repeat: no-repeat;
    	font-size: 22px;
    	margin: 5px 5px 4px 0px;
    	padding: 5px 0px 5px 15px;
    	display:inline;
    }
    h2 {
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-weight: bold;
    	color: #003399;
    	font-size: 22px;
    	display:inline;
    }
    
    /* Styles for rounded corner div */
    
     .roundedCornerSpacer {
        margin: 0px; padding: 0px; border: 0px;
        clear: both;
        font-size: 1px; line-height: 1px;
    }
    
     .borderTL, .borderTR, .borderBL, .borderBR {
        width: 10px; height: 10px;
        padding: 0px; border: 0px;
        z-index: 99;
    }
    .borderTL, .borderBL { float: left; clear: both; }
    .borderTR, .borderBR { float: right; clear: right; }
    .borderTL { margin: -2px 0px 0px -1px; }
    .borderTR { margin: -2px -1px 0px 0px; }
    .borderBL { margin: -10px 0px 0px 0px; }
    .borderBR { margin: -10px 0px 0px 0px; }
    
    /* IE5-5.5/win needs the border scooted to the left or right by an additional 3px! */
    .borderTL {
        margin-left: -5px;
        ma\rgin-left: -1px;
    }
    html>body .borderTL {
        margin-left: -1px;
    }
    .borderTR {
        margin-right: -5px;
        ma\rgin-right: -1px;
    }
    html>body .borderTR {
        margin-right: -1px;
    }
    .borderBL {
        margin-left: -3px;
        ma\rgin-left: 0px;
    }
    html>body .borderBL {
        margin-left: 0px;
    }
    .borderBR {
        margin-right: -3px;
        ma\rgin-right: 0px;
    }
    html>body .borderBR {
        margin-right: 0px;
    }
    /* To get around a known bug in IE5/win, apply the
       border (no margin, padding or positioning) to the
       content class and apply whatever positioning you
       want to the contentWrapper class. */
    .content {
        margin: 0px;
        padding: 0px;
        border: 1px solid #003399;
    	background: #FFFFFF;
    }
    .contentWrapper {
        /* position this div however you want, but
           keep its padding and border at zero */
        padding: 0px;
        border: 0px;
    	width: 370px;
    	margin-left: 9px;
    	float: left;
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 12px;
    	line-height: 15px;
    	color: #000000;
    }
    .contentWrapper p{margin: 10px 0px 10px 10px;}
    
    .contentWrapperRight {
        /* position this div however you want, but
           keep its padding and border at zero */
        float: right;
    	padding: 0px;
        border: 0px;
    	width: 193px;
    	margin: 0px 9px 0px 9px;
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 12px;
    	line-height: 15px;
    	color: #003399;
    }
    *html .contentWrapperRight {margin-right: 3px;}
    .contentWrapperRight p{margin: 10px 0px 10px 10px;}
    
    /* END Styles for rounded corner div */
    
    .centerheader {
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 17px;
    	color: #003399;
    }
    
    .offer {
    	margin: 8px 0px 10px 10px;
    }
    
    .freeitem {
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 15px;
    	color: #003399;
    }
    
    .line {
    	color: #CCCCCC;
    	margin: 15px 0px 15px 6px;
    	width: 337px;
    }
    * html .line {margin: 8px 0px 7px 0px;}
    
    .footerbar {
    	background-image: url(images/footerBarbg.jpg);
    	background-repeat: repeat-x;
    	height: 37px;
    	text-align: left;
    }
    .footerbar p {
    	padding: 10px 0px 0px 10px;
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 14px;
    	color: #666666;
    
    }
    
    ul.rightlist {
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 11px;
    	color: #000000;
    }
    
    .over40 {
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 15px;
    	color: #CC0000;
    	padding: 12px 10px 15px 0px;
    }
    .footnav {
    	margin: 15px 0px 0px 0px;
    }
    
    .footnav a{
    	font-family: arial, helvetica, verdana, sans-serif;
    	font-size: 12px;
    	color: #333333;
    	text-decoration: none;
    	margin-top: 15px;
    }
    .footnav a:hover {
    	text-decoration: underline;
    }
    HTML:

    Code:
    <div id="minHeight"></div>
    <div id="outer"> 
    	<div id="centercontent"><img src="images/blueCornerTL.jpg" width="10" height="10" alt="&nbsp;" />	
    <!--- right content here -->
    		<div class="contentWrapperRight">
    			<div class="content">
    			<img class="borderTL" src="images/borderCornerTL.jpg" alt="&nbsp;" width="10" height="10" />
    			<img class="borderTR" src="images/borderCornerTR.gif" alt="&nbsp;" width="10" height="10" />
    			<p>With online access to over 15.5 million U.S. and Canadian businesses, build your list by:</p>
    			<ul class="rightlist">
    				<li>Type of business</li>
    				<li>Number of employees</li>
    				<li>Estimated sales volume</li>
    				<li>Geography</li>
    				<li>And more!</li>
    			</ul>
    			<p align="center" class="over40">Over 40 databases in all!<br />
    			<img src="http://www.listbazaar.com/images/listbazaar/R2/60MinutesClock.gif" width="167" height="80" alt="Have you seen us on 60 Minutes?" vspace="15" /></p>
    			<!-- IE5/win puts the margin-bottom of the content div's final element
    			OUTSIDE the containing box (div.content), instead of putting it inside
    			the containing box's edge. So it needs this spacer. -->
    			<div class="roundedCornerSpacer">&nbsp;</div>
    			</div>
    			<!-- end of div.content -->
    			<div class="bottomCorners">
    			<img class="borderBL" src="images/borderCornerBL.gif" alt="&nbsp;" width="10" height="10" />
    			<img class="borderBR" src="images/borderCornerBR.gif" alt="&nbsp;" width="10" height="10" />
    			</div>
    		</div><!-- end of div.contentWrapper -->
    
    
    
    		<!--center content goes here -->
    		<div class="contentWrapper">
    			<div class="content">
    			<img class="borderTL" src="images/borderCornerTL.jpg" alt="&nbsp;" width="10" height="10" />
    			<img class="borderTR" src="images/borderCornerTR.gif" alt="&nbsp;" width="10" height="10" />
    			<p class="centerheader">Grow your business with the finest <br /><b>Insurance leads and Mailing Lists!</b></p>
    			<p>Over 400 million companies get their insurance leads and mailing lists from <i>info</i>USA. We offer the largest selection
    			of insurance leads and mailing lists all under one roof.</p>
    			<div class="offer">
    			<img src="images/digPicFrame.jpg" width="57" height="73" alt="digital picture frame" align="left" />
    			<span class="freeitem"><b>FREE</b> digital picture frame</span>
    			<div style="float:right; margin-top: 24px; width: 143px; color: #CC0000; font-family: arial, helvetica, verdana, sans-serif; font-size: 16px; font-weight: bold;">
    			Call Jason Martin<br />800.321.0869
    			</div>
    			<p>with your purchase<br />of $500 or more.<br />Offer Code: 01OMLT</p>
    			<div style="text-align: center;">
    				<hr class="line" />
    				<p style="font-family: arial, helvetica, verdana, sans-serif;color: #000000;font-size: 17px; font-weight: bold; margin: 5px 0px 8px 0px;">New Customers!</p>
    				<p style="font-family: arial, helvetica, verdana, sans-serif;color: #cc0000;font-size: 17px; margin: 5px 0px 8px 0px;">For 100 Insurance Leads <b>FREE</b>:</p>
    				<img src="images/clickButton.jpg" width="124" height="31" alt="click here" vspace="10"/>	
    			</div>
    			</div>
    			<!-- IE5/win puts the margin-bottom of the content div's final element
    			OUTSIDE the containing box (div.content), instead of putting it inside
    			the containing box's edge. So it needs this spacer. -->
    			<div class="roundedCornerSpacer">&nbsp;</div>
    			</div>
    			<!-- end of div.content -->
    			<div class="bottomCorners">
    			<img class="borderBL" src="images/borderCornerBL.gif" alt="&nbsp;" width="10" height="10" />
    			<img class="borderBR" src="images/borderCornerBR.gif" alt="&nbsp;" width="10" height="10" />
    			</div>
    		</div><div style="clear:both;"></div>
    		<!-- end of div.contentWrapper -->
    
    		<img src="images/blueCornerBL.gif" width="10" height="10" alt="&nbsp;" /></div>
    
    
    	<div id="left"> 
    		<img src="images/leftColPhoto.jpg" alt="Find sales leads fast!" /><p align="left" class="freeitem"><b>Work smarter, work faster<br />and close more sales.</b></p>
    	</div>
    	<div id="clearfooter"></div>
    	<!-- ie needs this -->
    	<div id="header"> 
    	<!-- header from infoUSA homepage-->
    		<table cellspacing=0 cellPadding=0 width="800" class="headtable">
    			<tr>
    				<td height="15"></td>
    			</tr>
    			<tr>
    				<td width="15"></td>
    				<td align=left><a href="http://list.infousa.com/cgi-bin/abicgi/abicgi.pl?bas_session={bas_session}&bas_vendor=190000&bas_type=LC&bas_page=999&bas_action=home"><img src="http://list.infousa.com/images/listbazaar/R2/LogoCom.gif" border="0"></a></td>
    				<td align=left width="420"><div class="headertext">Sign up now and get <br />100 Insurance leads <span style="color: #CC0000;">FREE!</span></div></td>
    				<td align=right>
    					<table cellSpacing=0 cellPadding=3 border="0" width="300" ID="Table3">
    						<tr>
    							<td width="110" align=center style="FONT-SIZE: 13px; COLOR: #333399; FONT-FAMILY: Arial"><strong>800.321.0869</strong></td>
    							<td width="110" align=center style="FONT-SIZE: 13px; COLOR: #333399; FONT-FAMILY: Arial"><strong>E-mail Us</strong></font></td>
    							<td width="110" align=center style="FONT-SIZE: 13px; COLOR: #333399; FONT-FAMILY: Arial"><strong>Live Help</strong></font></td>
    							<td width="15"></td>
    						</tr>
    						<tr>
    							<td width="110" align=center><img src="http://list.infousa.com/images/listbazaar/R2/IconPhone.gif" border="0"></td>
    							<td width="110" align=center><a href="mailto:help@infousa.com"><img src="http://list.infousa.com/images/listbazaar/R2/IconEmail.gif" border="0"></a></td>
    							<td width="110" align=center><a href="javascript:xxx()"><img src="http://list.infousa.com/images/listbazaar/R2/IconPC.gif" border="0"></a></td>
    							<td width="15"></td>
    						</tr>
    					</table>
    					<table cellSpacing=0 cellPadding=3 border="0" width="290" ID="Table4">
    						<tr>
    							<td style="FONT-SIZE: 10px; COLOR: #333399; FONT-FAMILY: Arial" colspan="3" align=center><strong>Mon-Fri 7am-6pm CST / Sat 9-Noon CST</strong></td></tr>
    					</table>
    				</td>
    			</tr>
    		</table>
    		<div id="tab"><img src="images/tabRightSide.gif" align="right" /><h1>Free 100 Insurance Prospects</h1> <h2>Call 800.329.8069</h2>
    		</div>
    	</div>	
    	<div id="footer">
    		<div class="footerbar">
    			<div style="float:right; width: 175px; padding: 5px 0px 0px 0px; font-family: arial, helvetica, verdana, sans-serif; font-size: 20px; color: #003399; font-weight: bold;">Call 800.329.8069</div><p>A $400 million public company with 4 million customers.</p>
    			</div>
    			<div class="footnav">
    				<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Careers</a> | <a href="#">Site Map</a> | <a href="#">Update My Listing</a> | <a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a> | <a href="#">Email Us</a> 
    			</div>
    		</div>
    	</div>
    </div>

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #tab looks like it needs a margin-right of -3px for IE5.5.

    For the curved corners I actually find giving the container position: relative and then the curves position: absolute; top: X; left: X; etc works better across browsers than using floats and margins (although you may still need to give the IEs a slightly different pixel value in some cases but usually there'll be no difference between 5 & 6).

  3. #3
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems solved

    thatbnks for that! I solved IE 5.5 problems by putting in a conditional comment like this:

    Code:
    <!--[if lte IE 5.5000]>
    <style type="text/css">
    #tab img {margin-right: -3px;}
    #centercontent {margin-right: -3px;}
    .borderTL { margin: -2px 0px 0px -4px; }
    .borderTR { margin: -2px -4px 0px 0px; }
    </style>
    <![endif]-->
    This solved all my margin issues and an issue with the top left and top right corner images on the white boxes.

    Thanks!


Bookmarks

Posting Permissions

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