I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.
Related
I've got a 3x3 grid built with Zurb's Foundations framework and on load sometimes these boxes overlap each other. The number of image that load normally and the number that does not is completely random. Sometimes it's just one image, sometimes all of them, etc. It also happens more often when you view the website from http:// instead of locally. Just take a look at the image below.
The boxes are responsive, in such way they decrease in size when the browser gets smaller dan 1200px in width. Therefor a static height of each box isn't an option. They do remain the same ratio (4:3).
How do I make them not overlap each other?
I think the issue is the browser renders the boxes quicker than it can render each image- and therefor doesn't take the height into account.
My code for this part looks like this
<div class="row">
<div class="large-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
</div>
I think this is a classic case for a Foundation block-grid. Just change the class from large-3 to large-block-grid-3.
So your code will look like this:
<div class="row">
<div class="large-block-grid-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
You can learn more about Foundation block grid here
I added the .imageLoaded() jQuery plugin and configured it so that only when all images are loaded in the #grid then shuffle.js could load; a plugin that I use for shuffling/filtering the items.
Now, both on reload and clear-cache-full-reload, it works- and is showing correctly.
The problem was that if the plugin is fired before all/any of the image has been loaded, it just gives it a 10px height. Now, by firing the plugin after all images have been loaded, they get shown at their full height.
Strangely though, I applied this suggestion before I changed my grid to a block-grid, as suggested by #Asaf David, it didn't work. Now it does.
++ Credits to #Asaf David, for suggesting the block-grid, although I either can't confirm nor deny this helped. But at least it improved my code, imho.
Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?
Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?
Here a short excerpt:
<section class="about-us block">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>
<span class="fa fa-leaf"></span>
</div>
</div>
</div>
</section>
<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>
At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.
Would it do any good in consideration of semantics to follow this approach?
The Bootstrap is unsemantic by default
Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.
But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.
HTML5 tags
Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.
Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.
Why to still use the new HTML tags
Because:
It's more readable.
It's easier to debug.
It's more modern.
It's a bit more meaningful and consequential.
So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.
… even minified version of new tags is more readable:
<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>
For designs similar to this the image card used on Materialize: http://materializecss.com/components.html#
Screenshot: http://i.imgur.com/zvncUFz.png
Should I be using roles of a group or listbox for properly describing the content? I'm a tad lost reading through the aria accessibility specs.
Basic Structure:
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Card Content</p>
<a href='#'>Authors</a>
</div>
<div class="card-action">
This is a link
</div>
</div>
Side question on possibly how to deal properly addressing the links for multiple authors.
I would consider this to be a figure with a figcaption.
I would mark this up as follows(in Jade):
figure
div.card-image
img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible")
span.card-title Card Title
figcaption Anything within this figcaption tag will automatically be spoken by the screen reader
a.card-action(href="#") This is a link
In this case, there is no need at all to use any ARIA attributes. All that is needed is semantic markup. I hope this helps.
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.
I'm using the Blueprint CSS framework to develop my website to ensure cross-browser compatability...except, it looks completely different in IE.
The site is http://rtwilson.com/academic-new/ and looks fine in Firefox and Chrome, but completely messed up in IE. The main body is not centred, the image is in the wrong place and the text is rather weird.
Does anyone have any idea how I can sort this? I thought the whole point of Blueprint et al. was that it sorted the problems with cross-browser (particularly IE) compatibility. I have included the correct IE style file - so any other ideas?
Blueprint is fine (although I have recently switched to Twitter Bootstrap)- regardless of the complexity of the site, and it does do all of the things for you, as long as your markup is correct and the classes are used correctly.
One place to start, other than the doctype (which should be added, as well - as mentioned by Michas), would be to add a "last" class to the div that contains your navbar div. The way you have it written right now is that you have a span-24, containing another span-24 immediately followed by a span-15 and a span-9.
You have:
<div class="span-24 last">
<div class="span-24">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
You should have:
<div class="span-24 last">
<div class="span-24 last">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
As it is written now, I would not be in the least bit surprised that IE can't figure out that there shouldn't be 48 spans in a single row.
If I am being honest, I wouldn't use blueprint css - a site simple as yours I would simply just create a seperate stylesheet for IE, and link it like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->