Hacky HTML
by Mez on Dec.09, 2008, under Personal
Ok, so working on a new site, I’ve realised that an image I’ve floated to the right of my text seems to be overlapping the items beneath it.
Ok, so, that’s obviously not what we want!!!!
Normally, I’d use clearfix for this, however, I have the issue that I will also be using a sidebar (at times) and well, clearfix will interfere with this:-
So, that’s obviously not something we want! – I had to find a nice way of doing this, without it interfering with everything else!
I thought about this, and thought I’d do a bit of voodoo with CSS and make this work!
Yay! It worked!
How’d I do this you may ask. Well, the containing div needed the following CSS (which also, quite niftily extends the height of the float if it’s the shorter one, making it the full height of the containing div
overflow: hidden; padding-bottom: 32767px; margin-bottom: -32767px;
The only issue? – It doesn’t work in any Internet Explorer Version, or Opera <= 8 – though it works in pretty much every other browser (according to browsershots)
*sigh* back to the drawing board, unless anyone else has some suggestions?
Edit: I was wrong – it works in IE7, but not in IE8
Edit 2: and it works in IE8 if you tell it to run in IE7 compatibility mode
December 9th, 2008 on 7:26 am
if all the images have the same height you could try with a min-height directly in the div which contain the description
December 9th, 2008 on 9:50 am
You could try floating the parent container too, that should solve the problem: See http://www.yongfook.com/items/view/81/10-dirty-little-web-development-tricks (#7)
As far as I know that works in every browser. Usually saves me a lot of hassle
December 9th, 2008 on 11:01 am
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
December 9th, 2008 on 11:22 am
I don’t quite see the problem but honestly, how about spending time on things that matter and just use a table for this?
December 9th, 2008 on 11:25 am
You have code that works in Firefox/Opera/IE7 but not IE 8? That is unusual. Does the code ([X]HTML and CSS) pass W3C validation?
Don’t declare IE7 compatibility. It is the browser’s job to display legal code, not the website’s job to hack for any one browser. Put a disclaimer at the bottom declaring that the site does NOT work in IE, like this site does:
http://what-is-what.com/
When we stop bending over backwards to support IE, then the users will conclude that IE is broken and not the web. Those who insist upon using a broken web browser can see broken webpages.
December 9th, 2008 on 1:55 pm
jim:- The images aren’t neccessarily all the same height. The min-height can be generated, but won’t work on all browsers
Sander:- this shoves things around a little – and makes things not span the full page, but if I do that and add a width: 100%; it does work! yay!
tsb:- Semantic Markup, accessibility, the list goes on. Tables are for tabulated data, not for layout.
Dotan, thing is, I don’t want to alienate users… and yes, the CSS is valid.
December 9th, 2008 on 5:08 pm
I’ve seen the huge negative margin hack cause another problem: non-working anchorst (clicking on a link to an anchor within the same page would simply do nothing), though I’m not sure it might have been caused by a combination of that hack together with other (bad) CSS.
December 10th, 2008 on 12:43 pm
@ mez: yes I know. But if there is a corner-case where it is hard to get it right and consistent, and it is a small and insignificant thing (ie not the whole site), I don’t think it’s going to matter (I did when I first started becoming tableless-infected years ago). The avoid-tables-at-all-costs is a bit hysterical IMHO. If you could specify things like hight-dependence among divs (css3) then it would be no need for them. But like it is presently, you have to use all sorts of divs in a div in a div, and that’s not necessarily so semantic either; it’s something of a hack.
So what I meant was, I’ll make the page based on css and semantics, of course, but if I am having big problems with some insignificant small thing I’m not opposed to just slapping a table on it, call it a day and work on the product that matters instead.
December 10th, 2008 on 1:11 pm
Look at the clearfix article on PositionIsEverything again and you’ll find a box at the top with a red border around it. Follow the link inside and you have your solution. Just add “overflow:auto” to the parent element.