I am creating a sitemap, and for some reason on all browsers the different separation pipes have different fuzziness.
Chrome:
.header a {
color: black;
text-decoration: none;
}
.header li {
display: inline-block;
}
.header li:after {
content: "|";
margin: 5px;
}
<div class="header">
<ul>
<li>Mainpage</li>
<li>Handbook</li>
<li>About</li>
<li>Donate</li>
<li>Forum</li>
</ul>
</div>
Can somebody please help me fix this? It makes so sense.
Chrome and Firefox use different techniques for rendering fonts. That's why they look different (more or less smooth and fuzzy) in each browser. It is then also different on the several operating systems.
If you need it to look consistent every time, you should probably use an image or the CSS border attribute and similar. Another option is CSS text-rendering.
Semantically speaking the pipe | is not the way to go, because it has a different meaning than what you're trying to accomplish (in Unix terms: pipe'ing two commands together, but also has functions in Mathematical terms etc).
You're (mis)using it as a divider, which is a visual (style) element. chrki's solution to use a border would be best:
.header a {
color: black;
text-decoration: none;
}
.header li {
display: inline-block;
border-left: 1px solid black;
margin-left: 5px;
padding-left: 5px;
}
.header li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
<div class="header">
<ul>
<li>Mainpage</li>
<li>Handbook</li>
<li>About</li>
<li>Donate</li>
<li>Forum</li>
</ul>
</div>
ps: and I've thrown in a "first-child" to only let the divider appear between elements
ps2: the "Space between inline-block"-problem appears in this solution, an answer to that can be found here: A Space between Inline-Block List Items
Related
I was looking into ways to optimize css performance and was wondering if their is an existing tool that converts complicated selectors to more simplistic ones.
The tool would look at all css rules and create unique single-pathed selectors that would contain all the proper attributes. It would than looked at every dom node and search for any css matches, and if something is found it would add the simplified selector to the node. The css that is rendered only contains the simplified versions and the html would still have the original classes/ids so the existing setup wouldn't break.
An exaggerated example of what I mean:
#original {
padding: 5px;
background: blue;
}
#original .nav {
font-size: 24px;
}
#original .nav ul {
background: black;
}
#original .nav ul li {
list-style-type: none;
}
#original .nav ul li a {
text-decoration: none;
color: green;
}
#simplified {
padding: 5px;
background: blue;
}
._ranClass1 {
font-size: 24px;
}
._ranClass2 {
background: black;
}
._ranClass3 {
list-style-type: none;
}
._ranClass4 {
text-decoration: none;
color: green;
}
<div id="original">
<h1>Original CSS</h1>
<div class="nav">
<ul class="_ranClass2">
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</ul>
</div>
</div>
<div id="simplified">
<h1>Simplified CSS</h1>
<div class="nav _ranClass1">
<ul class="_ranClass2">
<li class="_ranClass3">Link 1
</li>
<li class="_ranClass3">Link 1
</li>
<li class="_ranClass3">Link 1
</li>
</ul>
</div>
</div>
Of course this would require heavy tweaking and may cause more headaches than good, but was wondering if something like this exists.
EDIT:
I am not looking at a way to write more convenient CSS, SASS/SCSS exists for that reason. I am looking for a way to optimize CSS in terms of the browser.
EX: take the original selector
#original .nav ul li a {
text-decoration: none;
color: green;
}
simplified too
._ranClass4 {
text-decoration: none;
color: green;
}
Instead of the browser looking at every 'a' node, then checking to make sure the parents match, it just matches if the node has class ._ranClass4
I would avoid what you're doing in your example. Your selectors should not be too wordy, but it's also nice for them to have some level of description so you know what their intended purpose is.
You may want to read into BEM and other CSS methodologies that can help organize and speed up writing your CSS.
You're also probably looking for something like CSSO or another gulp/grunt task. CSSO has a feature you expressly desired, to parse your markup and remove useless selectors from your CSS. Be wary, if you have DOM modifiers in some JS scripts, you might run into issues where CSSO removes these selectors from your CSS because, at the time the task was run, they didn't exist in your markup.
Here is a good article on other methods of CSS optimization.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I'm completely new to HTML, CSS and Javascript but drawing on previous knowledge of typical programming from Java and C along with numerous tutorials and google searches I've been piecing together a very rough image of how this all works.
Now something that is driving me crazy is I recently added a tabbed content box into my website, one that is on the main page that allows you to select one of 4 different paragraphs by clicking on the appropriate tab. I pulled it off of a tutorial and have a basic understanding of how its working.. but for some reason I cannon get it to let me adjust the width of each of these tabs..
Here is the html for the tabs:
<div id="feature-tabs">
<ul id="tabs">
<li>What We Do</li>
<li>What Makes Us Different</li>
<li>Our Background</li>
<li>Why We Do It</li>
</ul>
</div>`
And here is the associated CSS that styles it.
#feature-tabs {
height: 16px;
width: 150px;
}
ul#tabs {
list-style-type: none;
margin: 0 0 2 0;
}
ul#tabs li {
float: left;
}
ul#tabs li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
text-decoration: none;
width: 150px;
}
ul#tabs li a:hover {
background-color: #f1f0ee;
}
ul#tabs li a.selected {
color: #000;
background-color: #f1f0ee;
font-weight: bold;
}
I need this very much so for the look I'm going for but I simply cannot find out why no matter where I put width: ___px; it just won't apply.
I am wondering if there is something I'm doing which prevents width from being an applicable trait or what have you.
Thanks in advance.
Try adding this style:
ul#tabs li a {
// ..
display: block;
}
DEMO
This happens because a is an inline element by default. Inline elements don't react to height/width.
Does height and width not apply to span?
The Width Propertyw3
Add the following rule to your link :
ul#tabs li a { display: inline-block; }
I have a sort of menu like this one, but how you can see the code is not so "well".
I'd like that margin between word and border is always 5px for example, for every word.
I know I should use List for this kind of stuff, but I don't know how to apply css style with cross-browser compatibility.
Can you give to me an example of that menu with List?
This is how I'd do it:
See: http://jsfiddle.net/thirtydot/554BT/3/
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
.menu {
width:545px;
float:left;
margin: 0;
padding: 0;
list-style: none
}
.menu li {
float: left;
text-align: center;
padding: 0 15px;
border-left: 2px solid red
}
.menu li:first-child {
border: 0
}
This is the way I would do it, keeping it as easy (simple) as possible. It probably doesn't get any less complex than this:
HTML
<ul id="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
CSS
#menu {
list-style-type: none;
}
#menu li {
display: inline-block;
padding: 0 10px;
border-left: 2px solid red;
}
#menu li:first-child {
border-left: none;
}
DEMO: jsfiddle
Check out Listmatic for examples of all the basic list layouts.
Looks like you want something like this one.
Try this...
fiddle:http://jsfiddle.net/anish/Laqqn/
<style type="text/css">
.menu
{
width:500px;
}
.menu li
{
width:100px;
text-align:center;
float:left;
border-right:1px solid red;
}
</style>
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
A CSS3 example, not really cross browser as it uses CSS3 pseudo-selectors
CSS3 List menu
This other example uses a pipe character to separate the links and is cross browser safe:
CSS2 List menu
Space between the borders do this =
Put a border on the right side of the li and the second button put a border on the left side of the li.
Now add margin-left (or margin-right) and see it expand.
This worked in my case.
Good luck.
I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows:
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
And here's a demo of what it actually looks like:
The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu's background, and makes it look really dodgy/crap/cheap/yuck!
Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I'm screwed either way. How can I make little imperfections like this look the same in all browsers?
Update:
HTML (The menu):
<ul class="menu">
<li class="currentPage" href="index.php"><a>Home</a></li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
The CSS:
.menu {
margin-top: 5px;
margin-right: 5px;
width: 345px;
float: right;
}
li {
font-size: 9pt;
color: whitesmoke;
padding-left: 6px;
padding-right: 8px;
display: inline;
list-style: none;
}
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
You might prevent problems by not changing the padding based on the hover. Furthermore you should hover on the a
Does this work as expected?
JSFiddle example
Your problems are probably due to your use of display: inline. Try setting explicit height on the ul. Doing this with your example worked for me:
ul {
border-bottom: 2px solid black;
height: 28px;
}
I added the border to be able to see where I was aligning to.
BTW, the proper solution is to not use li:hover, but a:hover, as has been stated.