18th September 2008 by Jason C. Filed under: CSS
I just thought I’d jot this down for posterity as I’ve seen it before but not often enough for me to remember the solution. Posting this should help that, though.
When using LI in IE6, if the LI has hasLayout activated, then the corresponding bullet will be aligned to the bottom of the item instead of the top. Why the devs writing IE6 thought that this would be useful I don’t know. Or perhaps, it’s a bug? The shock of it all.
The solution is to target the LI and to disable hasLayout. The method I used today was this:
li {zoom:0;}
This directly countermands the zoom:1; I had added to other elements to get the page to hang together in IE6.
20th February 2008 by Jason C. Filed under: CSS
It seems that there is more than one way to skin a cat. Ages ago I wrote about a mad IE duplicating text bug that would repeat bits of content lower down on the page. It had me scratching my head for a little while wondering how IE could be home to yet another bug, especially one this weird. My old friend Google came to the rescue in the end, showing me a cure.
Now though there appears to be a new and even simpler cure. The problem occurs when you have two floats, and comments between them. The solution I used previously was to remove the comments, but now it appears that another fix is simply to add display:inline to the css rule for the floats. I pretty much do that automatically now, to avoid IE doubling the margin around floats, so it fits right in, and means I can forget about removing comments from my code.
13th February 2008 by Jason C. Filed under: Code-bits
Browser inconsistencies are something that drives a sane web developer mad. For example, last week, I was trying to shoehorn a fairly simple-looking design into some html/css code, ready to be dynamicised (yes, I did just write dynamicised. Sorry.) Unfortunately, what happened, as always, was that Safari used a different line-height to everyone else, IE used a different heading size, and Firefox was absolutely perfect, because that’s what I was doing most of my testing with.
I come across this problem all the time, as you can probably imaging, and my solution is to have a base css file that I then modify and extend for every project. Doing that largely eliminates inconsistencies, or at least makes inconsistencies consistent project after project.
Eric Meyer’s ‘CSS reset’ stylesheet has been knocking around for some time, and is a useful resource to use or just to look at and understand why he’s done what he’s done. Anyway, he’s now given it a permanent home on his site, so there’s somewhere to check back for updates.
http://meyerweb.com/eric/tools/css/reset/
Here it is in full…
/* v1.0 | 20080212 */
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;
}
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;
}
29th January 2008 by Jason C. Filed under: CSS
After a day of plenty of swearing, I seem to have found something out that I think I should have known about before. I’m posting in the hope it will help out some other hapless web developer and prevent some nasty monitor-forehead interfacing.
For some reason, I know not why, after making a small change to an html page, IE7 stopped picking up some percentage widths (for floated elements). After a lot of swearing, I found out that sometimes, to even pick up a width, IE7 needs both a min-width and width. As I was using percentages that was not a hassle – so for example the rule
float:left; width: 25.5%;
was having no effect: the width of the element was shrinking down to the width of its content, while on IE6, Opera, Safari and Firefox everything was fine. Adding a min-width thus
float:left; width:25.5%; min-width:25.5%;
Sorted everything out. So now everything’s hunky dory. I’m sure most of you will have known about this and I’m quite surprised I haven’t come across it before. That’s part of the joy of the job, I suppose: after the frustration comes the satisfaction of learning something new and solving a problem.
