I've setup a list where each list element contains two container: a title and a description container. What I need is to show dots at the bottom of each line.
It's working fine in Chrome and Safari. But unfortunately it doesn't work in firefox.
jsfiddle
Any suggestions on how to make this also work in firefox?
ul.basic {
display: table;
overflow: hidden;
}
ul.basic li {
position: relative;
display: table-row;
}
ul.basic li .title, ul.basic li .description {
display: table-cell;
background-color: #fff;
}
ul.basic li .title {
color: #999;
position: relative;
overflow: hidden;
padding-right: 60px;
}
ul.basic li .title span {
position: relative;
z-index: 10;
background-color: #fff;
}
ul.basic li .title:after {
content: '....................................................................... .......................................................................................................................................... ....................................................................................................................................... .............................................................................................................................................................................................';
position: absolute;
width: 300%;
margin-left: -100%;
word-wrap: break-word;
}
ul.basic li .description {
padding-left: 2px;
color: #000;
}
I see 2 behaviour really different between FF and CHrome. Aniway why don't just use a
border-bottom: 1px dotted;
as css rule for css .description ? (also for .title if you need)
I had to use an image to display the desired result properly in all browsers.
Related
Okay, so I am trying to align 5 list items in a row of width 980px.Each of the 5 list items have an anchor tag in them.The anchor tags have a fixed width of 184px and there is 15px padding between two list items.But it is working only in Chrome and Safari. The width in Firefox and IE browsers are showing up as 186px though I have given the fixed width. So,the last list item is coming in to a second row which is not what I wanted.
li {
list-style: none;
float: left;
content-align: center;
padding-right: 15px;
display: table-cell;
a{
width: 184px;
height: 230px;
span{
padding-top: 161px;
padding-right: 8px;
padding-left: 8px;
}
}
a:hover {
text-decoration: none;
}
}
li:last-child{
padding-right:0;
}
Can't understand why this is working only for two browswers
That is because <a> tag is inline by default and cannot accept height or width properties, you have to make it a block.
Also why are you using display: table-cell for the lis?
This code should work (SCSS):
ul {
width: 980px;
background:red;
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
display: block;
padding-right: 15px;
background: blue;
&:last-child {
padding-right: 0;
}
a {
width: 184px;
height: 230px;
color: #FFF;
display: block;
span {
padding-top: 161px;
padding-right: 8px;
padding-left: 8px;
}
&:hover {
text-decoration: none;
}
}
}
See my jsFiddle.
I have a list, which leaves some spaces for indentation purposes and also provides dashed underlying. However the display properties used for this list do no match, causes the text to change line when a space is found. Here is a Fiddle.
The CSS:
.dashed {
display: block;
width: 100%;
height: 90%;
border-bottom: dashed 2px #54687a;
}
li {
display: table-row;
}
li span {
display: table-cell;
padding-right: 1em;
}
I tried to keep only one display property, but that failed. Anyone has a fix for this please?
Let's speak with images!
What happens now - it's the problem:
Desired result:
Remove the dashed class, and add these styles:
li span:after {
content: '';
position: absolute;
display: block;
width: 90%;
margin-left: -12px; /* compensate for padding-left: 12px; */
border-bottom: dashed 2px #54687a;
}
Fiddle
Are you trying to get it so that everything is in one line, like this?
Name: Charis Spiropoulos
If so, try this:
li span {
display: inline-block;
padding-right: 1em;
}
I just updated your fiddle
I added in your CSS
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
display: inline-block; // added or it can be inline
}
You'll likely have better luck with display: block; on the list items and display: inline-block; on the span. table-cell is causing the line to wrap around.
li {
display: display;
padding: 10px 0px; /* modify as desired */
}
li span {
width: 50px; /* Set width as needed so the names line up, even if the span text is different lengths */
display: inline-block;
padding-right: 1em;
}
http://jsfiddle.net/daCrosby/cmfL2643/18/
UPDATED - Final css should be like
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
.dashed {
border-bottom: 2px dashed #54687a;
display: block;
width: 58%;
margin-bottom:10px;
}
li {
display: table-row;
padding-bottom:5px;
}
li span {
display: inline-block;
padding-right: 1em;
width:23%;
}
Check the UPDATED demo - http://jsfiddle.net/cmfL2643/21/
I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.
Here is the CSS:
Here is the page:
Thank you!
-Mike
Try adding margin:auto in the css menu
#cssmenu {
background: #000000;
height: 44px;
position: relative;
width: 595px;
margin: auto;
}
FIDDLE
Add margin: 0 auto; to #CssMenu
#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
position: relative;
display: block;
background: #000000;
height: 32px;
width: 100%;
z-index: 500;
text-align: center; /*add this to center your li itens*/
white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/
#cssmenu > ul > li {
display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
vertical-align: top; /*add this to make you li itens align by top*/
position: relative;
padding: 0;
}
I use bootstrap responsive layout and I have an unordered list looks fine in Firefox, Opera, IE except Chrome browser (version 28). In Chrome it looks like this in the picture:
Here is the CSS Styling:
ul {
margin: 20px;
li {
border-bottom: 1px solid #E6E6E6;
div { // the icon
color: #0085AF;
display: inline-block;
font-size: 12px;
width: 10%;
}
p { // the text
display: inline-block;
float: right;
margin-bottom: 0;
width: 89%;
a {
font-family: 'Open Sans',sans-serif;
margin-left: 10px;
}
}
}
}
The reset styling for ul li is:
ul, li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I couldn't figure out which setting I should change without breaking the current layout, the text should line up with the icon, and above the border line, not sitting on it! why it's doing this?
use display: block; rather than display: inline-block;
When using
filter:alpha(opacity=60);
on a div containing an unordered list which has :hover on the list items, IE8 will only activate the :hover event on the first item that is hovered over.
Moving up/down to another list item will no longer activate the :hover event. This works in firefox however.
There is an example at http://www.ithinkimlost.com/paul/ese/test.html
Any ideas what would be causing this?
Try this syntax:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter: alpha(opacity=60);
opacity: 0.60;
Some ideas that might fix it:
reset the opacity on the :hover
set an height on the lis
add a position and remove the clear
move #homeOptions above the :hover in the code
try this sheet:
#homeContent {
margin-left: 15px;
}
#homeMainPic {
background:url(main_pic.jpg) no-repeat;
height: 216px;
}
#homeOptions {
height: 216px;
width: 300px;
}
#homeOptions ul {
height: 216px;
overflow: hidden;
padding: 0;
margin: 0;
}
#homeOptions li {
display: block;
padding: 0 0 0 30px;
margin: 0;
vertical-align: middle;
text-align: left;
zoom:1;
background-color:#009;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter:alpha(opacity=60);
opacity: 0.60;
}
/* it is needed - don't ask why */
#homeOptions li:hover {
background-color:#009;
}
#homeOptions a {
display: block;
width: 100%;
vertical-align: middle;
line-height: 72px;
height: 72px;
color: #fff;
text-decoration: none;
font-size: 1.1em;
border-bottom: 1px dashed white;
display: list-item;
list-style-type: disc;
list-style-position: inside;
padding-left: 30px;
}
#homeOptions a:hover {
background-color: #000;
}
Change this:
#homeOptions ul li img {
vertical-align:middle;
margin-right: 20px;
filter:alpha(opacity=60);
opacity: 0.60;
}
#homeOptions {
background-color:#009;
height: 216px;
width: 300px;
float: left;
}