Im having issues with a drop down menu system in IE7 and 8.
It works flawlessly in Chrome and FF, however in IE7 and 8 for some reason it doesn't apply some of the styling and ends up being misplaced in the browser.
You can view it here:
http://www.gardensandhomesdirect.co.uk/menutest
As said, it works fine in Chrome, however I am struggling to get it to work properly, or even just BETTER in IE7.
Any help is appreciated!!
You need to set an explicit width on .side_nav ul li:
.side_nav ul li {
float: left;
position: relative;
width: 173px;
display: block;
text-align: left;
clear: both;
}
For extra protection, you might want to add a clear: both and a text-align: left property (shown in the above example).
Try adding
display: block;
to your
.side_nav ul li
Related
Some data processing takes a few seconds once the server has received the client's request...
How can we display an advertisement while the client waits for the payload ?
Same question with and without AJAX
We may not use a library or framework on top of Sails, unless necessary
You can do a simple loading graphic, and just replace it with whatever image you want:
HTML
<div class="loader"></div>
CSS
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
A simple jQuery function:
$(window).load(function() {
$(".loader").fadeOut("slow");
})
Demo
Source: Display Loading Image While Page Loads
If you need to do it without jQuery, it is slightly more involved, but you can get more information in this thread:
$(document).ready equivalent without jQuery
In WPF(Windows Presentation Foundation) you can put an image into a button to create an image button, you can also add a text after that, not only one label but more, all on the same button.
My question is how can I do that in JSF with PrimeFaces or another component.
I have included a picture
to let you understand what I did try and what I wanted, any help is appreciated, Thank you.
For JSF
<p:commandButton value="Cancel" icon="ui-icon-myCancel" />
IN css
.ui-icon-myCancel{
background-image: url("#{resource['images/test.jpg']}") !important;
}
JSP
Css:
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
HTML
<input type="submit" id="image-button" value="Text"></input>
It will give you some hint
I'm using PrimaFaces with Mojarra implementation for my JSF applications. When I put together the application I use company/app logos and the primefaces widgets (the widgets themselves look great!) which have the jQuery look and feel. The issue is that the applications end up looking very similar with a somewhat box type appearance - text boxes, datatables etc., The look and feel is nowhere compared to a handcoded by a html/css designer/developer.
When you develop enterprise JSF applications what are some of the best practices you use to ensure a user-friendly good looking ui?
I'm not exactly sure what you are looking for but there is a tradeoff between speed of development and appearance. That said, in our shop we use PrimeFaces and have developers who make the page "work". They are then followed on by xhtml/css designers who clean up the appearance of the page and controls. If you haven't already, check out the styling section. There is quite a bit of flexibility in changing the appearance of controls. Of course they are still layered, pre-defined controls.
Edit: You can style individual parts of your controls using css. So for example here we change the appearance of the title bar:
.bottomViewItem .ui-panel-titlebar{
background: none;
border: none;
box-shadow: none;
padding: 5px;
margin: 0.1em 16px 0.2em 0;
}
And here we change the title appearance:
.bottomViewItem .ui-panel-titlebar span.ui-panel-title{
color: #E27C4C !important;
font-family: Rockwell, Georgia, Arial !important;
font-size: 18px !important;
margin: 0.1em 16px 0.2em 0;
text-shadow: none;
}
I am building an extension which give user notifications using the createHTMLNotification call, but I am having some trouble figuring out the relevant size restrictions to avoid getting ugly black horizontal and vertical scrollbars (On Ubuntu 12.04 Linux at least).
Does anybody have any pointers to documentation giving some hints about what maximum sizes I should be aiming for, hopefully cross-platform?
maximum size on Windows Version 20.0.1132.47 (stable 144678) is 300 by 160 pixels.
Experiments on my own laptop running Chrome on Linux Version 21.0.1145.0 dev give me a maximum size of 284 by 144 pixels before scrollbars appear. I have no idea whether this is system specific or not, but assuming Chrome supports native notifications for at least some platforms that have them, I guess putting too much effort into pixel perfect notifications may not guarantee nice results.
As for making sure the scrollbars do not appear inside the notification, there is another small challenge as well (which maybe is not be related to the notification API at all); setting the height and max-height (and similarily for the width) does not cut it on it's own.
In my case I needed to style a list of items in a notification, and what I ended up doing was using the following html code:
<html>
<head>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .73em;
}
div#note {
overflow: hidden;
height: 144px;
max-height: 144px;
width: 284px;
}
div.noteline {
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2em;
}
</style>
</head>
<body>
<div id=\"note\">#{params.html}</div>
</body>
</html>
My template references (#{params.html}) is basically populated with rows containing :
<div class="noteline">Some possibly large line that would overflow item 123</div>
I am trying to style the master page in Sharepoint Foundation 2010. I"m using the nightandday master and styles.
The design has no ribbon and I just need to turn it off. Just plain old off. When I set the ribbon div to display: none, the entire top banner disappears.
I'm not a sharepoint dev and am lost in general. Is there an easy way to just hide/get rid of the ribbon? Nothing fancy about permissions required--just needs to be always gone.
The CSS classes you want to look at are;
<style type="text/css">
div#s4-ribbonrow.s4-pr.s4-ribbonrowhidetitle { height:43px !important }
/*.ms-cui-ribbon { display:none; }*/
.s4-ribbonrowhidetitle s4-notdlg noindex { height: 43px !important; }
.s4-title h1 a,.s4-title h2 a,.s4-title h2 { font-size: small; }
.ms-pagetitleareaframe table { background: none; }
#s4-leftpanel-content { display:none !important; }
#s4-titlerowhidetitle { display:none !important; }
.s4-ca { margin-left:0px !important; margin-right:0px !important; }
</style>
You should be able to use the information in this article to get you started.
http://www.endusersharepoint.com/2010/11/09/hiding-the-sharepoint-2010-ribbon-from-anonymous-users/
In case someone has been struggling with this issue. Hiding the Ribbon may cause some further issues (http://social.msdn.microsoft.com/Forums/en-US/9422aa0f-5010-4691-a0ab-25e7aca6b478/issue-with-div-s4workspace-and-scroll-bar)
Especially if you will include your own header and hide the Ribbon.
A quick workaround is using css. #s4-workspace will still receive the correct height & scrollbar won't be an issue as well as the ribbon will be hidden.:
body #s4-ribbonrow {
height: 0px !important;
min-height: 0px !important;
}
As documented in the linked page of knight0323's answer, the ribbon can be hidden by editing v4.master and wrapping the ribbon div with <SharePoint:SPSecurityTrimmedControl/>:
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
<!-- Ribbon code appears here... -->
</div>
</SharePoint:SPSecurityTrimmedControl>
Unfortunately on my system this has a side-effect where the page's scroll-bar starts misbehaving. This appears to be a result of a dependency between the ribbon and the s4-workspace div. So to resolve this I moved <SharePoint:SPSecurityTrimmedControl/> in from the ribbon div to wrap the <div id="s4-ribboncont"> and added the following markup near the top of v4.master:
<style type="text/css">
#s4-ribbonrow { display: none; }
</style>
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<style type="text/css">
#s4-ribbonrow { display: block; }
</style>
</SharePoint:SPSecurityTrimmedControl>
The effect of this is that the ribbon is hidden by default but sufficient markup remains in the DOM so the page continues to behave correctly. For administrators, the ribbon is displayed normally.
In case anybody else is struggling with this, here are full instructions to do this without breaking the scroll bar or losing the title bar area, or any other oddities:
Hiding a Sharepoint 2010 ribbon that does not lose the titlebar area