I'm working on a ASP.NET application that uses the in-built Treeview. For some reason, the vertical space between the nodes will not reduce no matter what I try in the CSS.
The nodes are dynamically generated, see the example bellow:
The tree is generated using:
<asp:TreeView ID="rcmTree" runat="server" CssClass="treeView" ShowLines="true"></asp:TreeView>
And then the CSS Code I have is:
.treeNode {
text-indent: 2px;
font-size: 13px;
}
.treeNode a {
text-decoration: none;
color: #000;
vertical-align: middle;
}
.treeView tr {
margin-top: -25px;
}
.treeView {
margin-top: 6px;
}
#rcmTree td div {
height: 20px !important;
}
Found the answer - I had to change the Doctype to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Related
I am struggling through the documentation on jquery ui (specifically tabs:
I've digested the js functions...but I am struggling with the css. For example, I cannot figure how to change the border color (it is like my customizations are not even being read)...
Here is my code so far...
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
ui.tabs-container {position: relative; background: #0000cd; }
ui.tabs {
float: left;
background: white;
height:400px;
line-height: 30 px;
padding: 0 16px;
width:409px;
scrollbar:false;
cursor: pointer;
}
ui.tabs:hover{ background: #f4f4f4; }
ui.contents {
float: left;
position: absolute;
left: 5%;
height: 300px;
margin-top: 31 px;
padding: 0 px;
border: 1 px solid #ccc;
font-weight: normal;
display: none;
}
When it comes to jQuery UI there's usually a lot of classes involved with different levels of cascading, so I recommend you use Chrome's developer tools or Firefox's Firebug to figure out what you need to target with your css.
For example, with this:
.ui-state-default.ui-corner-top.ui-tabs-active {
background: red;
}
You can change the color of the active tab...
Demo: http://jsbin.com/umixan/1/edit
Probably you are looking for two classes. ui-state-default and ui-state-active. So, just add the styling you need for each state. Example:
.ui-state-default {border:1px solid #000;}
.ui-state-active {border:1px solid #fff;}
Note, that your css (above code) must be after jQuery's jquery-ui.css, otherwise you have to use !important for changes to take place.
As darkajax mention though, you have to start using firebug (or Chrome's tools).
I have one button , over that I am applying below style/class. but this class doesn't work properly in mozila browser. it works in IE. Button's starting point I have icon which renders at the middle of left side and text comes beside that.
IE renders in middle but mozila renders at top of ![enter image description here][1]button. please let me know what I m doing wrong here. also find attached screenshot of the issue
.class
{
padding: 0px;
margin: 0px;
border-collapse: collapse;
background:url(GB_Link.gif) no-repeat 0px -2px;
display:inline-block;
height:20px;
line-height:13px;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, Sans-Serif;
text-decoration: none;
text-align:left;
text-indent:25px;
text-color:black;
vertical-align:middle;
width:180px;
cursor:hand;
border: 1px solid #77A2B5;
}
this is a general issues.
add the following code at the top of the layout or in your html page where you have defined the html tag:
<!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">
I hope so your problem will be short out.
I think you have understood very well.
Set the line-height to the same as the button height:
line-height: 20px;
This is daunting me and I can't see the way to go. This is the first time I put a question here, so correct me if I´m not following protocol. Thanks!!!
I need the background of the menu to change according to the selected item so when active, the items to the left will show in orange while keeping the items on the right in gray.
Also, the triangle separating the colors have to keep to the right of the active menu item.
For the first element, is easy, but the second and forward, I cant make the code work as it cuts on the boundaries of the menu.
For example, I have [individuos] [empresas] [corredores] [proveedores]
When empresas is active, individuos and empresas should be orange while corredores and provedores should be gray.
If corredores is selected, then individuos, empresas and corredores should be orange while proveedores is gray.
I wanted to post an image to illustrate but as newbie I am not allowed.
#navigation {
position: absolute;
line-height: 40px;
padding: 0;
margin: 0;
margin-left: 210px;
width: 730px;
background-color: #757373;
}
#navigation ul li a {
text-decoration: none;
float: left;
padding: 0 40px 0 10px;
}
#navigation .empresas .active {
background: url(images/the-background.png) no-repeat right;
}
This one is good
This one is not, see that INDIVIDUOS should be orange
Maybe this fiddle provides some inspiration?
CSS:
#navigation li {
background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
background-color: #757373;
}
HTML:
<div id="navigation">
<ul>
<li>professionals</li>
<li>organizations</li>
<li class="active">others</li>
<li>others2</li>
</ul>
</div>
Update
See updated fiddle with the "arrow" and more. If you want this to work also in IE7, then add span elements instead of using :before and :after.
THE SOLUTION
Ok, problem solved and it was the cleanest trick I´ve seen. I did not need to add anything else to the php, classes or the like. The solution was pointed by a colleague. All that it was needed was some trickery with z-index and positioning. Thank #peter and #PeterSmith for your input.
<!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>Ejemplo menú</title>
<style type="text/css">
ul { list-style-type: none; }
ul li { display: inline; position: absolute; text-align: right; }
a { position: absolute; }
.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; }
a.uno:hover { background: #FF6600; }
.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; }
a.dos:hover { background: #FF6600; }
.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; }
a.tres:hover { background: #FF6600; }
.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; }
a.cuatro:hover { background: #FF6600; }
</style>
</head>
<body>
<ul>
<li>PRUEBA 1</li>
<li>PRUEBA 2</li>
<li>PRUEBA 3</li>
<li>PRUEBA 4</li>
</ul>
</body>
</html>
Edit: Just saw your latest comment below about the .active class.
If you can add some javascript to your pages, you could run through a for loop for each li item, appending "orange" to its class, until you find the .active class, then the rest would have "grey" appended to the class. I'll try a fiddler later when I've got some free time
Here's my code:
<!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" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
and stylesheet:
#font-face {
src: url('syncopateBold.ttf');
font-family: Syncopate;
font-weight: bold;
font-style: normal;
font-variant: none;
}
#font-face {
src: url('syncopate.ttf');
font-family: Syncopate;
font-weight: normal;
font-style: normal;
font-variant: none;
}
* {
margin: 0;
padding: 0;
}
body > *:first-child { /* our title */
font-family: Syncopate;
font-size: 4em;
font-weight: bold;
margin: 0;
text-shadow: 0 0 10px black;
text-transform: lowercase;
*color: blue;
_color: red;
}
body > *:first-child > span { /* The 4 in Acid4 */
color: white;
font-weight: normal;
font-size: 200%;
vertical-align: sub;
z-index: 999;
}
acid\:textGradient:empty {
background: url('textGradient.png') repeat-x;
display: block;
height: 31px;
margin-top: 50px;
position: absolute;
width: 210px;
}
. Here's the result I get on Google Chrome:
Which is what I expect. However, Firefox and IE9 display this:
I'd like to know, which one is the standards-compliant result?
The fonts can be found here: http://www.google.com/webfonts/family?family=Syncopate&subset=latin and the textGradient.png is just a gradient image.
Despite the contrived example (all the "acid" stuff is completely irrelevant), this is actually a question about vertical alignment, and in particular, vertical-align:sub. As far as I can see, neither css2.1 nor css3 defines how far vertical-align:sub should shift the text. They simply say
sub
Lower the baseline of the box to the proper position for subscripts of
the parent's box. (This value has no
effect on the font size of the
element's text.)
So there is no standard, Chrome has just chosen a different value to Firefox.
I suggest using something like vertical-align: -10%; instead.
I'm pretty sure that acid:xmlns should be xmlns:acid:
<!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" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
Of course, I'm assuming that xmlns:acid is not actually "http://acid/", because that refers to a user's local page on localhost.
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}