Log in

[Most Recent Entries] [Calendar View] [Friends]

Below are the 17 most recent journal entries recorded in csSybarites' LiveJournal:

Monday, May 24th, 2010
12:03 pm
Web fonts / Google
Google have recently launched an API to allow you to specify various fonts for use in your pages. There have been various such services available previously, but the Google one is free. Could be useful if you think your visitors are fed up of the fairly restrictive list of fonts natively and consistently supported across the various browsers.

The API is about as simple as it could be: you just include a link element in your document head thus:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell">

and then in your CSS you can use it the same way as any other font:
h1 {font-family: 'Cantarell';}

The list of font families thus available is here. The one that leaps out is that it includes Igino Marini's recreation of the Fell types -- good stuff.

What I don't know yet is: is there a significant delay making this call, such that it slows the page displaying? Some testing required.

(X-posted to my own journal, as I'm not sure if more than a couple of people are actually reading this community any more?)
Thursday, May 13th, 2010
5:31 pm
But does it work?
This is an interesting page that someone's put together. It shows which of the features of HTML5 and CSS3 are currently implemented in which browsers (and how that's grown over the last couple of years) -- some are already fully rolled out, others not so much so at all. Hold your mouse over each ray to see which feaure it illustrates.

Perhaps more interestingly, though, it's atually written in HTML5 and CSS3 itself. So all those angled radiating blocks are pure HTML -- not an image or Flash or whatever -- each ray is a <p> element. A quick peek suggests the transforms feature is to blame. Still not making me feel I have to get to grips with it just yet, but an illustration of a cool technique.
Thursday, April 29th, 2010
11:14 am
Have any of you done any work with CSS3, either playing around or real aplications?

It's still in development and only some elements are supprted by some browsers (notably, not IE), but things like border-radius degrade gracefully so can be used safely now if you think it through. And clever tools like CSS3please! exist to generate the code fairly painlessly.
Thursday, October 19th, 2006
11:05 am
Try on this hat for size
Hi folks,

I've nearly finished a website and I wondered if you guys could tell me how fubared or not it is in various browsers.

You can find it at: http://www.siliconhenge.com/blackhat/ and it should look as it is supposed to in Firefox. (Only tested in Mac but should be ok for PC too.)

I'd especially like to know IE, Netscape and Opera issues.

Tuesday, June 27th, 2006
11:02 pm
Browser Compatibility Check
Hi all,

Here to ask a favour...

A preliminary version of a site I've been designing (for my sister) unexpectedly needs to go live tomorrow evening at very short notice. I'm therefore a bit worried about the potential for horrible mis-renderings in unexpected browsers.

If anyone could take a quick look here:


...and let me know of any problems, that would be very helpful.

Note that if you see a problem it would be most unwise to look at the CSS yourself. It's likely to cause confusion at best and might even prove fatal (because I had time to make it work, not time to make it human readable) !
Thursday, April 27th, 2006
10:03 am
B*st*rd IE!
I have a problem on this page in IE with a narrow window. In Firefox and Opera, if you narrow the window such that the middle column is less than the width of the first photo down (604px), it politely tucks under the right-hand column. However in IE instead it drops all the way down to below the end of the left-hand column.

The relevant bits of the stylesheet are:
.leftcontent { float: left; width: 200px; }
.maincontent { margin-left: 205px; margin-right: 215px; }
.rightmenu { position: absolute; right: 10px; top: 110px; width: 200px; }

Is there an easy fix for this, does anyone know? (Other than "make the photo smaller".)

Edited: changed the url of the link above to one which isn't linked from the public site: the live url now has a smaller version of the photo.
Thursday, March 9th, 2006
11:45 am
Base fonts

Somebody at work has come up with the explanation for the discrepancy I was observing yesterday, about why 76% of the browsers configured font size of 16 is 9 point.

It's dependent on the units of that "font-size: 16". It's not 16 point, it's 16 pixels.

the proofCollapse )

My problem was, I was so indoctrinated as a designer with not using pixels to measure font sizes, that it didn't occur to me that the browser was doing anything different. Of course, as a user in front of the screen, pixels make perfect sense.

Which still leaves the basic question of whether the designer should change the font size for the entire page, and 76% is a damn strange value...
Wednesday, March 8th, 2006
4:05 pm
Base Font size
Do you set a base font size on your web pages?

I try not to, as I'd much rather just leave things as the user intended. But... what if the user hasn't expressed any intent at all, and is just using the default setup for their browser?

I had a "critical comment" this morning, about the stuff I'm doing for work. Somebody complained that a piece of text within a column was wrapping, when it didn't ought. Their version didn't wrap, and mine did. So I was copying theirs incorrectly.

They're right. I'd set the base font for my stuff to 10pt. Because it was close to the original.

I've now found out: the original is actually at 76%, based on http://www.thenoodleincident.com/tutorials/typography/

(Which, also, doesn't appear to be followed by Opera. My base font size is 16pt, which ought to make the text 12.16pt. And it's clearly smaller than that, about 9pt in fact).

I've changed my stylesheet to use 76%, and Lo! it does mimic the original, so I'll keep it.

But it's still doing my head in... I mean... 76%?
(for comparison, the main text here is 76% of the size of that particular outburst!)

The original is http://www.brookes.ac.uk/vacancy The problem text is information about... in the menu. At 10pt, it won't fit into the box. At 9pt, it does.

I can't show you my version, as the server's got restricted access controls at the moment. But it should be live by Friday, or Monday at the latest.

Current Mood: confused
Friday, February 10th, 2006
12:31 pm
Quick straw poll
The current "Current Vacancies" page at Brookes uses text decoration on the links in a few non-standard ways.

If the links are not in a dense formation, they are underlined. See the main body of the page.
If the links are in a "dense" formation, they are not underlined. See the LHS menu (also the links on the red background at the top and bottom of the page, and and "Research" box in the top right corner).
In all cases, the underlining changes when the link is hovered (so it appears in the left hand menu, and disappears on the main body).

Since I'm writing my own version, and supplying my own stylesheet in the process, I'm getting very tempted to just not style the links at all (other than foreground and background colours) and letting the user's browser choices control the rest.

But I think our Creative Services team will frown at me if I do so.

Anybody got any stylistic thoughts to input?

Current Mood: thoughtful
Friday, January 20th, 2006
1:44 pm
Floating columns, tables and Internet Exploder

I want two columns: a menu on the left, and a table on the right.

Easy, you say, float 'em

.menu { float: left; width: 80px; }
.content { margin-left: 80px; }

And all is good. Except that I want a table in the content. And then it all goes wrong.

Read more...Collapse )

I despair, I really do.

Current Mood: disappointed
Tuesday, January 17th, 2006
6:14 pm
Does my bottom look big in this?
I'm trying to draw a line across at the bottom of the page.
body { margin-bottom: 0px; border-bottom: solid 10px silver; }

You'll notice that this line runs across immediately after the document content is presented. If the content doesn't reach the bottom of the browser frame, you get the content, a silver line, and then whitespace down to the bottom of the frame. Hmm... I'd rather have the line at the bottom of the frame, with the whitespace above it.

If I add height: 100% to the style, then the document height increases to the height of frame, but the border lies outside that height. So the top of the line is immediately below the lower edge of the frame, and you have to scroll down to it (and you get a scroll-bar appearing). So obviously, that's not great.

Ok, next try:
<div class="bottom"></div>
at some point within the document body, and then add replace the stylesheet with:
div.bottom { background-color: silver; width: 100%; height: 10px; position: fixed; bottom: 0px; }
body { margin-bottom: 27px; }

This has the effect that there's a silver line across the bottom of the frame. Which, if the document doesn't reach the bottom of the frame, means that it does exactly what I want. But there are now two disadvantages: first, I have to change the HTML, not just the stylesheet, in order to add this extra div; secondly, I've lost that valuable space to a fixed position bar, when I'd (now) rather have it appear at the end of the content.

Anybody spot any tricks that I've missed? Assuming you're still reading this journal, that is!

Current Mood: experimental
Monday, June 13th, 2005
11:16 am
It works in Firefox!
Yes, wimble I broke it again. But I don't seem to have broken it as badly as I expected. The dropdown menus (or swingright, in this case) are still functioning even in this piece of junk IE5 I use from work. Positioning is fecked though on the menu and the main content box - there's too much space between the menu items and they overlap the main box, which is too low down.

Can I call for a general browser polls? What does it work in? Any other problems than the positioning? Does the space between the munu items mean that you can't can to the sub menus in any browser (not too much of a problem as each area has an entry page but would be useful to know).

I already know the links to the forums don't function, nor do the archives. There is also an image problemon the Geo and Transport maps (IE can't see pngs).

Help, advice, suggestions?

The site is: Patchwork Universe
Monday, May 9th, 2005
2:51 pm
Margin-top query
I have a peculiar thing, which I hope is familiar to you folks and there's an easy solution...

details cutCollapse )

Which of these is the "correct" behaviour? -- and how can I get Firefox to do what I want it to?

(Or should I be using padding-top instead?)
Sunday, May 8th, 2005
10:50 am
Commercially justifying CSS layout
I have a problem, which I hope those of you more experienced at this stuff will be able to help me with.

I manage a business website, which at the moment is laid out in the traditional way using tables. I would like to convert this to a CSS layout, but I have to convince my business partner that it's worth us spending the time (and hence money) doing so.

For me personally, just the fact that it's better HTML practice to use layout functionality for layout, and to use table syntax only for displaying tabular data, is sufficient reason.

However my partner will point out that our current site works perfectly well in all current and recent-historic browsers, and does everything we need it to.

What can I say to him are the advantages of CSS layout, that will help justify the expense of the recoding?

(NB: our design and layout are very plain and are going to remain so, so arguments along the lines of "you can do all sorts of cool bizarre tricks with CSS layout" will not be useful.)
Tuesday, May 3rd, 2005
11:37 am
Final web testing of official site
Hello folks, I'm reaching the final test stage of my official website, thanks to everyone who's been helping so far.

It is supposed to look like this and the earlier stage of tests confirmed that it did in the following browsers:

Firefox (mac)
Firefox 1.0.3 (pc)
Opera 7.54u1 (pc)
IE6 (mac)

The only known faults in those browsers are:
a) that the bottom links box appears strangely (with what are described as purple blibs) and fails to scroll down with the rest of the page.
b) that the "Site->Start Page" text is misaligned. (I'm not too worried about this one, I know how to fix it, I think.)

However we now move to IE, where in the pc version there appears to be a nasty problem wih the righthand site links box. ar_gemlad kindly took a screenshot of this problem which can be found here.

Can anyone help with fixes?
A draft page of the site is here, no links are working. To clarify, what I'm looking for is:

a) Suggested explanation of the odd behaviour in IE.
b) Screenshot and explanation of the bottom links box misbehaviour.
c) All clears from other browsers or listing of faults if there are any, please include browser version and screenshot if possible.

Thanks again.

Current Mood: determined
Thursday, April 28th, 2005
11:47 am
Pretty pastel boxes
I've been trying to make a portfolio site to showcase my own web designs. Thanks to some help from onebyone last night, it's now working more or less as it should. At least in Mozilla(pc), Safari, IE6pc (as of last night), Firefox(mac).

It should look like this: www.siliconhenge.com/keystone

screenshotCollapse )

Does it look like that to you?

A recent check suggests it's doing some odd things in my version of IE.
Wednesday, April 27th, 2005
11:08 am
The zen of css
Css examples:

bateleur said something elsewhere about using css for evil. What examples do people have of good and bad css? (I ask for bad css, not just because of the object example in what not to do but because some of my better ideas have come from seeing a completely b*ggered effect and wondering what would happen if you did that intentionally.)

There is of course, as I think everyone knows, the Css Zen Garden project. There are a great many potential styles for that site. Some I like, others not so much.

Ths Css Vault and Css Beauty are both showcase sites for highlighting attractive use of css. Stylegala does this as well but with articles and tips and tricks.

Css help:

I'm also linking here, although slightly off-topic, the CSS Creator list of useful websites although this should really be part of another post soliciting useful design links.

Note: I may well return and edit this post later. That's likely to happen a lot in my posts to this community, either to let people know when I've fixed a problem, or to update a post linked in memories with better information, or to insert cut tags, or just for fun. LJ may drop things off friends lists at different rates but I think with this kind of community it'll be more useful to edit posts than clog up the airwaves with more stuff.
About LiveJournal.com