Fragment styles when embedding HTML

[nshread]

Hi all,

We're having an issue on a new development in V9, and I haven't been able to find other occurrences of this problem within the community, so I'm hoping someone may have witnessed this before and can shed some light on why it's occurring.

The problem can be seen on the T's & C's page of one of our developments: www.berndesign1.co.uk

If you look at the "Shipping and Handling" section as soon as we've embedded some code to add a <H5> tag around the subheading of "24 Hour Delivery" it breaks out of paragraph formatting.

Strangely this doesn't occur earlier in the T's & C's where we embed some code to hide the email address in the "About Us" section. I assume it's because that's javascript that's embedded and not any HTML which is subject to CSS.

An example of the text and code that's entered into the "Shipping and Handling" part of the T's and C's is as follows:

Charges for delivery are not included in the stated product price - see Delivery for details of applicable charges. Every product on this site is delivered by our standard service in the UK mainland (excluding the Scottish Highlands, islands or Northern Ireland, the Isles of Scilly, Isle of Man and Channel islands.) unless you select a different delivery option at the checkout, all products ordered by this method will normally arrive within 3-5 working days working days. 

!!<<h5>24 Hour Delivery</h5>>!!
If you select the 24hr delivery option at the checkout your order will be delivered within 24hrs of dispatch, please note that the delivery services do not operate on Saturdays or Sundays therefore orders placed after 1.00pmFriday may not arrive until the following Monday.

The T's & C's code itself isn't anything special, just:

<h3><Actinic:Variable Name="ShipAndHandLabel"/></h3><p><Actinic:Variable Name="SHCharges"/></p>

I know I said Fragment in the title and text, but the example given relates to T's and C's, but that's where it's most evident. It does occur within Fragments, the page About Us did contain the issue visibly, after the <UL> within it, but I split the lower text out into a separate Text fragment to avoid. You can see that the <UL> is a different style to the paragraph format, despite it being set within CSS to be the same.

So something is astray with regards to embedded HTML, it's styling, and ending paragraphs early because of embedded HTML.


We did encounter something similar about 6 months back when we created a V8 site by upgrading from V5, and the issue with that was that Paragraph Tags were set to be replaced by <br> tags, which you couldn't unset within V8 so we had to go into Access to correct. This development though is brand new in V9.

Hope someone can shed some light on it, thanks for your time in reading this.

[Rich Brady]

I may be way off here and it may be that the solution is no where near as simple as I'm going to suggest...

... If you use the Actinic default Bold or Italic buttons in an Items description the tags it produces are as follows:

!!<<strong>>!!!!<</strong>>!!

Could it be that you need to insert the extra >>!! and !!<< inot your code?

!!<<h5>>!!24 Hour Delivery!!<</h5>>!!

[leehack]

A H5 tag is a tag in its own right and has its own styles, so you cannot compare the embedding of an email address to the embedding of a heading and expect the same results. For instance if you now have a H5 tag within a P tag, then unless you have styled the H5 tag accordingly, it will almost certainly be picking up a standard top margin which will force a gap. A H5 tag is also a block level element, whereas an A tag is not as standard. You will almost certainly find it is the standard styling applied to the tag causing the issue, not actinic.

[TraceyHand]

it's funny you should mention this actually, Nick, because I was recently working on a V9 site and had a very similar problem with subsequent text appearing 'bold' for no apparent reason.
I actually had to go through reverting a LOT of stuff back to factory layouts to fix the problem which I couldn't really pinpoint in the code at ALL.
I can't offer much help, I'm afraid...but did want you to know I'd seen a VERY similar problem (in 9.0.1)

editted to add... I wasn't embedding in fragments, mind you!

[Rich Brady]

I told you I may/would be way off...

[leehack]

I told you I may/would be way off...

What you raise is an interesting point though, actinic does add more code to embed than is needed. It seems to want to open and close embed markers around the start tag and the same around the close tag. This in practice is pointless as all code in between html tags will be treated as html anyway, so the short hand version (ie less code, lesson to learn there) does exactly the same thing unless i have missed something.

[nshread]

Hi Rich,
Many thanks for responding, but it's not that unfortunately.


Hi Lee,
It may well be a style issue, but when I embedded an Unordered List with text both before and after in a Text fragment it forced the end of a paragraph prior to the <UL> and didn't restart it afterwards. Ordinarily I would expect the paragraph to be started at the start of the Text fragment and then finished after all the content.


Hi Tracey,
Many thanks for the info, it seems that you have encountered the same thing so at least there's some history there that may suggest there is an issue rather than poor coding on our part.

Admittedly there is always the possibility that we've mucked up somewhere within the code, but we've been developing Actinic sites since V7 and have a good track record so we know our way around the software, and yet this one's stumping me.

It may well be best to strip back to the original fragment and T&C templates, but I'll wait and see if another option presents itself first.

[Duncan Rounding]

You can fix the styling issue by changing:
div#basket a, td
font-size: 12px

to:
font-weight: normal

This resolves the style problems in both the Info and About Us pages.

[leehack]

Hi Lee,
It may well be a style issue, but when I embedded an Unordered List with text both before and after in a Text fragment it forced the end of a paragraph prior to the <UL> and didn't restart it afterwards. Ordinarily I would expect the paragraph to be started at the start of the Text fragment and then finished after all the content.

I think you may be a little confused with what a <p> tag is, it is just a paragraph. So if a block of text has 3 paragraphs in it, i'd expect to see 3 opening and closing <p> tags, such as:

<p>blah blah 1</p>
<p>blah blah 2</p>
<p>blah blah 3</p>

If i wanted to add a <ul> into that, i would normally expect to have that start after a <p> ended and a new <p> start after the <ul> ended. That would be good structured and correct code in my book, such as:

<p>blah blah 1</p>
<p>blah blah 2</p>
<ul>
<li>blah blah1</li>
<li>blah blah1</li>
<li>blah blah1</li>
</ul>
<p>blah blah 3</p>

A <p> is a paragragh, not an endless block of text, the only way i can think where it could look like a group of paragraphs, but actually wasn't, was where <br/>'s were used to create the spacings in between the text.

[Rich Brady]

What you raise is an interesting point though,

Thanks for trying to protect my pride Lee...

[Rich Brady]

nshread would using the code below get what you're after:

<ul>
<li>
<h5>24 Hour Delivery</h5>
</li>
<ul><li>
If you select the 24hr delivery option at the checkout your order will be delivered within 24hrs of dispatch, please note that the delivery services do not operate on Saturdays or Sundays therefore orders placed after 1.00pmFriday may not arrive until the following Monday.
</li></ul

<li><h5>Saturday Delivery</h5></li>
<ul><li>
Saturday delivery is available at extra cost, Order by 1pm Thursday for delivery on the next Saturday. Orders after 1pm Thursday will be delivered on the following Saturday.
</li></ul>
</ul>

Standing on the shoulder's of Giants there aim afraid ( well Lee's any way).

You can fix the styling issue by changing:
div#basket a, td
font-size: 12px

to:
font-weight: normal

This resolves the style problems in both the Info and About Us pages.

Am I understanding this correctly. The font-weight here is over-riding the font-weight denoted by the h5 tag?

Heading for another fall... Lee I'm relying on you to try and cusion the impact here by attaching some relevance to my post

[leehack]

Heading for another fall... Lee I'm relying on you to try and cusion the impact here by attaching some relevance to my post

LOL Rich, bloody awful code, but you get A+ for effort cos i like people who try hard. Only kidding i have no idea what you was trying to do, so cannot comment, it sure looks ugly though - 5 pinter code i call that.

[nshread]

You can fix the styling issue by changing:
div#basket a, td
font-size: 12px

to:
font-weight: normal

This resolves the style problems in both the Info and About Us pages.

Hi Duncan,
Great spot that, the td portion of that style was added incorrectly by yours truely so has now been corrected.

Many thanks to all for collective head-scratching.

[Rich Brady]

but you get A+ for effort cos i like people who try hard.

Strange my girlfriend says I'm very trying too!

The idea was to indent the Subheadings, so that they didn't look like the <h3> headings he was using and then indent the text beneath each subheading.

I may have done it differently, but as you were both talking about un-ordered lists I thought I continue a long the same vain...

I'm thinking I'm rambling now and should perhaps shut up before I embarrass myself further!

[leehack]

If you want to indent something, then left padding or left margin are probably your best way and you can still have it as a H3 if you want, you just need to have a class applied to the H3 to differentiate it from the standard H3.

So:

<h3>Rich The Coder</h3>

<h3 class="indented">Woohoo I've Been Shifted Inwards</h3>

then in stylesheet you could have:

h3.indented {
margin-left: 30px;
}

That would give you 2 x h3 tags on the page, but they would both do something different. That logic can be applied to any tag and you can have as many different classes on the same tag as required, they just have to have their own name.