Tag Archives: html

Solved: Image in div has a Thin Line Underneath Programming 11 JUN 2015

I noticed an annoying issue while working on some design elements on the survey element of my configurable feedback system Kinetica (for Touchwork) the other day. Essentially an image nestled inside a <div> element was rendering with an unsightly little line of space underneath it, breaking the visual effect that I wanted.

Perplexed (because the CSS inspector wasn’t showing anything untoward), I turned to Google and pretty soon had both the reason and the solution.

As it turns out, by default images are rendered as inline elements as opposed to block elements. In other words, it is rendered and treated like a letter/character, meaning that by default the line it is on has space below for the ‘descenders’ that you find on letters like y, j, p and q. This is then the line that you see below the image, because obviously it sits square on the line.

There are three possible fixes you can employ here. If you don’t want to do anything unnatural, you can get around the problem by simply specifying an appropriate vertical-align css style on the image, e.g. style=”vertical-align:bottom;”

Another fix that will work quite nicely is by specifying the line height of the parent container to 0 pixels, e.g. #div { line-height: 0;} <- of course, this assumes that you’re not going to have text anywhere in this parent container.

Finally, a just as effective trick would be to simply declare the image to be displayed as a block element, e.g. style=”display:block”

So with all that said and done, employing any of the tricks above will turn this:

into this:

CSS for Rounded Corners Tips, Tricks and Tutorials 22 AUG 2013

This is more of a note for myself than anything else, but thanks to more modern web browsers, having rounded corners for your block-level elements like DIVs is a simple matter of adding a line or two of CSS code to your stylesheet declaration.

The CSS3 rule in question is ‘border-radius’ and it allows us in pixels to control the curve of the corner. Now just to be on the safe side, it is worth adding vendor specific rules for webkit and gecko engines, but these days 90% of browsers respond quite nicely to a plain old ‘border-radius’ rule.

In practice the required CSS for borders with a radius curvature of 15px would be:

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Even nicer than that, because not each corner needs to be the same, the rules allow us to specify a radius for each and every corner, as seen here:

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 150px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 150px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 20px;
border-top-right-radius: 150px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 30px;

Designer Jacob Bijani came up with this little toy for you to play around with if you’re too lazy to remember the CSS: http://border-radius.com/

Nifty.

CSS: How to Horizontally and Vertically Center Align a DIV Box Programming 15 AUG 2013

As a rule (well to me anyway), login boxes look their absolute best when centering slap bang in the middle of the page, in other words centered both horizontally as well as vertically!

To achieve this middle of everything trick using plain old CSS is pretty simple, and in this quickfire tutorial example, I’ll show you just how easy it is to end up with a nicely placed DIV block, listing both the required CSS as well as a handy selection of demo HTML.

Let’s begin with the CSS:

html, body {
  height: 100%; //pretty important!
}
 
body {
  margin: 0; //doesn't strictly have to be zero, CSS would probably readjust
}
 
.loginformbox {
  width: 100%;
  min-height: 120px;
  font-size: 1.5em;
  text-align: center;
}
 
.loginformboxcentered {
  display: inline-block;
  vertical-align: middle;
  padding: 20px 50px; //whatever look spretty to you
  font-size: 1em; //note you have to set size, thanks to our zeroing of the parent container's value
  letter-spacing: normal;
}
 
.loginformbox .loginformboxcentered {
  width: 800px; //this defines how wide your block is
  margin: 0 auto;
  text-align: left;
}
  
 .loginformbox:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
  padding: 0;
}

Right, for the most part pretty self explanatory (actually that’s not completely true. But seeing as this post is kind of for my reference and I don’t really want to comment up all the CSS, I’m going to leave it at that).

Right, now for the HTML:

<html>
<body>
<div class="loginformbox ">
    	<div class="loginformboxcentered">
    		<h1>My Login Box</h1>
    		<p>A nice and vertically and horizontally centered login box. Nifty.</p>
    	</div>
</div>
</body>
</html>

And to be honest, that’s pretty much it. Copy, paste and off you go!

CSS: How to Force a Footer DIV to Stick to the Bottom of a Page Programming 06 AUG 2013

Web page design at the moment has very much settled on the layout of header, content and footer panels. For this particular quick tutorial I’m going to show you how to very simply force your footer div to ‘stick’ to the bottom of the page, meaning that even for pages that are very light on content, your happy little footer bar will remain firmly at the bottom of the browser window, instead of hanging about and looking silly in the middle of the page.

As it turns out, achieving this is relatively simple and the technique can easily be applied to existing websites if necessary. So what needs to be done then?

Well for a start, you need to declare the following CSS rules:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom matches your desired footer height */
}
#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

And that’s pretty much it. Here’s some sample HTML code to see how it would appear in action:

<!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>
<body>
    <div id=header>Hello World</div>
    <div id=content>Lorem ipsum...</div>
    <div id=footer>My Footer</div>
</body>
</html>

This works in IE8+, Chrome, Firefox, and Opera.

PHP: Select Random Web Color with One Line of Code CodeUnit 17 APR 2010

HTML or Web colors are defined using a hexadecimal (hex) notation for the combination of Red, Green and Blue color values, commonly known as RGB. The lowest color value possible for one of these “light” sources is 0 (hex 00) and the highest value is 255 (hex FF). The color codes are written as 3 double digit numbers prefixed with a # sign. Technically, the combination of 255 x 255 x 255 possible color codes means that there exists 16 million possible colors using this particular notation.

The quickfire tip for today is the generation of a random HTML color using just a single line of PHP color. Handy if you want to throw a bit of a surprise burst of changing color here and there…

$randomcolor = '#' . strtoupper(dechex(rand(0,10000000)));

The line above will produce a value that looks something like #240BFD, perfect for slotting in any web element’s style you can think of!

Simple, wasn’t it? ;)

Avoid HTML Special Characters in Your Querystring CodeUnit 13 MAR 2010

I must admit, I was totally left scratching my head a couple of days ago while presenting a survey capturing site I had just finished whipping up, when all of a sudden the site stopped redirecting properly when tested in Internet Explorer (IE) using compatibility mode. Completely flummoxed as to why something that worked perfect fine in some browsers simply didn’t work in others, I stopped to have a quick peek at what might be causing the problem and when I saw what it was, I couldn’t help but break out into laughter.

In order to redirect my script after successfully pushing data into the database, I was using Javascript to change the window’s location to a URL I was specifically building up with some required GET variables attached. However, my ordering of variables in the querystring couldn’t have been more unfortunate had it tried – you see, I was using a variable entitled reg and attaching it to the URL as &reg.

Now those of you with sharp eyes and a little bit of HTML knowledge will immediately slap your heads and go “duh” out loud, because yes, I had managed to accidentally declare a reserved HTML special character, namely ® which is of course translated to the registered trademark symbol. So my querystring was still working but with one less required GET variable as it was being lost in the redirect thanks to the older browser translating it into the actual symbol – hence causing that extreme sense of head-scratching puzzlement I had experienced earlier!

So be a pal and check your variable order in your querystrings carefully. You never know what you might inadvertently creating! :)

Javascript: Why DOCTYPE affects document.body.clientHeight Programming 23 JAN 2009

If you ever make use of the document.body.clientHeight attribute in either your vanilla Javascript or jQuery code, you would have noticed by now that sometimes it returns a ‘correct’ value and other times not.

Often the reason for this discrepancy can be traced to your use of a valid DOCTYPE declaration at the top of your page, which can then further be traced right back to your good old Quirks Mode versus Standards Mode fight.

Most, if not all, browsers have a Quirks Mode (although not all display like Internet Explorer (IE) does), and setting an incorrect DOCTYPE or adding an XML prologue happens to be one of the easiest ways of triggering Quirks Mode rendering.

Now the problem with the document.body.clientHeight either returning a ‘valid’ value or not ties directly into this Quirks mode issue, the reason being that in Quirks Mode, the BODY element is seen as the root element, thus making it the equivalent of the viewport as far as the initial containing block (ICB) is concerned. This means that if you were absolutely positioning something relative to the root, you are in fact using the BODY height/width co-ordinates to position against.

However, in Strict rendering the HTML element is the root element, the ICB, and if you are positioning absolutely to the viewport, then in this case the HTML element takes its height from the viewport and positioning is then done according to it’s dimensions. The BODY element in Strict Mode will not have a height unless you specifically give it one.

So in order to reliably get the browser’s height, perhaps it is best to list various browsers and indicate just how they treat the three main ways of getting browser height information, leaving it up to you to decide as to just which one does the job best for you:

*Javascript properties and what they relate to:*
Browser	window. innerHeight	document. body. clientHeight	document. documentElement. clientHeight
Opera 9.5+ strict	window	document	window
Opera 9.5+ quirks	window	window	document
Opera 7-9.2	window	window	document
Opera 6	window	window	N/A
Mozilla strict	window	document	window
Mozilla quirks	window	window	document
KHTML	window	document	document
Safari	window	document	document
iCab 3	window	document	document
iCab 2	window	window	N/A
IE 6+ strict	N/A	document	window
IE 5-7 quirks	N/A	window	0
IE 4	N/A	window	N/A
ICEbrowser	window	window	document
Tkhtml Hv3	window	window	document
Netscape 4	window	N/A	N/A

An Exploring South African