IE 8 float right

Hi every one!
I am making this HTML5 template and i can’t get it right on IE8, the browser is not acepting the float right class for @media only screen and (min-width: 769px) {} but instead is acepting the tablet version, heres the code:

Tablet
@media only screen and (min-width: 481px) {
.float_right_content{
float:none !important;
width:100% !important;
height:auto;
border:0px;
}
}

Desktop(is not acepting in IE8,just makes it 100% width)
@media only screen and (min-width: 769px) {
.float_right_content{
float:right !important;
width:600px !important;
height:auto;
border:0px;
}

}

The HTMl
<div class="gridContainer clearfix ">
<div id=“LayoutDiv1”>

&lt;div class="span9 float_right_content"&gt;
      [B] all stuff goes here....[/B]
   &lt;/div&gt;

</div>
</div>

IE8 screenshot

Chrome screenshot

IE8 doesn’t know about @media, so you’ll need to find a different solution. Perhaps try an IE-only style sheet.

wow! thats just great news!
Why do they do this with us?
How can i make a responsive page for IE now?
I forgot to say that ie is the windows 8 one, i dont know the version but i think its 11 or something like that.
And i think you are talking about this:http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8
right?

You can add media support with a script for ie8 and under.

https://code.google.com/p/css3-mediaqueries-js/

Or:

Both are a little quirky so read the instructions on their placement carefully.

I use the /css3-mediaqueries-js version with no problems but note that they only work when online and not locally unless you have a local server set up etc.

Im sorry what i ment was windows 8 ie browser version.

Hi,

I believe windows 8 came with IE10 as standard (but probably auto updated now to ie11).

IE9+ has no problem with media queries so there must be another issue going on. Do you have a link to the site so we can test? If not we would still need to see some sort of demo to work out the problem so will need full html and css or you could create a small codepen that exhibits the problem.

One thing to make sure though is that you are using a current up to date doctype (e.g. the html5 doctype if using html5) and that you don’t have any comments or code above the doctype and that you have not accidently triggered compatibility mode via the browser controls in the browser or are not working on an intranet.

Add this meta tag at the top of the document to avoid those issues anyway:


<!DOCTYPE HTML>
<html>
<head>
[B]<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">[/B]


OK.
I created a temporary subdomain http://straustheme.host22.com/
I am making the producton in chrome, but today i wanted to check how are things going on in IE and its the usual mess.
I just made the inicial page and about us page were the div :
<div class=“span9 float_right_content”>
all stuff goes here…
</div>

is not floating right on IE because it is acepting the tablet media query and not the desktop one with just 600px width floated right.

I just tested on firefox and it is not so bad, but on safari its the same problem with IE.

You are missing the closing bracket on the media query here:


@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	margin-top:50px;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.social_icons_footer {
	display: inline;
	float: left;
	list-style-type: none;
	z-index: 3;
	margin-left:0;
}
.float_right_content {
	float:none !important;
	width:100% !important;
	height:auto;
	border:0px;
}
.float_none_content {
	float:none !important;
	width:100% !important;
	height:auto;
	border:0px;
}
.slider_fotos {
	width:600px;
	height:300px;
}
} /* [B]this closing bracket is missing [/B]*/
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */


Oh,
Thanks Paul O’B.
I checked that before i made this post, but you know sometimes it just takes another pair of eyes to see our mistakes.

Thank you.

I would also like to post this link to my web site on the web design reviews:

marcoalexwebdesign.site11.com

to get feedback on my very first website appearence and looks but it says that i don’t have permission to post there.

Have you reviewed three other sites in that section first?

The reviews need to be over a certain length so read the guidelines again. If you have completed your reviews and they are of acceptable length then you should be allowed by the system to make your review request. If you check all the above and are still having problems then let me know and I’ll take a look and see what’s wrong.

Or the CSS validator. :slight_smile: