Background Opacity Affecting Text Opacity

Why do I always forget this? Hopefully I’ll remember why this happens this time with a simple blog post!

When you add opacity to a div, it affects the text opacity as well. Ex.

Your CSS is something like this:

.header_background {
	opacity: .8;
	color: #FFFFFF;
	background-color: #475260;

Do not just use opacity like that. Use it like this:

.header_background {
	color: #FFFFFF;
	background: rgba(47, 52, 60, .8);

Now it’s nice:

Content After Two Floats With Spacing

I need to put content after a very specific float. There are a few floats going on in the banner of one of our websites. The first float is handling the left/right content. The other float is inside the right content and handling the alignment of the search and submit buttons.

We now want text to go underneath the search and submit button. The problem is just putting the text under these elements, it doesn’t leave much room for spacing:
there is no spacing after the search and submit button

Furthermore, it looks awful in IE:

The search and submit buttons move down and the rest of the content is towards the bottom

After trying to add a margin on almost everything in the box (which did not work), I added a height to the search area. The below content knows that it’s not big enough to fit in there so it breaks.

I could then give the search div a padding of 3px on the top and bottom. Now it looks nice in all browsers:

The text at the bottom has space away from the search field

Long URLs Causing Overflow In Chrome

I’ve run into this issue a lot in Chrome since our site likes to use URLs for link text. Not a good practice in my opinion but whatever. The issue is when the URL is so long, the text cannot be broken.

Long URL Causing Overflow

This issue also happens on mobile devices. It will cause an overflow which makes the text run over causing a horizontal scroll, which is never good.

Using just word-wrap: break-word sometimes doesn’t work in Chrome for some reason. I found that adding a max-width in whatever the container the long text is in will work. For example, my new CSS is:

ul.material_content_list li ul.blank_list li {
max-width:                    470px;
word-wrap:                    break-word;

Now the page looks fine:

URL Properly Broken & Not Overflowing

Background Color Of Divs Cutting Off In IPad


This one had me tripped up for a bit but I already knew the problem. Background colors get cut off sometimes in the Ipad when the width is too big for it. When you scroll over, the background color of the div isn’t there and it’s the background color of the page.

Here’s a screen shot from (which is an awesome site to test your site on):

IPad Screen Shot With Part Of Background Cut Off When Scrolling To The Right

I tried googling of course. I found a few forums that had the same issue.

It didn’t take long to reach a forum where someone had solved the IPad problem on stackoverflow.

I added a min-width of 1000px to my main block and that fixed it.

Bottom Border Not Showing Up In Nested List In IE

In IE the bottom border of a div with many nested lists isn’t showing up. It works fine in FF. All the other borders are fine and visible.

As you can see below, the bottom border does not show up in IE:

The only CSS for the main container is a border.

However, the funky thing about this issue is that when I only have one list, the border shows up (just imagine the list stopping at “Resources and Publications” in the above example). That would only be one list.

Searching the web didn’t yield any fix. When you google this issue, they usually suggest adding hasLayout and position: relative to every li. That didn’t work for me.

By adding a min-height to the container div did the trick for me. This was the same div that had the border CSS. I added min-height: 10px and the border now works in IE.

Two Column List With CSS

I wanted to do a list of items in two columns with a border around the list. I didn’t want to use two floated divs in order to get the look I wanted (nor tables). Also, I didn’t want to break up the list. I wanted the HTML to be simple.

I started out with some old code I found which used floats and widths on each li. However after the list I needed to do a clear so the border would go around the entire list. This clear caused problems since it cleared my other floated divs (for page layout).

Here’s the HTML I wanted to use:

<div class=”summary_container”>
<ul class=”two_column_ul”>
<li><a title=”Training & Education” href=””>Training & Education</a></li>
<li><a title=”Staff” href=””>Staff</a></li>
<li><a title=”Collaborators” href=””>Collaborators</a></li>
<li><a title=”Research Areas” href=””>Research Areas</a></li>
<li><a title=”Scientific Articles” href=””>Scientific Articles</a></li>
<li><a title=”Scientific Resources” href=””>Scientific Resources</a></li>
<li><a title=”Image Library” href=””>Image Library</a></li>
<!– this is where the clear would go if necessary <div class=”clear”></div> –>

After attempts at floating and clearing the float, I eventually gave up. I tried to do an inline-block on the li, which worked great in FireFox but IE choked.

The CSS I finally used was the following:

div.summary_container {
border: 1px solid #DEE6F3;
padding: 5px 5px 15px;

div.summary_container ul.two_column_ul {
margin: 0 0 0 20px;
padding: 0;
list-style: none;

div.summary_container ul.two_column_ul li {
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0;
padding: 6px 0 0 14px;
width: 220px;

I hope this can help someone else.

Gap At Bottom Of Div With Image In IE

Here’s another one of those weird IE bugs. There is a gap at the bottom of the div that has an image in it. The image may or may not be linked.

In my case, it was a banner that has an image that is using an (ew) image map for links.

There is a strange gap at the bottom between the two divs. Only in IE, of course.

Small two pixel gap between divs

There isn’t anything in my CSS that would cause this, of course.

Since IE has a problem… well, let’s face it, it has many problems… It thinks there is to be text in that space. Or whatever.

To get rid of the gap add font-size: 0; to the div which contains the image. The gap is closed.

I need to remember this fix.

Background Image Won’t Display In Div In IE7

I need to do round borders for IE 6-8 users. Since I already have to use images to generate the borders, I might as well make them fancy and add a little shading. However, when I go to view my new div in IE7, the background of the div does not show up… In other words, the two borders are not visible.

Here’s what happens:
Background Image Not Showing Up In IE7My HTML code:

<div class=”node_content”>
<div class=”inside_content”>
<div class=”node_content_end”></div>

My CSS for .inside_content:

.node_content .inside_content {
background-image: url(“images/node_content_border_inside.png”);
background-repeat: repeat-y;
padding: 0px 15px;

After a google search and a shot in the dark, it turns out, IE7 needs to know a background-color for some strange reason.

Adding a background-color: #FFFFFF; to the .inside_content class did the trick. The image (border) displays fine in IE7.

IE9 Text Running Into Text, Not Clearing Divs

Upon testing an application I’m working on I noticed that IE9 wasn’t properly clearing text after floated divs. I have a big div which encompasses two floating divs (aka a two column display). A table is underneath the big div but with no clear. The reason there isn’t a clear is because the two column display is part of the right div of another two column display, if that makes sense.

Here’s the screen shot of what’s happening:

Bare in mind this only happens in Internet Explorer 9. All the rest of the browsers I test (including the likes of IE6 and IE7) all rendered it fine. Chrome, Safari, Opera, and Firefox were all good.

I understood the issue of why it was happening, but confused as to how to fix it.

It’s been a common issue with floating divs that the two columns are not equal height. There are a few tricks to do it, none of which I have implemented with much success.

The code is like this:

<div class=”entry”>

<div class=”list_container”>
<div class=”left_list_container”>

<div class=”right_list_container”>

</div> <!– entry end –>

With the CSS being:

div.entry { width: 720px; }
div.list_container { width: 100%; }
div.left_list_container { float: left; width: 300px; }

div.right_list_container { margin-left: 300px; max-width: 300px; }

Like I said before, I understand why it was doing it, I just wasn’t sure how to fix it.

Since this is an IE9 only bug, it was kinda hard finding a solution. I started primitively googling for IE9 bugs (which there aren’t many that are found yet).

I tried modifying the list_container class with no success. I added extra padding to the bottom, extra margin but nothing.

I tried to add a <div class=”clear”></div> in the middle of the entry div and table but that pushed the table past the bigger floating div, which isn’t want I wanted.

By adding an overflow: hidden to the div.entry class, it fixed the problem.  The table doesn’t run into the floated div now.

FireFox Print Bug With MOSS Site

I’ve been assigned the horrifying task of fixing various bugs in MOSS/SP sites at my work. One of the bugs is the inability for FireFox to print documents that span more than one page.

I’ve fixed the issue on another MOSS site but when I went to fix it on another, the same hack didn’t work. I did the same things as I did before. I basically started over on the CSS print style sheet and display: none ‘d everything that shouldn’t be displayed. I also gave everything (*) the values of overflow: visible !important and position: absolute and float: none . None of that worked.

Here’s the rough HTML code:

<div id="ncs">
 <div class="ncs_content">
  <div class="ncs_stage">
   <div class="ncs_stage_top">
    <div class="ncs_stage_content">content...</div>
 <div class="ncs_footer">turned off content</div>
 <div class="ncs_footer_printed_date">print date that needs to be displayed</div>

My CSS before:

#ncs { border: none; width: 100%; height: 100%; float: none; background: none; }

.ncs_content { background: none; border: none; float: none; }

/* this fixes the FF bug */
.ncs_stage_content {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 90%;
    font-size: 14px;
    padding: 20px 0px;
    margin: 10px 0px;
    font-size: 120%;
    clear: both;
    display: block;

.ncs_footer { clear: both; height: 100%; position: relative; }

.ncs_footer_printed_date {
    float: left;
    display: block;
    width: 950px;
    position: relative;
    bottom: 0;
    left: 0;
    clear: both;
    height: 120%;
    vertical-align: bottom;

The problem with this was it was displaying the ncs_footer_printed_date at the top. I couldn’t for the life of me figure out how to get it to be at the bottom of the content.

I even went so far as to post it on . No one could figure it out.

I struggled DAYS with it. This was one of the hardest things I’ve ever had to do. I tried explaining to my boss that I didn’t think it was possible. He said to keep playing with it. So I did but how I get I play with it off and on.

I had to modify my CSS for everything to be encapsulated in #ncs. Then I had to play around with different styles so that the bottom would be displayed the same as the content. Here’s my finished CSS:

#ncs {
    float: none;
    overflow: visible !important;
    position: absolute;
    height: auto;
    width: 99%;
    font-size: 12px;
    padding: 20px 0px;
    margin: 10px 0px;
    clear: both;

.ncs_content { background: none; border: none; float: none; }

.ncs_stage_content, .ncs_stage { margin: 0; padding: 0; float: none; clear: both; font-size: 12px; }

.ncs_footer { display: none; }

.ncs_footer_printed_date { margin: 0px; padding: 0px; width: 750px; font-size: 12px; display: block; }

To my lovely FireFox: Screw you. You’ve known about this bug for EIGHT YEARS and you still haven’t fixed it. It’s a bug with YOUR SOFTWARE. Every other browser (even the more standards compliant ones) can print pages without issues. I find it incredibly ridiculous that you haven’t addressed this issue.

I understand about standards compliance. Microsoft doesn’t make any of their web software (let alone any website they create) W3C XHTML 1.0 compliant like it’s supposed to be. They just don’t care.

But you, you’re supposed to be better than that. You’re supposed to be the best. You’re the top browser. And to have known about this bug for eight years and not get around to fixing it is just shameful.

It’s like saying everyone else’s kid in the marching band is off step except mine. They’re all stupid, apparently.

But it’s no reason to not fix a serious problem. A lot of websites can’t print.

You’re wasting people’s time and you’re making it hard on us web developers. I understand you want to go with standards but at the cost of sanity… especially when most of us can’t edit code that we didn’t make (SHAREPOINT).

I expect better from you, FireFox. I was thinking about switching to another browser because of this idiocracy. But, quite frankly, I love FireBug too much and it’s only available in FireFox.

Please fix this printing issue in your next release. I hear good things from FF 4.0. Hopefully one of them will be an end to this madness. Good night and good luck.