CSS or JQuery problem
Hi, I am trying to get a nice little jquery menu effect that I have seen on to a site I'm building, along with the jquery coda-slider sliding panels.
They both work fine in their own pages, but when I put the two on the same page, the nice menu effect breaks.
Here's a link:
http://www.matthewstuartdesign.co.uk/jqueryprob/index2.php
Basically, I am assuming it to be a clash in jquery as one has jquery min 1.3.2 and the other has 1.4.1, but I have no idea of how to put it right... however, I am now wondering if it is actually a CSS issue because the menu is shifting which I think is breaking it's effect!!
Please can you advise me? Have a look at the link and tell me if it's the fault of jquery or CSS. You see two links between the samples under where the coda-slider is meant to go.
I have been doing this for two days now and I am seriously tired and just can't concentrate any more
Anyway, i'd appreciate some advice, and thanks in advance.
Mat
I have tried it in a totally new page without any css other than that which relates to the menu and the slider, but I am still getting the same problem, so I assume it is a jquery problem...
Anyway, I have just had a thought. Can I have more than one version of jquery.min.js on a page? Actually, I have one on the page and another on an server side include. One is version 1.3.2 and the other is 1.4.1. Are these clashing?
Similar Messages
-
Image Resizing : CSS vs jQuery (which is best?)
I need your opinions.
I am using two different methods to size down an image to fit viewport.
CSS: http://www.vilverset.com/css.php
JQUERY: http://www.vilverset.com/vali.php
The CSS version simply tells an IMG to occuppy 100% of the surrounding DIV.
The jQuery version is based on this script : http://johnpatrickgiven.com/jquery/background-resize/
When putting both the CSS and jQuery version of the page side-to-side under two different tabs of the same browser, they are virtually identical, despite the fact that CSS rounds out to 1 pixel while jQuery rounds out to 0.5 (I expected the jQuery version to look better as a result, but it doesn't look any different, except very small areas with tiny text).
Since the CSS version uses much less code (and doesn't require the jQuery library at all) while doing essentially the same thing as the jQuery version, with no visible difference in the image itself, is there ANY reason for me to opt for the jQuery code?
Compatibility with IE6 perhaps?
Thanks.Anyone? :-(
-
SharePoint Online, how to hide the SharePoint logo on a list using css or jquery
Hi
Im creating a page for submitting forms. I want to remove the SharePoint Logo on from the page. Can this be done in CSS or jquery?
brgs
Bjornhi
you need to include the below style in your page
td.s4-titlelogo{
display: none;!important;
http://sharepointwings.blogspot.in/2012/03/adding-custom-css-in-sharepoint-2010.html
http://microsoft-techies.blogspot.in/2014/03/sharepoint-2013-how-to-remove-default.html
Or find the class name of logo in my case it is "ms-siteicon-img"using f12 (firebug) tool.
$('.ms-siteicon-img').hide();
or
var img1= $('.ms-siteicon-img');
img.style.display="none";
and this must be in document.ready method.
$( document ).ready(function() { var img1=$('.ms-siteicon-img');img1.style.display="none";});
Regards,
Rajendra Singh
If a post answers your question, please click Mark As Answer on that post and Vote as Helpful
http://sharepointundefind.wordpress.com/ -
Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div
Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
#hornav ul li { padding: 0 0 0 10px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
</style>
<![endif]-->
<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1844px;
height:43px;
z-index:1;
left: 64px;
top: 253px;
body {
background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
letter-spacing: -3px;
border-top:5px dotted #003399;
border-bottom:5px dotted #003399;
margin:20px;
#menu4 ul li a{
color: #003399;
padding: 10px 5px 10px 10px;
width: 170px;
#menu4 ul li a:hover span.title{
color:#00adef;
#menu4 ul li a span.text{
font-family: Georgia, serif;
font-size: 13px;
color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141545" binding="#OAWidget" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
<div id="branding">
<h1>
<div>
<p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
<param name="movie" value="LorentzBanner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</h1>
<div>
<div id="menu4">
<ul>
<li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
<li><a href="">Services<span class="text">What we do</span> </a> </li>
<li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
<li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
<div></div>
</div>
<div id="wrapper-2">
<div id="content-top" class="png"></div>
<div id="wrapper-3">
<div id="content-1">
<div class="content-wrap">
<p>Home</p>
<p>Contact</p>
</div>
</div>
<div id="content-2">
<div class="content-wrap">
stuff
<p> </p>
</div>
</div>
<div id="content-bottom"></div>
</div>
<div id="footer">
<p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
event: "click",
collapsible: false,
autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #6B6B6B;
background: #8D927C url(images/bg_body.jpg) repeat-x;
margin: 0;
padding: 0;
min-width: 800px;
text-align: center;
background-color: #000;
h2, h3, h4
font-size: 16pt;
font-weight: normal;
margin: 15px 0 0 0;
#wrapper-3 p
padding: 0;
line-height: 1.35em;
margin-top: 8px;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
#wrapper-3 ul
list-style-type: none;
margin: 8px 0;
padding: 0;
#branding
margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
color: #4f4f3f;
a:hover, a:active
color: #000000;
@Inline image styles
img.float-left
float: left;
margin: 0 6px 6px 0;
img.float-right
float: right;
margin: 0 0 6px 6px;
img.border
background: #FFF;
padding: 2px;
border: 1px solid #999;
@Tab navbar styles
#hornav ul
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0;
text-align: center;
margin-bottom: 60px;
font-size: 0.8em;
text-transform: uppercase;
#hornav ul li
display: inline;
margin: 0 2px 0 0;
padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
height: 400px;
#hornav ul li a
text-decoration: none;
margin: 0;
background-repeat: inherit;
background-position: center center;
padding-top: 50%;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
color: #000000;
@Secondary navigation styles
#navcontainer
background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
margin: 0;
padding: 12px 0 0 0;
#navcontainer ul
margin: 0;
list-style-type: none;
line-height: normal;
padding: 0 0 12px 0;
border-top: 1px solid #FFF;
background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
display: block;
padding: 3px 6px;
width: 168px;
margin: 0 10px;
background-color: #c4bfac;
border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
color: #FFF;
text-decoration: none;
#navcontainer a:hover
background-color: #90937e;
color: #FFF;
@Masthead text styles
#branding
margin: 0;
padding: 0;
#branding h1
color: #000;
padding: 10px 0 0px 0;
border-top: 4px solid #656e5d;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.3em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
margin: 0;
@Layout styles
#wrapper-body
background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
width: inherit;
margin: 0;
padding: 0;
#wrapper-1
width: auto;
background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
margin: 0;
padding: 0;
#wrapper-2
width: 45em;
text-align: center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#wrapper-3
background: url(images/bg_wrapper-3.jpg) repeat-y;
color: #333;
text-align: left;
#content-top
margin: 0;
height: 1em;
background: url(images/bg_content-top.jpg) no-repeat;
font-size: 0;
line-height: 0;
#content-1
float: left;
width: 12em;
font-size: 0.9em;
padding: 0;
margin-top: 2em;
margin-right: 2em;
margin-bottom: 0em;
margin-left: 0em;
#content-2
float: left;
width: 40em;
padding: 0;
font-size: 0.8em;
margin-top: 2em;
margin-right: 0px;
margin-bottom: 0em;
margin-left: 0em;
#content-3
float: left;
width: 250px;
font-size: 10pt;
margin: 0;
padding: 0;
#content-4 {
width: 190px;
padding: 0px;
line-height: 0px;
#content-bottom
clear: both;
height: 1em;
background: url(images/bg_content-bottom.jpg) no-repeat;
font-size: 0;
line-height: 0;
.content-wrap
margin: 0;
padding-top: 0px;
padding-right: 2em;
padding-bottom: 5px;
padding-left: 0px;
#footer p
font-size: .75em;
margin: 12px 0;
p.content-wrap {
font-size: 9pt;
color: #999;
@Blog post styles
.date
float: left;
height: 52px;
width: 52px;
background: url(images/date.png) no-repeat;
margin-right: 10px;
padding-top: 0px;
line-height: normal;
.date .month
display: block;
text-align: center;
color: #FFF;
font-size: 11px;
padding-top: 4px;
text-transform: uppercase;
.date .day
display: block;
text-align: center;
padding-top: 5px;
color: #222;
font-size: 18px;
font-weight: bold;
.meta
display: block;
font-size: 11px;
color: #666;
clear: right;
.blog-entry
clear: both;
padding-top: 2px;
#searchform
margin: 8px 0;
padding: 0;
@Search form styles
#searchform fieldset
margin: 0;
padding: 0;
border: 0;
#searchform label
color: #999;
display: none;
#searchform input
width: 160px;
color: #222;
#searchform #submitquery
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
line-height: 1.35em;
text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
display: none;
#website {
display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
font-size: 3em;
.fieldname {
font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
width: 829px;
margin: 0 auto 0 auto;
#menu4 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
border-top:5px dotted #c7e7f3;
border-bottom:5px dotted #c7e7f3;
float:left;
clear:both;
margin:20px;
text-align:center
#menu4 ul li{
float:left;
#menu4 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#66b8d8;
width:170px;
#menu4 ul li a span{
display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
color:#00adef;
#menu4 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#c7e7f3;
visibility:hidden;
#menu4 ul li a:hover span.text{
visibility:visible;
Thanks! -
Hello
I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.
This is the css code:
/** LOGO */
#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the
page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.
Instead of staying in the required position.
Can any one help.
Thanks.Hi Thanks so much for the reply.
I want to add more information.
This is the css:
body {
margin: 0;
padding: 0;
background: url(images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #66665E;
h1, h2, h3 {
margin: 0;
text-transform: uppercase;
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #0C95C9;
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
ul, ol { }
blockquote { }
a { color: #0C95C9; }
a:hover { text-decoration: none; }
a img {
border: none;
img.left {
float: left;
margin: 7px 30px 0 0;
img.right {
float: right;
margin: 7px 0 0 30px;
hr { display: none; }
.list1 {
.list1 li {
float: left;
line-height: normal;
.list1 li img {
margin: 0 30px 30px 0;
.list1 li.alt img {
margin-right: 0;
#wrapper {
/* Header */
#header-wrapper {
#header {
width: 920px;
height: 45px;
margin: 0 auto;
/* Menu */
#menu {
float: left;
width: 640px;
height: 45px;
#menu ul {
margin: 0;
padding: 10px 0px 0px 5px;
list-style: none;
line-height: normal;
#menu li {
display: block;
float: left;
#menu a {
display: block;
float: left;
margin-right: 3px;
padding: 3px 25px 2px 25px;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
height: 20px;
background: #FEC200 url(images/img02.jpg) repeat-x left top;
color: #FFFFFF;
#menu .first {
background: none;
/* Search */
#search {
float: right;
width: 250px;
height: 45px;
#search form {
float: right;
margin: 0;
padding: 12px 30px 0 0;
#search fieldset {
margin: 0;
padding: 0;
border: none;
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
border: none;
#search-text {
width: 135px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #333333;
background: #ECF9E4;
color: #000000;
#search-submit {
height: 25px;
margin-left: 10px;
padding: 1px 10px;
background: #C0C0C0 url(images/bg_grey.jpg);
color: #000000;
/* Page */
#page {
width: 920px;
margin: 0 auto;
#page-bgtop {
padding-top: 30px;
/** LOGO */
#logo {
width: 920px;
height: 90px;
margin: 0 auto;
background: url(images/img04.jpg) no-repeat left top;
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-transform: lowercase;
font-weight: normal;
color: #FFFFFF;
#logo p {
text-transform: lowercase;
font-size: 10px;
#logo h1 {
padding-top: 54px;
font-size: 34px;
#logo a {
text-decoration: none;
color: #FFFFFF;
/* Content */
#content {
float: center;
width: 920px;
height: 800px;
padding-top: 0px;
padding-right: 0px;
/* Post */
.post {
background: url(images/img07.jpg) repeat-x left bottom;
margin-bottom: 25px;
.post .title {
height: 30px;
color: #549900;
.post .title a {
text-decoration: none;
color: #585D60;
.post .date {
.post .meta {
margin-top: -10px;
padding: 2px 30px 2px 16px;
background: url(images/img03.gif) no-repeat left 8px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
color: #66665E;
.post .meta span {
display: block;
margin-top: -10px;
.post .meta a { }
.post .entry {
padding: 10px 0;
.post .links {
margin: 0 250px 0 0;
padding: 0 0 0 0px;
.post .links .comments {
.post .links .permalink {
padding-left: 17px;
/* Sidebar */
#sidebar {
float: left;
width: 177px;
padding-left: 22px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #585D60;
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
#sidebar li {
margin-bottom: 30px;
padding: 0 0 10px 0px;
#sidebar li ul {
#sidebar li li {
margin: 0;
padding: 7px 10px 10px 7px;
background: url(images/img07.jpg) repeat-x left bottom;
#sidebar p {
margin: 0;
padding: 0px 10px;
#sidebar h2 {
height: 26px;
margin: 0 0 10px 0px;
padding: 12px 0 2px 7px;
text-transform: capitalize;
font-size: 18px;
font-weight: normal;
color: #464F54;
#sidebar p {
line-height: 200%;
#sidebar a {
text-align: left;
text-decoration: none;
font-weight: normal;
color: #585D60;
/* Calendar */
#calendar {
#calendar caption {
padding-bottom: 5px;
font-weight: bold;
#calendar table {
width: 100%;
border-collapse: collapse;
border-bottom: 1px solid #24130F;
border-left: 1px solid #24130F;
border-right: 1px solid #24130F;
#calendar thead th {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
background: #24130F;
#calendar tbody td {
padding: 5px 0;
text-align: center;
border-top: 1px solid #24130F;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
#calendar tfoot td {
padding: 5px;
border-left: 1px solid #24130F;
border-bottom: 1px solid #24130F;
#calendar tfoot #next {
border-top: 1px solid #24130F;
text-align: right;
#calendar tfoot #prev {
border-top: 1px solid #24130F;
#calendar .pad {
border-bottom: 1px solid #24130F;
#calendar #today {
background: #24130F;
/* Footer */
#footer {
width: 920px;
height: 49px;
margin: 0 auto;
padding-top: 50px;
#footer-bgcontent {
margin: 0px;
padding: 0px;
height: 99px;
background: #394144;
#footer p {
margin: 0;
text-align: center;
line-height: normal;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
#footer a {
color: #E5FFC4;
This is the Mainpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Uimodo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="logo">
</div>
<hr />
<!-- end #logo -->
<div id="header">
<div id="menu">
<ul>
<li><a href="Vidmin.php" class="first">Home</a></li>
<li><a href="Other.php">Other</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="">
<fieldset>
<input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />
</fieldset>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header -->
<!-- end #header-wrapper -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<table width="920" border="0" align="center" cellpadding="4">
<tr>
<td height="42" valign="top"><table width="415" height="41" align="right">
<tr>
<td width="215" height="35" align="center"> </td>
<td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>
<td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="72" valign="top" align="center"><table width="859" height="72" border="0">
<tr>
<td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>
<td width="14"> </td>
<td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>
</tr>
<tr>
<td height="17"><div align="center" id="register"></div></td>
<td> </td>
<td><div align="center" id="loginstatus"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">
<tr>
<td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">
<table width="300" height="291" >
<tr>
<td height="23" colspan="2"> </td>
</tr>
<tr>
<td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />
</div></td>
<td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>
</tr>
<tr>
<td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />
</div></td>
<td><div align="left">
<input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>
<input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>
</div></td>
</tr>
<tr>
<td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />
</div></td>
<td><div align="center"><img src="CaptchaSecurityImages.php?width=150&height=40&characters=8" alt="captcha"/></div>
<p>
<input name="security_code" id="security_code" type="text" size="30" />
</p></td>
</tr>
<tr>
<td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />
</div></td>
<td><div align="left">
<input name="password" id="password" type="text" size="30" />
</div></td>
</tr>
<tr>
<td height="45"> </td>
<td><div align="left">
<input type='submit' name="submit" id="submit" value='Sign Up'/>
</div></td>
</tr>
</table>
</form></td>
<td width="6" align="center"></td>
<td width="475" align="center" valign="top"><form method='post' id='login_form'>
<table width="300" height="176" >
<tr>
<td height="19" colspan="2"> </td>
</tr>
<tr>
<td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />
</div></td>
<td><div align="left">
<input name='emailenter' type='text' id='emailenter' size="25" />
</div></td>
</tr>
<tr>
<td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />
</div></td>
<td><div align="left">
<input name='passcode' type='password' id='passcode' maxlength='15' size="25" />
</div></td>
</tr>
<tr>
<td height="45"> </td>
<td><div align="left">
<input type='submit' name='submit' value='Login'/>
<a href="ForgotPassword.php">Forgot Password?</a></div></td>
</tr>
</table>
</form></td>
</tr>
</table></td>
</tr>
<tr>
<td height="23" valign="top" align="center" > </td>
</tr>
</table>
</div>
<!-- end #content -->
<div style="clear: both;"> </div>
</div>
</div>
<!-- end #page -->
<div id="footer-bgcontent">
<div id="footer">
<p>Copyright (c) . </p></div>
</div>
<!-- end #footer -->
</div>
</body>
</html>
Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help. -
Hi there,
I have a Table of Contents web part which is great. Is there a way so it shows only top level sites and then one can expand or collapse any top level site to see/hide the subsites?
As of now it shows
HR Parent site
- HR sub site 1
- HR sub site 2
IT Parent site
- IT sub site 1
- IT sub site 2
What I want is
+ HR Parent site
+ IT Parent site
So one can expand or collapse on demand.
Any relevant JS/CSS/JQuery code?
Thank you so much.Hi,
According to your post, my understanding is that you want to expand or collapse the level site for the table of contents web part.
I have made a simple code demo below to achieve this scenario, you can refer to it.
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var iconCollapse = "/_layouts/images/collapse.gif";
var iconExpand = "/_layouts/images/expand.gif";
$("div[id='WebPartWPQ2'] li ul").hide();
//ugly way
var $t = $("#WebPartWPQ2 div").children("ul").children("li").children("div");
$t.each(function(){
//console.log($(this).html());
$(this).attr("style", "float: right; margin-right: 297px; line-height: 8px;");
$(this).css("display","inline");
$("<a src=" + iconExpand + "></img>").insertBefore($(this));
$("a[class='min']").click(function()
var img = $(this).children();
//Traverse the DOM to find the child UL node
var subList = $(this).siblings().children('ul');
//Check the visibility of the item and set the image
var Visibility = subList.is(":visible")?img.attr('src',iconExpand):img.attr('src',iconCollapse);
//Toggle the UL
subList.slideToggle();
</script>
Note: Yous should change the Web part ID and the css style to fit your environment.
Thanks & Regards,
Jason
Jason Guo
TechNet Community Support -
Hi,
I'm building a website from a photoshop design and I have a
problem with the layout I can't see how to fix:
I have a header and a footer which both need to stay centered
and expand to whatever the browser window width is set to.
Between them I have a div of the main content of the pages
which also needs to be centered.
All seems very simple. I would normally just have a big div
around the whole page with an align="center". Job done.
But the problem is the space to the left of the content div
needs to be grey and the space on the right needs to be black.
Therefore I assume I'm going to need 3 divs. 2 for the left and
right spaces and another with the main content between them.
Both the side divs will need to expand somehow to fill the
space while keeping the fixed width content div centered. But I
think they will also have to be floated to sit side by side.
I cant seem to get the divs to stay in the correct places or
keep the side ones filling the space between the content div and
the edges of the browser.
Can anyone help?
Thanks,
OlliebearIs this what you au trying to do?
http://starttoweb.com/
If so, you are welcome to grab the CSS file and mostly to fit
your needs.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Olliebare" <[email protected]> wrote in
message
news:fpn0q2$p1v$[email protected]..
> Hi,
>
> I'm building a website from a photoshop design and I
have a problem with
> the
> layout I can't see how to fix:
>
> I have a header and a footer which both need to stay
centered and expand
> to
> whatever the browser window width is set to.
>
> Between them I have a div of the main content of the
pages which also
> needs to
> be centered.
>
> All seems very simple. I would normally just have a big
div around the
> whole
> page with an align="center". Job done.
> But the problem is the space to the left of the content
div needs to be
> grey
> and the space on the right needs to be black. Therefore
I assume I'm going
> to
> need 3 divs. 2 for the left and right spaces and another
with the main
> content
> between them.
>
> Both the side divs will need to expand somehow to fill
the space while
> keeping
> the fixed width content div centered. But I think they
will also have to
> be
> floated to sit side by side.
>
> I cant seem to get the divs to stay in the correct
places or keep the side
> ones filling the space between the content div and the
edges of the
> browser.
>
> Can anyone help?
>
> Thanks,
>
> Olliebear
> -
I cant figure out why the valign isnt working on my page..
http://www.v4.skiingbc.info/pages/skiarea2.php?Name=Test1212&TrailMaps=X&FS=√&LP=√
CSS Sheet:
http://v4.skiingbc.info/v4.css
I want all text to be middle aligned in the table cells... If
someone could take a look at the code that would be really
appreciated..
In Dreamweaver the text is middle aligned, it just doesnt
work in IE7You have this on the page:
<td height="79"
<valign="top">
try changing it to thos:
<td height="79" valign="top">
you also have this:
<option selected="selected">Select Card
Type</option>
option selected>Search By Card Type
</option>
make it like this:
<option selected="selected">Select Card
Type</option>
Ken Ford
Adobe Community Expert
Fordwebs, LLC
http://www.fordwebs.com
"Monica101" <[email protected]> wrote in
message news:f0foos$n7u$[email protected]..
> I've got text in a table that won't align at the top:
>
> <td height="79"valign="top"><table width="150"
border="0" cellpadding="0"
> cellspacing="0" class="Side_Links">
>
> It looks fine in Dreamweaver, but displays verticaly in
the center of the
> table. I've been working in Dreamweaver for years and
never had this problem. I
> tried fixing it w/ css:
>
> vertical-align: top;
>
> This didn't work either.
>
> Page:
>
>
http://www.capitalinternet.com/~mycredit/template.php
>
> Thanks!
>
> -
Dear All,
After a power outage, one of our CSS is failing to boot up properly. Every time its rebooted, it goes straight to the OFFDM although the Primary boot device has been selected to be Disk. I have formatted the
Disk and loaded a new image, it booted with the new image once and its
Loading to OFFDM every time its rebooted.
I would be really grateful if someone could shed some light on this problem.
Regards,
ZahidYou could check the boot.log for error messages inorder to find out what the problem could be.
Here's the link to Troubleshooting the Boot Process:
http://www.cisco.com/en/US/products/hw/contnetw/ps792/products_installation_guide_chapter09186a00800df9dc.html#xtocid1
Hope this is of some help to you.
For details refer:
http://www.cisco.com/univercd/cc/td/doc/product/webscale/css/css_500/getstart/trouble.htm#xtocid4 -
While renewing the ssl certification in CSS everything went fine while installation but after that when i checked with the following command
sh ssl associate rsakey | grep url(dont want to mention name)
i can see the previous as well as the new both key as associated and says yes
while the new should show yes and old should be no
same it is showing for cert
can anyone help me to sort out with this problem what it can be
Thanks in advanceSagar,
Have you performed the "no ssl associate rsakey" and the "no ssl associate cert"?
After that, perform the "clear ssl file " and "clear ssl file rsakey "
HTH
Dave -
Hi
I am using the following css to align a div to the right hand
side of the
page:
#headerRight { RIGHT: 10px; MARGIN-RIGHT: 0px; POSITION:
absolute; TOP: 5px;
align: right; border: 0; width: 235px;}
The above seems to work well, except for one small annoying
problem. If the
content of the page is wide and causes the horizontal scroll
bar to appear,
then the div seems to work as it appears 10px from the right
side of the
window. However if I move the horizontal scroll bar over to
the right, then
the div doesnt move accordingly.
If I then resize the browser window, then the div moves and
always lines up
10px from the edge no matter what size the window is.
Anyone know where I am going wrong, or need any more
information?
Thanks
Brendan
Rate your experiences with your UK and Ireland builders at
http://www.ratethebuilder.co.uk
=========================================Solved the problem by using the following javascript code:
function scrollDetect(){
document.getElementById("headerRight").style.left =
document.body.clientWidth - 245 + document.body.scrollLeft;
setInterval("scrollDetect()", 500);
Where 245 is the width of the div.
Only problem is that the code probably isnt cross browser at
the moment, but
I'll work on that.
Thanks again for all your help.
Rate your experiences with your UK and Ireland builders at
http://www.ratethebuilder.co.uk
=========================================
"RateTheBuilder" <[email protected]>
wrote in message
news:[email protected]...
> Osgood
>
> Sorry, would love to post a url, but content is
sensitive.
>
> Basically I have a div which stretches the width of the
page which
> contains the header details. Then on top of this div but
to the very right
> of the page I have a div that I have absolute
positioning set. This div
> must remain the set distance from the right of the
screen (10px) even when
> the user is scrolling horizontally.
>
> Thanks for your time so far and I hope I've shed a
little more light.
>
> Brendan
> ______________________________________________
> Rate your experiences with your UK and Ireland builders
at
>
http://www.ratethebuilder.co.uk
> =========================================
>
> "Osgood" <[email protected]> wrote in
message
> news:[email protected]...
>> RateTheBuilder wrote:
>>
>>> Osgood
>>>
>>> There is no content on the same level as the div
to the right, but the
>>> content below the div may extend the width of
the page. There are other
>>> divs on the same level as the one I want to keep
right and I have the
>>> problem div above them, so that is why I used
absolute positioning.
>>
>> Sorry i'm lost.
>>
>> You say you have no content on the same level as the
div to the right and
>> then say there are other divs on the same level as
the one you want to
>> keep right?
>>
>> Can you post a url to the page in question?
>>
>
> -
Hi, I have a problem with the NAT group intercepting connections to a PIX on the local VLAN. VLAN1 on the LB is the outside internet connection, VLAN2 is internal, at 10.0.10.0/24. The PIX IP is 10.0.10.254. If a webserver at 10.0.10.5 tries to connect to a server behind the PIX, the PIX logs a connection not from 10.0.10.5, but from the NAT group, which has an external IP address. Not only does this slow things down, but confuses the ACL config on the PIX. Any way to force devices to directly connect on the local VLAN, as one would normally expect? Thanks!
What happens is the traffic that will use the group will need to match the source/dest configured in the ACL, but more importantly, the VLAN you apply to the ACL itself will determine what traffic is even looked at in the ACL itself. So if you apply vlan1 to the ACL, then only traffic coming into the CSS via VLAN1 will use the acl (assuming it matches the clause criteria configured).
By using the ACL approach, you could put those ip addresses you want to NAT in the first clauses, and then leave out the ones you do not want to NAT. If there is no ACL match, then there will be no NAT.
Instead of specifying all the ip addreses in separate ACLs, you can use the subnet mask to create a range of addresses.
Hope this help. I do agree that this can be a bit of a maint challenge having to do this, but I'm not sure any other option exists unless there is something different about the way you have your source groups configured.
Regards
Pete.. -
Css background-position problem
Hello, I get a problem with this style:
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(images/myimage.jpg);
background-position: center bottom;
background-repeat:repeat-x;
</style>
In ie7 works fine, in firefox 2 the bottom position doesn't
work...
Any suggestion ?
Thanks
howdyHello, this is the page, simply copy and paste.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>test background</title>
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(
http://img179.imageshack.us/img179/2401/backgroundkc8.jpg);
background-position: center bottom;
background-repeat:repeat-x;
#layer1{
text-align: center;
width: 300px;
margin-right: auto;
margin-left: auto;
border: 2px double #003333;
</style>
</head>
<body>
<div id="layer1">Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit. Quisque cursus, justo a tincidunt volutpat, dui orci
feugiat
justo, at varius odio est quis turpis. Integer nisl enim,
condimentum
et, eleifend et, posuere quis, risus. Nam convallis. Integer
diam dui,
accumsan mattis, dignissim at, dictum rutrum, justo. Praesent
lacinia.
Cras a diam. Aenean quis elit. Duis mauris erat, aliquet nec,
malesuada
laoreet, aliquam sit amet, magna. Ut turpis metus,
sollicitudin ac,
fermentum non, pretium eu, augue. Nunc faucibus, leo eu
pharetra
ultrices, sem augue ultricies risus, at egestas velit lectus
ac velit.
Suspendisse pretium nibh dapibus turpis. Praesent felis mi,
vestibulum
eu, pellentesque et, consequat eu, ante. Nulla accumsan enim
et pede.
Suspendisse potenti.
Donec eget nulla. Proin et est. Integer volutpat, dolor
scelerisque
bibendum egestas, lacus dui venenatis odio, vitae varius
massa eros sit
amet ligula. Curabitur tellus. Curabitur ultricies volutpat
tellus. In
sodales. Duis cursus mi eu dui placerat porta. Mauris laoreet
turpis at
nunc. Vivamus volutpat, metus dignissim accumsan hendrerit,
turpis
turpis aliquet nulla, non viverra dui dui quis quam. Mauris
sem nunc,
laoreet in, elementum vitae, tempor a, libero. Cras ac turpis
sit amet
risus cursus ultrices. Sed id quam.
Nulla tortor ligula, adipiscing nec, ornare eu, gravida in,
justo. Sed
elementum vestibulum lectus. Mauris lectus mauris, convallis
nec,
posuere quis, lacinia at, felis. Vestibulum ante ipsum primis
in
faucibus orci luctus et ultrices posuere cubilia Curae;
Aenean cursus
quam eget dui. Maecenas sapien. Aenean pellentesque lobortis
mi. Quisque
tempor ipsum in libero. Pellentesque habitant morbi tristique
senectus
et netus et malesuada fames ac turpis egestas. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
Quisque lacus tellus, ornare quis, euismod et, lacinia sed,
justo. Proin
auctor nisi sed tortor. Fusce in justo et nisl fermentum
vehicula.
Quisque urna felis, lacinia at, viverra in, fermentum ut,
lacus. Duis
tempus. Morbi bibendum libero vitae diam faucibus placerat.
Praesent eu sapien. Sed ut velit quis magna lobortis
malesuada.
Phasellus dignissim risus ac est. Pellentesque semper sem.
Donec porta
nulla nec quam. Pellentesque aliquet risus id quam. Proin
tincidunt erat
nec nunc. Praesent euismod fringilla ipsum. Donec ornare.
Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia
Curae; Sed leo.
Proin non nisi non neque porta tempus. Proin varius velit eu
sapien.
Pellentesque pulvinar arcu id ante. Nunc eu diam. Phasellus
euismod,
felis in scelerisque pharetra, diam augue eleifend mi, a
rutrum mauris
arcu nec orci. Proin sed erat. Pellentesque et libero.
Aliquam ante
velit, ultrices ut, fermentum ac, cursus ut, est. Etiam vitae
nisl ac
metus cursus viverra. Proin non felis. Donec massa. Nullam
quam lectus,
pulvinar eget, condimentum at, tristique in, quam. Proin
vehicula
elementum diam. Proin sapien. Praesent suscipit, lorem at
dapibus
fringilla, orci elit facilisis lacus, at dictum augue velit
quis enim.
Mauris eu mauris. Aliquam rhoncus fermentum pede. Vestibulum
gravida
vulputate mauris.
Pellentesque consectetuer. Cras tellus justo, iaculis vitae,
semper at,
scelerisque porta, tortor. Pellentesque at mi sed tellus
pellentesque
ultricies. In quis pede. Integer vel tortor at dui elementum
suscipit.
Praesent interdum posuere odio. Integer mollis mattis ipsum.
Duis id
metus ut nulla molestie sagittis. Suspendisse faucibus urna
vel metus.
Sed bibendum, dolor sit amet rhoncus rutrum, lorem turpis
pharetra
tortor, quis viverra neque lorem eget massa. Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit. Suspendisse vestibulum arcu
vitae odio.
Fusce enim lacus, porttitor nec, scelerisque non, viverra eu,
enim. Sed
mauris. In hac habitasse platea dictumst. Duis porta mauris
quis orci.
Donec suscipit turpis eu dui egestas suscipit. Suspendisse
potenti. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur
ridiculus mus. In hac habitasse platea dictumst.
Cras in arcu a mi iaculis ultricies. Pellentesque sed lorem
at sem
euismod blandit. Nullam pede lacus, interdum eu, aliquam a,
pretium vel,
sem. Pellentesque fringilla leo feugiat nibh. Cras non enim.
Donec
luctus ante vel diam. Mauris volutpat sapien eget nunc. Donec
nec lectus
nec leo iaculis fringilla. Sed felis magna, cursus et,
hendrerit sit
amet, pretium at, sapien. Vivamus ornare neque facilisis
arcu. Vivamus
nisi leo, varius ac, sodales ut, dapibus eget, eros.
</div>
</body>
</html> -
Facing some problem plz help me out:-
How to create rounded box with help of CSS 3.0Border radius (see below) this will not work in any IE browser lower than version 9. (so virtually useless in my opinion)
#wrapper {
width: 300px;
height: 300px;
background-color: #36F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; -
CSS Image loading problem by dynamically loading from fxml file?
h1. Introduction
The application I am developing loads an FXML file from a Controller. The FXML uses CSS and images for buttons are set in the CSS.
CSS directory structure
<package>.fxml
Images
<package>.fxml.resources.<subdir>
Example CSS Code
.buttonImage {
-fx-background-image: url("resources/subdir/image.png");
}Example loading fxml from controller code
URL location = getClass().getResource("/package/fxml/UI.fxml");
FXMLLoader fxmlLoader = new FXMLLoader(location);
fxmlLoader.setLocation(location);
fxmlLoader.setBuilderFactory(new JavaFXBuilderFactory());
Parent root = (Parent)fxmlLoader.load(location.openStream());
Controller = (Controller) fxmlLoader.getController();
newPane.getChildren().add(root);h1. Problem
The fxml file does not load and causes the following error:
javafx.fxml.LoadException: Page language not specified.Note, the fxml file loaded correctly before images were added.
Any ideas of what might be going wrong?
h1. Attempted
I have attempted the following: tried changing the url of the image as an absolute path.No Problem: Note, this is the actual FXML, my previous examples were simplifications of package names and class names in order to directly illustrate the problem. Note, I am using SceneBuilder to develop the FXML file.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" prefHeight="396.0000999999975" prefWidth="350.0" styleClass="mainFxmlClass" xmlns:fx="http://javafx.com/fxml" fx:controller="com.monkygames.kbmaster.controller.ProfileUIController">
<children>
<Label layoutX="14.0" layoutY="14.0" text="Profiles">
<font>
<Font size="18.0" />
</font>
</Label>
<GridPane layoutX="15.0" layoutY="44.0" prefHeight="99.0" prefWidth="335.0">
<children>
<Label text="Type: " GridPane.columnIndex="0" GridPane.rowIndex="0" />
<ComboBox fx:id="typeCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="Item 1" />
<String fx:value="Item 2" />
<String fx:value="Item 3" />
</FXCollections>
</items>
</ComboBox>
<Label text="Program: " GridPane.columnIndex="0" GridPane.rowIndex="1" />
<ComboBox fx:id="programCB" prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="Item 1" />
<String fx:value="Item 2" />
<String fx:value="Item 3" />
</FXCollections>
</items>
</ComboBox>
<Label text="Profile: " GridPane.columnIndex="0" GridPane.rowIndex="2" />
<ComboBox prefWidth="249.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="Item 1" />
<String fx:value="Item 2" />
<String fx:value="Item 3" />
</FXCollections>
</items>
</ComboBox>
</children>
<columnConstraints>
<ColumnConstraints fillWidth="false" halignment="RIGHT" hgrow="NEVER" maxWidth="-Infinity" minWidth="10.0" prefWidth="80.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
<HBox layoutX="14.0" layoutY="150.0" prefHeight="159.0" prefWidth="335.0">
<children>
<Label text="Description: " />
<TextArea prefHeight="172.0" prefWidth="247.0" wrapText="true" />
</children>
</HBox>
<HBox alignment="CENTER" layoutX="11.0" layoutY="334.0" prefHeight="48.0" prefWidth="329.0">
<children>
<Button fx:id="newProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="newProfile" text="New Profile" />
<Button id="newProfileB" fx:id="cloneProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="cloneProfile" text="Clone Profile" />
<Button id="newProfileB" fx:id="importProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="importProfile" text="Import Profile" />
<Button id="newProfileB" fx:id="exportProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="exportProfile" text="Export Profile" />
<Button id="newProfileB" fx:id="printPDFB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="pdfProfile" text="Print to PDF" />
<Button id="newProfileB" fx:id="deleteProfileB" contentDisplay="GRAPHIC_ONLY" minHeight="48.0" minWidth="48.0" mnemonicParsing="false" onAction="profileEventFired" prefHeight="48.0" prefWidth="48.0" styleClass="deleteProfile" text="Delete Profile" />
</children>
</HBox>
</children>
<stylesheets>
<URL value="@master.css" />
<URL value="@profile.css" />
</stylesheets>
</AnchorPane>Edited by: 960799 on Jan 4, 2013 8:58 PM
Edited by: 960799 on Jan 4, 2013 8:59 PM
Maybe you are looking for
-
How do I use my Time Capsule with hotel wired internet
How do I use my Time Capsule as a wireless router on my hotel free internet ethernet cable?
-
Toshiba Canvio Desk 4tb not recognizesed on TV
Hi, I replaced my D3 Station 3TB (i broke it...) with Toshiba Canvio Desk 4tb, and i got a question; why is not working on my tv(Samsung LE40C530)? My tv recognizes HDD-s only up to 2 tb, so i split the disc on two partitions(i did the same with db s
-
Task Filtering in UWL based on Classification in R3
Hi All, I trying to find out if there is any option in UWL to filter the Task list by the Task classification given at the R3 side. I am refering to the classification which specify at the task level in PFTC -> Addtional Data-> Classification. By sta
-
Clock-in Clock-out corrections - change existing entry
Hi, The employee's clock-in clock-out records are updated from the time recording terminal to Infotype 2011 via an interface. Now, when we try to use the SAP's clock-in clock-out corrections application to change the existing clock-in or clock-out ti
-
iMac, getting very hot at top left corner of machine if on for more than 1 hour. Smelled like something was smoldering inside.