I'm applying an image to a li element in CSS, the image appears next to the li items when I first load but then after a refresh they vanish and are replaced by bullet point. I'm using the preview option coda 2 which uses Safari but in Firefox (latest version) and Chrome (latest) the images don't even load.
My CSS code is really simple and I have no idea why this issue is taking place
ul {
list-style-image:url("images/star.png");
}
li {
margin: 10px 0px 0px 0px;
}
Your CSS should be working. Test:
ul {
list-style-image: url(http://stater.mahdaen.name/icons/favicon-16x16.png);
}
li {
margin: 10px 0 0 0;
}
<ul class="org">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
If your CSS is not working, then you may check this:
Do not apply custom display to the li (e.g inline-block).
Image is exist.
List style is still not overridden by other css.
Related
I am having a very slow menu drop down experience on windows mobile only. it works ok on chrome and android pc's etc.
image of drop down, GREEN sub menu is very very slow to apper on windows mobile phones (only) you have to keep the logon pressed for at least 1.5 secs before sub menu appears. I would be grateful if somebody could look at the CSS code an see if I need to add / alter any of the settings in CSS
small piece of my nav code
<nav>
<ul id="main-nav" class="clearfix">
<li> Log in
<ul>
<li> Members area </li>
<li> Rythe Centre </li>
<li> Members Email IT Support</li>
</ul>
</li>
</nav>
#main-nav a {
font-size: 100%;
padding: 6px 5px 3px 3px;
margin: 0px;
}
#main-nav a:hover {
padding-right:20px;
}
#main-nav ul a {
padding: 6px;
height: 10px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
font-size: 100%;
background: #090;
}
#main-nav ul a:hover {
background: #000;
}
#main-nav ul ul li:first-child a:after {
position:absolute;
left: -8px;
}
#main-nav ul ul {
top: 0;
left: 90px;
}
#main-nav ul a {
width: auto;
}
#main-nav ul ul a {
background: #f90;
I eventually found the solution, in this post
4 novel ways to deal with sticky :hover effects on mobile devices..
http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
emphasized textCSS's venerable :hover pseudo class forms the backbone of many CSS effects, triggered when the mouse rolls over an element on the page. In today's changing landscape however where touch screen inputs share center stage with the mouse, this has presented a bit of a conundrum for webmasters. Touch based devices in an effort to not be left out in the cold with such a pervasive CSS feature do respond to hover, but in the only way that's possible for them, on "tap" versus an actual "hover". While this is overall a good thing, it leads to what's known as the "sticky hover" issue on these devices, where the :hover style stays with the element the user just tapped on until he/she taps again elsewhere in the document, or in some circumstances, reloads the page before the effect is dismissed.
I have used Method 4- Dynamically add or remove a "can-touch" class based on current user input type.
Good luck.
Mark
I have added a sticky footer to a SharePoint master page using the flexbox method, and it is working fine in all browsers on Windows, but does not work correctly for Safari or Chrome on OSX.
The HTML is roughly as follows:
<body>
<form>
<!--
a whole bunch of SharePoint stuff here that I can't mess with
-->
<div id="s4-workspace">
<div id="s4-bodyContainer"></div>
<div id="footer"></div>
</div>
</form>
</body>
And my initial CSS is this:
#s4-workspace {
display: flex;
flex-direction: column;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
}
Now after searching around a bit I found this question, and based on that I started playing around with all kinds of vendor prefixes, and I even realized that the way I was using the flexbox was maybe a little unorthodox. Instead of having the main content div #s4-bodyContainer grow to use extra space, I was getting the footer div to expand it's top margin up to fill any extra space, which I guess flexes the #s4-workspace to fill the viewport if necessary.
So then I tried adding
#s4-bodyContainer {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
But that didn't help either (and actually started causing problems in IE on Windows, which had worked fine before).
The behavior that I'm trying to fix in Safari and Chrome on OSX is this:
When the page renders, it seems as though the footer calculates it's top margin based on the viewport. It is always initially sitting at the bottom of the window, as if it was the case that there was little content and it should push down to the bottom of the window. But this happens even if there is a lot of content flowing underneath it, and it really should have pushed down to below #s4-bodyContainer (out of the viewport). If I scroll the page, it just sits on the page exactly where it was initially drawn and remains covering whatever content was under it on the initial rendering.
What can I do about this? What secrets are out the for getting flexboxes working correctly on OSX?
Found the answer here.
Apparently (should I say unsurprisingly?) there are some bugs in the way certain browsers handle flexboxes.
I was able to get the behavior I wanted reliably across IE, Firefox and Chrome on Windows and Safari, Firefox and Chrome on OSX with the following:
#s4-workspace {
display: flex;
flex-direction: column;
}
#s4-bodyContainer {
flex: 1 0 auto;
}
#footer {
clear: both;
height: 100px;
min-height: 100px;
width:100%;
background-color: #2e2e2e;
font-size: 11px;
margin-top: auto;
flex-shrink: 0;
}
I'm not very good with HTML or anything like that so please bear with me! So I'm editing a tumblr theme (that someone else made, not me) and I moved the sidebars from the right to the left, which messed everything on the theme up. I've almost got it looking how I wanted layout wise, but the container won't stretch to match the posts or the page etc. You can see what I mean here (sorry can't post images):
vbthemes.tumblr.com/page
Even on the main page it isn't quite long enough to go down past the pagination.
Ideally I want the container to stretch down to the bottom of the posts/post on the page.
This is the code for the container:
// CONTAINER //
.containerbg{
padding:20px;
margin-left:-40px;
margin-top:29px;
background:{color:containerbg};
padding-top:10px;
width: 880px;
height: 100%;
z-index:-1000;
}
Can anyone give me any tips?
I can provide more of the code if you need, as I said I'm a huge noob.
(the theme was made by themesofcaroline.tumblr.com and i take no credit for it)
I'm having trouble testing this, but this should work.
Add the following css to your theme:
/* -------------------------------
CLEARFIX FLOATING FIXES
---------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear { overflow:hidden; clear:both; height:1px; margin:-1px 0px 0px 0px; font-size:1px; }
.clear-simple {clear:both; }
Then add clearfix class to your container. So:
<div class="containerbg clearfix">
Untested but try it.
I am practicing using various image replacement methods and recently came across a couple articles discussing a new, supposedly more efficient method by Scott Kellum.
Original website article regarding this new method
It seems good and I would like to practice using it, but am not to sure what the html and css for it should be. So in the example below, I have an h1, with the example logo text inside. Then I added a class of .hide-text to my h1 and styled it with CSS. I used a photoshop logo image I made and set that as the background image....the image has a width of 203px and a height of 57px.
Question 1:
When I tested my code in the browser, everything seems to be working fine, however is my usage of Mr.Kellum's image replacement technique correct?
Question 2:
Should I target the h1 in the css and declare the width and height or is it okay to include the width and height directly in the hide-text class like in my example below?
<style>
.hide-text {
background: url(images/mylogo.jpg) 0 0 no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 203;
height: 57px;
}
<body>
<h1 class="hide-text">MyLogo text</h1>
</body>
Any help is greatly appreciated. Thank you community!
I have found the css image replacement museum while searching for the actual trends on image replacement. I met the Scott Kellum method's there. After that I found this question - so I'm not an expert using this technique - and i want to share my opinion about.
Implementation copy-pasted from the link above
Simple, as also posted on the question.
<h3 class="skm">CSS-Tricks</h3>
CSS
h3.skm {
width: 300px;
height: 75px;
background: url(test.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Implementation as I would do it
I've read the original article and i think it's better to split the css code for reusability. Maybe we'll replace with images more than a single element.
<h1 class="ir">An awesome pretty title</h1>
<h2>Some words here not replaced with images<h2>
<nav>
<!-- some links replaced with images that also use css sprites -->
<a class="ir" href="#">home</a>
<a class="ir" href="#">sweet</a>
<a class="ir" href="#">home</a>
</nav>
Reusing the ir class for the image replacement technique, as suggested on the post you linked on the question, keeps things tidy.
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h1 {
background-image: url('/the-title-replacement.png'');
width: /*the-image-width*/px;
height: /*the-image-height*/px;
}
nav a {
background-image: url('/the-menu-icons-sprite.png');
width: 24px;
height: 24px;
}
nav a { background-position: 0 0; }
nav a + a { background-position: 0 24px; }
nav a + a + a { background-position: 0 48px; }
Conclusions
The image url & the size must be set for each replaced element. If we are using sprites the background position also comes in play for each element, though the element size is often shared between all the elements.
All of this use cases can benefit from splitting the css code, keeping the stylesheet tidier.
NOTE: I've made these thoughts for a pure css implementation. Using a css preprocessor - such as less for example - changes the rules.
NOTE 2: Another trending method is the proposed by the H5BP team. I am undecided about which to use.
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.