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]-->
Related
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>
one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.
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.
Are any of these method good to use to keep the website compatible in all browser while using HTML 5 elements?
Just for example
method 1
<div class="section">
<section>
<h1>title</h1>
<p>text</p>
</section>
</div>
method 2
<section>
<div class="section">
<h1>title</h1>
<p>text</p>
</div>
</section>
In above method I will not write any CSS for HTML 5 tags so layout will not be disturbed.
Edit: my question is specially for Mobile websites because in desktop websites I know I can use HTML 5 Shiv and Modernizer but in mobile still my browser are still in use which don't have support or partial support of JavaScript. and Bandwidth is also an important issue in mobile internet so adding a JavaScript will decrease the performance.
I'm making website for mobile with content management system to update content in future and content will be updated by client using WYSIWYG Editor.
A better way would be to use the HTML5 tags as usual and include the HTML5 Shim by Remy Sharp.
Although semantically both the methods are same, I'd go with method-1 as it correctly separates content from container. (OOCSS principle)
<section>
<h1>title</h1>
<p>text</p>
</section>
This is the content. It represents a section of a document and is meaningful. You can now enclose this in a container (<div>) and style it as per your requirements.
Also, you'd realise that method-1 is more flexible when used in large websites
Personally, I use an HTML reset, use Modernizer to check for features, then shim in things:
if( Modernizr.fontface) {}, Modernizr.canvas, Modernizr.audio, etc.
This is good: http://bit.ly/b5HV1x
By HTML 5 reset, you can define the tags not understood by browsers:
footer { display:block; }
I don't think either of those methods are any good. <section /> should be used for any "section" of the markup that doesn't have a specific tag like <header /> or <article />. <div /> should be still used for layout purposes.
This is a weird CSS issue I was experiencing while trying to fix a footer that rendered properly in IE 6 but failed to render properly in IE 7. Here's what the issue was.
There is this css class, clearer, shown below:
.clearer {
clear: left;
line-height: 0;
height: 0;
}
In the JSP/HTML output, there were either:
<div class="clearer"></div>
or
<div class="clearer" />
in various places.
This is inside a JSP page that gets wrapped with external HTML. The gist of it is (the technology is called Sitemesh for those who are interested or know of Sitemesh):
<header>
<body with specific page content>
<footer>
Now, each piece of these have specific div elements, so it could be represented as such:
<div class="header"> <!-- header stuff -->
</div>
<div class="pageContent"> <!-- page content goes here -->
</div>
<div class="footer"> <!-- footer stuff -->
<div class="firstFooterDiv"></div> <!-- some footer stuff -->
<div class="secondFooterDiv"></div> <!-- some other footer stuff -->
</div>
When the pages rendered in IE 6, everything was fine. But with IE 7, the footer floated to the top for some reason. Investigating using Opera Dragonfly (which also had the issue), I found something similar to this in the DOM:
<div class="pageContent"> <!-- page content goes here -->
<div class="clearer">
<!-- actual page content?!!!! -->
</div>
<div class="footer"> <!-- footer stuff -->
<div class="firstFooterDiv"></div>
</div>
</div>
<div class="secondFooterDiv"></div> <!-- some other footer stuff -->
</div>
Somehow, that clearer div, although it was closed, behaved as an open div?! This forced the footer stuff partially into the holder for the main page content. On IE 6, the effect of this does not happen.
Any idea why this occurred?
Note that the page was valid according to XHTML-1.0 transitional, so it was not a page validation error - the divs do match up - although they match up incorrectly in the DOM!
EDIT: when clearer was removed, the pages look fine and this issue does not occur - it's only when those useless divs are in that this happens.
I'd definitely point the finger of suspicion at the self-closed divs. Although the validator may have said it's OK, and I the specs say it's OK if you're sending the document as XML, it causes all kinds of problems related to browsers' display engines and interpretation of the specs and you're much safer not to do it.
There's a good discussion of it here in question id 348736.
Empty elements with the closing "/>" is appropriate for XHTML/XML but not HTML and is treated as "tag soup", perhaps confusing the inspector. Also, empty divs are handled differently, collapsing into nothingness if they're not given a size.