Stars out of place

HTML & CSS
1

Hi

Since I adapted my main pages to be mobile-friendly, IE9 started displaying them with a problem:

The stars that appear in the same line as the name of the hotels are dropping to the next line, and in one particular case, the last in the following page, the 2 stars are not right floated.

All other browsers disply the pages properly. I guess that the reason may be the width of the central column, but I’ve played around with it, to no avail.

I know that IE9 has been superseded by IE10 and IE11, but I assume that if I test in IE9 the others are backward-compatible.

http://pintotours.net/Oceania/Australia/test.html

2

It’s not just IE9, Chrome also is messed up.

Those clearing divs you have in the HTML…they need to be clear:both; and not just clear:left;.

The reason it needs to be clear:both; is because those stars are floated right. You need the next hotel to be cleared from all previous floats, not just the ones floated left.

Not a fan of that HTML though - I see loads of extra elements and uncleared floats. You don’t even need specific clearing elements in your HTML…but that’s another topic for another day though. For now, just make those clearing elements in your HTML clear:both;.

3

Hi Ryan

Magic!

Interestingly, I did not have any problems with Chrome. Computers are funny!

I am confused over this clear business. In the css there is a div .clear with {clear:both} Should that not do the trick, or does the html override?

4

You had style=“clear:left;”. No class was applied to those elements. Just inline CSS (bad!)

5

Shoudl I replace all those lines

<div style="clear: both;"></div>

with

<div class="clear">
7

Yes. That would be a start to help tidy up your c ode.

That .clear{} would need clear:both; on it.

9

Itr’s there already in the css

.clear {
    clear: both;
}
10

Good. All issues done then?

11

Over & out!

Many thanks

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.