← Back to Upcase

Issue with column floating under another column


(Acandael Acandael) #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


(Jon Seidel) #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


(Acandael Acandael) #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


(Scott Hollinshead) #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.


(Acandael Acandael) #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


(Scott Hollinshead) #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.


(Acandael Acandael) #7

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

thanks,

Anthony


(Scott Hollinshead) #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.


(Acandael Acandael) #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


(Acandael Acandael) #10

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

http://selectivizr.com/

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

Thanks everyone for your help,

Anthony