Linked image shows a blue border and seperates from email body in Outlook and IE
i tried to insert this style at the top
img
{ border-style: none;
}
Still doesnt work
EDIT
img { border: 0; margin:0;}
I dont know if border="0" can be added to IMAGE tag maybe depends on your version of HTML 4.1/5 (not in the style, although you can probably leave the style as it is to style="border-style: none;"
try display:block; in your image style tag
Related
I was trying to style Vaadin grids header, more specifically, I would like to change the background of the 'checkbox' to 'white'.
This changes all checkboxes to white, not just the one in the header.
:host [part="checkbox"] {
background: white;
}
/*or*/
[part="checkbox"] {
background: white;
}
Any suggestions on how I could accomplish that? See the screenshot below: 1) should have white background, 2) should stay with the default background, not white.
Tx.
Did you try the ID CSS selector?
#selectAllCheckbox {
background: white;
}
As I can see on the grid components demo page, the check box is not part of the shadow DOM, i.e. you can style it using global CSS.
I have padding on images and the padding affects the image link because there is a black line
Style
a:link{background-color:black}
img{padding:20px}
Html
<img src="blank">
So in Simple terms there is a black line coming from the image and I want to get rid of it. I can't get rid of the styled link because I use it for other links
Instead of black, use transparent or none
SNIPPET
.tran {
background-color: transparent;
}
.none {
background-color: none;
}
img {
padding: 20px
}
<a href="#/" class='tran'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
<a href="#/" class='none'>
<img src="http://i.imgur.com/o1RbMvI.png">
</a>
If you want specific style for one link, but you don't want it to affect the others or be affected by the others, I would set up a specific class for the links you want to have a background-color: black; and then a separate class for the link that you don't want affected by it. zer00ne provides a sufficient answer for this. Just add class="tran" or whatever you want to name them into your links that you want to be connected together with whatever style you use in .tran{}, as shown in his answer. Play around with grouping things into classes and using the classes to style more specific elements in your CSS. Best of luck!
in css file:
.black{background-color:black;}
img{padding:20px;}
HTML:
<p>
<img src="blank">
<img src="blank">
</p>
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.
Is there anyway to get pointed back button like we have in iphone. Currently I am getting round button.
Also, any one has idea abt navigation bar in jQuery mobile. Whenever we are changing screen using navigation bar css is not getting applied.
Back Button:
You can try this:
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
But it will use a background picture instead of pure CSS backgrounds.
If you want to do it pure CSS, this will be tricky.
Start from here. I assign this to an empty div, which gives me a CSS only triangle, which I'm using for popup windows. You would have to find a way to turn this by 90 degrees, match border color to button background gradient and fiddle it into any of the JQM button styles.
Nice challenge :-)
.popover_triangle {
background: none repeat scroll 0 0 red;
border-color: transparent transparent black;
border-style: solid;
border-width: 16px;
font-size: 0;
line-height: 0;
width: 0;
}
If you manage to get it done, please post. There are a lot of people looking for it.