My Monkey Do

A Log of Coding Solutions

Coding

BR Tag Being Ignored by Firefox

by

Problem:

I had a couple of <br> tags in my text from a content editor and Firefox was not displaying the line break.  I had two <br> tags but no breaks!  Why!??!?  IE of all browsers was showing it fine.

 

Solution:

Be careful of styles that you use the asterisk (*) on.  It can cascade all the way down to the <br> tag.  For example:

 

#someID * {
    float:left;
}

Using Firebug I saw that the float:left was being used on my text container, which seemed normal because the element holding the text should be floating left.  However when I took off the float:left everything was fine.  The lesson is to be careful when using the * especially with float:left and having regular text.  I did not know the <br> tag could have a float on it, but I guess that makes sense.  Although this was only seen in Firefox.

Get TinyMCE to use Absolute Paths

by

Problem:

I was working with a customized CMS which uses the TinyMCE editor.  This editor was placed in a subfolder to edit content meant for the root folder.  This meant that the images in the TinyMCE editor would show something like “../images/” for the path to the images folder while the public pages would need something like “images/”.  The problem with TinyMCE was that every time you insert an image it would show the absolute path, but when it saved, it would be a relative path.

 

Solution:

To get TinyMCE to always use absolute paths, tell it to not use relative paths!  In tinyMCE.init where you configure the editor, add the options under the “use absolute urls” comment

 

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    width: "480",
    height: "400",

    //use absolute urls
    remove_script_host : false,
    relative_urls : false
});

 

Centering w/o Absolute

by

Problem:

I needed to add some jquery popups to my code, but the popup appeared at the very top outside the viewing area.  The popup uses absolute positioning and so it is relative to the nearest element with a “position” attribute.  Since I centered my page with the following code, I didn’t have a nearest element with a “position” attribute so the popup was relative to the document.  And the document was just a sliver at the top because the elements within it were positioned absolutely…  here’s I mean:

The yellow highlight is the body tag.

Using Firebug, you can see, the yellow highlighted area is the width/height of my body element (it’s actually the margin and the width/height is zero).  So the popup appeared in that area instead of the entire page.

 

Solution:

The quick solution would be to change this  code:

#Table_01 {
    position:absolute;
    left:50%;
    top:0px;
    height:auto;
    margin-left:-500px;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

To the following code.  The following code doesn’t use absolute, instead it uses display: table and margin: 0px auto;

#Table_01 {
    display: table;
    margin: 0px auto;
    width:1025px;
    background-image:url(../images/expand.png);
    background-position:top;
    background-repeat:repeat-y;
}

And of course, we need some special code for our special browser Internet Explorer:


        
body { text-align: center; }
body * { text-align: left; }
#Table_01 {
    zoom: 1;
	display: inline;
}

 

Table_01 is the first element inside of the Body tag.  For a full explanation head on to where i found the solution.  Also do not forget the Doc Type for IE to work propery.

 

Absolute Positioning Inside Float or Relative

by

Problem:

I have a gallery with varying images so I need to use float so that the images line up correctly.  The problem is that I need to display a shade over the image when the mouse goes over the image.  It needs to look like the images below.  The problem is that if I set the shade div as position:absolute, it is absolute to the document.

Normal viewing
After mouse over

 

Solution:

The solution is to put in a “position:relative” into the floating div or the div that will contain the absolute element.  In other words the shade (with the absolute position) will have its coordinates relative to the image (the floating div).  Adding “position:relative” puts a position on the floating div and restricts the absolute positioning to within that div.

 

.person_cell {
    position: relative;
    float:left;
    width:125px;
    height:125px;
    margin:3px;
}
.shade {
    position:absolute;
    left:0;
    top:0;
    background:black;
    width:100%;
    height:100%;
    zoom:1;
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

Thanks to this post for the info.

DOC TYPE or Die

by

All men kill the thing they hate, too, unless, of course, it kills them first.

-James Thurber

After countless hours of trying to figure out why Internet Explorer is doing this or that different from all the other browsers the most common solution is to add a Doc Type.  Never ever forget this.  This one little addition solves 90% 75% 60% of the IE problems.  It can save you hours and hours of googling and hair pulling.  While this is supposed to be in every HTML document, sometimes it’s left out.  Whether it’s the designer‘s fault or the developer’s fault it doesn’t matter.  It should be put in.

This is the doc type that I use.  To me, it is the best one to use because it’s not so strict on the structure and it doesn’t restrict presentational attributes.  This should be the very first thing in the html file, before the <html> tag.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” ” http://www.w3.org/TR/REC-html40/loose.dtd”>

No Multiple Upload for IE

by

Problem:

I wanted a way for users to upload multiple files to a server on a webpage.  I found a great jQuery plugin that does drag & drop and multiple file upload.   Under browser support you can see that IE is supported, however there are special notes.  MSIE does not support drag & drop and multiple file support.  So basically, the script works with IE where users can upload 1 file at a time.

 

Solution:

From my research, it turns out that it is impossible to do multiple upload (same goes for drag and drop) to IE.  The browser just simply does not support it.  There are many scripts out there that say “multiple upload” and say it works with IE, but it’s not truly multiple file upload.  The script actually just allows you to upload multiple files with one request, not select multiple files at one time.  So in other words, the file browser opens and you can only select one file.  Then you can open the file browser again and select another file.  If you had 10 files, you would have to repeat this process 10 times instead of just highlighting multiple files if it had true multiple file support.

Anyway, that is the “workaround” which is not acceptable for me.  So IE users just won’t have a multiple upload feature in my project.