My Monkey Do

A Log of Coding Solutions

css

Spaces Between Images

by

Problem:

I can’t center the Image or there are spaces between my images.  If I delete the spacing in the code it goes away.  Why is this?

 

Solution:

img { display:inline}

If the img has no display attribute defined, the default display is inline.  This means that the image can be centered with text-align:center from an outer element.  However, if there is a space between images, it may show a space when it is displayed.  You can think of inline display as treating the image like text.

 

img {display:block}

If the img has a display:block attribute defined, the image cannot be centered with the text-align:center from an outer element.  The image will take up the full line so that the elements before and after will appear on a different line.  Because the image takes up the whole line, centering the image doesn’t have any effects.  Spaces between images also do not show because the image fills the whole line.

A nice explanation of inline vs block can be found here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Curvy Corners … Fun with IE!

by

I have decided to stick with love. Hate is too great a burden to bear.

– Martin Luther King, Jr.

Problem:

I was given a task to make the corners of a div area to be rounded.  I knew that only IE 9 supported this out of the IE family, but I didn’t expect it to be hampered by a -moz-border-radius or jquery.curvycorners.js or jquery.corner.js.

  • -moz-border-radius caused the top and bottom inner border to be smaller.
  • jquery.curvycorners.js caused the corners to look like a square got cut out.
  • The jquery.corner.js made the rounded corner, but you could still see the original square corner (ie it wasn’t transparent).

Solution:

After a lot of trial and error with the multiple ways of trying to get a corner in IE, I found a blog that showed the following code.  Actually I found this blog first and tried this, but for one reason or another it didn’t work until many failures later:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

Stupid IE caching!  I thought I had the solution which was to add the meta tag, but apparently after no code change and a restart of IE, the square corner has come back.  So the new solution is to not run the curvycorner code if it is IE8 and possibly others.

 

 

 

 

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.

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.

Firebug

by

I don’t know how I used to develop web pages before Firebug.  It is the single best tool you can have when debugging a webpage.  If something doesn’t look right I open Firebug and find out what styles are being inherited.  If some javascript functionality is not working I open Firebug and enter debug statements.   If some ajax call is messing up and the page isn’t showing the response correctly, I open Firebug.

Installation

The best thing about Firebug is how much time it saves you on debugging.  Even better than it being free.  That’s a lot considering how I watch my money.   I only use Firebug with Firefox.  It can be downloaded at https://addons.mozilla.org/en-us/firefox/addon/firebug/.  What’s good is that it’s available on both Mac and PC.   Just click on the Add to Firefox button and it’s mostly done for you.  That easy.  A firebug was also developed for IE but I haven’t tried it recently.  I tried it a couple years ago and it didn’t help me very much so I stuck with just using the Firefox one.

CSS

When you need to see why an item on a webpage is not showing as its supposed to you can right click on it and select “Inspect Element”.  Doing this opens up the firebug window and it will tell you exactly what styles are being applied to it and what styles have been overwritten.  You can even change the values of anything you want to see the outcome in real-time.

Javascript

Browsers can tell you the last error code that happened, but firebug can let you watch expressions, look at the stack, insert breakpoints, and print out statements in the console.

Request / Response

Any and all requests to the server can be inspected on the Net tab.  You can see each javascript include file, each image, each ajax request.  This means that if an ajax call goes wrong, you can inspect the parameters that were sent and the response the page got back from that request.  It makes debugging a breeze.

Firebug can be downloaded here: http://getfirebug.com/