My site's menu is a list created by ul/li syntax. I have already deleted all CSS lines about the menu list but it still look like this, which the bulletin dots show up weirdly on the last character of the menu item text. I'm getting crazy to deal with this.
Why is this happening in IE/Google Chrome?
edit:
Thanks for your help. but after the reset, the list is not aligned vertically. It looks like this, and if i add list-style-type:none to the li element again, the dots just appear again.
You need to override the user agent styles. To remove the dot, override the list-style-type
ul {
list-style-type: none;
}
Use Reset.css to neutralize all cross-browser differences, however the problem you're describing in Chrome is probably; be caused by your -webkit-padding-start property.
Try to use a CSS Reset, it will override the default styles.
e.g. of reset is given at this page http://meyerweb.com/eric/tools/css/reset/
Related
The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
I've the following problem, I'm trying to change the color of the text of a "< li>" element, in joomla menu. I give the menu a link to css selector called blueMenu, this is my CSS regarding the class:
.blueColor {
color: blue;
}
However this doesn't change the color of the text, on the other hand if I change "color" with "background-color" the background of the text becoms blue. Any idea what may causing the problem?
You dont give much information, but it might be that the li has a child element inside that its overwriting the li styling, make sure you using the style on the last child.
You can also force it with !important;
.blueColor {
color: blue!important;
}
This really much depends on your template.
As already said, reasons can be inline-styles, or may more "distinct" declarations.
If you just specify the class like you did in .blueColor this will be treated with a lower priority as e.g. li.blueColor or to get even more clear both with be treated with a lower priority as e.h. #someId.andClass .subElementClass li.blueColor a.thisIsWhatIsReallyBlue
This is more about CSS specifications than a Joomla-Problem though.
You might check the style that is really applied by just launching your Development-Tools of your webbrowser (for Chrome simply press F12 or right-click on the element and inspect the element directly)
The CSS-Section on the right side might tell you about what really makes the item become blue ;)
Oh, and just a note:
As already mentioned you can use !important to "force" the styles to be applied, but if this is not absolutely necessary, i'd suggest to find the way to override this style on a clean way, since !important, if used to often, might result in a complete mess of your stylesheet.
regards
I'm not familiar with joomla but it may be inserting an inline style to whatever element you're trying to style. Right click on the element and use inspect element (firefox) or just inspect (chrome) to see if any styles were applied.
It'll look like <div class="" style="color: blue;">
I'm using Wordpress>Atahualpa Theme>Recent Posts Widget Extended on my site toawaken.org.
Recent Posts are listed in the r.h. sidebar. I have added a "bullet" (disc) in front of each Post title. When I did so, it threw the spacing off.
If you link to my site, you will see for some reason the added bullet is forcing the text to appear one line below the bullet, instead of right next to it, on the same line as the bullet, as it should. I want the post's title to line up on the same line as the bullet, not one line below it. I tried adjusting margins/padding in the CSS editor, but no margin/padding combination changed this. Nor did changing the div list-style-position from inside to outside:
div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;
color: #2D85BA;
}
If anyone could please check the sidebar on my site and offer a remedy, would be much appreciated.
This plugin seems to have a clearfix implemented in the <li> elements, and it's pushing headers to the next line. You can override it with this CSS:
.rpwe-clearfix:before, .rpwe-clearfix:after {
content: none;
}
As a side note, try not to use so much !important expression in your stylesheets. You'll end up having more and more difficulties changing the CSS rules. If you want to everride certain rule, you use a selector with just a bit stronger specificity than the one you want to change.
You can read more about selectors' specificity here.
I have a span in a li. According to both Firebug and Chrome inspector the span is inheriting list styles list-style-image, list-style-position, list-style-type. Which is not what I would expect given that a span is not a list element. Anyway, because of this (I assume) the span is not being positioned where I'd like it.
How can I stop this inheritance?
Thanks
According to the CSS specification, list-style properties only apply to elements with display:list-item. See here: http://www.w3.org/TR/CSS21/generate.html#lists
Therefore, the inherited list-style properties do not apply to the SPAN element, unless it has display:list-item set.
Look at Firebug and check which class is applying the styles to the span. Simply modify that style to fix your issue. Or put a screen grab of the Firebug inspect panel here, so we can have a look
I think your reading the information from Chrome and Firebug wrong or you've done a mistake in your CSS.
Normally, spans doesn't inherit any style related to list element automatically.
Paste your CSS, so we can help you.
You can't that is just the way CSS inheritance works,
You could negate the effects by adding this to the spans:
.className {
list-style-image:none;
list-style-position:inherit;
list-style-type:none;
}
Not that any of these should effect how the spans appear, more likely a rogue margin/padding, try using Eric Mayers CSSReset
Works fine in FF/IE if I include a link to a stylesheet, but I'd rather include the CSS inline so everything is in the one XSL file so it's easier to distibuute. When I do, IE works but FF drops a style for one element; that style is in a separate stylesheet, not the inline styling.
Specifically:
HTML:
<ul id =navbar class=**PrimaryNavFrame**><li>Contact<ul><li><a href="h.......
The styling for the PrimaryNavFrame class gets dropped only in FF. It appears in the source, etc. The inline styling itself works.
I'm not used to Firefox having a problem with what seems pretty straightforward so was wondering if anyone has any ideas?
Update:
If I remove float, it works, but I need the float (it's a horizontal menu):
#navbar li {display:inline; list-style: none; float: left ;height:25px; }
Is there a way to get the float without disrupting the external CSS?
Another update:
It seems all I had to do was add the float to the class that was getting dropped and it works!
.PrimaryNavFrame{float:left;}
Thanks for the responses!
Another update:
It seems all I had to do was add the float to the class that was getting dropped and it works!
.PrimaryNavFrame{float:left;}
Thanks for the responses!