camwebdesign.com » CSS

Consistent Cross-Browser Code Snippets

Corey — Thu, 07 Jan 2010 04:30:02 +0000

How did we create and style consistent cross-browser Code Snippets with

 and  tags and some simple CSS.
The problem, not all browsers treat the padding of the 
 tag the same.  I know what your first thought was…”It’s Internet Explorer!”, wrong actually the culprit is Firefox  .  In short Firefox doesn’t play well with spaces and tabs in the  tag.  Yes a CSS reset does go a long way in fixing this issue, but we wanted to further the control of our Code Snippets and do some fancy stuff to them as well.
Our solution…
We nest the 
 and  tags allowing control of the margin, padding and backgrounds for each of the elements.  Our HTML, CSS, PHP, javascript or whatever code goes inside the tags.
[Select Code]




The CSS for our 
 and  tags.  We control the padding in the  tag and the spaces and tabs in the code are properly represented in the  tag.
[Select Code]
pre {
	padding: 0;
	margin: 4px 0 12px 0;
	border: 1px solid #ccc;
	line-height: 20px;
	background: url(/images/code-bg.gif) repeat-y top left #000;
	width: 586px;
	overflow: auto;
	overflow-Y: hidden;
}
pre code {
	margin: 0 8px 0 25px;
	padding: 18px 0;
	display: block;
	color: #3C3;
}

So there you have it, simple yet effective in producing consistent results across all browsers.
Post your thoughts below…
Similar Posts:

CSS Reset anyone?
Select code in snippets with jQuery
Dynamic Font-Based Images



CSS Reset anyone?
Corey — Tue, 05 Jan 2010 17:43:14 +0000
When we create a new site’s CSS, we start with a CSS Reset to level the playing field between browsers.  The problem, not all browsers treat the margin, padding, line height, font size, styling, text decoration, etc. the same, a CSS Reset helps us to “reset” these within each browser.  The CSS Reset technique is nothing new so we’ll let you read up on it’s history.
Here is the reset that we use as our basic CSS building blocks:
[Select Code]
/* ------------------------Begin Reset------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
  line-height: 1.4;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ------------------------End Reset------------------------ */

Post your thoughts below…
Similar Posts:

Consistent Cross-Browser Code Snippets
Select code in snippets with jQuery
Dynamic Font-Based Images