IE vs FF.help!

IE Gapping, FF is not

[swdweb]

There's a huge gap on only one of my pages in IE, not in FF

It's only happening in one browser, I don't understand. There are no javascripts for this area....and...this is only happening on this one page so far, out of all my pages. All of my pages are pulling from one css, so it makes it very difficult to find out why it's happening on one page and not the others and on one browser and not the other.

Here is the HTML:::

<div class="box">
         <div class="headerText">blah blah blah text</div>
          <div class="normalText">
          <div id="left_picture">
          <div id="student_recruitment"></div>
         </div>
            <div><span class="style1">blah blah text </span></div>
<div class="normalText">
              blah blah blah text 
                   </div>
                   <div class="normalText">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="career_colleges.html"><img src="exportmedia/career.jpg" border="0"/></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="universities.html"><img src="exportmedia/universities.jpg" border="0"/></a></div>
                                     
          <div class="normalText">
           <p>&nbsp;</p>
           <p>blah blah blah text click <a href="JavaScript:newPopup('clients.html');">here.</a></p>
          </div>
         </div>

Here is the css that pertains to this area:::

.box {
margin: auto;
position: relative;
width: 930px;
height:auto;
clear: both;
}
.headerText, .headerText2, .headerText a, .headerText2 a {
font-family: Tahoma;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
.normalText, .normalText2 {
font-family: Tahoma;
font-size: 13px;
color: #FFFFFF;
width: 95%;
margin: 2%;
margin-left: 3%;
margin-bottom: 4%;
font-weight:700;
}
#left_picture {
position: relative;
width: 300px;
height: 300px;
float: left;
margin: 8px;
}
#student_recruitment{
height: 100%;
width: 100%;
position: relative;
}
#student_recruitment {
background-image: url(../exportmedia/student_recruitment.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

If the CSS looks confusing it's because there's WAY more css in this file than just this and it's spread out...these elements are not next to each other in the css. If you'd like my whole css file, please let me know.

The reason I had the link in there is so that people could see the difference between the browsers. Are screenshots allowed so that I can give a visual of what's happening?

I personally don't understand how you can see what's wrong without seeing how the browsers are behaving.

Let me know if you would like screenshots.

Thank you.

[swdweb]

I seem to have the worst luck with getting people to actually help me out with this problem.

What I did was remove the div tags that were surrounding the text that was gapping (even though the tags shouldn't have been causing this) and the gaps were removed.

I simply just went with a span style instead.

Problem solved.

Thanks anyway

[StoutFiles]

A lot of CSS comments are best figured out by the one with the problem, if it has to do with browser displays. Not many people will want to take your code and play with it in multiple browsers for however long it would take to solve the problem.

[swdweb]

I'm sorry to hear that, information like that is disheartening and makes one rethink asking for help in figuring something out.

[swa66]

You'll find that there are quite helpful people out here.
It helps to not use your actual code, but to minimize it to a simple to see what's going on set that's as short as you possibly can make it.

Also make sure to describe what you see properly.

E.g. "huge gap": how big is huge ? 8px might be huge to some and small to others. Where is the gap ? ...

Still, it sounds like you might be describing a double margin bug ? Are you familiar with that IE bug ?