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:

thin line under image in div

into this:

thin line under image in div solved

Related Link: W3Schools

How to Add a Line Break to a ToolTip Tips, Tricks and Tutorials 15 JUL 2014

I sometimes use the fantastic jQuery qTip plugin for some more intelligent HTML tooltips in my web systems, and the other day I came across a need to insert a line break into my tooltip text. It turns out, to achieve this is relatively simple, but the solution is a little harder to find on the web than what it should be.

Translated, I’m saving it here for future reference for myself.

Ignoring the various other ways involving CSS manipulation, etc., one of the easiest ways of adding a line break to your tooltip text is to simply make use of a bog standard HTML entity:

&#013;

Seriously, that was all I needed to force a linebreak in my HTML tooltip. Problem solved, see?

html banner strip

Related Link: jQuery qTip plugin

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

css-ninja-t-shirtThis 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

css ninja t-shirtAs 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

css ninja t-shirtWeb 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.

How to Group Options in a Select Dropdown List CodeUnit 05 OCT 2011

The classic HTML select dropdown list box has been with us for a long time, consisting of a container <select> tag which in turn contains a number of <option> tags which make up the list items which the user can then choose one from.

If you have a number of options which can be logically grouped, then there is a further tag that you can make use of, namely the <optgroup> tag. This allows you to group related options by placing them in the <optgroup> container, which coincidently has a non selectable label to make the various group definitions easy to see in the eventual drop down list.

In practice, your HTML would look like this:

<select>
 
<optgroup label="Swedish Cars">
   
<option value="volvo">Volvo</option>
   
<option value="saab">Saab</option>
 
</optgroup>
 
<optgroup label="German Cars">
   
<option value="mercedes">Mercedes</option>
   
<option value="audi">Audi</option>
 
</optgroup>
</select>

Which would translate to this on your web page:

Supported by all major browsers, it certainly is a useful little tag to keep in the back of your mind. If you want more information on the <optgroup> tag, why don’t you pay a visit here?

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 &reg; 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

javascript logoIf 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