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

Thread: Spacing Issue

  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Spacing Issue

    Hey guys.

    Having a space problem here and I don't know what is causing it. In Firefox and Opera the spacing is just how I need it, however, in IE the spacing is off by just a few pixels.

    You can view the site here: http://72.36.239.242/~websolve/index.php

    Please open it up and compare the spacing of the customer testimonials are toward the top of the page.

    Screenshots:
    Firefox & Opera (right): http://img273.imageshack.us/img273/9780/right1ic.jpg
    IE (not right): http://img273.imageshack.us/img273/369/wrong2gt.jpg


    As you can see, the testimonials are is spaced over to the right a bit too much, therefore causing the nav and banner sections to be pushed to the right as well.


    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>WebSolvents.com - Quality, Affordable WebHosting - cPanel, Fantasico, PowerHosting</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Title" content="WebSolvents.com - Quality, Affordable WebHosting - cPanel, Fantasico, PowerHosting" />
    <meta name="Description" content="" />
    <meta name="Keywords" content="hosting, image, upload image, image upload, share image, myspace image, ebay image, image portfolio, free, imagehosting, image hosting, hosting, gallery, free image hosting, free gallery, image host, host image, files, file hosting, free hosting, free file hosting, sharing, file sharing, free file sharing, upload, send, email" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    
    <body>
    
    		<!--************ START HEADER ************-->
    <div class="body">
    	<div class="header">
    		<img src="images/header_right.jpg" alt="" style="float:right " /><img src="images/header_left.jpg" alt="" style="float:left " /><img src="images/logo.jpg" alt="" style="margin:22px 0 0 21px; float:left " /><img src="images/serversicon.jpg" alt="" style="margin:1px 0 0 11px; float:left " /><img src="images/hosting_icons.jpg" alt="" style="margin:6px 3px 0 0; float:right " />
    	</div>
    	<div class="maintop">
    		<img src="images/mainbox_tr.jpg" alt="" style="float:right " /><img src="images/mainbox_tl.jpg" alt="" style="float:left " />
    	</div>
    	<div class="mainmain">
    		<div class="bannerarea">
    			<div class="bannerarealeft">
    				<div class="bannerarealeft_top">
    					<img src="images/testbox_tl.jpg" alt="" style="float:left " />
    				</div>
    				<div class="bannerarealeft_main">
    					<img src="images/test_red_arrow.jpg" alt="" style="margin:6px 0 0 8px; float:left " /><img src="images/customer_are_saying.jpg" alt="" style="margin:6px 0 0 2px; float:left " />
    					<div style="padding:9px "><br />
    						<img src="images/quote.jpg" alt="" /> Websolvents.com is first rate when it comes to customer satisfaction. The hosting setup was a breeze and my site was up in minutes! Thanks Websolvents! <img src="images/quote_end.jpg" alt="" /><br /><br />
    						-Ryan - http://phx-gaming.net<br /><br />
    						<div style="text-align:right ">
    							Read More...
    						</div>
    					</div>
    				</div>
    			</div>
    			<div class="bannerarearight">
    				<div class="links">
    					<img src="images/hostinglink.jpg" alt="" /><img src="images/support_link.jpg" alt="" /><img src="images/members_link.jpg" alt="" /><img src="images/aboutus_link.jpg" alt="" /><img src="images/community_link.jpg" alt="" /><img src="images/faq_link.jpg" alt="" /><br />
    					<img src="images/banner.jpg" alt="" />
    				</div>
    			</div>
    		</div>
    		<!--************ START CONTENT ************-->
    		<div class="content">
    			<div class="contentleft">
    				<img src="images/exclusive_features.jpg" alt="" style="margin-left:9px; float:left " />
    				<div style="margin:9px "><br />
    					<img src="images/red_dot.jpg" alt="" /> cPanel X<br />
    					<img src="images/red_dot.jpg" alt="" /> Fantastico!<br />
    					<img src="images/red_dot.jpg" alt="" /> 24/7 dedicated support<br />
    					<img src="images/red_dot.jpg" alt="" /> Free company forums<br />
    					<img src="images/red_dot.jpg" alt="" /> Unlimited addon domains<br />
    				</div>
    				<img src="images/ways_to_use.jpg" alt="" style="margin-left:9px; float:left " />
    				<div style="margin:9px "><br /><br />
    					<img src="images/red_dot.jpg" alt="" /> Host a personal website<br/>
    					<img src="images/red_dot.jpg" alt="" /> Host a blog<br/>
    					<img src="images/red_dot.jpg" alt="" /> Power a forum community<br />
    					<img src="images/red_dot.jpg" alt="" /> Upload files and photos for sharing<br />
    					<img src="images/red_dot.jpg" alt="" /> Power an ecommerse business w/ free shopping carts<br />
    					<img src="images/red_dot.jpg" alt="" /> Host a CMS solution- PHP-Nuke, Mambo, etc.<br />
    					<img src="images/red_dot.jpg" alt="" /> Create a free wiki-based site<br />
    					<img src="images/red_dot.jpg" alt="" /> Host PHP, Perl, and CGI script<br />
    					<img src="images/red_dot.jpg" alt="" /> Manage unlimited e-mail accounts with your domain<br />
    				</div>
    			</div>
    			<div class="contentright">
    				<div class="contentright_cont">
    					<table width="500">
    						<tr>
    							<td valign="top" colspan="3"><img src="images/plan_head.jpg" alt="" style="float:left " /></td>
    							<td valign="top" align="left" rowspan="5"><img src="images/server_towers.jpg" alt="" style="float:right; margin-right: 20px " /></td>
    						</tr>
    						<tr>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />10,000mb disk storage</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />Unlimited domains</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />24/7 Dedicated Support</td>
    						</tr>
    						<tr>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />100gb monthly transfer</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />Unlimited sub-domains</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />100mbps Port Uplink</td>
    						</tr>
    						<tr>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />PHP, Perl, MySQL</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />Unlimited databases</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />Unlimited e-mails</td>
    						</tr>
    						<tr>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />cPanel w/ Fantastico!</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />Unlimited FTP</td>
    							<td valign="top" width="25%"><img src="images/blue_peg.jpg" alt="" style="margin-right:2px " />Stable Linux Servers</td>
    						</tr>
    						<tr>
    							<td height="40" colspan="4" valign="middle" align="left">
    								<img src="images/full_details.jpg" alt="" style="vertical-align:middle " /><img src="images/899price.jpg" alt="" style="margin-left:40px; vertical-align:middle " /><img src="images/grey_divider.jpg" alt="" style="margin:0 15px 0 15px; vertical-align:middle " /><img src="images/ordernow.jpg" alt="" style="vertical-align:middle " />
    							</td>
    						</tr>
    					</table>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="mainbottom">
    		<img src="images/mainbox_br.jpg" alt="" style="float:right " /><img src="images/mainbox_bl.jpg" alt="" style="float:left " />
    	</div>
    	<div class="footer">
    		<div class="footer_right">
    			&copy; Copyright 2006 - WebSolvents.com<br />
    			All Rights Reserved. A Kyle Spearrin Production.<br />
    			Terms of Service | Privacy Policy
    		</div>
    		<div class="footer_left">
    			Home | Community | Members | Hosting | FAQ | Testimonials
    		</div>
    	</div>
    </div>
    		
    </body>
    </html>


    CSS:
    Code:
    /* WebSolvents.com CSS Document */
    
    body{
    	background: #e3e3e3;
    	margin: 0;
    	padding: 0;
    	}
    img{
    	border: 0;
    	}
    .body{
    	width: 752px;
    	font: Tahoma;
    	font-size: 11px;
    	color: #4d4d4d;
    	margin: 20px 0 20px 20px;
    	}
    .header{
    	background: #ffffff url(images/header_main.jpg);
    	width: 752px;
    	height: 82px;
    	}
    .maintop{
    	width: 752px;
    	height: 4px;
    	background: #ffffff url(images/mainbox_toprunner.jpg);
    	margin-top: 2px;
    	}
    .mainmain{
    	width: 750px;
    	background: #ffffff;
    	border-left: 1px solid #b2b2b2;
    	border-right: 1px solid #b2b2b2;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	}
    	.bannerarea{
    		height: 150px;
    		float: left;
    		}
    		.bannerarealeft{
    			height: 149px;
    			width: 218px;
    			float: left;
    			margin-left: 3px;
    			border: 1px solid #cdcdcd;
    			border-top: 0;
    			border-left: 0;
    			}
    			.bannerarealeft_top{
    				height: 3px;
    				width: 218px;
    				background: #ffffff url(images/test_toprun.jpg) repeat-x top center;
    				float: left;
    				}
    			.bannerarealeft_main{
    				height: 146px;
    				width: 217px;
    				background: #fefefe url(images/testimon_bottomrun.jpg) repeat-x bottom center;
    				border-left: 1px solid #cdcdcd;
    				float: left;
    				}
    		.bannerarearight{
    			height: 150px;
    			width: 521px;
    			float: left;
    			margin-left: 3px;
    			}
    			.links{
    				height: 38px;
    				width: 521px;
    				float: left;
    				}
    	.content{
    		width: 750px;
    		}
    		.contentleft{
    			width: 218px;
    			float: left;
    			margin-left: 3px;
    			text-align: left;
    			border-right: 1px dashed #dbdbdb;
    			margin-top: 10px;
    			}
    		.contentright{
    			width: 521px;
    			float: right;
    			margin-left: 3px;
    			text-align: left;
    			margin-top: 10px;
    			}
    			.contentright_cont{
    				margin-left: 20px;
    				font: "Times New Roman", Times, serif;
    				font-size: 12px;
    				color: #000000;
    				}
    .mainbottom{
    	width: 752px;
    	height: 4px;
    	background: #ffffff url(images/mainbox_bottomrunner.jpg);
    	}
    .footer{
    	font: Tahoma;
    	font-size: 11px;
    	color: #4d4d4d;
    	height: 30px;
    	}
    	.footer_left{
    		text-align: left;
    		width: 400px;
    		float: left;
    		}
    	.footer_right{
    		text-align: right;
    		width: 350px;
    		float: right;
    		}




    Thanks guys!

  • #2
    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
    Code:
    		.contentleft{
    			width: 218px;
    			float: left;
    			margin-left: 3px;
                            display:inline;
    			text-align: left;
    			border-right: 1px dashed #dbdbdb;
    			margin-top: 10px;
    			}
    When a left or right margin is added to a floated element this margin gets doubled only in IE. It only occurs for left and right margins. The display:inline; doesn't effect any other browser because technically a floated element can't be an inline element so it becomes a block level element. www.positioniseverything.net is a great site for many common CSS bugs among browsers.
    Last edited by _Aerospace_Eng_; 04-27-2006 at 07:42 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Awesome! You rock! Thanks so much.


  •  

    Posting Permissions

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