I need to find the border color of a button the HTML properties of the button is like follow
<input class="BUTTON" type="button" title="Add Link" value="Add Link" name="ADD_LINK"/>
and CSS properties are as follow
background-color: transparent;
border: 0 solid #EACCAE;
border-radius: 2px 2px 2px 2px;
height: auto;
padding-bottom: 1px;
vertical-align: text-top;
I am using following code for getting border property
String sColor = driver.findElement(By.xpath("//input[#value='Add Link' and #type='button']")).getCssValue("border");
but its not returning any value. At the same place when I am trying to get the background-color property with code
String sColor = driver.findElement(By.xpath("//input[#value='Add Link' and #type='button']")).getCssValue("background-color");
it's returning transparent.
Can anyone will please suggest me why I am not getting border property or provide me solution for this.
Thanks
The CSS border attribute is actually shorthand for border-width, border-style, and border-color all together. (See the W3 doc.)
If you query each of those styles individually, you should get back the information you're looking for from Selenium.
Related
My website is http://picofdel.org/services/educators-professionals/professional-development.html
I have added a custom HTML module at position content-top-b for skip navigation link.
The code is
<div id="main" style="width: 0px; height: 0px; border: none;"> </div>
But, a thin border is appearing on the page around the module. Please tell me how to remove the border.
Add these stylesheet to your head or body. Otherwise you can add this simple line to your css-file (without script tag).
<style type="text/css">
.module-outline-2 { border: none !important; }
</style>
the border will be defined on following file:
http://picofdel.org/templates/ca_cloudbase2_j25/css/template.css on Line 316:
#rt-top .module-outline-2,
#rt-content-top .module-outline-2,
#rt-content-bottom .module-outline-2,
#rt-bottom .module-outline-2{
border: 1px solid #e6e6e6;
}
I used an [hr] tag but instead of just a single line it shows what seems to be the border of something. It has a teeny tiny little edge just on the left of it. The following link should explain what I mean.
Image is here
My code is as follows:
<hr align="center">
Any thoughts?
That is the default browser style. If you don't use any CSS that's what appears as the horizontal rule (<hr />) tag. For example this can be your markup:
<hr class="footer-hr" />
To style it you can use the following CSS code:
.footer-hr {
/* These are browser hacks so the horizontal line looks the same in all browsers
(cross-browser) */
border-color: #000000;
background-color: #000000;
color: #000000;
border: 1px solid #000000;
/* So keep them as they are - you can change the values of course */
}
Also why would you align it to the center, the browser does it by default as I know. Also if you add something like margin: 0px; in CSS you can have the <hr /> wrap the whole line of the page, from the farest left to the farest right corner.
EDIT:
To make the line not to look fat you could use this:
Add to the above CSS code the following rule:
height: 1px; /* Or change the value to whatever other number */
EDIT 2:
As you asked for a bordered div, I don't know what did you want a top-border or a bottom-border or both? Anyway here's the code you need:
MARKUP:
<div class="bordered-div"><!-- Some content here --></div>
CSS:
.bordered-div {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
When we have multiple images in the blog and if we click any of those images, blogger enlarges that image. When we click the enlarged image, it shows next enlarged image, and so on.
Is there any way to customize appearance of the enlarged image? At the moment, my image in blog is shadowed (I am using 'box-shadow' style) but when it enlarges its without shadow.
I tried putting 'box-shadow' style in 'href' but no luck.
Well, I found the answer on my own. Just putting here in hope it will help someone coming here.
The images in blog enlarged after clicking, and displayed one by one is done by Blogger's Lightbox feature. We can customize the enlarged images (e.g. we can make them round cornered, put shadow to them etc.) by doing this:
Go in bloggers HTML editor of template
Search using CTRL + F the tag < /head> (No space between '<' and '/')
Just above the tag, add the following code:
<style>
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 11px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 3px 3px 7px #888;
}
</style>
For more details please refer this:
http://helplogger.blogspot.in/2013/03/how-to-customize-bloggers-lightbox.html
For my website I have a checkbox with a label next to it, but if the text in the label is longer than for example 60px, I want to cut off the text.
I know about the text-overflow: clip, this does exactly what I want, but for some reason it doesn't work on a label. And using a div instead isn't a really good solution, since you can't click on the text to select the checkbox then.
How can I do this?
label or span are inline by default. You cannot set width on inline elements.
So make label inline-block
/// markup
<input type="checkbox"/> <label style="display: inline-block; width: 60px; overflow: hidden">Sample text sample text</label>
vertical-align: middle serves as a great solution here to align the label with the check-box and text-overflow: ellipsis for snipping the text with the three dots ... at the end.
The following snippet shows an example:
HTML:
<input type="checkbox"/>
<label>Pretty awesome label to describe the uber cool checkbox. </label>
CSS:
label {
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
width: 300px;
white-space: nowrap;
vertical-align: middle;
}
Here is a fiddle for you - link
A utility class ellipsis could be used here:
.ellipsis {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
How do i add a text caption to the image border example mention at http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/
I would like to use the code in the same place that the image path is specified(not in the style sheet), so somewhere in
<img src="SOMETHING.jpg" style="display: block; margin-left: auto; margin-right: auto; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;" />
You do know that a lot has changed since 2007? CSS3 introduced the box-shadow property that does just this, but more realistically.
Without HTML or JavaScript, you can't do the caption, though. CSS can't read properties from HTML.
Here's a demo: http://jsfiddle.net/2DuyU/3/
I don't see how you can do this without making a p tag like so at the very least:
<p><img src="location/of/my_image" alt=""/><br/>Caption</p>
adding the styling to the p tag instead.
Example: http://jsbin.com/ewazir
I think you should write following
<img>your caption</img>