CSS FAQ, Tips etc. Please read before posting!

FAQ : The 1px background Jog on Images on the body in IE.

A lot of sites utilise a shadow effect on their whole page content by adding a repeating background image centred on the body.

Unfortunately IE suffers from rounding problems when matching up images placed on the body with the rest of the content and the result is the 1px jog where the layout jogs in and out of alignment with the body image.

Have a look at the following page in IE and resize the window smaller or larger to see the effect. It is most noticable where I have coloured the header.

http://www.pmob.co.uk/temp/onepxjog.htm

Most times this can be cured by simply adding a 1px left padding to the body as in the example below.

http://www.pmob.co.uk/temp/onepxjog-2.htm

The above solution is not always foolproof and in those cases it is best to remove the body background image to a 100% high container (see faq on 100% height).

In this example the image has been moved from the body and there is no jog at any screen size.

http://www.pmob.co.uk/temp/1colcentred.htm

Wow, very good thread

Thanks - it’s appreciated :slight_smile:

The clearing of floats are dealt with in the faq on floats so you may have missed it :slight_smile:

At present there are a number of ways to clear floats.

You have Tony Asletts method documented at PIE - (good method but occasionally buggy and doesn’t work in ie)

Float the parent also and it will contain the child float automatically. (useful method)

Then there’s my discovery of overflow:auto - (little buggy and doesn’t work in ie)

Or still my favourite (but not very semantic) clearing div. - (works everywhere)


.clearer{
height:1px;
overflow:hidden;
/* or font-size:0px instead of overflow:hidden*/
margin-top:-1px;
clear:both;
}
 
<div class="clearer"></div>

Mozilla won’t clear elements unless some height is added to the equation which is why the height :1px is added and then negated with the negative margin. However if the parent element has borders then the negative margin isn’t necessary.

It’s worth noting here that the new Firefox 1.5 will now clear properly with just a simple clear:both and no height is required.

Hope that helps :slight_smile:

FAQ: How do I place some text at the bottom of a column/element?

If you want a copyright message that sits at the bottom of one of your columns or at the bottom of the page you can use absolute positioning to place it there.

As absolute elements are removed from the flow you need to preserve the space that the element occupies so that content doesn’t over-write it. You can do this simply by using padding on the element above so that the space the absolute element occupies is protected.

The only drawback is that the absolute element does have to be a specific height so that you can account for the amount of padding you will need to protect it. Usually this isn’t a problem with copyright messages and the like because they are just one or 2 lines of text.

You can of course use ems for the padding so that when text is resized the padding is also increased so that the layout stays intact.

First of all you need to create a local stacking context by applying position:relative to the main outer. This will allow further positioned elements to take their starting position from this main outer rather than the viewport.


#outer{
[b]position:relative[/b];/* stacking context so that we can place copyright at the bottom of the page*/
}

You may thing that you need to apply this positioning to the column you are interested in but you would be wrong. Only the main outer will always contain the full height of the page so that is the one we must use to base our absolute element on.

Next we simply place the element absolutely at the bottom:


#copyright{
position:absolute;
bottom:0;
left:0;
width:200px; 
}

The element has been placed at the bottom of where the left column would be and therefore we have given it the same width as the left column to complete the illusion.

Then we must preserve the space at the bottom of the left column:


#left{ 
float:left;
width:200px;
[b]padding-bottom:4em;/* preserve space for copyright message*/ [/b]
} 

You can use trial and error to work out exactly much padding you need or if you are good at maths then work it out exactly. You must remember that the space is at the bottom of the left float and as the content extends the left float downwards then it will always stop before the content reaches the bottom because you have applied padding to stop it.

Of course you could place the copyright message anywhere at the bottom on whatever side you like as long as you follow the techniques above.

Here is an example so view source to see the full code

http://www.pmob.co.uk/temp/text-at-bottom3.htm

(The above example demonstrates how to place text at the bottom of the page but you would still use the same techniques if you want text (or images) at the bottom of an element. the only difference is that you apply all the techniques to that single element and not a parent outer.)

There is one drawback to placing absolute elements on the bottom of the parent and that is if you want pixel precision in IE. IE6 and under (IE7 seems ok) will always be 1 pixel out when the parent is and odd pixel length. This demo below explainjs it in detail:

http://www.pmob.co.uk/temp/onepxgap.htm

IE7 Supports min/max height width

Yes IE7 supports min and max height and width correctly.

IE5 and 6 can achieve min-height ONLY because of the expanding box problem

Yes IE5 and 6 treat height as a minimum and will always expand the element to accommodate the content (unless overflow is other than visible). It can be seen almost the same as min-height in this respect.

(btw IE7 has the expanding box problem as well, so how does that fit in with setting dimensional properties?)

IE7 doesn’t have the expanding box problem as Height works correctly in IE7 and will not expand the container. It works more or less the same as other browsers now in this respect.

And IE5/6/7 can also achoeve min/max width (but not height?) using IE only CSS code?

As I said IE7 supports min and max width and height so there is no problem implementing it in ie7 at all.

IE5 - 6 do not support min and max width and the easiest fix is to use an expression to cater for this. See the FAQ on min-width for a css alternative for min-width (but it is a little complicated). Max width can only be done with scripting or via an expression.

IE5 -6 will actually increase an elements width if the content pushes it wide but this is not the same as min-width and only happens when the inner content has a greater width specified or is an unbroken series of text or perhaps a large image. In these cases IE5 - 6 will expand the container to accommodate the content usually resulting in breaking the rest of the layout completely. It has nothing in common width min-width though unlike height.

Hope that explains it.:slight_smile:

FAQ : Why doesn’t this work in ie5 / broken box model?

(This topic is mainly for historic reference as most are not supporting IE5.x these days)

Sitepoint reference

IE5, IE5.5 and IE6 in quirks mode use what is commonly known as the broken box model. Most other modern browsers use the correct box model (note that some older versions of opera will also use the broken box model in quirks mode). The box model is how an elements dimensions are defined and is explained below. (Note quirks mode in IE6 is triggered by not having a doctype or using a partial html doctype without uri. It is also triggered accidentally in xhtml by using the xml declaration or in fact by having any content above the doctype. Otherwise ie6 will use the correct box model when in standards mode.)

In the correct box model an elements total size is made up of its width + padding + borders to achieve a total width of the element. In the broken box model the width of the element is the total width and padding and borders are contained inside that total width.

Take this style for instance:


 .elementsyle {
 width:200px;
 padding:50px;
 border:2px solid #000;
 }
 

In the correct box model this elements total width will be : 2px + 50px + 200px +50px + 2px = 304px total width. (Remember that borders and padding go on each side of the element and so need to be counted twice.)

In the broken box model the total width will only be: 200px (remember that padding and borders are contained within this width).

Therefore you will see that in the broken box model the element is only 200px wide whereas in the correct box model it is 304px. That’s a big difference and needs to be accounted for if you want your page to look the same in most browsers.

One way to account for the broken box model is not to specify width at the same time as setting padding and borders. The padding (and sometimes borders) can be set on an inner element which will allow the outer element to remain at the width specified and the inner element will stretch to fill it’s parent while adding the appropriate padding.
e.g.
CSS


 .outer {
 width:200px;
 }
 .inner {
 padding:50px;
 }
 

Html


 <div class=”outer”>
 <div class=”inner”><p>Some text</p></div>
 </div>
 

In the above example the width will remain at 200px but the element will have 50px padding on the inside.

To avoid extra nesting the above code can be simplified to this.

CSS


 .outer {
 width:200px;
 }
 .outer p {
 padding:50px;
 }
 

Html


 <div class=”outer”>
 <p>Some text</p>
 </div>
 

So now we have placed the padding in the paragraph (<p>) element instead. This means that no extra nestings were nested and is a much neater solution.

The downside of the above method is that in complicated situations IE will suffer from “haslayout” issues on the element that has no dimensions specified and therefore the above is not always the best approach.

We can instead resort to using the “star selector hack” combined with the backslash hack to target ie6 and ie5.x separately.

This hack works on 2 IE bugs that allow us to supply values to only IE browsers and also to separate between ie6 and ie5/5.5. We need to separate IE6 because it uses the correct box model as mentioned above and behaves the same as other browsers.

One caveat to this is that IE6 in quirks mode does use the broken box model so you must ensure you are working in standards mode whenever you use a box model hack otherwise they won’t work for ie6. To initiate standards mode just use a full Doctype with uri and if using xhtml then don’t use the xml prologue as anything above the doctype throws ie6 into quirks mode.

The hack uses the star (universal) selector coupled with the html element to send styles to IE only. The backslash (escape character) hack is then used to separate ie6 from ie5.x


 .elementname {
 width:400px;
 padding:50px;
 }
 * html .elementname{
 width:500px;/*for ie5.x win */
 w\\idth:400px;/*for ie6*/
 }
 

Only IE will render this style due to a bug that allows it to parse the statement when it shouldn’t. Html is the root element and is not a child of anything and so should not match the statement above. IE treats the above as if the star (universal selector) was not there.

The backslash hack stops ie5.x from reading that particular style and so we can give ie6 the correct value. The backslash cannot appear before the first letter of the property since ie5.x/win understands it at the beginning. Also it cannot appear before the letters a – f and numbers 0-9 because it will turn those letters/numbers into hex numbers.

The above hack only targets IE6 and under (not ie7) win so we can safely use it without bothering or interfering with other browsers. The above hack will feed the value 500px to ie5.xwin and 400px to ie6. When ie6 adds the padding on the total width will then match that of ie5.x. e.g. 500px total width.

If you must code in quirks mode then the above code can be changed to cater for ie6 in quirks mode as well.

e.g.


 .elementname {
 width:400px;
 padding:50px;
 }
 * html .elementname{
 [B]width:500px;/*for ie5.x win and ie6*/[/B]
 }
 

We just remove the backslash hack from above so that ie6 in quirks mode gets the same value as ie5+ thus keeping everything equal.

However ie5 mac uses the correct box model when a doctype is used and isn’t tricked into quirks mode with comment tags or the xml prologue so you will need to hide the star selector hack from ie5 mac when using quirks mode in ie6.

Therefore you will need to hide the star selector hack from ie5 mac when working in quirks mode.


 /* commented backslash mac hiding hack \\*/ 
 * html #test {width:300px}
 /* end hack */ 
 

I have used widths in all the examples above but the same holds true for height as well although height is generally not an important an issue as width is.

A better way to cope with different versions of IE is to use Conditional Comments.

QUIZ ARCHIVE

Due to several requests I have now documented and linked to the previous CSS quizzes with a short snippet of the task required.

Some of the old quizzes are a bit long in the tooth and there are better methods around today but I will document them anyway.

Quiz1 - May 9 2004

In good browsers you can set bottom:0 and top:180px and keep your element at the bottom of the page and always 180px from the top. This allows the bottom element to reduce as the window is made smaller in height but preserves the top part of the page.

However IE6 won’t let you set dimensions of an element by using the positioning properties alone…

Quiz 2 - May 15 2004

All I want is for you to reproduce this layout so that it works in IE6 and mozilla/firefox. At the moment it is only displaying correctly in firefox so you will need that browser to look at it. Its simply a dashed border that alternates between red and blue dashes…

Quiz 3 - May 18 2004

Your task is to produce the following rollover vertical list that would usually require javascript to accomplish:

http://www.pmob.co.uk/temp/images/sp…zlistimage.gif

Easy you may say - but wait where’s the catch?

The catch is that as you roll your mouse down the list each list item in turn will change its background and text to match the already highlighted item. No catch there you say - that’s just a normal list! The real catch is that the already highlighted item (link 1) must also switch off as you scroll down the list…

Quiz 4 - May 24 2004

There are two simple tasks this week and can be seen in the attached image.


The first task is to re-create some text that is red on the top half and blue on the bottom half. This will introduce you to the css positioning properties and will allow you to gain experience in placing your layout.

The second task is in much the same vein and is just the alphabet with alternating coloured text of red and blue. In this test you are not allowed to use lots of spans…

Quiz 5 - May 31 2004

Take a look at the link below which shows a simple table layout.

Test your CSS skills - Number 5

There are 4 cells that take up the 100% width and each cell will expand in height and equalise with the cell that contains the most content. The background colour will expand to be consistent with the longest cell. I have put the longest text in each different cell so that you can see the full effect.

While this is a simple job to do in tables it has previously been though almost impossible to replicate with css alone…

Quiz 6 - June 7 2004

So this week your task (as suggested by a sitepoint member) is to create a 3 column layout that has a full width header, sub header and footer but you are not allowed to use any divs or spans or classes or id’s. The html must in fact remain untouched and of course as semantically correct as possible…

Quiz 7 - Dec 23 2006

The test sounds very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions. All I want you to do is to place the image supplied 50px inside the right edge of a container using only the html that I supply…

Quiz 8 - Jan 8 2007

I had some spare time so I devised another quick quiz that shouldn’t tax you too much :). This time I want you to create the famous “holy grail” 3 column layout.

The left and right columns are 250px wide and touch the viewports side edge on both sides. The middle column merely fills the space between these 2 columns as required. Then of course we have the obligatory 100% wide footer that spans all 3 columns at the bottom and must stay below all columns irrespective of the content in each column. (That means absolute positioning is out of the question).

Here is an image of what I want.

Here is the image with a few simple instructions added…

Quiz 9 - Jan 10 2009

Here is a screenshot of a layout I have produced. Now all you have to do is create the look of that page. I am not worried about you making the exact positions but the series of boxes when completed must look the same as the screenshot above and overlap in the same way…

Quiz 10 - Jan 18 2009

Look carefully at the attachment to this post which shows a screenshot of a layout I have produced. Now all you have to do is create that coloured box. I am not worried about you making the exact positions etc or using the same colours but the effect should be the same including partially coloured text background and borders.

Note also that this box is a fluid width …

Quiz 11 - Jan 23 2009

Look carefully at the attachment which shows actual screenshots of the layout at different screen sizes required. I am not worried about you making the dimensions exactly the same but every element must be perfectly centred in the viewport.


Quiz 12 - Jan 30 2009

Part 1:
Look at the attachment called [B]logo.png[/B] and you will see some screenshots of the Sitepoint logo that Erik and I have produced just using CSS. You may think that it is quite easy but no images have been used to create this and as you can see from the screenshots the text size can be bumped up and down and the logo sized accordingly along with the text…

Part 2:
This is a quiz suggested by Luki be and if you look at the attached file called boxes.png you will see a layout constructed with CSS. Just replicate that layout using css and html and make it work in modern browsers…

Quiz 13 - Feb 6 2009

After the tricks of previous quizzes we are now going to concentrate on a real world CSS example and create an organisational chart that follows the usual tree structure. This will be created using semantic html kindly supplied by Tommy (AutisticCuckoo)…

Quiz 14 - Feb 16 2009

In the attachment the default state is as shown in the default screenshot with the three headings across the top the students listed below. This is how the page should look before anything is hovered…

When you pass your cursor over the “Reading” heading then in the blue list underneath the first, second and third students will be highlighted along with their position number…

Quiz 15 - Feb 23 2009[URL=“http://www.sitepoint.com/forums/showthread.php?t=601564”]

Have a look at the attachment and you will see 12 little screenshots of a calendar I have constructed showing the months from January to December. (This exercise took me about 2 hours from start to finish so you will need a long coffee break to attempt this :wink: - Note the deliberate mistake where November seems to have more days than it should ;))…

Quiz 16 - Feb 28 2009

Part 1:
The first quiz has been supplied by Tommy (Autistic Cuckoo) and if you take a look at the attachment called [B]graph.png[/B] you will see what needs to be done…

Part 2:
This was suggested by Yurikolovsky and is a nice little rollover effect. Look at the attachment called rolloverbox.gif which is a simple fixed width and height box with text.

All you need to do is to change the box on hover as shown. Every part of the box should be active and point to the same location…

Quiz 17 - Mar 8 2009

The first quiz (supplied by Erik J) is to create a drop down without using any absolute positioning at all!..

The second quiz (supplied by Eric Watson) is more straight forward but will still send you around in circles…

Quiz 18 - Mar 16 2009

A)
[SIZE=4][SIZE=2]In my quiz we are going to invent a new CSS property called “float:center”. Just like float:left and float right it allows text to wrap but in this case the element is floated in the centre of some text and the text will part and wrap on both sides of the element…

B)
[/SIZE][/SIZE][SIZE=4][SIZE=2]Quiz B supplied by Roobear will put a smile on your face :slight_smile:

Have a look at the attachment called quiz18b-face.png[/SIZE][/SIZE] …


Quiz 19 Mar 28 2009


Your task this week is to imitate a drop down menu that works when you click the top level menu to reveal the sub menu items. That sounds easy enough but you are not allowed to use any javascript or scripting…

[B]Quiz 20 Apr 11 2009

[/B]

[SIZE=4][SIZE=2]If you look at the first screenshot (opacity-faded.jpg) you will see that an attempt has been used to use the CSS "[URL=“http://www.w3.org/TR/css3-color/#transparency”]opacity" property on the background of the centred box with the unfortunate effect that not only has the background become transparent (as was required) but the inner foreground image and foreground text has also become transparent making the text hard to read and the image look bad.

Your task is to stop the inner content from becoming transparent and if you look at the second screenshot (opacity-full.jpg) you can see how it is supposed to look…[/SIZE][/SIZE]

[B]

Quiz 21 - Apr 19 2009

[/B]

A “[B]sticky footer[/B]” is a fixed height footer that sits at the bottom of the viewport, but only sits at the bottom of the viewport when there is not enough content to push it below the fold.

[B]

Quiz 22 - May 8 2009

[/B]

[SIZE=4][SIZE=2]Your mission is to create a data table where the header of the table remains fixed while the data in the table can scroll. This is especially useful for long tables as the header row always stays visible and above the data it refers to.

If you don’t know what I mean then take a look at the attachment which clearly shows what I’m asking for…[/SIZE][/SIZE]

[B]

Quiz 23 - May 18 2009

[/B]

The menu must be both vertically and horizontally centred in the red bordered blue container but the menu itself has no actual widths defined at all and must be fluid to cater for any amount of text.

[B]

Quiz 24 - May 27 2009

[/B]

1) The first quiz is relatively easy and funnily enough a request for something that I have had from three different clients this week. The task is simply to allow for a banner to be placed either side of a fixed-width centred layout…

  1. Your task is to create a horizontal menu that will allow for any number of elements (say for 1 to 10) and those elements will always be equally distributed across the width of the menu. The menu itself will be a fluid width…

3) Quiz 3 is straight forward and you simply have to create a [B]min-width[/B][B]works in IE6[/B] routine that . The page that I want you to create must have a minimum width of 1100px although the technique should work at sizes smaller than this also. The reason for the 1100px min-width will become apparent once you start coding this and doing your research…

4)
This is just a little fun quiz that we have touched on before and the task is to create some shadowed text that will work in all browsers…

[B]

Quiz 25 - Jul 11 2009
[/B]

[SIZE=4][SIZE=2]Look at the attachment called cross.png.

It is just a simple cross shaped container that holds some text as required. The text can be any length and the container can grow as in the screenshot.

The main rules for this quiz are that no absolute positioning is to be used and it must work in IE6 and IE7 as they are the ones that will exhibit some bugs that you need to squash. (It should also work in all other browsers anyway.)[/SIZE][/SIZE]…

[B]

Quiz 26 - Aug 1 2009

[/B]


Here is another short quiz (code wise) that can be in two parts due to browser differences. The task this week is similar to the age old image and caption question where following caption text should wrap at the limits of the image and not push wider than the image…

[B]

Quiz 27 - Aug 30 2009

[/B]

[SIZE=4][SIZE=2]This week we have possibly the toughest quiz so far of all these quizzes and once again is something that was deemed impossible to do.

[SIZE=3][B]Yurikolovsky[/B][/SIZE] has come up with a way of making a single level drop down that works in IE6 without any javascript
[/SIZE][/SIZE]
Quiz 28 - Sep 25 2009

Implement max-width in IE6 without using javascript or expressions

[URL=“http://www.sitepoint.com/forums/showthread.php?p=4402941#post4402941”]
Quiz 29 - Oct 14 2009

Erik J’s Transparent image replacement quiz.

This quiz is from an idea by Erik J and is your chance to have a go at a new and improved image replacement technique that will work with transparent images. Although as I always point out “this is just a quiz for fun” so please leave the semantics aside and just get on with the task :). Using the html provided below you must replace the heading text with a transparent image.

Quiz 30 - Nov 22 2009

There are two quizzes this month and the first is to create multi columns from a single unordered list and the second quiz is vertical-align multiple images in the viewport…
Quiz 31 - Dec 19 2009

The challenge is basically to take 3 column layout and make it display vertically when the screen is reduced to 320px wide and the content is aligned nicely in one column without the need to scroll sideways.

Quiz 32 : Jan 10 2010

For the first quiz in 2010 I am going to allow you some creative leeway and rather than set a specific puzzle for you to solve I want you to come up with your own CSS only animation effect.

This could be some sort of simple interactive game, image trick or an effect caused by moving the mouse or moving the browser window…

Quiz 33 - March 23 2010

In this quiz we are going to solve a real life problem that affects IE7 and IE6 (and is a real pain at times).

All we have is a parent that is floated to the left but without a width so that it shrinks wraps its content. Then we place a fixed width element such as an image into the mix. Lastly we float two elements, one left and one right to line up with the element above’s side edges.

All is well in all browsers except IE7 and IE6 and the problem is that a right floated element in a width-less left floated parent will stretch the element to 100% width. The effect is ruined in completely in IE7 and the first element is stretched 100% wide but rather more strangely the second and third elements are broken in a different way to the first.


Quiz 34 - April 06 2010

Your task is to create a centred “Fixed footer” using position:fixed that works in IE7 and above. (IE6 doesn’t understand position:fixed so we won’t bother with coding for that although in real life examples you would probably give IE6 alternative code to have just a normal footer (although there are a number of hacks to give it a fixed footer if needed).

Although a fixed footer is relatively easy to do the task is complicated by the fact that there is a “back to top” link on the right side of this fixed footer that needs to remain in view when the screensize is smaller than the container.

Quiz 35 - October 24 2010

2 quizzes this month.

The first is to cure the white space bug when using inline-block especially in webkit browsers.

The second quiz is to attempt to style an input type=“file”.

Quiz 36 - December 21 2010

A nice little quiz for Christmas.

The task this week is to take a fluid height element (such as a banner or various ads) that sits near the end of the html and make it show first when the page is displayed. This is easy to accomplish if the element is a fixed height but generally thought to be impossible if the element is a fluid or dynamic height.

Quiz 37 May 14 2011

Create a crosshair effect when you hover over a link and sets of horizontal and vertical parallel lines stretch out to all edges of the viewport.

Take a lot at the attachment (crosshair) and you will see a nice little list sitting in the window. The top screenshot (1) shows the menu in its standard state and there is nothing special here. Just a normal list that you’ve done hundreds of times.

The second and third screenshots (2 and 3) shows what happens when you rollover the menu and parallel horizontal and vertical lines appear (almost like a cross-hair) and stretch to the edges of the viewport.

As you run down the menu the lines follow accordingly but most importantly as soon as you leave the blue menu area the lines disappear.

Quiz 38 - May 22 2011

Hot on the heels of the last quiz I have another task for you to complete. Look at the attachment and you will see a simple tab menu which has normal round corners at the top and inverted round corners at the bottom.

Your task is to create that tab menu.

Quiz 39 - Aug 14 2011

CSS - Test Your CSS Skills Number 39 - dropdown arrows:

On my CSS “wishlist” is the “parent selector” that would give you the ability to style the parent of a child using the child as the reference. Or similarly the ability to style a parent element based on the child element that it contains. Alas there is no such thing in CSS - yet.

That’s all well and good but where is that leading us?

In this quiz I will be asking you to perform the above feat in some respects in that I want you to automatically add indicator arrows to show that the item contains a dropdown menu. Essentially if a list element contains a dropdown menu then show an arrow.


Quiz 40 - Dead Centre Aug 24 2011

You have an image gallery that displays random images from your database. The images are all various sizes and you have no control over what size the image will be.

The design calls for the images to be shown in a 200px x 200px square regardless of the size of the image however the image should not be resized.

What the task requires is that all images be centred horizontally and vertically within the 200px x 200px square which means that small images will be centred nicely and very large images will just show the centre portion of the image which in most cases is likely to be the important part of the image rather than just a flash of sky at the top.

[URL=“http://www.sitepoint.com/forums/showthread.php?860673-Test-Your-CSS-Skills-Number-41-Expanding-divs&p=5135320#post5135320”]

QUIZ 41 Two Expanding Divs - June 2012

Using only CSS (no scripting or expressions allowed but css3 is necessary) the task is two take two divs that occupy 50% of the page and then when clicking on an appropriate link one div will expand to 80% and the other div will shrink to 20% (and vice versa) while both remaining in the flow of the page.

Quiz 42 - float center revisited - July 2012

Using only CSS (no scripting or expressions) the task is to float a fixed height and width image so that it spans two separate columns and the text is displaced accordingly in each column. The columns may be a fixed width or a fluid width but the technique should work for either.

Quiz 43 - Fixed right column in fluid layout? - October 2013

The quiz is mainly concerned with created a fixed position block at the top of a right column in a responsive (fluid) layou

Quiz 44 - Re-order content

Flexbox makes the re-ordering of content a cinch as you can move elements visually up and down the page without breaking the flow of the document (as with absolute positioning). Your task is to mimic a part of this behaviour but without using flexbox and for it to work in IE8+.

What is a CSS reset?

A “reset” is basically a means of removing certain defaults such as padding and margins from your elements so that all browsers start with a clean slate. Browsers all apply different defaults and a reset tries to address this issue so that there is a level playing field to start with.

Browsers have their own internal stylesheets that apply defaults to html elements such as deciding how much padding or margin should be applied by default. Indeed the internal stylesheet is quite comprehensive as it covers many aspects such as the look and feel of form controls and even which elements are actually visible or not (e.g. the elements in the head of the page).

If you have Firefox on Windows XP then browse to the Firefox folder and then look for a folder called “res” (at least that’s where the files are located on my system but other systems may vary) .

Inside that folder you will find a number of css files that are used by the browser. The 2 most important ones are called html.css and forms.css. Open these up in your editor and you will see that your blank page comes with a variety of pre-applied styles before you even start to code.

For example here are the styles for some heading tags from html.css:


h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

As you can see the font-size and margins are all defined before you get them.

The problem with this is that all browsers apply different defaults. For example IE rarely applies a top margin to any element but applies a bottom margin only. the font-size and the amount of the margin differ also.

Multiply this problem by the number of browsers there are and you can see that before you start to code a single line you have a mountain of differences to overcome before you even start.

What’s the best method.

Once upon a time it was commonplace for authors to place a global reset into their stylesheet as follows:


* {margin:0;padding:0}

The universal selector was used to target all the elements in the page and then to set their margins and padding to zero.

This was a simple method that worked well but apart from 2 main flaws.[INDENT]1)The first and main problem was that it destroyed the look of certain form elements such as selects and submit buttons in a way that couldn’t be re-instated. Buttons would lose their depressed look when clicked and the button on the select would look odd in various browsers.

Once you target a form element you lose the ability to put back the original styling for some parts of the control.

If you don’t believe me then set a background color for a submit button and then try to reverse it back to default.

2)A second problem with this method is that you are addressing all elements in the document and on large documents there could be speed implications in making the browser do this. Although in reality this argument would only be true for extreme cases and in most cases the loss of speed would not be noticeable to the user.
[/INDENT]Some users would also take the reset a step further and apply many more properties to the rule such as borders and font-sizes and colours etc. This would have the effect of exacerbating problem 2 but also ruined inheritance in some cases.

Authors would do things like this:


*{color:#000}

Then later on in the stylesheet they would define a colour for a section:


div{color:blue}

Then using well formed code they would do this:


<div><p>Why am I black?</p></div>

The text then would be black and not blue because the universal selector had killed the inheritance from the parent element.

Eric Meyer

Therefore authors looked for a better reset and Eric Meyer jumped in to the rescue first with his explanation of “Really undoing html" followed later by his "[URL=“http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/”]reset reloaded” article.

This was a comprehensive reset that addressed most html elements without harming form controls. A lot of authors (including me at the time) jumped on the bandwagon and immediately started using the reset in all their projects.

Later on I began to realise that perhaps this was overkill and I was ending up defining certain elements twice. Once for the reset and then once with the real margin or padding that I wanted.

Why didn’t I just do it right in the first place and just do it once?

This was the biggest argument against this reset in that it was overkill and indeed the latest version is smaller than the original but still contains too many elements that don’t really need to be there.

Gary Turner wrote a good thread on why he thought the reset was bad and I’ll let you read it and make up your own mind.

Whether you use a reset is up to you as some people like them and some people hate them. I think they are unnecessary if you know what you are doing because you can simply address the elements you are using at the time you are using them.

Beginners latch on to resets because it seems to sort their problems out for them rather than understanding what is actually going on.

Most authors use some sort of default or starting point so it’s best that you do understand the implications of what you are using and make your own choices.