float erron in IE8

<div id="border">
<div class="A">A - GOOD - opera/chrome/ff</div>
<div class="B">B - BAD -IE8...</div>
</div>

#border{width:800px;
padding:15px;
background:blue;}
.A{float:right;
background:red;}
.B{float:none;
background:yellow;}

Code (markup):

​

http://jsfiddle.net/henrix343/1st8nhbe/

I need those elements to be inline iin IE8... just like in opera, chrome, ff. Thanks for any directions.

 

Not seeing that broken in IE8, or anywhere else.

Though floats without widths, padding same time as width (so it ends up 830 wide) and a fixed width container are usually a nasty case of /FAIL/ at web design.

Also, you probably don't need to say float:none, that's the default behavior.

Side note, DAMN I hate JSfiddle with its crappy little boxes...

 

The question, perhaps, is... where do you see it broken (to the OP) - on an actual IE8 install, or via some idiotic "test your page in all these browsers"-page?

 

Thank you guys - problem is solved - IE8 don't suport @media and I forget that main desktop css was in @media... @deathshadow float:none !important; was used to change behavior of the element. Thank you very much.

 

That's why I think the "mobile first" approach is back-assward nonsense. Small screen devices are what we CAN target with media queries -- so why is the thing we CAN target the starting point? How does that make any sense.

The starting point, aka the first layout you design for screen media, should be the non media query capable pre-CSS3 browsers. The ones we CAN'T target, and that means desktop resolution IE8/earlier. It's no harder or difficult to strip formatting off with media queries than it is to add them.

I don't know who started this "mobile first" nonsense, but I'm seeing it bite WAY too many people in the backside. Admittedly, that seems to be the case with a LOT of the garbage people are throwing at pages these days.

 

Yes and no. Search queries on mobile devices have been higher compared to searches made on desktops starting early this year. I am still trying to make everything look half decent in IE8/earlier, but I am coming to a point where are I want to say f*ck it. Just today I spent something like two hours trying to figure out how to make something trivial work right in IE8. So I don't think it's "nonsense". The nonsense was believing that somehow if a site is mobile friendly the search engines will treat it differently. Hundreds of thousands of folks changed their designs in a hurry to adapt their sites to the requirement and today we have hundreds of thousands really dinky looking mobile sites.

 

Well, I think you hit on a lot of the issue, what the **** does layout have to do with CONTENT. People think "devices" or they think "mobile" when from a content and markup standpoint THEY SHOULD BE THE EXACT SAME THING. That's a great deal of what responsive design is about, one markup ALL possible targets.

Well written content, marked up semantically with proper separation of presentation from content? Search engines shouldn't give a flying **** about your layout if you have ANY of that. Layout is not content, and content is the big thing search engines check for. While they now do SOME layout testing, for the most part if you have used HTML correctly, not pissed all over the page with some artsy fartsy pixel based bull... then good search results should have occurred naturally.

Which is why dicking around with appearance first is back-assward. It's why thinking layout before you have content marked up is back-assward...

... and really if you're having problems doing something in legacy IE, don't do it! -- Is the page still delivering it's content in a usable manner? If yes, screw it. Do not bend over backwards trying to make IE8 show the page the exact same way as a bleeding edge chromium CVS build!

Though as I often say, there's a LOT of crap people put on websites -- particularly in layout concepts and scripttardery -- that has ZERO damned business on sites in the first place! ... or at least not if you care in the slightest about accessibility, sustainability, maintainability and usability; you know, those things most of the dipshit graphic artists who have the giant pair of donkey brass to CALL themselves "designers" seem to have little if any knowledge of?

There are so many stepping stones to proper content delivery -- and so much asshat nonsense getting in the way of that; from bloated frameworks that defeat the entire reason HTML and CSS even exist, to PSD jockeys who know shit about shit pissing all over pages, to people in general being so ignorant of the specifications or accessibility that they are unqualified to make even the most basic of choices about having a website.

Your first pass on writing the markup and organizing the content you shouldn't be thinking layout AT ALL. When it comes time for layout, you should be thinking "lowest common denominator" and sad to say, mobile / small screen isn't it! The browsers on your typical android or iOS device blows IE8/lower clear out of the water, so that's your starting point for layout.

Content dictating document structure, document structure dictating markup, markup, content and document structure dictating layoutS

 

I have encountered many problems with IE8 as well for responsive designs as you have to overide the styles if you don't want them to take impact in the desktop. So you have to override the first style in the bottom portion if you are doing like this

@media{
for mobile
}
@media{
for tab
}
@media{
for desktop
}

 

Eh, what? I'm hoping there's something to do with broken engrish here, but... WHAT? No. And I repeat, NO. You FIRST create whatever you want to make the "default" - for most sites, that would be a desktop design. THEN you override THAT design with @media-queries... You target each @media-query, you don't necessarily make one media-query for mobile, one for tablet, etc. You create break-points, based on certain factors, like max screen-width, and go from there.

 

That's really the mental disconnect the "visually oriented" people who start out dicking around with appearance before content have trouble wrapping their heads around. The very notion of making the layout change NOT for specific size devices but instead the needs of the content within it's limits is utterly alien to people who basically are still thinking HTML 3.2 style, or only have a "one size" mentality.

It's like how people don't grasp how EASY EM's are. They inherit, whoopedee doo, if you're changing font-size often enough for that to be an issue, you're changing sizes too damned much. Declare your fonts in % or EM, base your max-width and paddings in EM, so it's based on the default font size which is NOT always that magical 16px people claim in ignorance of why EM are even supposed to be used. Declare your breakpoints in EM and NOT pixels so that too adjust to the browser or OS font-size and not some arbitrary device pixel size.

With the ENDLESS plethora of screen sizes, ratios, aspect and resolutions, and the accessibility need of using dynamic fonts instead of dicking around in pixels, it's utterly and completely impractical to even THINK about targeting for specific devices -- you target by CAPABILITY.

Which is why on 90%+ of websites I still say if your media query block after your "for desktop" style ends up more than 3k, you're probably doing something horribly and disastrously wrong!

It's not hard, but people MAKE it hard by thinking about it backwards... they think device size in pixels, they think appearance before content, they think specific devices instead of capabilities, and it's all pretty much a "cart before the horse" mentality.

Emphasis on the mental.

 

Slightly off-topic, but an example of your point …

My ISP is Time-Warner Cable (TWC). They have IRC as part of their support; a Good Thing. But, they sniff the operating system when you try to log in through your browser. I cannot log in from my Linux machines because TWC "doesn't support Linux". That's stupid with a capital Dumbass. Follow protocols and let me worry about my capabilities. As proof, I spoof the UA identifier and I'm in.

Instead of the true line, "Mozilla/5.0 (X11; Linux x86_64; rv:41.0) Gecko/20100101 Firefox/41.0 Iceweasel/41.0.1" ,
I send, "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko".

So, as ds says, concern yourself with capabilities and not devices.

cheers,

gary