I just received this awesome help:
Is there a way to extend background color of unordered list items to go behind bullets?
and then I was dealing with the text-indent property to again line up the wrapped text in this unordered list, but lo and behold it looks like IE and FF are handling the padding differently enough to really mess with the layout. Any solution?
Firefox (good)
(source: mbira.me)
IE (bad)
(source: mbira.me)
The css for the list:
.registerbox ul{
}
.registerbox ul li.light{
list-style-type:disc;
list-style-position:inside;
margin:2px 0px 2px -20px;
padding:2px 30px;
background-color:#FFFFB0;
text-indent:-12px;
}
.registerbox ul li.dark{
list-style-type:disc;
list-style-position:inside;
margin:2px 0px 2px -20px;
padding:0px 30px;
text-indent:-12px;
}
In order to fix this, I ended up making a png of the bullet and got rid of the default bullets.
Related
I often use a-tags for buttons, so they have a padding that makes them button like.
How do I change the thickness of the text-decoration underline? People often recommend to use a border-bottom for this, but
A bottom border is something else than underlining, some letters even extend below an underline. Underlining is far more sophisticated than a line below something.
I already use the padding of the elements in question as explained.
I have tried to use a a:hover:after selector to actually have a border-bottom anyway. It seems like css is not giving me a lot of alternatives like text-decoration-underline-height or something similar.
I will then in some way alter the height of that pseudo element to emulate underlining without having a one centimeter distance from the text to the "underline".
It doesn´t seem like the :after pseudo-tag is created using this css-selector. Some have managed to do this, but I do not. So there is nothing to create the hateful border-bottom in.
How do I proceed? Will a proper way of styling text-decoration: underline style underlining be added to css?
Until then, how to underline text using a line of desired thickness?
You could do this using the :after pseudo selector. One of the reasons you cited for not wanting to fake the underline was that you wanted descenders to extend below the underline. Well, you could just use a negative margin on the faked underline to accomplish that(notice how the descender of the p is overlapping the underline):
a {
display:inline-block;
text-decoration:none;
color:red;
}
a:hover {
color:blue;
}
a:hover:after {
background:red;
}
a:after {
display:block;
content:'';
width:100%;
height:4px;
background:blue;
margin-top:-2px;
}
Sample link with descender
I tried using APAD1's method to create an underline and I spent at least 20 minutes thinking there was something wrong with how I was doing it. I couldn't get it to work at all on FireFox, so I came up with this method which worked like a charm for those who might be having trouble.
a{
display:inline-block;
color:red;
text-decoration:none;
border-bottom:4px solid blue;
}
a:hover{
color:blue;
text-decoration:none;
border-bottom:4px solid red;
}
Sample underline
You can also use the padding-bottom property to distance the border from the text. You can't pull it closer though, which I assume shouldn't be a problem since you aren't wanting it too close to begin with.
You could consider using a box-shadow, like this:
a
{
box-shadow: 0 5px 0 rgba(0,0,100, 0.5);
text-decoration: none;
padding-bottom: 5px;
}
My super link
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
see definition: https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
The downside of this solution is, that the outline is not clickable.
To overcome this, you can do something like this:
a
{
box-shadow: 0 -5px rgba(0,0,100, 0.5) inset;
text-decoration: none;
padding-bottom: 10px;
}
Totally clickable
If i have a ul, how do i set a border-bottom on all the li items except the last one? I'm also trying to make the width of the border 180px. here's my code:
HTML
<ul class="sideNav">
<li>History</li>
<li>Mission</li>
<li>Associations</li>
<li>Careers</li>
</ul>
CSS
.sideNav {
margin:0;
padding:0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
width:216px;
background-color:#017dc6;
}
.sideNav li {
list-style-type:none;
text-align:center;
text-transform:uppercase;
width:180px;
}
.sideNav li a {
border-bottom:1px solid #80bee3;
width:180px;
color:#ffffff;
text-decoration:none;
display:block;
padding:18px;
}
Dec 13th, 2018: Note that there is no need to use this solution in today's modern browsers. You should feel free using the answer below mine li:not(:last-child) { border-bottom: 1px solid red; }
Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:
:first-child
li { border-top: 1px solid red; }
li:first-child { border-top: none; }
:last-child
li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }
+ selector
li+li { border-top: 1px solid red; }
The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.
EDIT:
The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)
Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/
Use :not(:last-child).
.sideNav li:not(:last-child) a {
/* your css here */
}
One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):
.sideNav li:last-child a {
border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}
Demo
There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).
if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.
You can also use in-line CSS to correct this problem.
<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>
This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.
The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.
Not the best solution, but an alternative one that accomplishes the same thing. Cheers!
On the web page which I am coding, I found difference in displaying list between Chrome and (IE and Firefox).
I suppose my style sheet is wrong. But where?
Why the contents of "li" are set to new line on IE and Firefox?
I want display like Chrome
On My Stylesheet:
a {
color: #F60;
text-decoration: none;
}
a:hover{
color: #F60;
text-decoration: underline
}
li {
margin: 0px 0px 0px 10px;
}
The Result is as this image:
I tried
ul{
display: inline
}
but, it removed marker on the head.
It seems it's this bug, but it implies that your <a> are block elements.
By the way, don't need to redefine same color in :hover.
I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.
Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).
Here's How it looks in IE (Notice the position of the folder icon right next to the text):
alt text http://www.redsandstech.com/ie_works.jpg
Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg
Here's the Unordered List:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Here's the CSS that is used for the whole menu:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.
My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.
For example, one of your tree items might be
<div class="folder">This is a folder</div>
and have the following CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.
Your markup has some errors, so it is up to the browser how to generate the DOM.
ul can only have li as child, not div or another ul. Fix the markup, and see what happens.
I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.
For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)
Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.
You will notice the :hover CSS for the links in the main nav area (grey bar under logo) for the site testing.ksischool.com works fine in Firefox, but IE7 chops off the bottom few padding pixels. Why?
I assume you're talking about the top navigation; you're padding an inline element (the <a> tag). When placing padding on an inline element, horizontal padding will push against other elements, but vertical padding will just increase the size of the element without affecting the layout around it. Likely Firefox is rendering the boxes above the elements below them in the source, but for whatever reason IE is rendering them beneath, which is why you're seeing parts of the box disappear.
To fix the problem, float all of the links left (which essentially turns them into block elements). You'll need to adjust your markup elsewhere to make it work (likely have some clearing problems if you just float straightaway), but that should fix that specific IE issue.
Edited for more detail:
As mentioned above, vertical padding on an inline element doesn't behave the way you would expect (it increases the element's height, but because the padding doesn't interact with other page elements the inline element often overlaps things in odd ways). So to fix this, you somehow need to make the padded element (the <a> tag) have display: block. To keep everything on the same line, floating left is your best bet. Here's the markup and styling that I would use:
<style type="text/css">
.mainnav {
font-size: 1em;
color: #999;
list-style-type: none;
/* zoom triggers hasLayout on IE, ignored by others
Necessary for the clearfix */
zoom: 1;
}
.mainnav:after {
/* This lets the .mainnav auto-clear its floated contents */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mainnav li {
float: left;
margin: 0 2px;
/* Place background (disc image) here w/ appropriate padding */
}
.mainnav li.last {
background: none;
}
.mainnav a:link, .mainnav a:visited {
display: block;
color: #fff;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px transparent;
}
.mainnav a:hover {
color: #fff;
background: #999;
text-decoration: none;
padding: 1px 1px 2px;
border: solid 1px #ccc;
}
.mainnav a.selected, .mainnav a.selected:hover {
color: #B59B24;
background: transparent;
text-decoration: none;
}
</style>
<ul class="mainnav">
<li><a href="/" class='selected'>Home</a></li>
<li><a href="/About" >About</a></li>
<li><a href="/Admissions" >Admissions</a></li>
<li><a href="/Curriculum" >Curriculum</a></li>
<li><a href="/Home/VacancyList" >Careers</a></li>
<li class="last"><a href="/Contact" >Contact</a></li>
</ul>
Some things to note: I'm using a standard clearfix (Google this if you don't know what I'm talking about) to make sure the UL clears its floated contents. This will allow the parent nav elements to grow in size appropriately if the user sizes up their font.
Also, I removed the spacer · and recommend using a background image and .last class in the CSS. This is purely personal preference. (In an ideal world, you'd use the :after pseudo-class to inject the ·, but thanks to IE 6 not supporting it you can't do that and support all browsers.) My reason for recommending a background image rather than just leaving it in the markup is that it leads to cleaner markup and is far easier to change down the road (if your client decided they wanted a pipe rather than a dot, say).
The logic behind this markup/styling is that you need padding on the <a> for the border/background color to work which means it has to have display: block. Adding that would stick every link on a different line, though, so you need to float either it or its parent. Since it's part of a list, it's easier to float the li parent and use a clearfix to make sure the ul still has some presence on the page.
Obviously if you use this code you'll need to remove most of the #nav_banner element things lower down in the stylesheet, and you'll likely need to debug cross-browser again. Even if you don't, hopefully it will provide you with some ideas for easily constructing top navigation in the future.
Try adding display: inline-block to the a element. I'm not sure how compatible that is, but it works in IE7 and FF.
edit: One Crayon's solution is definitely better and the more common way of doing it.