I have the following code:
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
I created a fiddle
What I don't understand is why are the small circles that should appear to the left of the "li" missing?
Any help would be appreciated
Your problem is that jsfiddle.net automatically includes a reset stylesheet (normalize.css) that includes this:
ol,ul {
list-style:none;
}
You'll see a "Normalized CSS" checkbox in the sidebar, uncheck that and normalize.css won't be pulled in; for example:
http://jsfiddle.net/ambiguous/HQJhe/10/
That fiddle is just yours with the checkbox unchecked.
The debugging technique you should follow here is to simplify your code as much as possible. Either the problem will go away, or you will be left with a few tiny lines of code and someone will be easily able to spot the problem
I went to your JSFiddle and started removing lines of CSS one at a time. That didn't solve the problem. Then I started removing HTML. Eventually I was down to just this:
<ul><li>Why is there no circle?</li></ul>
My conclusion is that JSFiddle had some weird stylesheet that was applying to your code and removing the circle. Thank you to "mu is too short" for figuring out exactly what stylesheet and how to turn it off. But I still decided to post this because I think you could benefit from learning this debugging technique.
just use this code below:
li style="display: list-item; list-style: none"
Related
I'm making a hoverable ul that displays a p element in another div.
As there is no parent selector to be had in pure CSS, I'm stuck and cannot figure out how this is supposed to work.
Fiddle won't work for some reason(for me), so here is a bin:
https://jsbin.com/yohapudimo/edit?html,css,output
My best effort was:
#infoDrop > li:hover ~ #aboutPara > p{
display: inline;
}
while trying to target a sibling div
I think it might be possible without JS... this is untested though so bear with me -- it also has to be an adjacent element, which I'm not sure is a problem or not for you?
If this doesn't work for you, then I'm afraid you'll need JS.
#myPCont p {
display: none;
color: #fff;
}
.myCont:hover+#myPCont p {
display: block;
}
#myPCont {
background: #333;
height: 300px;
width: 300px;
}
<div class="myCont">
<ul class="hoverShowP">
<li>This is my first list item</li>
<li>This is my second..</li>
<li>And this is my third.</li>
</ul>
</div>
<div id="myPCont">
<p>Heyooo!</p>
</div>
I would like to ask anyone who could help me where is the difference between this two CSS tags.
.bmenu:hover li a{...}
VS
.bmenu li a:hover{...}
Thank you very much for help and sry for my bad english.
Edit 1: I would like to ask for explanation mainly, how do they both work, because in the first case, there is a "li a" behind the :hover. What does it mean please? Thx
To explain this, I'll use this example code:
<div class="bmenu">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
if you use .bmenu:hover you're saying you want the CSS to apply when you hover the ENTIRE .bmenu div.
When you say .bmenu li a:hover you are saying that you want to apply the CSS when you hover the a tag within a .bmenu li.
Here's a quick example I made, the top is using the .bmenu:hover method, and the bottom is using the li a:hover method. fiddle here.
In the first case an <a> will apply styles when you hover .bmenu, in the second case - when you hover the <a> itself. Take a look at these two blocks:
.bmenu1, .bmenu2 {
width: 200px;
height: 100px;
margin: 10px;
padding: 40px;
background-color: orange;
}
a {
display: block;
height: 100%;
width: 100%;
background-color: firebrick;
}
.bmenu1:hover a {
background-color: lightblue;
}
.bmenu2 a:hover {
background-color: lightblue;
}
<div class="bmenu1">
</div>
<div class="bmenu2">
</div>
Kinda embarrassed asking but I'm fairly new to CSS and I just wanted to add some simple display:inline styling on a HTML list item. The list is composed of varied heading, paragraph, image and link tags and I just cant seem to get them all inline on one row.
This is all the relevant parts of my code, hopefully someone can point out an easy fix.
HTML
<ul>
<li>
<h3>Quantity</h3>
</li>
<li>
<p>#</p>
</li>
<li><img onclick="addQuantity('itemName')" src="images/plus.png"></li>
<li>
<h3>1</h3>
</li>
<li><img onclick="minusQuantity('itemName')" src="images/minus.png"></li>
<li>
<h2>Add To Cart</h2>
</li>
<li>
<h4>Checkout</h4>
</li>
</ul>
CSS
ul {
list-style-type:none;
}
li {
display:inline;
}
Simple question, simple answer :)
Use inline-block
Have an example!
CSS
li {
display:inline-block;
}
Now, being CSS, there are numerous ways to achieve the layout you want. Here is a slightly more in-depth example using display: table and display: table-cell. Same HTML.
Have a second example!
CSS
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
ul {
list-style-type:none;
display: table;
border-collapse: collapse;
border-spacing: 10px;
background: #333;
width: 100%;
}
li {
display:table-cell;
background: #DDD;
vertical-align: middle;
}
I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):
div.activelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.activelayer:hover {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.inactivelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer:hover {
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
cursor: text;
}
#innertab .alink {
margin-top:18px;
text-align:center;
margin-left:0px;
}
#innertab a.tablink {
color: #ffffff;
text-align: center;
}
#innertab a.tablink:hover {
text-decoration: none;
color: #ffffff;
text-align: center;
}
/* IDs */
#menu1 {
z-index:10;
}
#menu2 {
z-index:9;
}
#menu3 {
z-index:8;
}
#menu4 {
z-index:7;
}
#menu5 {
z-index:6;
}
In the aspx page, I have this:
<div id="innerTab" class="" style="width: 1000px; height: 72px;">
<div id="menu1" class="selectedlayer" style="margin-left:0px">
<div class="alink">
Menu Item 1
</div>
</div>
<div id="menu2" class="activelayer">
<div class="alink">
Menu Item 2
</div>
</div>
<div id="menu3" class="activelayer">
<div class="alink">
Menu Item 3
</div>
</div>
<div id="menu4" class="activelayer">
<div class="alink">
Menu Item 4
</div>
</div>
<div id="menu5" class="inactivelayer">
<div class="alink">
Menu Item 5
</div>
</div>
</div>
The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.
I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.
Is there something that I missed in the code? Please help :(
Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(
thanks,
Poch
Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:
margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px
You'd just change your selector to this:
.someClass .someOtherClass #someId #innertab a.alink
Your selector is now stronger and will be applied.
Try adding !important, like so:
div.activelayer {
margin-left:-30px!important;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
text-align:center!important;
height:55px!important;
width:200px!important;
display:inline-block!important;
position:relative!important;
float:left!important;
}
I had a similar issue with this a few weeks back. I couldn't find an exact resource that said it, but through trial and error I was able to find that I could only apply CSS Psuedo classes (Like :hover and :active) to <a> tags within SharePoint when browsing in IE. The code you posted above has :hover / :active on <div> tags.
I was able to get a working solution by using image sprites, styling the anchor tags, and nesting the image sprite within the <a> tags with the following HTML and CSS:
HTML
<ul id="wheel" class="wheel"><li>
<img src="images1/design.png"></li>
</ul>
CSS
.wheel li a, .wheel li a:visited{
width: 50px;
height: 50px;
overflow: hidden;
}
.wheel li img
{
position: relative;
display: block;
}
.wheel a:hover img{
left: -51px;
}
.wheel a:active img{
left: -102px;
}
On the off chance you haven't solved this issue, hope this helps!
The Preview, What others are saying tabs are stacked and right-aligned (wrong).
They should be horizontal and left-aligned.
It's displayed correctly in firefox,IE8.
What's the reason for this?
URL: http://www.learncentral.org/resource/view/59896
UPDATE
Related html here:
<div class="ed_tabs">
<ul class="ui-tabs-nav">
<li class="selected ui-tabs-selected">Preview</li>
<li>What others are saying...(0)</li>
</ul>
</div>
css:
.ed_tabs {
border-bottom:3px solid #3F79C2;
float:left;
width:100%;
}
.ed_tabs ul {
float:left;
list-style:none outside none;
margin:0.5em 0 0;
padding:0 0 0 1em;
}
li {
float:left;
padding:0 1px 0 0;
}
Not sure why IE7 is working differently, but I see that your CSS rule for
.ed_tabs ul li a
does a float:right to the anchor (A). Try changing this to float: left instead.