I'm building out this landing page and after the second paragraph I have a list of points to which I have applied a list-style-image to the li.actionItem, however I'm getting the default disc instead of my images. I know the url is working because a) I wrote it in absolute form, b) if you enter that absolute url you get the image (see here) and c) I tried applying the icon instead as a background image with some padding for the text and that works.
I can just do that in the end if I have to (the background image with padding version) but I would prefer to write it as a list-style-image. Plus it's just driving me crazy why it won't show up that way and I'd like to know.
Any thoughts or tips?? Thank you!
Here's the relevant markup at a glance...
<ul id="introPoints">
<li class="actionItem">performed more than <strong>500</strong> surgeries</li>
<li class="actionItem">set more than <strong>3,000</strong> fractured bones</li>
<li class="actionItem">mobilized more than <strong>90</strong> volunteers to Haiti</li>
<li class="actionItem">sent pastors from our DR hospital to minister to the victims</li>
</ul>
ul#introPoints {
list-style-image:url (http://blog.helpcurenow.org/images/campaigns/jan2010/haiticrisis/arrow-green-distress.gif);
list-style-type:disc;
}
li.actionItem {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#6e5e4c;
font-size:14px;
text-align:justify;
width:580px;
font-style:italic;
margin:10px 0px 10px 20px;
text-indent:15px;
}
li.actionItem strong {
color:#dd7439;
}
Try using a background image. list-style-image never lines up properly anyway.
background-image:url(...);
background-repeat:no-repeat;
background-position:0px 0px
This may or may not be the problem, but according to the css grammar you can't have a space between the url and the left parenthesis..
So do this:
url(/someurl)
Not this:
url (/someurl)
Related
Below is a small html page that looks different in Chrome vs Firefox browsers.
Could anybody please explain why it looks different in Chrome if create an html document locally and open this document via Chrome (jsfiddle shows it normally in Chrome, that's why I didn't create jsfiddle page as well)?
<!DOCTYPE html>
<html>
<head>
<title>CCCC</title>
<style>
body * {
text-rendering:optimizeLegibility;
}
body,html {
font-family:Arial,Helvetica,sans-serif;
}
#lesu-tab ul li {
list-style:none;
font-size:14px;
font-weight:700;
float:left;
}
#lesu-tab ul li a {
border:1px solid #888;
display:block;
}
.buggy{
font-size:12px;
}
</style>
</head>
<body>
<div id="lesu-tab">
<ul>
<li>Link1</li>
<li>Link2</li>
<li><a class="buggy" href="https://www.example.com/">A ABC DEFGHIJ</a></li>
</ul>
</div>
</body>
</html>
What makes me even more surprised is that if you change the font size from 12px to 11px or 13px for class="buggy", Chrome displays it not in two lines, but in one - normally.
Also, if you remove one or another one of any css properties on the page, it is displayed in one line as well. That's unclear for me why is this happening?
Is this a bug?
Any ideas how to fix it without removing css properties?
And of course the code above is just less than 1% of a huge html page that causes this issue.
Thank you.
You can work around the issue by using non-breaking spaces, as in
<li><a class="buggy" href="https://www.example.com/">A ABC DEFGHIJ</a></li>
Use the normalize.css to standardize the CSS, the difference is that different browsers have slightly different "defaults" for CSS layout,
Please see https://stackoverflow.com/a/8357635/3536236
The cause of your specific problem sounds like the browsers are taking a different approach to rounding the font size based on your zoom, font size, and font-weight.
I have created a simple navigation bar using html and css. The issue with it is when zoomed in, the structure changes as not all the links can fit in one line. Here is the jsfiddle: http://jsfiddle.net/HamishT/b3Lw4/
Here is the code in case you are unable to access jsfiddle:
<div id="navBar">
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
#navBar {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#5a5a5a;
font-size:12px;
font-weight:bold;
background-color:#eeeeee;
padding:0.1em;
box-shadow: 5px 5px 5px #888888;
}
.nav {
list-style:none;
display:inline;
border-left:3px solid;
}
.nav a {
text-decoration:none;
color:inherit;
padding: 0 20px 5px 20px;
}
.nav a:hover{
border-bottom:3px solid;
}
#order {
float:right;
color:#E65C00;
}
I have tried various ways, none to any success. One way I am wondering about is if I can edit it so that it will flow off the page if it doesn't fit (so only part of the width of the navbar is seen at one time), but I can't seem to work my head around it. Another way I think would be to detect the screen width/zoom and change the structure completely if the available space is too small, but I am unsure if this is possible (I've looked into it, but have not found any that seem to work the way I've described.
Just in case it helps: one thing I have spotted is the floats may be preventing me from being able to fix this.
Are there any ways to fix this and if so, how? I don't mind how it works (eg. flows off the screen or zooms the whole navbar out) so long as it does work. I've been stuck on this for three days now (I'm still new to it all) so any help whatsoever would be greatly appreciated.
The problem is caused because float is considering a 100% width for the navbar. Add a width in pixels to fix the size of the navbar, like this
#navBar {
width: 550px;
}
Although this will cause elements to flow out of current window (and hence bringing the scrollbar). Your best bet in such a case is make stuff responsive and create different styles for different widths.
When you zoom into the page, the size of the viewport is decreasing.
That means you can use media queries to create proper breakpoints:
#media screen and (max-width:600px) {
#navBar {
font-size:5px;
}
}
The 600px mark works well in my test case. But you can't reproduce it via jsfiddle. 5px aren't too small since you're zoomed in. The best approach however would be using em values instead of px since they allow to change the reference font-size: body { font-size:0.9em; }. This will be inherited by any other element.
I have found a solution (it may not be of use to everyone who sees this, but is one alternative solution to the issue). I put the li element that floats right in a separate div so that when zoomed in it will not drop below the others or overlap. Instead the other li elements will drop down before they overlap, whilst still working properly.
From the HTML, the #order element (float right) is in a div before the other li elements put into a new div.
<div id="navBar">
<div>
<ul>
<li class="nav" id="order">ORDER</li>
</ul>
</div>
<div>
<ul>
<li class="nav">HOME</li>
<li class="nav">PRODUCTS</li>
<li class="nav">SERVICES</li>
<li class="nav">CONTACT US</li>
</ul>
</div>
</div>
Here's a working jsfiddle to show what I mean: http://jsfiddle.net/HamishT/3pd5Z/#base
I have a tile on my website that flips over when i hover over it. On the back of the first i attempted putting a button. The button hangs off of the bottom and im not quite sure how i can get it below the paragraph i have on the back of the tile. Also, i can't get the header of the tile centered. I tried using
text-align:center;
but that doesn't seem to work.
Here's the code i'm writing up. So if you run it and hover over the first black tile you'll see the text 'eternally rustled'. That's the problematic tile. Any help would be appreciated. Thanks.
I think I have your fix! Using what you gave us I just added two things to the "btile" portion of the CSS so it looks like the one below:
#btile {
width:350px;
text-align:center;
}
and to fix your header problem, I simply added width to the code below:
.webname {
width: 350px;//I added this
font:800 17px/17px"open sans";
color:#333;
text-transform:uppercase;
text-align:center;
border-top:1px dashed #888;
z-index:50;
position:absolute;
text-align:center;
}
Where does the width come from? It's the size of your picture! Just make sure the div width is the same size of the picture and you're set. Here is a JsFiddle that can show you exactly what I did! Let me know if it doesn't work! :)
I have read a lot of answers regarding this but it does not solve my problem. On the main page when I scrolled to the bottom, the footer has an extra space but it seems like the extra space below it is the background of my page. In other pages, the footer is okay. I think this happened because my main page has a short content. I actually cheated on its sidebar by adding margin bottom. Any help which applies to all browsers and any screen sizes that will fix this? Thanks!
This is the CSS of my footer:
#footerArea{
height:108px;
width:100%;
z-index:5;
background:url('../images/footerArea.jpg') #404042;
}
#footerPart{
height:48px;
width:988px;
margin:0 auto;
padding:0px;
background:url('../images/footerbg.jpg') no-repeat #404042;
}
#footerPart a {
text-decoration:none;
}
#footerLink{
margin:0 auto;
padding:15px 0px 0px 0px;
width:960px;
}
#footerLink ul{
list-style-type:none;
float:left;
}
#footerLink ul li{
display:inline;
margin:0px 5px 0px 0px;
}
#footerLink ul li a{
background:url('../images/footerbtn.jpg') no-repeat;
font-size:10px;
text-decoration:none;
padding:0px 0px 0px 15px;
}
EDITED:
This is from footer.php
<div id="footerArea">
<div id="footerPart">
<div id="footerLink">
<ul>
<li>xxx</li>
<li> | </li>
<li><li>yyyy</li>
<li> | </li>
<li>zzzzz</li>
<li> | </li>
<li>aaaaaa</li>
</ul>
<p class="fR">SOME TEXT　ggggg</p>
</div>
</div>
</div>
</body>
</html>
I have tested it in Chrome, Firefox and IE but it has the same output.
Check if you have some kind of web tracking code or any other javascript (in javascript tags) at end of your document. Though it must be a few lines of javascript code, it sometimes takes-up space beneath footer in some browsers, especially in IE. If you can provide a codepen reference, we can review
In your HTML you have a <li> tag embedded within another <li> which is invalidating your code, as it doesn't have a closing tag.
Short of that, it's hard to debug such a vague problem as "Has extra space". To provide further insight it would be great if you could provide a jsfiddle or something similar.
If you can't provide that or don't know how, I can offer some debugging tips. If you're using google chrome to debug, you can go into your webkit inspector, or firebug if using firefox (Right click, "inspect element") and look at the CSS and boxing for paticular elements.
If that fails and you still can't figure out what's causing the extra space, you can right click elements and begin deleting the ones that you think may be the root of the problem. Once an element is deleted it will no longer appear in your browser, so if you delete one and the problem persists, you can be comfortable knowing it wasn't that element (or is multiple elements, but lets not get that complex.)
I have a list that resembles:
<ol>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ol>
I am using images to replace their default bullet points in CSS. Separate images are used for the end node as well as another image for all other bullet points. The images display, however as soon as I add these images a 4 pixel padding is somehow added to the top and bottom of each list item. This extra spacing changes the height from 26 pixels high to 34 pixels high. This gap provides about an 8 pixel separation between the different bullet point images which were meant to have a 0px separation as per my design.
The CSS I made:
li {
margin: 0;
padding: 0;
border: 0;
}
li.node {
list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
list-style-image: url('../imgs/nodes/ur.png');
}
Is there any way to remove this spacing? I have tried removing all things padding/spacing/border related to all li's, but nothing so far.
EDIT:
I do not think I am making my question clear enough, so I am posting the image of what it looks like on my end.
The joining bars as you see in the image above are supposed to be connected (as if one continuous image). Removing the special CSS images for bullet points reduces the height of each item to the height of the CSS bullet point image (as I have tested using Google Chrome's element inspecting tool).
EDIT 2:
A close example to show my problem can be found here: http://jsfiddle.net/EyVRF/1/
Garry Cairns might be onto something. I tested your code and borrowed a list style image from a website that was a good size and i see no padding that would be an issue, or at least not the type you're seeing.
http://jsfiddle.net/BYQQV/
list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');
You may also want to consider not having to create a whole new class for the last list item. Try instead
li:last-child { list-style-image:.... }
Althouth IE is not happy with that. But for future reference.
lack of .css and html unable me to answer you.
About : Is there any way to remove this spacing? YES there is.
try this :
ol, li{list-style-position:outside;margin:0;padding:0}
or
ol, li{list-style-position:inside;margin:0;padding:0}
Let me guess ? You didn't reset your .css ?? (margin:0;padding:0)
Ok, i can see what you want .. and sadly, you wont be able to achieve what you want this way becose the 'padding in between the bullet and first character is 'browser-specific' and unmanagable through css.
You will have to use another technique : background image.
<ul>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ul>
ul, li {
margin: 0;
padding: 0;
}
li {
font-size:16px;
line-height:16px;
list-style-type:none;
background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
padding-left:16px;
border-bottom:1px solid blue;
}
li.node_end {
background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}
http://jsfiddle.net/2RtB7/1/
Carry on
PS, try to search a little more before asking for help --> CSS: Control space between bullet and <li>