Issue with column floating under another column

Design Front End Development
1

Hi,

The customer of the website:

http://test.anniek-lambrecht.be

reported that there was a problem with the right column ‘acties’, it floats under the left colum ‘Beatysalon Anniek Lambrecht’.

I couldn’t verify this issue on my Mac Book Pro (retina) nor on any other screen, hence my question on this forum if any of you guys is experiencing this issue on his screen.

my source code is here: https://github.com/acandael/beautysalon

thanks for your cooperation,

Anthony

2

I just tried it on my MacBookPro running the latest versions of Firefox and Chrome and see no problem.

I’d check with the client and see what browser/version they are using?

HTH…jon

3

Hi JESii, thanks for checking it out. I also tested it out on different screen resolutions, even on a 15’ monitor with a 1024x789 screen resolution and couldn’t reproduce the layout issue.

For a moment I thought that maybe the client didn’t had her browser fully expanded, but the layout stays intact even when manually resizing the browser window.

So yeah, I asked the client what browser version she is using and what screen resolution she has on her monitor.

thanks,

Anthony

4

Hi @acandael_acanda, I have looked on my Macbook 13" and everything seems okay.

I recommend using browser stack to test on different OS’s and Browsers. It is a paid service, but it has a 14day free trial, and I use it quite frequently.

5

thanks scott, I just tried browser stack and I could verify the problem

It’s with IE 7.0 and a screen resolution of 1024x768 that the issue occurs.

All the content on the right is stacking underneath the left content.

Not sure how to solve this issue.

I used the html5 boilerplate skeleton and this text appears for older browser:

<!--[if lt IE 8]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

It’s not an html5 issue, because I put this html5 shiv in my header, but that didn’t solve the issue:

<!--[if lt IE 9]>
	     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

thanks for the tip on Browserstack

greetings,

Anthony

6

Your welcome, If you are using html5 boilerplate you can add .lt-ie8 styles to correct the issues, IE7 has a lot of bugs the way floats and inline block elements work, there are various hacks for it.

7

hi scott, thanks for the advance. Where can I find thos .lt-ie8 styles ?

thanks,

Anthony

8

@acandael_acanda you create them yorself, html5 boilerplate add’s the .lt-ie8 ect classes to the html tag of the document depending on what browser the user is using. So say if your class that is messing up is .foo then you would create another called .lt-ie8 .foo to target only IE 7 and below users.

In there you can then add stuff you need to fix it.

9

@scott thanks,

I’m trying this .lt-ie9 style:

.lt-ie9 article.section {
width: 30px;
	}

I purposely set the article width property to a very narrow width, but the layout doesn’t seem affect at all by this conditional style.

I’m testing with BrowserStack

Anthony

10

phew, solved it. Reading the Neat documentation, I saw that for IE7 and lt IE8 support, the selectivizr plugin is needed:

so I added the selectivizr plugin to my page, and this solved the issue.

Thanks everyone for your help,

Anthony