WC3 Validation

Bootstrap Studio Help
1

I've run wc3 validation, https://validator.w3.org/nu/?doc=http%3A%2F%2Fcrimson-paper-3666.bss.design%2F and find that there are a bunch of empty H3 headings that I did not use in the Carousel. I could just delete them and I don't believe it would affect the "component status, and then if I need a Heading, I think I can just add another without trouble. Hoping that is the case.

I was missing Line Numbers because wc3 uses those, so I used search at the top of HTML and put in h3 and just searched until I found each blank h3../h3 tag, then clicked on it in the HTML page and went to OVERVIEW and right click deleted it. Also Had to add to Html an attribute lang "en" which I fixed Now WC3 seems happier, but I have four of these:

An element with role=tab must be contained in, or owned by, an element with role=tablist. From line 192, column 21; to line 192, column 66 <i cl

Where do I make a role=tablist? (8 errors for each of the TABS) Under TABS or TAB ITEMS?

Also it does not like the iframe attributes "frameboarder" & "scrolling" and would prefer to see the iframe as CSS which is what I was going to work on anyway. So I'll start by deleting frameboard and scrolling. Then try to get the CSS somewhere.

Of course all the photograph img need "alt" which I'll do.

Its also picking up the obsolete "frameborder" attribute from google maps iframe too.

[]: #tab-4

2

Because of WC3 Validation Error notices about role=tablist to Tab Items ul class="nav nav-tabs" role="tablist"

3

Yes you can just add an H3 to one of your Carousel slides when you want if you want.

Just looking at it today, there are 5 errors using the link you provided.

Error 1) You have 2 titles which is why you are getting that error. Remove the "Trial" one.

Error 2-4) You can move the move the width=100% into the inline style as width:100%; or give the iframe a class/id (or use parent class/id) and move the inline style to the stylesheet and the width/height/border as well.

Error 2)

.googleCalendar iframe{
    width:100%;
    height:300px;
    border:4px solid #0099cc;
}

Error 3/4)

#tab-4 iframe{
    width:100%;
    height:450px;
    border:0;
}

Error 5) Move "Top of Page" link out of UL and delete the UL it's not needed, style link how you want.

Saj

4

This seems to validate using Custom Code (Overview, highlight custom code, then in OPTIONS right click and pick Edit, Then edit it in the CSS window area -lower right middle:

{

<div class="googleCalendar"> <iframe src="https://calendar.google.com/calendar/embed?height=300&wkst=1&bgcolor=%23ffffcc&src=s8rkli95sag5i1kb73lgr6lpmo%40group.calendar.google.com&color=%231B887A&ctz=America%2FNew_York" style=" border:4px solid #0099cc; width:100%; height:300px;"></iframe> </div>

}

5

Now I've taken [ style="border:4px solid #0099cc; width:100%; height:300px;] out of that iframe so it looks like this:

 <div class=”googleCalendar”> <iframe src=”https://calendar.google.com/calendar/embed?height=300&wkst=1&bgcolor=%23ffffcc&src=s8rkli95sag5i1kb73lgr6lpmo%40group.calendar.google.com&color=%231B887A&ctz=America%2FNew_York”></iframe> </div>

and added the CSS

 .googleCalendar iframe{ width:100%; height:300px; border:4px solid #0099cc; }

and it seems to be working!

6

Just to be complete about this, this is the other CSS that is required

googlecalendar {
   position:relative;
   height:0;
   width:100%;
   padding-bottom:100%;
  }

Also you must insert your own Calendar Code in the iframe replacing this part %23ffffcc&src=s8rkli95sag5i1kb73lgr6lpmo%40

[I can no longer edit the above, otherwise I would!!]