Please Check the attached image
ul li{
width:100px;
height:200px;
float:left;
border:10px double #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
<ul>
<li><img src="image.jpg"/></li>
</ul>
I find the best way to reduce these inconsistencies is to use a CSS reset (a quick Google search will bring many results). What this does it pretty much set everything to 0 within your stylesheet.
From there, everything you define in your styles is how you want it to be displayed. It of course isn't 100% perfect, but it does a good job of getting you on your way.
1 of many CSS resets out there
May be you have to write display:block or vertical-align:top; in your IMG tag.
for example
img{display:block}
Related
We have a left nav that I am trying to tweak just a tad. Please don't critique the validity of the HTML, we have a CMS and external developers that are driving the ship and, frankly it works for now.
What I want to do is apply a style to <DIV>s that are after the <DIV class="nav_selected">, I just want indent them with some padding-left:30px;
Thats it, but everything I have tried applies to the "nav_selected" div as well which is what I dont want. It is kind of a header, and the divs under that are children.
<div class="left_nav_2">
<div class="left_nav_2_container">
<ul class="no_bottom_border">
<div class="nav_selected"><li><h2>Link 1 Selected</h2></li></div>
<div><li>Link 2</li></div>
<div><li>Link 3</li></div>
</ul>
</div>
</div>
You can try creating a class for the first line, then use a negation pseudo class to utilize it.
:not(/*put all the classes in your css document here.*/){ /* put the css you want for it here.*/}
Something like this could work too:
CSS
.no_bottom_border li{
padding-left: 30px;
}
.no_bottom_border .nav_selected li{
padding-left: 0px;
// or just the opposite values of the .no_bottom_border li
}
Is it something like that?
ok you can use this:
ul.no_bottom_border > div:not(:first-child) {
padding-left: 30px;
}
hope it helps
Here it is which you want
Add padding-left to both the divs like
.no_bottom_border li{
padding-left: 30px;
}
.nav_selected li{
padding-left: 0px;
}
suppose i have a ul li structure and i want to remove last li border which also support in IE 6 by using only CSS(use of css only is compulsory in my project).
<ul>
<li>HI</li>
<li>HI</li>
<li>HI</li>
<li>HI</li>
</ul>'
I want a such type of output which also work in IE6...
Since supporting IE6 is a requirement, you're going to have to get a little kludgy if you don't want to use Javascript or add a class (the preferred method).
It's not clear what look you're going for, but here's a method that preserves the bullets. This assumes the borders are defined and you want to hide one. You can set overflow: hidden on the <ul> and margin-bottom: -1px on the <li>. This works in IE6 just fine.
Demo:
Output:
CSS:
li {
border: 1px solid black;
margin-bottom: -1px;
}
ul {
overflow: hidden;
}
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Here's another method where you simply just don't define the bottom border.
Demo:
CSS:
li {
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Below is the solution (Tested it in IE9's quirks mode, which is equivalent to IE6, but let me know the results, I strongly believe it should work):
<html>
<head>
<style>
ul li{
border:1px solid red;
}
ul li.lastchild{
border-bottom: 0px; // Or use "border: 0px;" if you completely
// want to remove the border
}
</style>
</head>
<body>
<ul>
<li>HI</li>
<li>HI</li>
<li>HI</li>
<li class="lastchild">HI</li>
</ul>
</body>
</html>
You can do this by adding class to the last li there is no other way since it does not support last-selector and +
And the other option which might not be by pure css but I think it will helpful is by jQuery you can use jQuery, since jQuery supports last-child
Try
$(function(){
$("ul li:last-child").css("border","none")
})
and it will support almost all the browsers
Also its not good idea to consider ie6 except there special requirement . rather facebook and many big website doesn't consider ie6 check Browser Statistics ie6 does not even hold .5% so I would recommended to not think about ie6
After a long study i got a result that there is not a single method in CSS that removes last li border which also work in IE6......so U have to add a class on the last li element or you use jquery to remove last li border.......
Result:- only using CSS u can't achieve this goal..........
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
css
#inchannel li{
width:179px;
height:40px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:17px;
color:#999999;
background:url(img/green.png) no-repeat 8% 50%,url(img/back_line.png);
}
.ichn0{
width:179px;
height:123px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:17px;
color:#999999;
background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;
}
html
<ul id="accordion">
<li>
<ul id="inchannel">
<li class="ichn0"><img src="facebook/41403_1434825607_37944358_q.jpg"></li>
<li><img src="facebook/48983_615523712_8495_q.jpg"></li>
<li><img src="facebook/41621_717814907_4472_q.jpg"></li>
</ul>
</li>
</ul>
I want to apply css on only one class but it isn't applied to one class it seems like inchannel css covers all.
can any body tell me how to apply css on only one class?
Any thought?
Thank you.
use higher specificity
#inchannel li.ichn0{
width:179px;
height:123px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:17px;
color:#999999;
background:url(img/green.png) no-repeat 8% 18%,url(img/log_in_body.png),url(img/invite_button.png) no-repeat 60% 60%;
}
#inchannel li has much more specificity tham the class .ichno.
There are several ways to combat this.
Add !important to the properties of .ichn0
This is bad practice because you can overwrite user stylesheets like this, which are used for things like screen readers, etc.
Add an ID to the first li.
This is OK, but not the way I'd go about it, personally.
#inchannel:first-child
This is how I would go about it. In my eyes this is easiest to maintain across multiple pages.
Add a class per Damen's answer.
There's absolutely nothing wrong with this approach, either. I'm just a sucker for :psuedo selectors.
#inchannel li — Applies to all li elements inside the #inchannel element (all of them, in your case.
.ichn0 — Applies to li elements with ichn0 class, regardless of what element they are inside. There is only one of these.
The reason why the first is taking precedent over the .ichn0 CSS is because of CSS specificity. The #inchannel li selector is more specific and therefore overrides the less-specific .ichn0 settings.
Changein .ichn0 to #inchannel li.ichn0 should fix your problem.
Im encountering a misalignment issue with IE. Below is a sample output. When IE creates a second line due to the long text, the whole paragraph gets mis aligned. Making the 2nd line pulled to the left. I want the first and second line to be aligned to the left. Just like a normal text-align: left will do.
http://img.photobucket.com/albums/v682/markeeh/alignment_tissue.jpg
Below is the code:
<style>
.ul_content-l { width:330px; list-style:square inside; margin-left: 295px; padding-left:1em; text-indent:-1em; line-height:16px; }
</style>
<ul class="ul_content-l">
<li style="border: 1px solid black;">Modular carpet offers hospitals and care homes a calming environment to speed patient recovery</li>
<li>Hygienic guarding against bacteria through Intersept® antimicrobial protection</li><li>Improved patient comfort and well-being</li>
<li>Therapeutic surroundings with less noise and less stress</li><li>Use of colour and design for more cheerful facilities </li>
</ul>
Hope someone other there is willing to help. Thanks. :)
use this
.ul_content-l {
width:330px;
list-style:square;
margin-left: 295px;
padding-left:10px;
line-height:16px;
}
Try to reset margins for li and ul.
Like:
ul, li {margin:0;padding:0;}
and than just set them again the way you want with
ul.ul_content-l { code here }
ul.ul_content-l li { code here }
Also try to be consistent and use only px or only ems.