I am using the tab view of primefaces. I am facing two issues in it.
1) In IE i am seeing the tabs vertically instead of horizontally. But in firefox it works.
FireFox :
Internet EXplorer :
SO which class to override to have tabs in horizontal view.
2) And as you can see the color of unselected tab is different in firefox and IE. I also need to override the style class of unselected tab and selected tab( which i tried to do and i was quite succesful in firefox but in IE .. it doesn't works :(
My code is :
<p:tabView value="#{bean.myDTO}" var="category" id = "tabView" styleClass="TabbedPanelsTabGroup" dynamic="true" onTabChange="handleTabChange(index)">
<p:ajax event="tabChange" listener="#{bean.onTabChange}" />
<p:tab id = "tab" title = "#{category.category}" titleStyleClass="TabbedPanelsTab TabbedPanelsTabSelected TabbedPanelsContentGroup">
---------Some content------
</p:tab>
</p:tabview>
Kindly help.
You don't need to correct anything with especific CSS for IE in this case.
Just make your page compatible with older IE version adding this to the header:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I'm adding this using a Servlet Filter, but there are other ways to do this.
And don't forget the !DOCTYPE ...
...a very old question, but I remember all the headaches I had with this problem some time ago
Related
Internet Explorer misinterprets website: it reads <tag></tag>bla bla</tag><//tag> instead of <tag>bla bla</tag>. For instance the code of the nav section is:
<nav>
<ol>
<li><form action="Algemene Voorwaarden Bijles Studio.pdf" method="get" target="_blank">
<button>algemene voorwaarden</button>
</form>
Bla Bla
</li>
</ol>
</nav>
But the inspect element function of IE shows the following:
<nav></nav>
<ol>...</ol>
</nav><//nav>
And this doesn't only happen with the nav tags, it also happens with figcaption, section, footer and other tags, for instance the IE inspect element shows:
<figcaption></figcaption>
Onze bijlesdocenten
</figcaption><//figcaption>
Furthermore the website works fine in Google Chrome and other browsers.
The url of the site is: http://www.bijlesstudio.com
Comment: I asked this question on ProWebmasters, but they send me here because the mod thought it was an CSS problem, so don't delete this post for being a duplicate s.v.p.
Regards,
Jens Wagemaker
One thing that can be happening is that you are using Internet Explorer in
IE8 or older document mode which do not support the new semantic elements of HTML5.
Can I use... Support tables for HTML5, CSS3, etc
To resolve:
check and change the document mode to IE9+ by right-cliking on the page->inspect element->(look around the right top corner in the inspect elemnt section) select Edge from dropdown.
OR
you can add this to your pages <head>...</head> section
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
as common sense would tell, this is a much better option than the previous one.
There is a space <ol > which might be part of it but your editor is inserting a few Byte-Order-Marks which may be messing with IE. Check your editor's settings to turn that off.
Always validate your HTML to find such things.
http://jsfiddle.net/4LXkE/
The code:
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
In the above fiddle, you can see that in IE9+ (that's what my target browser is) the input box is surrounded by an ugly red highlight and a popup message to show it is a required field.
I found the following question which is close, but doesn't give a full answer to my specific question:
override css for html5 form validation/required popup
In my application I have my own stylings (twitter bootstrap defaults) but they are hidden behind these styles which show up.
While I tried to debug the app in Developer tools, i couldn't find what CSS classes were being added or how.
Any help turning these off would be much appreciated, thanks!
IE9 does not support the "required" attribute natively, and it is not part of the UA stylesheet.
Are you using Modernizr or something similar along with Bootstrap? In IE9, the "required" attribute is useless without a polyfill. (see caniuse or this article for more information) Please look at Modernizr for a solution to this problem. If you're using a polyfill already, you should be able to style the shim element to get the appearance you want.
Test Color <font color="#ffcc99">This is Color</font> --> Google Chrome
Test Color <FONT color=#ffcc99>This is Color -- > IE 8
When i save the text using ajax html editor extender with font color change in google chrome it works fine but when i do the same in IE8 the text changes into a different format mentioned above which doesn't work.
How can i solve the same?
This forum post helped me: http://forums.asp.net/t/1751476.aspx
When you read or write the html, just use Server.HtmlDecode(whatever your html is);
Also, on postback, I had to do this:
htmlEditor.Text = Server.HtmlDecode(htmlEditor.Text);
I am a front-end web developer currently working on a project that is using RichFaces. One of the components being used is a text-editor as shown in the code block below:
<rich:editor viewMode="html" styleClass="text-editor-basic" value="#{advAdditionalPagesBean.cssHTMLCode}" id="cssHTMLCodeEditor" theme="advanced">
<f:param name="theme_advanced_buttons1"
value="bold,italic,underline,cut,copy,paste,pasteword,|,forecolor,backcolor,|,link,unlink" />
<f:param name="theme_advanced_toolbar_location" value="top" />
<f:param name="theme_advanced_toolbar_align" value="left" />
</rich:editor>
The issue I am having is with IE8. For some reason the forecolor and backcolor components are repeating vertically, which does not happen with IE7, Firefox, or Chrome. See screenshot below:
How is this caused and how can I solve it?
I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console
Note that Image #logoimage is displaying correctly
XUL
<toolbox id="navigator-toolbox" class="nav-box" crop="end">
<toolbarpalette id="BrowserToolbarPalette">
<image id="logoimage"/>
<toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
<menupopup>
<menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
<toolbar id="test-toolbar"
class="nav-bar"
mode="full"
iconsize="small"
customizable="true"
context="toolbar-context-menu"
toolbarname="Toolbar"
crop="end"
defaultset="logoimage,toolbarseparator,quicklinks">
</toolbar>
</toolbox>
CSS
toolbar.nav-bar {
background-image: url("chrome://tbar/skin/tbg.png");
}
#logoimage {
list-style-image: url("chrome://tbar/skin/logo.png");
}
As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer
Try adding "-moz-appearance: none;" to your CSS stanza. This turns off
OS-defined theming.
And that thing simply worked ! It also removes all OS specific look and feel effects
see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?