Ok i have a telerik:RadRotator on my page that loads a few images from the db, the rotator displays correctly in both FireFox and Chrome but when i open it in IE9 the rotator div is placed on the page but the rotator itself doesn't display(render).
<telerik:RadRotator ID="RadRotator1" runat="server" Width="791px" Height="215px"
ItemHeight="215px" ItemWidth="791px" OnItemDataBound="RadRotator1_ItemDataBound"
RotatorType="AutomaticAdvance" FrameDuration="10000" ScrollDuration="3000" CssClass="ImageRotator"
ScrollDirection="Right" PauseOnMouseOver="false">
<ItemTemplate>
<asp:HyperLink ID="hypImage" runat="server">
<asp:Image ID="imgScroller" runat="server" Width="791" Height="215" /></asp:HyperLink>
</ItemTemplate>
Any ideas as to what is happening here? I have tried to remove the styles applied and nothing.
Such problems are often related to an incorrectly formatted HTML that is not ignored by IE, especially older versions of the browser. The only issue that I found in your code was the unclosed RadRotator control tag, although most probably you have missed it by accident. Since the code from your sample appears to be valid, it is possible that an erroneous content is inserted from the data source. Please verify that the content in the datasource is entered correctly and that the data, populating the items of the rotator, is properly escaped before it is used. You can also check if the RadRotator's items are rendered properly by examining the content of the li elements in the HTML representation of the control on the source of your page.
Ok after much fuss I found that the scroller itself was wrapped in a hyperlink. After removing the hyperlink everything works 100%
Related
Documentation from abcpdf, http://www.websupergoo.com/helppdf9net/source/3-concepts/g-htmlrender.htm, says that the html element below will cause a page break. It does but for the last page as you can see in the screen shot it doesnt. HTML passes validation, and the breaks are there so is this a bug?
<div style="page-break-before: always"> </div>
This seems to be by design, so no fix for it.
The Ajax accordion on my page isn't functioning at all. It displays fine on the page, but I can't seem to expand/collapse the panes when I click on their Headers.
Here's my code (just the HTML portion as I'm not aware of any code behind that is needed):
<aj:Accordion runat="server" ID="acMain" SelectedIndex="0"
FadeTransitions="true"
TransitionDuration="400"
FramesPerSecond="40" RequireOpenedPane="false" TabIndex="0"
SuppressHeaderPostbacks="true" HeaderCssClass="acHeader"
HeaderSelectedCssClass="acHeaderSelected">
<Panes>
<aj:AccordionPane runat="server" ID="Panel1">
<Header>
...
</Header>
<Content>
...
</Content>
</aj:AccordionPane>
<aj:AccordionPane runat="server" ID="Panel2">
<Header>
...
</Header>
<Content>
...
</Content>
</aj:AccordionPane>
</Panes>
</aj:Accordion>
I've checked the official page for the Accordion as well as a number of blogs on the subject (all of which seem to be a copy of the official page with the author's own wording) and according to all of this, I can't see that I've done anything wrong or missed anything out.
Matter of fact, I've checked an Accordion my boss made a while back and my code's basically the same as his (only panel content is different) and he has no code-behind either, so I'm really lost here.
Any help will be greatly appreciated
EDIT
After adapting my code according to a sample on asp.net, I've managed to collapse the first pane (SelectedIndex 0), but the other one won't expand :/
So I copied the accordion code from the asp.net how to page and put my content into the panes, still had no effect.
As it turns out, there was a rogue </div> tag in my content that was wrecking the accordion so I recommend that anyone having any similar problems checks their content very thoroughly.
Also, it's worth noting here that as this particular sample worked for me and because I'm telling you to use it if you're having trouble, it's author did leave an incorrectly closed </p> tag that might cause problems with your accordion during testing, so watch out for that.
I'm working on a new website re-design; so far every browser compatibility issue has been resolved no problem - but there's one that remains in IE7.
The client has a dropdown menu from the header which extends over the content, but the problem occurs when the client has a related video on the page as this is often displayed first; the video [being displayed just below the header] pushes the menu behind.
The dropdown is created in CSS using a high z-index value (1000).
JavaScript is used to hide and show the menu by altering the 'visibility' value.
The video uses jPlayer, given the age of IE7 it doesn't use HTML5 to display the video but instead includes a .swf file.
I have tried altering the z-index of the header, jPlayer, etc to the suggestions on this site but had no luck. I have also tried changing the position from absolute to relative but this broke the dropdown.
I have modified the parameter 'wmode' so that it's property is 'transparent', I've also tried 'opaque'.
The only difference I have made so far is adding hours to the work-log.
The page is question can be found here:
http://www.newforest.gov.uk/healthandleisure/
Thanks!
Have you tried an iframe shim? I had a similar experience with the google earth plugin, and adding the shim to the pieces that need to go on top of the swf elements as:
<iframe class="bgi" frameborder="0" scrolling="no" src="about:blank">
<html><head></head><body></body></html>
</iframe>
where bgi is a class that has
height:100%;
width:100%;
z-index:-1;
I recently have found a strange occurrence in IE8 & FF.
The designers where using js to dynamically create some span tags for layout (they were placing rounded corner graphics on some tabs). Now the xhtml, in js, looked like this: <span class=”leftcorner” /><span class=”rightcorner” /> and worked perfectly!
As we all know dynamically rendering elements in js can be quite processor intensive so I moved the elements from js into the page source, exactly as above.
... and it didn’t work... not only didn’t it work, it crashes IE8.The fix was simple, put the close span in ie: <span class=”leftcorner”></span>
I am a bit confused by this.
Firstly as far as I am aware <span class=”leftcorner” /> is perfectly valid XHTML!
Secondly it works dynamically, but not in XHTML?!?!?
Can anyone shed any light on this or is it simply another odd occurrence of browsers?
The major browsers only support a small subset of self-closing tags. (See this answer for a complete list.)
Depending on how you were creating the elements in JS, the JavaScript engine probably created a valid element to place in the DOM.
I had similar problem with a tags in IE.
The problem was my links looked like that (it was an icon set with the css, so I didn't need the text in it:
<a href="link" class="icon edit" />
Unfortunately in IE these links were not displayed at all. They have to be in
format (leaving empty text didn't work as well so I put there). So what I did is I add an few extra JS lines to fix it as I didn't want to change all my HTML just for this browser (ps. I'm using jQuery for my JS).
if ($.browser.msie) {
$('a.icon').html(' ');
}
IE in particular does not support XHTML. That is, it will never apply proper XML parsing rules to a document - it will treat it as HTML even with proper DOCTYPE and all. XHTML is not always valid SGML, however. In some cases (such as <br/>) IE can figure it out because it's prepared to parse tagsoup, and not just valid SGML. However, in other cases, the same "tagsoup" behavior means that it won't treat /> as self-closing tag terminator.
In general, my advice is to just use HTML 4.01 Strict. That way you know exactly what to expect. And there's little point in feeding XHTML to browsers when they're treating it as HTML anyway...
See I think that one of the answers to Is writing self closing tags for elements not traditionally empty bad practice? will answer your question.
XHTML is only XHTML if it is served as application/xhtml+xml — otherwise, at least as far as browsers are concerned, it is HTML and treated as tag soup.
As a result, <span /> means "A span start tag" and not "A complete span element". (Technically it should mean "A span start tag and a greater than sign", but that is another story).
The XHTML spec tells you what you need to do to get your XHTML to parse as HTML.
One of the rules is "For non-empty elements, end tags are required". The list of elements includes a quick reference to which are empty and which are not.
We are currently developing a B2B web shop based on Java EE 5, JSF, Facelets and RichFaces. The technology has really worked very well so far, but now I am facing a small problem I just can't figure out how to solve:
Products are listed as tables, where every item can be added to the shopping basket by clicking on a small icon at the end of the row. Adding the product is done via AJAX to avoid the full reload of the page. This works without any problems just by using a h:dataTable and an a4j:commandLink to call an action-method which adds the selected product to the basket. Even the re-rendering of the basket total always visible in the side-bar is working properly.
Due to the nature of AJAX, there is no visible indication (except the changing total at the side) that the operation was successful or has been completed at least. Now I want to add a little "popup" box, which is made visible next to the add-icon when the AJAX-operation is completed, stating that the item was added to the basket. This box should automatically go away after a few seconds.
This is what I think should work (the popup_message and popup_content css-classes make the box float above the position where its markup is):
<h:dataTable ....>
...
<h:column>
<a4j:commandLink action="...">
<rich:effect event="oncomplete" targetId="addedMessage"
type="Appear" />
<rich:effect event="oncomplete" targetId="addedMessage"
type="Appear" params="{delay:3.0, duration:1.0}" />
</a4j:commandLink>
<a4j:outputPanel id="addedMessage" styleClass="popup_message"
style="display: none">
<a4j:outputPanel layout="block" styleClass="popup_content">
<h:outputText value="Item added!" />
</a4j:outputPanel>
</a4j:outputPanel>
</h:column>
</h:dataTable>
Unfortunately, it doesn't display the box at all. If I change the event of the "Appear" effect to onclick it works almost as expected. It is immediately shown when the icon is clicked and it dissapears 3 seconds after the AJAX operation was completed. But I don't want it to appear immediately after the click, because it would be wrong to indicate that the item was added to the basket, when in fact the operation hasn't even started yet. This becomes even more important, when I want to indicate some error or want to include some item specific information into the box, which is only available after the item was added.
So any ideas how to do this? And why adding two effects for the same event does not work?
(I've already looked at the effect-example from the RichFaces live demo. The examples do almost work the same, execept that they add the second effect with explicitly stating the for attribute. But even this does not work for me.)
Update: I've tried using the rich:toolTip for this purpose, which actually seems to be quite flexible. But no matter what I do, I can't attach anything to the "oncomplete" (I've also tried just "complete") event of the a4j:commandLink, except one effect... seems there is some bug/undocumented behaviour regarding that event. I've just found this bug report: RF-3427
you can try rich:notify for this
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=notify&skin=blueSky
Have you tried rich:status ? I will not post a piece of code. I think the docs will do just fine.
http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf
Your defining targetId outside the parameters. What you want to do is:
<rich:effect event="oncomplete" type="Appear" params="targetId:'addedMessage',delay:3.0, duration:1.0" />
Try that, and I think it will work.