<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.
Related
How can I keep the <a> tag underline running from left to right without any breaks when there are <span> tags inside, and with left/right padding or margin set? It would also be helpful to know why that happens?
I can probably use box shadow or border bottom instead, but I'm not looking for those solutions.
span {
padding-right: 10px;
}
<a href="#">
<span><</span>
<span>Previous page</span>
</a>
In your case padding will add 10px space between both text so we can instead use letter-spacing with the first span to create this space.
If you refer to the specification you can read:
Underlines, overlines, and line-throughs are applied only to text
(including white space, letter spacing, and word spacing): margins,
borders, and padding are skipped
span:first-child {
letter-spacing: 10px;
}
<a href="#">
<span><</span>
<span>Previous page</span>
</a>
To make this more generic we can consider letter-spacing with pseudo-element to simulate space between span:
By the way don't forget to consider white space [as mentionned above] that is already present in some cases.
.first span:after {
content:" ";
letter-spacing: 15px;
}
.second span:after {
content:" ";
letter-spacing: 30px;
}
span:last-child::after {
display:none; /* no need for last child*/
}
<a href="#">
<span>aa</span>
<span>bb</span>
<span>cc</span>
</a>
<br>
<span>aa</span><span>bb</span><span>cc</span>
<br>
<a href="#" class="first">
<span>aa</span>
<span>bb</span>
<span>cc</span>
</a>
<br>
<span>aa</span><span>bb</span><span>cc</span>
<br>
<a href="#" class="second">
<span>aa</span>
<span>bb</span>
<span>cc</span>
</a>
Removing the padding and inserting a space would be an option.
<a href="#">
<span>< </span>
<span>Previous page</span>
</a>
I am trying to figure out how exactly to add two buttons side by side. The button will be an image that the user clicks and it then goes to the URL. I tried adding a class in CSS with an inline display and added html calling that class on a button with an extra style tag added to it. It is not displaying the button though.
I am unsure how else to do it without adding the style tag directly in the html code if I needed the buttons side by side. That is the only way I know how to di it with display: inline;.
Here is how I am doing it:
CSS
.storebtns {
display: inline;
}
HTML
<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
I might not be understanding the question correctly, but if you want two buttons to be side by side and have an image background, try:
<a class="storebtns" href="#"></a>
and:
.storebtns {
padding:100%;
background:url("IMAGE_PATH_HERE");
}
This might work better, not sure if its feasible for you.
.storebtns
{
float:left;
width:100px;
}
<a class="storebtns" href="http://www.google.com">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>
here is a working example Here
This might work better, not sure if its feasible for you.
<a class="storebtns" href="http://www.google.com">
<img src="/img/btn.png" />
</a>
Try adding the buttons using ul, floating it and adding background images with css.
http://jsfiddle.net/nxEd5/
<body>
<h1>Click on a kitty.</p>
<div id="buttons">
<ul>
<li>Button1</li>
<li>Button2</li>
</ul>
</div><!--end buttons-->
</body>
Here is the CSS:
ul li{
float:left;
list-style-type:none;
}
ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}
ul li a:hover{
opacity:1.0;
}
How can I remove or just don't display the border links in every anchor with image? By the way, browser settings is in compatibility mode. Answers from other question doesn't suffice to solve my problem. I guess because it only applies with lower version of IE.
EDIT:
I'm currently creating a Custom share buttons where my client requires me.
<div>
<a onClick="window.open('https://twitter.com/intent/tweet?original_referer=#shareLink#&text=#shareTitle#&tw_p=tweetbutton&url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Twitter_Tweet.png" />
</a>
</div>
<div>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=#shareTitle#&p[summary]=#shareDesc#&p[url]=#shareLink#&p[images][0]=images/Telos.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/FaceBook_Share.png">
</a>
</div>
<div>
<a onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=#shareLink#&title=#shareTitle#&summary=#shareDesc#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/LinkedIn_Share.png">
</a>
</div>
<div>
<a onClick="window.open('https://plus.google.com/share?url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Google_PlusOne.png">
</a>
</div>
CSS:
a {
outline : none;
text-decoration: none;
}
a img {
outline : none;
}
img {
border : 0;
border-style: none;
}
div {
float: left;
padding-right: 10px;
}
Here's what it looks like with IE10:
how about this, try to add something like this
<img src="blah" style="border-style:none;">
I usually use this as part of my normal defaulting set up in my CSS:
img {border: none;}
This doesn't effect the other browsers negatively and is easy to over-ride at a later point if you place this near the top of you general css file e.g
img {border: none;}
img.some-class {border: 1px double blue}
Where the increased specificity will add an ugly border to your image just like IE loves doing.
I was having the exact same issue with IE10. I've just set up a CSS rule for the a tag and set the text colour to white. This removes the blue line from around an anchor image.
I am trying to get some text to wrap so I have this:
h3.h3_title {
white-space:normal !important;
}
Here is the html:
<li>
<a href="#">
<img src="img.png" />
<h3 class="h3_title">this is some text which is supposed to wrap but it is not happening</h3>
</a>
</li>
For some reason it's not wrapping..and ideas why?
h3.h3_title {
white-space:normal !important;
width:20px !important;
}
Set width according to your conditon
I have always had a problem with selecting child links in a div but now I have decided to ask you guys what am I missing here!
I try this:
#navigation a:link {
text-decoration: none;
color: red;
}
<div id="navigation">
<a href="#">
<h1>home</h1>
</a>
<a href="#">
<h1>new</h1>
</a>
<a href="#">
<h1>contact</h1>
</a>
</div>
but it doesnt work! the links get some default settings from the browser or something like that!
try removing the :link,
also you should try to only have 1 h1 title per page for SEO reasons.
You've probably clicked on those links so they're no longer a:link but now a:visited. Just get rid of the pseudo-class:
#navigation a { ... }