I'm having a very strange problem with IE8 where the paragraph text is cropping up strange angular symbols seemingly at random. Here is a sample of the source code:
<!DOCTYPE html>
<html class="html">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="7.1.329.244"/>
<title>Friends of Hartpury School Promises Auction 2014</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?4151054444"/>
<link rel="stylesheet" type="text/css" href="css/master_a-master.css?428943956"/>
<link rel="stylesheet" type="text/css" href="css/index.css?308194328" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="clearfix colelem" id="pu196"><!-- group -->
<div class="browser_width grpelem" id="u196"><!-- group -->
<div class="clearfix" id="u196_align_to_page">
<div class="clip_frame grpelem" id="u203"><!-- image -->
<img class="block" id="u203_img" src="images/friends-of.png" alt="" width="126" height="122"/>
</div>
</div>
</div>
<div class="clip_frame grpelem" id="u197"><!-- image -->
<img class="block" id="u197_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u199"><!-- image -->
<img class="block" id="u199_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u277"><!-- image -->
<img class="block" id="u277_img" src="images/header.png" alt="" width="604" height="248"/>
</div>
</div>
<div class="clearfix colelem" id="u276-11"><!-- content -->
<p><a class="nonblock" href="index.html">THE AUCTION</a> | <a class="nonblock" href="tickets.html">TICKETS</a> | <a class="nonblock" href="rules---submit-bid.html">RULES & SUBMIT BID</a></p>
</div>
<div class="rounded-corners clearfix colelem" id="u375"><!-- group -->
<div class="clearfix grpelem" id="u376-8"><!-- content -->
<p id="u376-2">Welcome to our Promises Auction website where you can see the fabulous promises that have been donated by friends, family, local and national businesses to support our school.</p>
<p id="u376-4">A huge thank you to all our sponsors!</p>
<p id="u376-6">All funds raised will go towards our Hartpury IT 21st Century appeal. In this age of technology our server is creaking, our few laptops are old and slow and all four classes in school have access to just one central printer. We need to raise £10,000 over the school year to help purchase a new server, new laptops, upgraded interactive whiteboards and printers for each classroom. If possible we would also like to provide e-readers too.</p>
</div>
</div>
<div class="clearfix colelem" id="u526"><!-- group -->
<div class="pointer_cursor rounded-corners clearfix grpelem" id="u517"><!-- group -->
<a class="block" href="http://#"></a>
<a class="nonblock nontext clearfix grpelem" id="u520-4" href="http://#"><!-- content --><p>PROMISES SO FAR</p></a>
<a class="nonblock nontext clip_frame grpelem" id="u521" href="http://#"><!-- image --><img class="block" id="u521_img" src="images/forward.png" alt="" width="38" height="38"/></a>
</div>
</div>
<div class="clearfix colelem" id="pu527"><!-- group -->
<div class="rounded-corners clearfix grpelem" id="u527"><!-- group -->
<div class="clearfix grpelem" id="u533-11"><!-- content -->
<p id="u533-2">How to donate</p>
<p class="ts-Default-Link-Style--copy" id="u533-7">If our catalogue inspires you to donate a promise, please use this <a class="nonblock" href="rules---submit-bid.html"><span id="u533-4">donor form</span></a> and someone from the auction team will contact you.</p>
<p id="u533-9">Thank you so much for your support.</p>
</div>
</div>
<div class="rounded-corners clearfix grpelem" id="u528"><!-- group -->
<div class="clearfix grpelem" id="u529-17"><!-- content -->
<p id="u529-2">What if I can’t make the Auction?</p>
<p id="u529-4">Hopefully the catalogue will tempt you to come along to the Auction on 29th can’t make it then advance bids can be submitted by:</p>
<p class="Paragraph-Style" id="u529-8">Submitting an <a class="nonblock" href="rules---submit-bid.html"><span id="u529-6">on-line bid</span></a></p>
<p class="Paragraph-Style" id="u529-13">Completing <a class="nonblock" href="http://www.hartpuryauction.co.uk/formdownload/PreAuctionBidForm.doc"><span id="u529-10">this pre-auction bid form</span></a> and placing it in a sealed envelope addressed to FOHS Promises Auction c/o the school office.</p>
<p id="u529-15">Please read our very simple rules before submitting your bid.</p>
</div>
</div>
<div class="rounded-corners grpelem" id="u872"><!-- simple frame --></div>
<div class="rounded-corners grpelem" id="u873"><!-- simple frame --></div>
</div>
<div class="verticalspacer"></div>
<div class="browser_width colelem" id="u356"><!-- column -->
<div class="clearfix" id="u356_align_to_page">
<div class="position_content" id="u356_position_content">
<div class="clip_frame colelem" id="u362"><!-- image -->
<img class="block" id="u362_img" src="images/footer-banner.png" alt="" width="604" height="125"/>
</div>
<div class="clearfix colelem" id="u368-4"><!-- content -->
<p>Suas appareat pro eu. Te sea liber senserit maluisset, diam moderatius ea quo. Qui at purto docendi placerat, pertinax efficiendi mea ei. Adhuc fugit eloquentiam ut usu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?117816282" type="text/javascript"></script>
<script src="scripts/jquery.tobrowserwidth.js?152985095" type="text/javascript"></script>
<script src="scripts/jquery.watch.js?4199601726" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
$('.browser_width').toBrowserWidth();/* browser width elements */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
If you copy your code and paste it into another editor (I'm using Notepad++), you will see the weird symbols in your text.
You will need to go back and erase these characters and paste it back into your website. And then when inserting new content into your site, you need to make sure the text is written in/or saved as charset=UTF-8, which is what your site specifies.
I was able to find a similar report in an Adobe post.
http://forums.adobe.com/thread/1073776
It wasn't really 'solved' but you may try deleting characters that seem like spaces and putting them back in. There could be characters that appear to be spaces to your editor (and other browsers) that are actually a different char.
Related
I don't post here often at all but only when I am stumped and I fos sure am.
I have a div tag with inside an article tag and the div tag wont extend the background held by the article tag.
The code I have is split into many different files to use jsfiddle so I'll post it here and provide screen shots of what is happening. If you guys can figure it out an explanation would be greatly appreciated.
This is a screen shot of whats happening, I want the twitter to be above the twitter widget, but it overflows under the facebook rather then extending the article background down.
This is the CSS: https://pastebin.com/y1MPG6rV
It is to many characters to paste here.
Image of whats happening on my end: https://imgur.com/a/GuUs1m4
This is the HTML:
<!-- Wrapper -->
<div id="wrapper">
<!-- About -->
<article id="about">
<h2 class="major">About.</h2>
<span class="image main"><img src="images/fbcover.jpg" alt="" /></span>
<div class="medias"><center>
<div>
<span>Facebook</span>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FDelusionsEntertainment%2F&tabs&width=340&height=180&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="180"
style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="cust">
<span>Twitter</span>
<a class="twitter-timeline" data-width="305" data-height="356" data-theme="light" href="https://twitter.com/DelusionsENT?ref_src=twsrc%5Etfw">Tweets by DelusionsENT</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</center></div>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">Delusions Entertainment™</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
Instead of fixed height you can use this:
.medias { height:auto }
I have a counter in my html code. I want to align this counter in the middle of the site. There is a helper class, called text-align which works with almost all objects on the site but i don't know how to align a script entry.
My code looks like this:
<section class="wow fadeIn">
<div class="container-fluid full-screen position-relative no-padding no-transition" >
<div class="opacity-medium bg-white"></div>
<div id="animated-balls"></div>
<div class="slider-typography xs-position-inherit">
<div class="slider-text-middle-main">
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/offene-stadt.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<div id="countdown-target" class="text-center"></div>
<script>
var myCountdown1 = new Countdown({time:86400*20});
</script>
</div>
<!-- end time -->
You can set a target to point it at a specific item so try this:
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/logo-light-big.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<i class="icon-anchor medium-icon"></i>
<div id="countdownTarget" class="center-block"></div>
<script>
var myCountdown1 = new Countdown({time:316, target: "countdownTarget"});
</script>
<!-- end time -->
</div>
And then use your existing text-align technique on the #countdownTarget to position it how you like.
I am having trouble getting quotes (within divs) to line up properly.
This site is here
http://79.170.44.107/robinsonhambro.com/wp/.
What I need to do is line up the divs (with a class or id of hero) across a horizontal line along the top and the bottom of the picture. For some reason they dont seem to be sitting evenly.
Can anyone give me some help?
I assume the issue you are having is the quotes in the right hand side is a little lower than the other two DIVs.
One of the issues I saw was that there is an empty <p> in your right div. If you remove it, the text should line up with the rest of the DIVs. Remove this from your html: <p><!-- Right div hero section --></p>
Also, your .entry class has huge amount of padding in it,remove that and it should bring everything down closer.
I'd also recommend removing the other <p> tags and using margins for better control off the elements.
Here is my update to your html. This work from from browser.
Updated Style.CSS
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:50px 50px 45px 0;
becomes....
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:0 50px 45px 0;
Updated html
<div id="herobox">
<div id="left-hero">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2015/02/newdoor.jpg" width="265px" height="426px" alt="Robinson Hambro Door">
</div>
<div id="centre-hero">
<h1>
<p class="pcentre">Robinson Hambro specialises in Board Search and Chairman Advisory. The Firm advises companies with a global outlook drawing on the experience of a multilingual and multidisciplinary team.</p>
</h1>
<div class="subcentrehero">
<p class="p03">Robinson Hambro Chairman Advisory Service is priceless.Լ/p>
<p class="p04">- Carles Casajuana, former Spanish Ambassador to the UK</p>
</div>
<div class="subcentrehero">
<p class="p03">Robinson Hambro advice was invaluable and I could not recommend them more highly!</p>
<p class="p04">- Global COO of a $45bn firm</p>
</div>
</div>
<div id="right-hero">
<p class="p01">The process was carried out to a high standard, in a timely way, and I can therefore wholeheartedly recommend this service.</p>
<p class="p02">- Dr Andrew McCulloch, CEO, MHF</p>
<p class="p01">Karina knows everyone</p>
<p class="p02">Fiona Woolf, former Lord Mayor of the City of London</p>
<p class="p01">We would have no hesitation in highly recommending Robinson Hambro for an assignment in any sector.</p>
<p class="p02">- Robin Walker, Deputy Chairman, Berry Gardens</p>
</div>
</div>
<div style="clear:both"></div>
</article> <!-- end .entry -->
</div> <!-- end #main_content -->
</div> <!-- end #content_area -->
</div> <!-- end .container -->
</div> <!-- end #main-area -->
</div> <!-- end #page-wrap -->
<footer id="main-footer">
<div class="container clearfix">
<div id="footer-top-shadow"></div>
<div id="footer-widgets" class="clearfix">
<div class="footer-widget footer-col1"><div id="text-4" class="f_widget widget_text"><h4 class="widgettitle">INSIDER VIEW</h4> <div class="textwidget">Visit Karina's Column for insights on the world of finance by Robinson Hambro's Karina Robinson
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col2"><div id="text-5" class="f_widget widget_text"><h4 class="widgettitle">What We Do</h4> <div class="textwidget">Guiding Principles
<br/>
Chairman Counsel
<br/>
Board Search</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col3"><div id="text-6" class="f_widget widget_text"><h4 class="widgettitle">Get in touch</h4> <div class="textwidget">t: +44 (0) 20 3405 2355
<br/>
m: +44 (0) 7980 510 975
<br/>
e: info#robinsonhambro.com
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col4 last"><div id="text-3" class="f_widget widget_text"><h4 class="widgettitle">LINKS</h4> <div class="textwidget"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/women.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/bankers.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/youtube.png">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/googleplus.png"> </div>
</div></div> <!-- end . footer-widget --> </div> <!-- end #footer-widgets -->
<p id="copyright">Designed by Elegant Themes | Powered by WordPress</p>
</div> <!-- end .container -->
</footer> <!-- end #main-footer -->
Here's my url http://bloomh.com/
If you look down in the "testimonial" section you'll see a bunch of weird characters being displayed. Strange thing is that it seems to "grow" over time and the code is inside my html. Obviously I did not add this to my original html.
How and why is this happening. Very strange. Any help and direction would be greatly appreciated.
Ok here's the html and php. The weird characters are inside the html however I did not add that at all. Also another small caveat is I used the frontend creator Webflow.com and then exported the html and transferred over to my hosting. Webflow is pretty legit and I've already spoken with them and they've assured me that their code is clean. Once again this happened after I published the page and used the php form a couple of times then those weird characters started to "grow" over time.
HTML
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Tue Aug 19 2014 18:12:20 GMT+0000 (UTC) -->
<html data-wf-site="5359ea800548c9ed4700023a" data-wf-page="53dbf829e673629c186afc3f">
<head>
<meta charset="utf-8">
<title>Bloomh</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/bloomhmvp.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Carme:regular","Roboto Slab:300,regular,700","Nixie One:regular","Pontano Sans:regular","Quicksand:300,regular,700","Muli:300,300italic,regular,italic","Raleway:300,regular,500,600,700,800,900","Arimo:regular,italic,700,700italic","Oxygen:300,regular,700","Cabin:regular,italic,500,500italic,600,600italic,700,700italic","Roboto:300,300italic,regular,italic,500,500italic,700,700italic,900,900italic"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/fontawesome-webfont.svg">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="w-nav navbar vl" data-collapse="medium" data-animation="default" data-duration="400">
<div class="w-clearfix navbar-section">
<div class="logo-container vl">
<a class="w-nav-brand logo vl" href="#"></a><a class="brand vl" href="#">Bloomh</a>
</div>
</div>
</div>
<div class="hero-background home2 vl">
<div class="w-container hero-container">
<div class="coming-soon">COMING SOON!</div>
<div class="centering-container _95">
<h1 class="hero-tagline home2 vendor-landing vl">Brides set the price<br>Vendors come to them</h1>
</div>
<div class="centering-container _85 tablet">
<h2 class="secondary-tagline home2 vendor-landing vl">A new way to hire photographers & videographers</h2>
</div>
<div class="vendor-question-box">
<div class="w-row">
<div class="w-col w-col-4">
<div class="w-form">
<form id="wf-form-vl2-signup" action="php/vl2_submit.php" method="post" name="wf-form-vl2-signup" data-name="vl2 signup" data-redirect="http://www.bloomh.com">
<div class="centering-container">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-email" type="email" placeholder="Valid Email" name="vl2_email" data-name="vl2 email" required="required">
<input class="w-input post-page-input-fields input-fields vendor-landing vl" id="vl2-address" type="text" placeholder="Website address?" name="vl2_address" data-name="vl2 address" required="required">
<input class="w-button button join-button vendor-join vl" type="submit" value="Vendor Join!" data-wait="Joining..." wait="Joining...">
</div>
</form>
<div class="w-form-done">
<p>Thank you! Your submission has been received!</p>
</div>
<div class="w-form-fail">
<p>Oops! Something went wrong while submitting the form :(</p>
</div>
</div>
</div>
<div class="w-col w-col-8">
<div class="centering-container _85 vl">
<div class="vendor-question vl">Are you a Photographer or Videographer?</div>
<div class="w-hidden-main w-hidden-medium w-hidden-small how-to-wrap vl">
<div class="centering-container vendor-sale mobile">
<div class="vendor-sale-text vl">Sign Up</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down vendor-welcome vl"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl get-clients">Get clients via email</div>
</div>
<div class="centering-container">
<div class="fa fa-chevron-down mobile"></div>
</div>
<div class="centering-container mobile">
<div class="vendor-sale-text vl">Free and Easy!</div>
</div>
</div>
<div class="w-hidden-tiny vendor-question-subtext phone">
<div class="vendor-how-to vendor-landing vl">Sign Up</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Get clients in your inbox</div>
<div class="fa fa-chevron-right vendor-landing vl"></div>
<div class="vendor-how-to vendor-landing vl">Free and Easy!</div>
</div>
<div class="more-categories vendor-landing vl">Birthdays / Portraits / Parties / Bat Mitzvahs / Engagements</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vl-testimonials">
<div class="centering-container vl testimonials">
<div class="testimonial vl">Testimonials</div>
<div class="testimonial-text vl">“I use Bloomh to get most of my new wedding clients. It plays a big part in growing my business.â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Lance Capshaw, Huntington Beach CA
<br>(Vendor)</div>
<div class="testimonial-text vl">“I can't believe this service is free! I use it to get my wedding clients. They just come into my inbox!â€ÂÂÂÂÂÂ</div>
<div class="testimonial-user main vl">- Trish Carpenter, Hermosa Beach, CA
<br>(Vendor)</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>
**** PHP ****
<?php
$email = htmlspecialchars($_POST['vl2_email']);
$website_address = htmlspecialchars($_POST['vl2_address']);
mail("bpark#bloomh.com", "New Vendor vl2", "From: $email", "Website Address: $website_address");
header("Location:../vl2-confirm.html");
?>
1) Search the whole code with the class name "testimonial-text" and see the code, try to replace the content after typing from notepad.
2) add a <p>Your content content</p> for your paragraphs.
3) you can paste the server side code for us.
4) You need to tell to MySQL that the connection must be made in UTF-8.
This question already has answers here:
What is XHTML role attribute? What do you use it for?
(3 answers)
Closed 8 years ago.
I have created a web page using html5.
I used source code from bootstrap.
For example: role="main", role ="navigation", role = "document" etc.
If I remove these attribute from my code, page didn't any change.
So I want to know: what is the purpose of "role" attribute?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
<title>Layout</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body role="document">
<!-- Fixed navbar -->
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<h1><img src="img/logo.png" /></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="banner-div">
<img src="img/banner.png" class="banner"/>
<img src="img/issue-no-img.png" class="issue-badge"/>
<span class="issue">Issue No.<br /><b>376</b></span>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/left-note-img.png"/>
</div>
<div class="col-md-4 align-center">
<p><span class="new-radius"> NEW! </span> <span class="new">JUN 07, 2003</span></p>
<p><i>Get your breaks points on.</i></p>
<span>
<h1>DOT NET ARTICLES</h1>
</span>
<span class="comments"><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
</div>
<div class="col-md-4 pull-right">
<div class="input-group">
<input type="text" class="form-control search-input-box" placeholder="Search..." />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<hr class="hr-style"/>
<p class = "header-pgf">
Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
</p>
<hr class="hr-style">
<h1 class="more-apart">More from A List Apart</h1>
<hr class="hr-style">
<div class="row">
<div class="col-md-3">
<h2>Columnists</h2>
<p>JACK MCGRANE <i>on</i> CONTENT</p>
<p class="pgf-header">The Alternative is Nothing</p>
<img src="img/thumb1.jpg" class="float-left" />
<p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
</div>
<div class="col-md-3">
<h2>From the Blog</h2>
<p class="pgf-header">Maps Should Be Crafted.Not "Plugged In"></p>
<p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA's recent "Hack Your Maps." Happy Cog's Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
</div>
<div class="col-md-3">
<p class="md-3">Amazon Web Services Introduces a New API</p>
<p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
</div>
<div class="col-md-3">
<h5>Gratitude</h5>
<p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
<div class="well align-center">
<img src="img/mothers-day.jpg" /> <br/>
<p class="font-10">Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
</div>
<div class="job-board">
<h5>Job Board</h5>
<a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
More on the Job Board >
</div>
</div>
</div>
<br />
</div>
</div>
<!-- /container -->
<div class="footer" style="">
<div class="container">
<div class="list-footer" style="font-size:13px;">
<span class="padding-10"><img src="img/article-logo.png" /></span>
<span class="padding-10">ARTICLES</span>
<span class="padding-10">COLUMNS</span>
<span class="padding-10">BLOG</span>
<span class="padding-10">TOPICS</span>
</div>
<div class = "list-footer" style="font-size:12px;">
<span class="padding-10">ABOUT</span>
<span class="padding-10">AUTHORS</span>
<span class="padding-10">MASTHEAD</span>
<span class="padding-10">CONTRIBUTE</span>
<span class="padding-10">STYLE GUIDE</span>
<span class="padding-10">CONTACT</span>
<span class="padding-10">SPONSORSHIPS</span>
</div>
<hr class="hr-style"/>
<div class="row">
<div class="col-md-6">
<img src="img/dot-net-ad.jpg" class="footer-image"/>
<h3>.NET Training</h3>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="col-md-6">
<img src="img/shopify-expert-ad.jpg" class="footer-image"/>
<h3>Shopify Expert</h3>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<a class="footer-link" href="#">click to view</a>
</div>
</div>
<hr class="hr-style" />
<div style="text-align:center">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</div>
</div>
</body>
</html>
It provides support for ARIA (Accessible Rich Internet Applications) which allows to specify even more semantic richness in documents.
You can add role="search" to your search form, role="banner" to your
masthead, and role="contentinfo" to your page footer. There’s a full
list of values in the ARIA specification at
http://www.w3.org/TR/wai-aria/roles#role_definitions.
Basically you don't have to add them, but its better if you do as it provides more context for your page. More discussed at A List Apart.
The new structural elements in HTML5 will be very useful to assistive technology. Instead of creating “skip navigation” links, all we need to do is use the nav element correctly. This will allow screen reader users to skip past navigation without us having to provide an explicit link.
Twitter Bootstrap uses like <nav role="navigation">. So Bootstrap take consider not only normal browser but also take care of screen reader browsers.
Note: By including Role attribute you are making your website more accessible and its good practice to use this Role attribute.