For some reason the spacing in my custom divs are fine in Internet Explorer and look like crap in Firefox... Here's my HTML: <div class="homepage_row" id="homepage_row1"> <div class="homepage_section"> <h4><a href="/forums">Real Estate Forums</a></h4> <p>Discuss real estate investing, analyze deals, get help, learn about companies and much more</p> </div> <div class="section_border"> </div> <div class="homepage_section"> <h4>Community</h4> <p><a href="/meet">Find Members</a> and <a href="/companies">Companies</a>, Explore hundreds of <a href="/groups">groups</a>, and learn about <a href="/events">local events</a></p> </div> <div class="section_border"> </div> <div class="homepage_section"> <h4>Knowledge Base</h4> <p>Read hundreds of <a href="/articles">articles</a>, find and <a href="/links">share real estate news</a>, browse thousands of <a href="/realestateresources.html">resources</a>, visit our <a href="http://store.biggerpockets.com">store</a></p> </div> </div> <div class="homepage_row"> <div class="homepage_section"> <h4>Blogs</h4> <p>Explore the <a href="/renewsblog">BiggerPockets Expert Blog</a>, or create your own <a href="/blogs">personal blog</a></p> </div> <div class="section_border"> </div> <div class="homepage_section left_border"> <h4><a href="/properties">Investment Properties</a></h4> <p>List your residential or commercial deals or search for great investment properties to buy</p> </div> <div class="section_border"> </div> <div class="homepage_section left_border"> <h4>Tools</h4> <p>Share files & documents, <a href="/tasks">manage tasks</a>, <a href="https://biggerpockets.mysmartmove.com/">screen tenants</a>, <a href="http://www.biggerpockets.com/partners/foreclosure-com.php">find foreclosures</a>, and more</p> </div> </div> <div> Code (markup): and here's my CSS: .homepage_section {background:#FFF;float:left;height:90px;line-height:1.3em;width:250px;} .homepage_section h4, .homepage_section h4 a, .homepage_section h4 a:hover, .homepage_section h4 a:visited {color:#000;font-size:16px;margin-bottom:5px;text-decoration:none;} .homepage_section h4 a:hover {text-decoration:underline;} .homepage_section p {color:#000;font-size:13px;} .homepage_section p a, .homepage_section p a:visited {color:#2F5590;text-decoration:none;} .homepage_section p a:hover {color:#2F5590;text-decoration:underline;} .section_border {background:none repeat scroll 0 0 #000000;float:left;height:60px;margin-left:25px;margin-right:25px;margin-top:10px;width:1px;} .homepage_row {height:100px;margin-left:20px;margin-right:20px;margin-top:25px;padding-left:10px;} #homepage_row1 {border-bottom:1px solid #003C91;} Code (markup): Here's a couple thumbnails of the sections: IE FF (Crap) and here's my test site: http://www.michiganloanmodification.net
While playin around with Firebug I deactivated float:left; from the class .bloggerMain and the site was shown correctly. Try it please and let me know the result.
OK Cool man thanks! On the bottom of the first section there is suppose to be a bottom border... #homepage_row1 {border-bottom:1px solid #003C91;} Code (markup): But for some reason on FF it doesn't show up?
This sounds like you used IE to design this site. You should never use IE as a reference for how things work. If it works in IE, but not FF, then your markup is wrong! Never, ever trust IE to do anything right. In fact, you have several HTML and CSS errors that may be affecting this.
A lot of those problems are caused by mixing padding and margins together, I usually try to stick with just padding unless I absolutely have to use margins.
I actually do use Firefox to design my site, I wanted to make sure it looked good in IE but it actually looked better. I always use Firebug in FF but sometimes its hard to figure out what the matter is. Any tips? Oh I see... I never knew there was really an issue with that, I'm still pretty noob-ish. haha