...

View Full Version : Spacing Issue



xxkylexx
04-27-2006, 07:21 AM
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:


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


/* 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!

_Aerospace_Eng_
04-27-2006, 07:29 AM
.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.

xxkylexx
04-27-2006, 07:40 AM
Awesome! You rock! Thanks so much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum