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;
Related
I thought my navigation bar css code bordeless but when I refresh the website window it still shows a blank betwin border of screen and the navigation bar (even I have a width at 100%)
issue screenshot
ul {
position: fixed;
top: 0;
margin: 0;
padding-left: 0;
width: 100%;
background-color: #333;
}
li {
float: left;
list-style-type: none
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
padding-left: 10px;
margin: 0;
text-decoration: none;
}
Thank you for your help.
i added left:0; for ul
ul {
position: fixed;
top: 0;
left:0;
margin: 0;
padding-left: 0;
width: 100%;
background-color: #333;
}
You should use a CSS Reset to prevent automatic browser margins and paddings:
https://meyerweb.com/eric/tools/css/reset/
Write a code from the link at the top of your CSS document
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'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.
I'm having difficulty lining up my checkboxes (under Weeks) with the other sections of my form (namely 2. Date & Time). In addition to this, I can't seem to get text to the right of the checkbox, it always seeems to appear underneath. How can I resolve this?
Here is my fiddle: http://jsfiddle.net/4YMaQ/2/
Code
label {
width: 8em;
float: left;
text-align: left;
display: block;
}
select {
width: 70%;
}
.slider, .slider2 {
width: 100%;
margin-top: 5px;
}
input {
border: none;
font-family: 'Segoe UI', arial, helvetica, sans-serif !important;
font-size: 14px;
padding: 0px;
background-color: transparent;
}
.clear {
clear: both;
}
.w50 {
width: 50%;
}
.weeks fieldset {
border: none;
outline: none;
}
.weeks fieldset > legend {
float: left;
margin-right: 3.8em;
}
.weeks fieldset .item {
overflow: hidden;
margin: 0;
padding: 0;
}
.weeks fieldset label {
float: none;
display: inline-block;
vertical-align: top;
}
.left {
float: left;
outline: none;
}
fieldset span {
display: inline-block;
width: 12em;
}
.weeks fieldset span {
display: inline-block;
width: 2em;
}
.request_heading {
font-size: 18px;
font-weight: bold;
}
.page {
padding-left: 20px;
font-family: 'Segoe UI', arial, helvetica, sans-serif;
padding-right: 20px;
font-size: 14px;
}
Your spans are 2em (you seem to have overwritten your 12em on the line below) where as your labels are 8em which is why they are wrapping onto the next line if you change your
if you change your spans to 3.5em and your labels to 1.5em you will get the following:
.weeks fieldset label {width:1.5em}
.weeks fieldset span {width:3em;}
http://jsfiddle.net/4YMaQ/6/
if you change your right margin on your legend you can fit five on a line:
.weeks fieldset > legend {margin-right:1.1em;}
Now just define your class .weeks fieldset span text-align:center; and
Define your .weeks fieldset label with:auto;
as like this
.weeks fieldset span{
text-align:center;
}
.weeks fieldset label{
width:auto;
}
Demo
Adjust the width of the .weeks fieldset, you force the checkboxes to go under weeks :)
.weeks fieldset {
border: none;
outline: none;
width: 50px;
}
It did not work anymore because other things changed, this is what you have to do:
.weeks fieldset .item {
margin: 0;
padding: 0;
width: 40px;
}
Remove overflow hidden and add a width to this field.
.weeks fieldset {
border: none;
outline: none;
width: 124px;
}
The width i provided might not be the width you want, adjust to your own needs :)
I changed the structure of your HTML to match your needs, I removed all the labels after the inputs.
Here's the fiddle, let me know if it's good enough for you.
Just Use display: inline-block; to your item class It works. Demo
Changing the display of your .item-Elements to inline-block should do the trick.
.weeks fieldset .item {
display: inline-block;
overflow: hidden;
margin: 0;
padding: 0;
}