html tag conflict and

19 Posts

dclayton Reply #1, 13 years, 6 months ago

Lads,

This one has me stumped.
http://c0175.paas2.tx.modxcloud.com/

I can move the video below the "learn more" button and it has a nice frame, plays fine. The little Youtube imbed above the "learn more" button ( a test imbed with the exact same code) also plays fine but looks a bit different....but when I put the youtube imbed in the <aside> tag, it just sits there looking goofy. Does this have something to do with the <aside> and <article> tags?

here is the <aside> .css section:

aside[role=complementary] {
background: #f0f0f0;
border-right: 1px solid #e0e0e0;
display: table-cell;
padding: 10px 20px;
width: 180px;
}
aside[role=complementary] h2 {
font-size: 16px;
color: black;
}
aside[role=complementary] p {
font-size: 11px;
} [ed. note: dclayton last edited this post 13 years, 6 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 6 months ago

You have some problems with your HTML... http://validator.w3.org/check?uri=http%3A%2F%2Fc0175.paas2.tx.modxcloud.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

19 Posts

dclayton Reply #3, 13 years, 6 months ago

Hi Mr. Sottwell,

I fixed all the html issues, except one:

<ul><li class="first active"><a href="http://c0175.paas2.tx.modxcloud.com…

This error is being generated by the Wayfinder call. I cannot get rid of that first <ul><li class="first ..
no matter what I do...

<nav class="clearfix">
<ul role="navigation">

[[!Wayfinder? &startId=`0` ]]
</ul>
</nav>

This does not seem to impact the Menus or the formatting. If you look at the Home page, i have also cleaned up the code a bit...

Thank you...

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 13 years, 6 months ago

Wayfinder generates its own <ul>...</ul> tags; that is the outerTpl. You should not have those tags in your HTML.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,572 Posts

Paulp Reply #5, 13 years, 6 months ago

You have alot more <aside> code in your CSS than that:
main.css

section[role="banner"] article[role="main"] aside:after {
   background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.8) inset, 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -6px 0 rgba(0, 0, 0, 0.3) inset, 0 -7px 0 rgba(255, 255, 255, 0.2) inset;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

section[role="banner"] article[role="main"] aside {
 border: 3px solid rgba(0, 0, 0, 0.03);
    border-radius: 5px 5px 5px 5px;
    float: right;
    overflow: hidden;
    padding: 2px;
    position: relative;
    width: 40%;
}
aside[role="complementary"] {
  background: none repeat scroll 0 0 #F0F0F0;
    border-right: 1px solid #E0E0E0;
    display: table-cell;
    padding: 10px 20px;
    width: 180px;
}

Removing position: absolute from

section[role="banner"] article[role="main"] aside:after

allows the embed to play and just start removing elements from the above to get it to display however you want

19 Posts

dclayton Reply #6, 13 years, 6 months ago

Mr. Sottwell..

1.<ul role="navigation">

[[!Wayfinder? &startId=`0` ]]
2.</ul>

If I comment out what I have numbered #1 above, the menu formatting is lost and displays as a list with no tabs. If i comment out #2, I get an error for an unclosed tag in addition to this error for the <ul> tag from Wayfinder:

<ul><li class="first active"><a href="http://c0175.paas2.tx.modxcloud.com…

I can't seem to find a way to close that <ul> tag from the Wayfinder call. Adding a second </ul> after the call won't do it...

1,572 Posts

Paulp Reply #7, 13 years, 6 months ago

Mr. Sottwell..

Might want to change that to Miss / Mrs ;o)

19 Posts

dclayton Reply #8, 13 years, 6 months ago

Quote from: paulp at Apr 13, 2013, 11:07 AM

Mr. Sottwell..

Might want to change that to Miss / Mrs ;o)

My apologies! I didn't take a good look at the author foto...me old eyes ain't so goodly no mas...

19 Posts

dclayton Reply #9, 13 years, 6 months ago

Paulp,

I commented out then removed the position: absolute and it made no change either way. I am working in Safari and Chrome.

Removing position: absolute from

section[role="banner"] article[role="main"] aside:after

allows the embed to play and just start removing elements from the above to get it to display however you want

</aside>

1,572 Posts

Paulp Reply #10, 13 years, 6 months ago

I'm looking at it in Firefox so removing the above does work to make it play, for styling your going to have to remove more depending on how you want it styled.

From my experience Safari and especially Chrome have issues with caching so I would recomend whenever you make a change delete everything from the core / cache folder and also clear the browser cache.