Tag Archives: css

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

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.

CSS: How to Fill a Div with Gradient Background Color across most Browsers with CSS Programming 07 MAY 2012

Gradient colors are pretty awesome, pretty to look at and a nifty visual effect.

Unfortunately for us though, CSS standards when it comes to handling gradients was pretty lacklustre over the years, resulting in all the major browsers pretty much defining their own browser specific CSS rules to achieve gradient background colors.

The following is a CSS example indicating how to achieve a gradient color which will appear in just about all major browsers. Of course, the only way this works is by defining the browser specific CSS rules for pretty much every available browser rendering kit…

.gradientdiv {
background-color: #57ceaf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5ec4e5), to(#50d97a));
background-image: -webkit-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -moz-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -o-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -ms-linear-gradient(top, #5ec4e5, #50d97a);
background-image: linear-gradient(top, #5ec4e5, #50d97a);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5ec4e5', EndColorStr='#50d97a');
}

Nifty.

jQueryUI Datepicker Calendar Control Visible at the Bottom of the Page CodeUnit 24 JUN 2011

For some or other annoying reason, my jQueryUI datepicker controls start exhibiting a weird bug where on page load, the normally hidden control calender was appearing right at the bottom of the page. Clicking on the launch control would then bring up the calendar correctly, and on selection or unfocus would then hide it again correctly. So only on page load then.

Luckily the fix to this annoying problem is actually nothing more than a simple CSS rule which you can add to the top of the affected page. (Note that this is after I spent a fair amount of time updating all my javascript plugins and trawling through the code to try and find the problem).

To solve, simply add:

#ui-datepicker-div { display: none; }

Yup, nothing more than that and your unwanted extra space at the bottom of the page is done for.

Nifty. (And yes, I still regard the jQuery and jQueryUI combo’s datepickers as one of the best ones currently available to website designers!)

Related Link: http://jqueryui.com/demos/datepicker/

How to Create a WordPress Child Theme CodeUnit 13 JUN 2011

To create a WordPress child theme of another existing theme turns out to be quite simple to achieve. If you haven’t heard of child themes yet, basically a child theme is an extension of an existing theme, which allows you to make changes to the parent theme without actually editing any of the files of that theme. For object-orientated programmers, you will recognise this concept as being that of inheritance.

So how do we do this?

Well to create a child theme is nothing more than making a new theme folder and then putting a specially formatted CSS file in it.

So using the default WordPress TwentyTen theme as an example, let’s do this. First, create a new folder called twentyten-child in your /wp-content/themes directory. In it, create a blank css file called style.css (your theme’s main stylesheet always needs to be named as such).

Now a child theme can contain as little as a single .css file, or as much as a fully fledged wordpress site, including things like functions.php, template files and just about anything else you can think of! But because the style.css file is what defines a child theme, let’s focus on that.

Opening up the style.css file of a child theme we will see something like this at the top of the file:

/*
Theme Name:     Twenty Ten Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        0.1.0
*/

Most of the descriptors are pretty self-explanatory, but note the Template: declaration. It is this one line that marks this style.css file as being a child theme, in this case of a theme named twentyten, or rather contained in /wp-content/themes/twentyten

Now when it comes to the functions.php file, inheritance takes over and everything that is available in the parent theme is available to you in your child theme without having to redeclare it. However, the stylesheet is different in that nothing from the parent theme is carried over. If you are creating a child theme just to make small visual adjustments to the theme, then you can either copy the parent style.css into your child theme’s style.css file, or you can make use of the import rule which looks like this:

/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme 
Author: Your name here
Template: twentyten
*/

@import url("../twentyten/style.css");

Note that no CSS rules can appear above the import line or else it will be invalidated.

And that is how simple it is to create a child theme. For more reading on actually tweaking the theme, be sure to check out the almight WordPress Codex!

Related Link: http://codex.wordpress.org/Child_Themes

Web Design: How to Stop Text from Word Wrapping Tips, Tricks and Tutorials 21 MAR 2011

css ninja t-shirtAlthough in 99% cases, word wrapping in web pages is essential, there is that 1% of the time where you do actually want a line of text to remain on a single line, even if it does push your page into horizontal scrollbar land (which is always a bad thing note). Like phone numbers for example. You don’t really want those to wrap if they are expressed in a token format for easier reading: e.g. 021 990 2312 <-- I'm not using the trick here, so this will word wrap if necessary! :) Anyway, back in the day HTML had what was called the NOBR tag, basically an inline tag that prevented text from being broken / word wrapped.

<nobr>Don’t wrap this text</nobr>

It still works and is supported by the major browsers, but it has long since been deprecated in the HTML specification meaning that ideally, you shouldn’t be using it in your website code.

So a different solution then?

CSS has the useful white-space attribute and leveraging this you can create a CSS class which can then be applied as part of the block or inline HTML container holding the text you don’t want to break.

The rule looks like this:

.nobr {white-space:nowrap;}

And now you know. Nifty.

jQuery DataTables: How to Use jQuery ThemeRoller CSS Styling on Your Table CodeUnit 11 AUG 2010

Widget styling is a long, laborious and tedious job for the most part, which is exactly why it is so great that the guys behind jQuery UI came up with the ThemeRoller concept which basically enforces a strict set of rules in terms of generic widget class styling.

As a bonus, the awesome jQuery DataTables plugin (which I religiously use on all my work-related HTML tables nowadays) comes with the option to enable jQuery ThemeRoller styling with a simple switch of an initialisation parameter!

To enable jQuery UI ThemeRoller support in your datatable, simply add the following option during construction:

$(document).ready( function() {
	$('#example').dataTable( {
		"bJQueryUI": true
	} );
} );

And that is all there is to it. Make sure you include a ThemeRoller stylesheet link in your page and your nifty DataTables implementation should be using all those nifty ThemeRoller styling elements!

Nice! :)