Window size and scrolling. Finding the size of the browser window Clue browser can only work out window width. Tkhtml Hv3 has the body/documentElement clientHeight/Width values reversed - versions before September 2007 also do not support innerHeight/Width, so they cannot work with this script. There are some constants available that give the document area of the window that is available for writing to. These will not be available until after the document has loaded and the method used for referencing them is browser specific. The available constants are: Provided by most browsers, but not Internet Explorer 8-, and even in Internet Explorer 9+, it is not available in quirks mode. Provided by many browsers, including Internet Explorer. Provided by most DOM browsers, including Internet Explorer. As you can see, the browsers seem to have settled on at least one reliable property; . The most accurate method I could come up with uses the following algorithm: Finding how far the window has been scrolled.
Stefano's Linotype: Why Programmers Suck at CSS Design. If I had a dime for every time I heard a web programmer apologize for the way his/her pages looked before revealing them, I certainly wouldn’t need to work anymore. As with color picking, I think that programmers tend to avoid doing certain things not because they are inherently bad at it, but because they don’t know how to proceed.
They find themselves in an uncharted and foggy territory, without a map, no sense of direction, and with a limited ability to know if they’re getting any closer to where they want to be. Also, when they talk to people that don’t share such problems and find it all too natural and obvious, it’s hard for the two to communicate in terms that make sense to a programmer. There is a general tendency to believe that programmers can’t style things because they have no style themselves.
Don’t get me wrong: I don’t think anybody can design something truly beautiful, innovative, simple and that can resonate with a big percentage of the population. Em vs. W3 Validator. The joys of overflow:auto and cross-browser development. Some of you may have wondered why I initially didn't post the code for my Map/Reduce example on my blog, but only linked to the Channel9 post, and why I added it now.
The answer is, because figuring out a good way to add code samples to my blog was still on the TODO list. "But," I hear you say, "that's simple isn't it? A <pre>, maybe some fancy colouring, end of story, right? " Right. Except, no. You may have noticed that the content on this is in a container that has a width relative to the page (70%, to be precise). So what would happen if I put a <pre> in there, and that contains a line that wouldn't fit. So there are two solutions. Thus we end up with the solution I eventually used as you can see in the previous post. The mechanism to create scrollbars, namely overflow:auto has its own problems. Perhaps surprisingly, the only browser that does this is IE. There is, for those interested, a way to avoid the vertical scrollbar even in IE. IE6 adds additional difficulty. CSS examples. Son of Suckerfish Dropdown. Tuesday 18 May, 2004 ( 8:47PM GMT) Son of Suckerfish Dropdowns is a new article from myself and Dan Webb, explaining how to apply Suckerfish Dropdowns in a vastly improved way over the original article published in A List Apart.
Essentially, a Suckerfish Dropdown is a dropdown menu built with CSS with a little bit of JavaScript bolted on to accommodate Internet Explorer, which doesn't support the :hover pseudo-class on anything other than links. The original method was already lightweight, accessible and cross-compatible, but this method is even more so. It now works with multiple-level dropdowns, the JavaScript that mimics the :hover pseudo-class is just 12 lines long, to improve accessibility display: none is no longer used (alternatives may seem easy enough to find, but trust me, this was a real pain to sort out) and problems that were encountered with Opera and Safari browsers have been overcome.
If you can't be bothered with the article, just take a quick peek at the baby at work. List of fonts for web design... Last updated: 2008/06/03 Return to the main page Introduction Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts". This is the reference I use when making web pages and I expect you will find it useful too. If you are new to web design, maybe you are thinking: "Why I have to limit to that small set of fonts?
If you want to know how the fonts are displayed in other OS's or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. The list First, a few introductory notes: The names in grey are the generic family of each font. 1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems. 5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. CSS Hover Fix. CSS: Tables Versus Divs. From CSS Discuss "Tables prompt eye-gouging hissyfits among accessibility advocates and Web designers of all stripes, whether oldschool or avant-garde.
Both sides are saddled with myths and both argue in large part from ideology. Let’s do a reality check, shall we? " cite: Joe Clark's Building Accessible Websites OK. Yes, that reality check can basically be boiled down to "Before stylesheets were invented the spec said layout tables were OK (and lets not mention that the spec also said they could cause problems in the very next sentence)", "WCAG doesn't forbid it! Many people try to use table elements and its descendants for page layout, for two reasons. Advantages CSS can have over tables: smaller page size, quicker to load future flexibility search-engine-friendly Advantages tables can have over CSS: Broadly similar layout in ancient graphical browsers Why we shouldn't use tables Tables were created to provide structure to data.
Bazookatooth Web-Development Technology Blog. Tabbed Navigation Using CSS.
CSS-Discuss - CSS Wiki.