I'm in the very early stages of a website design. I have a situation where I have an H2 tag which is floated left with a div to the right of it (also floated left).
In Firefox, there is about 30 pixels or so of whitespace between the right side of the H2 tag and the leftside of the div beside it.
In IE8, Opera, Safari and Chrome that whitespace does not exist. This is the first time I've developed anything that displayed properly in all browsers EXCEPT Firefox. Usually it's the other way around!
I've posted my CSS and HTML below.
I hope someone can sort this out!
Thanks everyone!
CSS:
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
text-align: center;
}
#container {
text-align: center;
height: auto;
width: 797px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
#header {
background-image: url(images/layout_header.gif);
background-repeat: no-repeat;
background-position: left top;
height: 160px;
width: 797px;
text-align: center;
}
#under_construction {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-align: left;
height: auto;
width: 780px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
}
main_navigation {
}
#main_image {
background-image: url(images/home_image.gif);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
height: 300px;
width: 797px;
background-color: #FFFFFF;
}
#ddd {
float: left;
margin-top: 30px;
}
#text_area {
background-image: url(images/graytextarea.gif);
background-repeat: repeat-x;
text-align: center;
height: 164px;
width: 797px;
}
#main_text {
height: auto;
width: 630px;
padding-left: 30px;
text-align: left;
float: left;
font-family: Verdana;
font-weight: normal;
font-size: 12px;
line-height: 25px;
}
#small_nav {
}
#footer {
}
.floatleft3ds {
float: left;
margin-top: 40px;
padding-left: 30px;
}
.header_float {
float: left;
padding-top: 65px;
padding-left: 10px;
}
h1 {
font-size: 22px;
color: #FFFFFF;
font-style: normal;
font-weight: normal;
letter-spacing: 1px;
text-align: left;
margin-left: 30px;
padding-top: 25px;
}
p.first {
}
p.first:first-letter {
font-size: 18px;
font-weight: bold;
}
h1:first-letter {
font-size: 36px;
color: #FFFFFF;
}
#smalltext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
padding-top: 20px;
float: left;
margin-left: 5px;
}
#indent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
text-indent: 140px;
padding-top: -40px;
}
.clearfloat {
clear: both;
}
h2 {
font-size: 14px;
font-weight: bold;
color: #000000;
letter-spacing: 1px;
text-align: left;
float: left;
padding-left: 30px;
margin-bottom: -3px;
}
h2:first-letter {
font-size: 24px;
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D&D Dental Practice Design & Marketing</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Dental Practice Design and Marketing. Web design, advertising design, brochures, business cards, architectural design and environmental graphics. We can create a complete brand package for your practice." />
</head>
<body>
<div id="container">
<div id="header">
<div id="under_construction">
<p>This site is currently under construction. For more information email: info@dandddesignandmarketing.com</p>
</div>
<h1>OUR PHILOSOPHY:</h1>
</div>
<div id="main_image">
<div id="ddd">
<h2>DEFINE</h2>
<div id="smalltext">your needs</div>
<br class="clearfloat" />
<h2>DELIVER</h2>
<div id="smalltext">your message</div>
<br class="clearfloat" />
<h2>DIFFERENTIATE</h2>
<br class="clearfloat" />
<div id="indent">your practice</div>
<br class="clearfloat" />
</div>
</div>
<div id="text_area">
<div id="main_text">
<p class="first">Attracting high quality patients is the key factor to maintaining a consistently profitable dental practice. Your brand communicates a promise to your patients. Leave it to us to define your needs, deliver your message, and differentiate your practice from the competition. Printed materials and digital technology will allow you to market your brand to a broad or narrow spectrum of potential and existing patients.</p>
</div>
</div>
</div>
</body>
</html>
