Bright Cherry » CSS Tips & Tricks

CSS- Using Float With List Item Bullets in I.E 6/7

adm1n — Wed, 08 Dec 2010 02:08:16 +0000

Note to self and everyone else having a breakdown over this issue, YOU CANNOT float a list in I.E 6 or 7 and have the bullets display. It took me way too long to realise that.

I have searched high and low for a legitimate way of making it work (without using JavaScript), but apparently it cannot be done.

For example, suppose I want the following effect:

The code to achieve the above effect is:






 

 List 2
 List 2
 List 3
 List 4
 List 5
 List 6

However, in I.E 6/7 it looks like the following:

The bullets DO NOT show! I genuinely wasted hours trying to get the code to work. After scouring through what felt like hundreds of forums, I couldn’t find anyone that was able to get the code to work in I.E 6/7.

The Solution

Fortunately, there is a solution. It’s not a hack, it’s just a different way of achieving the same visual effect. Instead of using the “list-style-type” property, you can use the “background” property, and it will give the exact same effect, but it works in the most commonly used browsers: I.E 6/7/8, Safari, Opera, Firefox and Crome (that’s all I tested).






 

 List 2
 List 2
 List 3
 List 4
 List 5
 List 6

Notice the “background” property. The image it is calling is basically the “circle”. The bullet can be anything you want it to be – just create it as an image.

As far as I know, that literally is the ONLY solid way of achieving a stable way of producing item bullets in the majority of browsers.

Has anyone else been pulling their hair out while trying to resolve this bug?

Remove Redundant CSS From Your Stylesheet

adm1n — Wed, 14 Jan 2009 19:11:03 +0000

Last week someone approached me with a problem- their website was running significantly slow. There were many obvious problems, but the issue I’m going to cover today is CSS stylesheets.

Believe it or not, but stylesheets can slowdown a website if they get too bloated. It’s extremely common for a web developer to fill stylesheets with unused code. This usually occurs over years of upgrading and maintaining a website- a lot of redundant styling builds up. It also happens when developers first build a website- the trial and error approach of developing usually leaves scars. In this case, CSS code.

The website I worked on had a HUGE stylesheet, and it was definitely one of the factors that helped with the slow loading. In fact, by the time it was uncluttered, the stylesheet had shrunk by more than three-quarters.

To help detect redundant CSS code, refer to this Remove Redundant CSS Tool.

Rounded Corners With CSS

adm1n — Wed, 15 Oct 2008 09:23:08 +0000

This is a pretty simple but useful tutorial. A lot of people physically create round-edged backgrounds with applications like Photoshop. While this is time-consuming and a complete nightmare for updating purposes, there is a much more efficient way of doing this with the use of CSS. Only problem is that it doesn’t work in all browsers just yet e.g Internet Explorer However, it works with the cool, geeky browsers like Firefox. If anyone knows an I.E fix, holla!

For example, if you want this image to have rounded edges:

To do the following:

You can use the following CSS code:

 #nonround{
height:200px;
width:200px;
background:red;
margin-top:20px;
}
 
#round{
height:200px;
width:200px;
background:red;
margin-top:20px;
 -webkit-border-top-left-radius:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 -webkit-border-bottom-right-radius:10px;
 
 -khtml-border-radius-topleft:10px;
 -khtml-border-radius-topright:10px;
 -khtml-border-radius-bottomleft:10px;
 -khtml-border-radius-bottomright:10px;
 
 -moz-border-radius-topleft:10px;
 -moz-border-radius-topright:10px;
 -moz-border-radius-bottomleft:10px;
 -moz-border-radius-bottomright:10px;	
}

(the various rules are somewhat duplicated so they work across various browsers)

Cool, right? Right.

Pure CSS Image Gallery

adm1n — Tue, 30 Sep 2008 07:50:09 +0000

It’s a simple CSS image gallery- no Javascript or any other scripting language is required for the feature to work. I had someone ask me how I did it, so I thought I would share the code.

Demo of the CSS gallery

It’s simple, clean and affective.

CSS Image Gallery Code

Download

Any probs? Let me know. I’m not offering full-support on this feature, but if you have any queries, i’ll do my best to assist.

Note

The images DO NOT hold when you focus on a thumbnail using WebKit based browsers such as Google Chrome and Safari. In this case, the larger images display only on hover.

However, the large images do hold in other browsers such as Internet Explorer and Firefox.

Centering Text Vertically With CSS

adm1n — Mon, 15 Sep 2008 22:37:39 +0000

CSS can be extremely odd some times, and vertically centralizing text in CSS is one of those occasions which makes me think that…

Centering text horizontally within a div is extremely straight forward. All you need to to do is use the text-align:center property. But for some reason, there isn’t an easy remedy to centralize text vertically with CSS. It’s easily accomplished with tables, but as web development has progressed, the use of tables is now frowned upon by the web geeks (unless you’re displaying tabular data).

Admittedly, aligning text vertically central is not a feature I require a lot of the times, but I do need it now and then. For instance, I needed it this morning…

Example for centering text vertically

Below is an image of a navigation bar. I’ve added the border just for visual ease (it’s not part of the design). Ideally, i’d like the “360-degree feedback” link vertically central with in its container, so it’s not floating at the top, touching the border.

Like this…

The Solution

Here’s the code I used- I’ve tested it in I.E 6/7 and Firefox 2/3.

/* dark blue ---*/
#contentleft_btnsdarkblue{

background:url('images/button4.jpg') left no-repeat;

padding-left:35px;

height:60px;

display: table;

#position: relative;

overflow: hidden;

}
#contentleft_btnsdarkblue a{

color:#004064;

}
/* light blue ---*/
#contentleft_btnslightblue{

background:url('images/button1.jpg') left no-repeat;

padding-left:35px;

height:60px;

display: table;

#position: relative;

overflow: hidden;

width:160px;

}
#contentleft_btnslightblue a{

color:#009FE0;

}
.contentleft_btntxt{

#position: relative;

#top: -50%

}
.contentleft_vertical{

#position: absolute;

#top: 50%;display:

table-cell;

vertical-align: middle;

width:160px;

}



360-degree feedback






Personal Impact Assessment



[/pre]
For ease, you can download the Centering Text Vertically With CSS code.