With the launch of our FindnSave beta redesign we've put a lot of effort into building a site that supports responsive design and scales well on a variety of devices. Below are examples on iPhone, iPad and Chrome on the desktop.
I had this question today and it turns out the answer is pretty simple
- First, it’s important to note that as of this writing IE 8 (what I tested) doesn’t render rounded corners as implemented in jQueryUI v1.8.14 though I understand there is a plugin that enables that feature.
- To remove rounded corners on all elements of jQueryUI (for Chrome, FF and Safari) you can include the following in your own CSS:
.ui-corner-all { border-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-topleft: 0px;}
}
Now, credit where credit is due.
One of the improvements I've been wanting to make to my blog theme is support for icons next to URL links which indicate if the link is offsite, meaning that it'll cause you to browse to another domain. As you can see from
this search there are lots of different approaches largely because not all browsers support the latest standards. For the time being I've opted for a CSS only solution which means it's only supported in Firefox (2.0 is what I've tested) and IE7. IE6 and less will continue to render the links normally without any offsite icon indicator. I've opted for this route because it was really easy to add the following CSS.
1 #centercolumn a[href^="http://"] {
2 background: url(/blog/themes/stevewhite/images/external.png)
3 no-repeat center right;
4 padding-right: 13px;
5 }
6 #centercolumn a[href^="http://www.stevetrefethen.com"],
7 a[href^="http://stevetrefethen.com"] {
8 background: transparent;
9 padding-right: 0;
10 }
This means that offsite links appearing only in the center column will be denoted with an icon like this
. Supporting IE versions < 7 is a bit more involved than I have time to $d(spelunk). I came across the above solution by digging into the theme used for $g(MediaWiki) which is the wiki engine the Delphi R&D team uses. It has a solution for IE6 but it's more involved than I care to dig into. On my blog, IE7 usage has eclipsed IE6 (50% to 44%) so it's a matter of time before this becomes a non-issue anyway. Regardless, if someone has a simple solution that works for IE6 which they'd like to share I'd be more than happy to add it.
Joel on
Software blogs about a CSS based slide show system called
S5 which is really a cool
idea. I can see lots of potential in using something like this particularly now
that
Delphi has an HTML
based Welcome page.
In Delphi 8 we didn't
really provide any support for developing CSS/stylesheets which any web
developer knows are an important part of web development. Well, fortunately Diamondback (the
next release of Delphi) supports CSS syntax highlighting as well as CSS code
completion making it easier to build stylesheets where you don't have to
constantly refer to reference material in order to create a new style. I highly
recommend familiarizing yourself with CSS so that you can leverage the many
advantages it provides. Here is a great site that
has lots of information to help you learn CSS.
Another issue in D8 was that the designer wouldn't always resolve relative
file locations for things like images and stylesheets correctly which has been
fixed in Diamondback.
Here are a few pointers regarding how relative paths are resolved in the
Diamondback IDE:
- If the file is part of an ASP.NET project then it's references will be
resolved relative to http://localhost allowing
for use of virtual roots to refer to global image and stylesheet locations.
- If the file is not part of a project (like a standalone .htm file) then any
relative URLs are resolved relative to the directory path of the .htm
file.
Basically if the file is part of an ASP.NET project then any relative URL
references in the file are resolved through http://localhost rather than the file system.
Since this
post seems to have been pretty popular I thought I'd build on it a bit and
provide a few more examples. In my previous post I created an HTML page that had
the stylesheet information embedded in a STYLE tag within the page header which
is actually a bad idea but it helped keep the example really simple. In these
examples I've broken out the stylesheet information into individual .css files
and will illustrate a few different layouts using the exact same HTML used in my
previous example (sans the STYLE tag of course).
I've created both left
and right
column layouts using the exact same HTML that I used from my original example.
The difference with these pages is that I've hidden the column that I don't want
on the page while the DIV for the column remains in the HTML and the CSS
dictates that it's not displayed nor does it consume space. Additionally, I've
made the left/right column fixed width which is probably more consistent with a
typical website layout.
[Update: Feb 14, 2007] If you're reading this on www.stevetrefethen.com/blog this site is based on the CSS three column layout discussed above.
After a recent post by Nick
Hodges asking “Got a good stylesheet that works on all browsers, and allows
for a three column/page-wide header/page-wide footer layout, and that doesn't
behave strangely when the browser is sized?” I finally broke down and decided to
try and meet that challenge. What I
came up with seems to work well in IE6 and Firefox 0.9.3 on WinXP and
Safari, Firefox and IE (all latest versions) on Mac OSX. I think it's a pretty
good example of how to use stylesheets to get a layout that works without
requiring the use of tables and provides all of the elements of many modern
websites.
It's entirely possible that this idea is not new or unique so I don't claim
either but it's a small, very workable solution.
Give it a shot and let me know how well/poorly it works for you.
UPDATE: I've added a second
page where the footer appears at the bottom of the browser by setting the
height of the maincontent DIV to 95% of the height of the browser which seems to
work pretty well and still doesn't require Javascript.
UPDATE #2: Since Carlos has issued (yet) another challenge I spent about 3-4
minutes tweaking my original
page and came up with a few minor modifications that allows for a header,
footer (at the bottom of the page) and three
full height columns all without Javascript and only using some pretty simply
CSS. I've tested in IE6 and Firefox 0.9.3 (my browser of
choice) and both work about equally well. Now, I haven't tried using this page
in a real world application so I'm not entirely sure how well it would work but
I it sure seems to me like it would work just fine.
[Updated: Jan. 13, 2010] Thanks to the
Internet Archive I was able to resurrect links to the files above.