Just wanted to share a wonderfull url with you!
http://getfirebug.com/lite.html
April 24th, 2009
January 23rd, 2009
So, you have some topmenu items, and some subitems in it. and one of
the sub items is some wider than the rest, because the text of it is
more characters. Have you noticed the blue background-color of on of the smallest submenu items of the flyouts menu?
The difference in length of the most wide menu item and the others that are smalle
will appear blue when hovering it.
You probably styled the a-tags of the topnavflyouts and it’s parent. You should also
style the .ms-topNavFlyOutsHover by giving it the same background-color of the rest
of the hover state of the a-tag.
Your result should look like this:
December 18th, 2008
Once upon a time there was a td with id _invisibleIfEmpty.
This td seems to have a padding of 4 pixels, but no one seems to know how the padding got there.
There was no #_invisibleIfEmpty in any of the stylesheets, and there was no inline
padding defined. So how did the padding get there?
How this fairytale is going to end? Nobody knows..
December 17th, 2008
Sometimes, when I see no other option I do use some ie6 hacks.
I use it like this:
Element{
property: for ff
*property: for ie7
_property: for ie6
}
Be aware, in this example the property for ie7 is also rendered by ie6, but since
you set another property after that one, specially for ie6, the value changes.
So, when I was implementing a graphical design on a moss environment, I was having
difficulties using the ie6 hack. No matter what I did, ie7 was also rendering the
ie6 hack. After half an hour struggling with it I find a simple walk around, I wanted
to share with you. Instead of the underscore for ie 6, I used a minus (“-“) and it
worked fine.
I still have no idea why ie7 was rendering my ie6 hack, but with this workaround,
I could continue implementing.
Element{
property: for ff and ie7
-property: for ie6
}
November 19th, 2008
A colleague of me used my tip
on how to place a link on the logo. She had some trouble positioning the link
on the logo, though. It worked fine in IE, but on FF it did go everywhere, except
for the right place.
Then, she found out a text-align (left) on the link will fix this issue.
Great work!
Thx for sharing, Dercia
November 12th, 2008
pre-wrap acts like pre but wraps if necessary, while pre-line acts like normal but preserves newlines.
Most of this code is from Ian Hickson, which Lim Chee Aun bloged about in Whitespace
and generated content, explaining the intrincacies about this problem. You can
also find more information at Pre-wrap
alternatives and Get word-wrap
in comments.
.wordwrap {
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually)
*/
word-wrap: break-word; /* IE */
_white-space: pre; /* IE hack to re-specify in addition to
word-wrap */
}
November 11th, 2008
Now use max-width not only for mozilla, use it for IE like this:
width:expression(document.body.clientWidth > 800? “800px”:
“auto” );
November 10th, 2008
“As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them.”
September 16th, 2008
September 15th, 2008
Checking
your pages in Internet Explorer and Firefox isn’t enough! You’ll also want to test
your page on older versions of Internet Explorer and Firefox, and Apple Mac browsers.
CSSVista is a free Windows application for web developers that lets you edit your
CSS code live in both Internet Explorer and Firefox simultaneously.
Try it out here