h2 moves down in ie 7

The h2 tag moves down about 60 px when viewed in ie7

[cheaperholidays]

Hi all

This is driving me nuts, when viewed in ie7 the h2 tag in a floated left div, moves down around 60px overriding a blockquote.

I have tried adding class to the h2 tag which displays ok in ie8 ff chrome et al.

We are using sprites, so div class abta is a sprite image.

its the h2 class and div abta the moves down, div abta does not move down as much as the h2 tag infuriating, but looks ok in later browsers.

<div id="divright"><div id="cheaper-promo"><div class='direct'><a title='Cheap holidays' class="direct" href="http://www.example.com/"></a> cheap holidays.</div> <div id="mission"><div class="abta" ></div><h2 class='mission'>"Best value, cheap abroad deals. Since 1995"</h2></div><br><br> <blockquote><h3>Bargain travel:</h3> Lorum ipsitor demonstraverunt lectores legere me lius quod ii legunt saepius.
- <a class="hollink" href='http://www.example.com/cheap.htm' title='Cheap offers'> Cheap deals</a>.</blockquote>



The css is as follows

#cheaper-promo{margin-top:-6px;padding:1px 0 20px;float:left;display: inline;}

#mission{width:130px;padding:1px 0 0px;float:right;margin-left:-20px;margin-top:-1px;}

#mission h2{display: inline; margin-top:-5px;font-size:1em;color:#CC0000;font-weight:bold;padding:0 10px 0 10px;width:110px;}

I have removed and added display inline which seems to make no difference.


Thanks for reading

Mike

[edited by: alt131 at 1:14 pm (utc) on Dec 6, 2011]
[edit reason] Thread Tidy [/edit]

[lucy24]

Are you sure you've got enough nested divs there? ;)

You've also got an awful lot of tightly constrained dimensions using pixels-- and then a completely unspecified font in the middle. Is the text itself exactly the same size and shape in all browsers on all computers you've tried?

[cheaperholidays]

Hi Lucy24

Yes the the text is the same, its odd that screen shots in ie 6 / 7 places the h2 so far down the page - i am currently trying position absolute to see if that works.

Font-size:1em is correct is it not?

[alt131]

screen shots

Does this mean you aren't testing yourself? If so, I've checked in standalone versions, and the alignment is almost exactly the same. The major difference is that 5.5-ie7 do not "shrink-wrap" floats, so (on the provided code) div#cheaper-promo expands the full width of the viewport.

(This is also because the float over-rides the display:inline and sets a default display:block. Combine that with not shrink-wrapping floats in older ie and the element expands full-width. )

[cheaperholidays]

hi alt 131

Translate please, we test in ie 7 and upwards plus FF and so on .

Do you mean we have to set a width for cheaper promo..

Mike

[cheaperholidays]

Aha light comes on...

I reversed the position of cheaper promo and mission, set a width for the cheaper promo div and it works thanks so much all....

[alt131]

Translate please, we test in ie 7 and upwards plus FF and so on

Ok, you referred to screenshots which suggested to me that you aren't running the browsers, but are using a testing service. Ditto referring to ie6 if you're only running ie7 up. Nothing wrong with using a testing service, it's just that occasionally they do vary from the browser when it is running natively. (That's also the reason I specified mine are standalone versions, again, there have been reports of variations.)

I reversed the position of cheaper promo and mission, set a width for the cheaper promo div and it works thanks so much all....

Pleased you have a fix, but I'm not sure I understand what you have done to achieve that and it does sound as if there was something else going on in the code because I was not seeing the issue you reported. That also makes me wonder if this was just a case of "float drop" - that is, ie was calculating there was inadequate width to align the floats on the same "line", so was "dropping" them until there was enough horizontal width for them to fit. Just something to think about for the future.