Archive for the ‘CSS’ Category

Images or elements don’t appear online in firefox

Wednesday, January 21st, 2009

This isn’t a bug report. I’ve posted this as a reminder to myself and in the hope that it helps to prevent anyone else wasting the time I’ve just wasted trying to fix a non-existant problem. For the last hour I thought I was looking at a Firefox 3 bug which was making an element not appear in the online version of a site. Everything seemed fine offline but when i uploaded the files the element just vanished. The answer? disable ad-blocker extension. Due, probably to the image dimensions or the items ID, my ad-blocker had kicked-in causing a particular image to disappear.

Hope this saves people some man-hours.

Equidistant objects with css - another way

Tuesday, October 21st, 2008

I recently read an article about the equidistant spacing of elements with css over at css-tricks.com. The simplicity of the technique really struck me as a case of good old lateral thinking. Despite this I was a little uncomfortable with the extra html that was required to make the technique work.

Inspired by the css-tricks.com solution I decided to try and solve the same problem with out the need for the extra div’s.

Admittedly, the solution I came up with isn’t quite as clean as the one proposed by Chris Coyier but never the less I feel compelled to share it.

Here’s an example

It’s all about lists

firstly, here’s the basic html…

<ul class="equal">
<li class="n1" ><a href="thelink">the first item</a></li>
<li class="n2" ><a href="thelink">Another item </a></li>
<li class="n3" ><a href="thelink">A piece of link text </a></li>
<li class="n4" ><a href="thelink">this also goes somewhere </a></li>
</ul>

That’s right, just good old lists with classes to allow us the differentiate between them.

The css

Firstly, all the list items need to be floated, The floats need to be contained within their parent ul and for simplicity I’ve added a rough and ready css-reset to remove any margins and padding and to remove the default bullets

ul.equal {
padding-left:9em;
height:auto;
zoom:1;/* just for ie - put it in ie only style sheet*/
}
.equal:after{content:".";clear:both;visibility:hidden;height:0px;display:block}
* { margin: 0px;
padding: 0px;
list-style: none outside;
}
.equal li {
min-width:9em;
float:left;
}

The trick, as with Chris Coyier’s solution, the trick is to get three of the four items to each take up a third of the overall width. the trick with this technique is to offset the 1st item using a negative margin and use a padding on the containing ul to prevent anything from droping behind it. You’re now left with a ul which has a width which can be divided into thirds.

.n1{margin-left:-9em;display:inline;/*fix ie6 double margin float bug*/}
.n2,.n3,.n4{width:33.3%!important;text-align:right;width:33.2%;}/*ie6 causes problems due to rounding-up so use a slightly smaller percentage for it.

after the we’ve got the floated <li>’s nicely expanding we need to make sure the last three are right-aligned in their respected <li>

.equal a {
background: #fff;
height: 9em;
display:block;
margin:0 0 0 auto;/*right aligns a block element in the good browsers*/
width: 9em;
text-align:center;/*to override the text-align required for ie6 for the parent li*/
}
.equal .n1 a {margin:0;}

In the good browsers you can use a min-width to prevent the boxes dropping down onto multiple lines.

As with most layout techniques… IE 6 has to be coaxed into behaving how would like. The code required to do this would normally be put in a stylesheet of it’s own using conditional comments but for the purposes of simplicity i’ve used a couple of hacks to keep everything in one file.

rounded corners… without images

Monday, October 20th, 2008

A piece of css which will create the impression of rounded corners without any images, javascript , proprietary css, and practically no extra html. The method is inspired by a technique used on google reader though I have to say… I think my methods cleaner.

view demo

Admittedly, it’s pretty inflexible in that there’s no control over corner radius (2 pixels) but I though it was worth posting as there may be instances where it comes in useful. I’ll try and write up the method when I get time but for now you can just view the source.

3 column scalable elastic layout

Saturday, March 1st, 2008

the results of a quick experiment did with a layout consisting of two fixed width side columns and a variable width central column. I also wanted to make the whole thing elastic so it would scale with the browser text size. I’ve yet to test this ‘in the field’ but thought it may be of interest to people anyway… seems like it may have some potential.

The trick with this one is in the negative margins on the side columns.

Have a look

absolute centred layout

Friday, February 1st, 2008

I’ve created a small example page which demonstrates a method for creating a vertically and horizontally centred box. I decide to put this up after seeing a post over at sniplr.

Here’s the example: centred css layout

This example is elastic so it scales to the font size. For simplicity, I’ve not added any hacks for Ie box model issues.

The key code

html,body {
min-height: 100%; /*this makes sure that the page canvas fills the browser*/
background: #efefef;
}
div#popmsg {
position: absolute; /*sets the positioning type*/
width: 18em; /*width in ems - keeps things elastic*/
height: 6em; /* same for the height */
left: 50%; top: 50%; /* this line and the next line sets the top left corner of the box to the exact centre of the page */
margin-top: -4em; /*then use negative margins top and left to offset the box by half it’s width*/
margin-left: -10em;
border: 1px solid #999999;
background: #FFFFFF;
padding: 1em;
}

css smart footer

Thursday, January 24th, 2008

This is short piece of css which allows you to create a page footer which will sit at the bottom of the browser window when the content is not long enough to force it to the bottom of the page but will still sit below the page content when the page has scrollbars (the method is used by this site).

View Example

  1. Set the min-height for the html tag to ensure it always fills the browser window.html {
    height: 100%;/*makes the html the full window height*/
    }
  2. Set the minimum height for the body tag to %100 and positioning value of ‘relative’ this will ensure that the footer, which is a child of the body, will use it as the reference area for absolute positioning. warning IE6 hack!

    body {
    min-height: 100%;/*sets the body to the window height*/
    _height:100%;/*ie 6 hack - better in a specific stylesheet*/
    position: relative;/*tells the footer to use the body the reference when setting position*/
    }
  3. Position to footer at the bottom of the body div#footer {
    position: absolute;
    height: 150px;
    bottom: 0;
    width: 100%;
    left: 0;}
  4. Finally, use whatever element proceeds the footer to create a space for the footer on top of which will never contain content.
    div#primary {
    padding-bottom: 200px;/*creates space at the bottom of the main content the same height as the footer to prevent anything from disappearing behind it*/
    }

Tested in windows:

  • firefox
  • ie 6
  • ie 7
  • opera
  • Safari

(any results from Mac users greatly received)

edit 02/02/08
alternate solution at dave-woods.co.uk

mForms - a css form layout library

Wednesday, June 27th, 2007

A library of CSS classes which I hope will take some (if not all) of the pain out of controlling form layout in pure CSS. It uses a modular approach so each form element is independent of it’s neighbouring elements, allowing you to mix and match and still achieve the desired results. I’m still working on additional classes to allow even more flexibility but in the current version should meet most needs. As well as being completely modular it’s also width independent so should work regardless of the available width, it will simply occupy the width of the containing element, alternatively you can just set width for the form element itself.
note - To eradicate the need for extra html markup this system uses label tags that wrap the form elements…
note - While wrapping form fields in labels is a valid technique in the xhtml transition DTD, unfortunately it isn’t valid ‘Strict’ xhtml. I’m happy to say that I’d miss-understood the validation error, The example has been fixed and is now valid strict xhtml.

Use

once the css files has been attached to your document and the class of ‘mForm‘ added to your form tag all you you need to do is add the appropriate class the the element label and mForms should do the rest for you.

Customisation

As well as using the css ‘out of the box’ there are also constants which can be changed to further customise the appearance.

demo

View example of mForm

Download

Download mForm.css

I’ll try and do more work on this, I’m just putting it out there to try and gauge the interest level. If you want me to motivate me to develop this further, incentives are welcomed.

fixing common I.E. rendering bugs - zoom:1

Sunday, May 27th, 2007

There’s a number of bizare ie rendering bugs which when i did some investigation discovered were related to an ie property called hasLayout. It’s seems that forcing the value of hasLayout will frequenlty fix these bugs. I’ve come accross alot of methods for doing this but i’ve just come across one that negates the need for any additional styles that have to be hidden from well behaved browsers.

zoom:1

Apparently giving an Element the internet explorer property zoom:1 forces internet explorer to set the hasLayout property to ‘true’. There are also other methods of fixing this bug although this particular one seems to be the least invasive as it’s only understood by interent explorer.

see: Fumle.dk for more info.

css safari filter

Friday, April 27th, 2007

A useful filter to add safari specific css

html[xmlns*=""] body:last-child … +(descendent selector)

origional article

…thats it.

I.E.’s disapearing content

Monday, February 12th, 2007

A common bug where internet explorer crops or fails to display content within floated elements. The exact cause is a bit of a mystery but the problem can usually be fixed with:


div#floatedelement *{position:relative;}

As with all ie fixes I’d recommend putting it in a ie only css file using conditional comments. There may also be instances where you need to be a bit more selective with the css, e.g. when using relative positioning within the floated element. Quite often thought this can simply be modified to something like

'div#floatedelement * *'

to take into account the depth of the nodes… either way a ‘position:relative;’ will usually cause I.E. to display the problematic element.

  • You are currently browsing the archives for the CSS category.

  • Categories