:: a z y u r e . c o m :: » brain rubbish

background transparency on div with solid text – all browsers

azyure — Wed, 24 Mar 2010 10:50:44 +0000

Text in transparent box – all browsers IE6 / IE7 / FF/ Safari / Opera

The css looks like this:

and the html looks like this:

This is some text that is placed in the transparent box.

This came from: http://www.w3schools.com/Css/css_image_transparency.asp

IE Bug – making a 0px high div

azyure — Thu, 03 Dec 2009 10:36:04 +0000

I found that when I was creating div’s with ‘clear:both’ of different heights (which I use for spacing in my design)

.clear {clear: both; height: 0px; line-height: 0px; width:100%;}
.clear5 {clear: both; height: 5px; line-height: 5px; width:100%;}
.clear10 {clear: both; height: 10px; line-height: 10px; width:100%;}
.clear20 {clear: both; height: 20px; line-height: 20px; width:100%;}

Basically spanky IE makes your empty div the same height as your line height – so to fix this you need to specify line height ‘0px’ etc etc.

Bad bad IE

Correct accessible image / text replacement

azyure — Tue, 08 Sep 2009 16:12:51 +0000

Stolen from : csswizardry

7.3.2 Gilder/Levin Method

Really great method…

By far the most robust and accessible method to date is the Gilder/Levin method (no URL available). This method maintains its integrity with all combinations of images on/off and CSS on/off.

This method works by laying an empty over the top of the parent element with the required image applied as a background to that :

Markup:

Home

CSS:

#header h1 a{
	display:block; /* Required */
	width:250px; /* Width of image in question */
	height:70px; /* Height of image in question */
	position:relative; /* Required */
}
#header h1 a span{
	position:absolute; /* Required */
	width:100%; /* Stretch full width of parent */
	height:100%; /* Stretch full height of parent */
	background:url(images/logo.gif) top left no-repeat; /* Image */
	cursor:pointer; /* Required for links to appear like links in IE */
}

…but has its drawbacks:

There is however a drawback to this method; the empty . This is bearable though as the will have no impact on the usability/accessibility on the page, and will only impact ever so slightly on semantics. Now users can always see an image or text regardless of whether they have CSS and/or images disabled.

Weird first list item indent IE 6/7 – fix!

azyure — Thu, 03 Sep 2009 13:46:11 +0000

For some reason – IE 6/7 has a bug *sometimes* of making the first item of a list indented *RANDOM*

so your list looks like this:

Item 1

Item 2

Item 3

Which will end up looking something like this (yes I just dummied it to look like this – it’s not the actual error):

Item 1
Item 2
Item 3

To fix it:

ul{
min-height: 1%;
}

ta da!

accessibile css styled headings h1/h2/h3’s and menu navigation

azyure — Tue, 14 Jul 2009 14:57:49 +0000

This is for heading/navigation etc. It allows you to style images so they degrade gracefully (if the image is broken etc – it will show the text)

Is accessible!

Can be used on h1/h2/h3 etc for headings with a div/span or with an ul/li/a tag for a menu/navigation – can combine lots of combinations

H1 example

Heading

#content h1
{
display:block;
height: 0px;
padding-top:23px; (this is the height of the image)
overflow:hidden;
color: #444444;
}
#contentMain h1.heading
{
background:transparent url(~/url/to/the/image/heading.gif) no-repeat left top;
}

Home

Active Page

Home

#mainMenu
{
float: left;
list-style: none;
overflow: hidden;
padding-top: 40px;
text-decoration: none;
}

#mainMenu #home a
{
display:block;
height: 40px;
width: 100px;
background: url(~/url/to/the/image/Home_Off.png);
background-repeat: no-repeat;
}
#mainMenu #home a:hover, #mainMenu #home .highlighed (for when you roll over & on the active page)
{
display:block;
height: 40px;
width: 100px;
background: url(~/url/to/the/image/Home_Off.png);
background-repeat: no-repeat;
}

Center align site using CSS

azyure — Wed, 17 Jun 2009 08:25:35 +0000

HTML bit



**Rest of site goes here**

CSS bit

body { text-align: center; }

#container { margin: 0 auto; width: ***px; }

Hide div’s onload using class

azyure — Wed, 29 Oct 2008 15:15:53 +0000

IE6 double margin fix

azyure — Wed, 24 Sep 2008 17:02:53 +0000

add display:inline; to your floating element

photoshop – Black/White Checkered Graphic

azyure — Sun, 20 Apr 2008 17:55:07 +0000

Create a new doc the exact number of pixels across and down as the number of squares in the graphic you want.

Zoom in on the new canvas

Use the pencil tool, set it to 1 pixel in size and create the squares in their approx location – at this size the pencil will look like a square.

Once done, resample your image (Image -> Image Size) to the size you want it to be – with Constrain Proportions checked and the interpolation method as Nearest Neighbor.

Protected: dreamscape

azyure — Fri, 30 Mar 2007 09:02:39 +0000