I need to make buttons and boxes on a web page to meet a client's design spec. There are lots of buttons and boxes with rounded edges and shadows and such, and unfortunately I have to support old lame browsers.
I've seen many ways of dealing with these. Since it will vary in size (height and width of the items must fit the contents), I can't use a fixed graphic. The approaches I've seen are:
1) use a table, with 9 cells. Use a background image on each of the 4 corner and 4 edge cells.
2) use 4 creatively nested divs. Use a single background image, bigger than any of the boxes will be in height and width, using css to position them in the corners. Something like this:
<div class="boxDecorationBL">
<div class="boxDecorationTL">
<div class="boxDecorationTR">
</div>
</div>
<div class="boxDecorationBR">
<div class="content">
Loren ipsum dolor amet!
</div>
</div>
</div>
and then stuff like this in the css:
boxDecorationBL {
background: transparent url(boxdecoration.gif) no-repeat bottom left;
}
Both are ugly in my opinion (I wish I could just use a single div rather than cluttering the markup with that sort of junk), and I'm concerned the latter won't work right with alpha channel images, since they overlay each other.
Are there other, better, ways that enlightened developers use?
(I have considered solutions such as doing it with css3 -- everything I've needed can be done without images in that case -- and then using javascript to accomodate older browsers by plucking out elements and replacing them with more complex structures, such as one of those above. I like that for the fact that the markup stays cleaner.)
While this is something I'm lucky enough to not have to attempt, as a hobbyist rather than professional1, it appears that CSS 3 Pie2 can enable many CSS 3 effects in Internet Explorer, albeit not without some problems3. It should, however, reduce the inordinate amount of work required to enable the apparently-required cross-browser pixel-perfection.
It's worth noting that, if you're able to include CSS3 Pie, it might be worth considering html5shim4, to enable the use of html5 elements in your designs and layout.
Similarly, Rahpaël5 could be used for any requirement for SVG graphics, but this seems even further outside the scope of your question.
Finally, as an addenda, I've heard some good things about Modernizr6, which, according to their home page, is:
...a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
My inclination, however, is as noted in my comment: effect the appearance in the modern browsers (IE9 and 8, so far as possible, Firefox, Chrome, Safari, Opera...) and then make the point that supporting IE <8 requires a lot more work, and greater time.
Make an approximate, and reasonable, quote that would represent the cost in terms of your time, and the cost of that time to your clients/employers. Once you've given them the quote, ask if they're willing to accept the essential cross-browser differences, or whether they're willing to pay for the additional time.
Footnotes:
Or possibly unlucky, since I don't have a job doing something I quite like doing...
CSS 3 Pie.
Questions tagged with [tag:internet-explorer] and [tag:css3] here on Stack Overflow.
html5shim.
Rahpaël JS.
Modernizr.
make it with good graphic for the modern borwsers and for people who use old browser just show a message like "please use another modern browser" ( is easy to check browser with php ), or just use another css for old browsers, this will save you a lot of time
Related
I'm developing a desktop software application which looks for errors in web pages and can highlight them in the browser. Highlighted areas are somewhat arbitrary. They could be one word in a p tag, an entire a tag or an img.
In the past I've done this by rewriting the html and adding styled span tags around the highlighted area. The downside is that quite often the highlights can be obscured. For example where in image is in a div exactly its size with no overflow, any applied border, background etc. will be obscured.
What's the best way to approach this? Are there any good examples of this being done in popular software / webapps?
Limitations: I can't use JS (files are local and browsers often block this). I can however user the latest standards. The output doesn't have to validate, as long as it works on common modern browsers.
Since background colors and borders can't be used, I think you'll need to place something on top of the offending element or text. Perhaps you can use an absolute or fixed position <div> element with a partially transparent background.
Of course, this could get tricky with getting the coordinates. But you might be able to use the same thing you used to do with the span and add some dummy elements within it to trick it into thinking that 0,0 is right where your span element is.
[Note: for those who may be confusing this question with "why not use tables for HTML layout", I am not asking that question. The question I'm asking is why is a grid layout fundamentally different from a table layout.]
I'm researching CSS libraries (in particular Bootstrap) for a project. I am a programmer rather than a web designer and I feel I could benefit from a library that encapsulates good design.
We all know that it's bad practice to use HTML tables to accomplish basic site layout because it mixes presentation with content. One of the benefits provided by CSS libraries like Bootstrap is that they offer the ability to create "grid" layouts without using tables. I'm having a little trouble, however, understanding how their grid layouts differ in any meaningful way from the equivalent table layout.
In other words, what is the fundamental difference between these two examples of HTML? Am I wrong in thinking that the grid layout is simply a table with another name?
<div class="row">
<div class="span16"></div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
and
<table>
<tr>
<td colspan=4></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The difference is that the first example is semantically marked up, assuming the data being marked up is not actually tabular. <table> should only be used for tabular data, not for any data which happens to be displayed in a layout similar to a table.
It is correct though that using CSS packages like Bootstrap, which require you to assign classes to HTML elements which are not semantic but presentational, reduces the separation of content and presentation, making the difference somewhat moot. You should be assigning semantically meaningful classes to your elements and use lesscss mixins (or similar technology) to assign presentational behavior defined in the CSS framework to these classes, instead of assigning the presentational classes to the elements directly.
Say:
<div class="products">
<div class="product"></div>
</div>
.products {
.row;
}
.products > .product {
.span16;
}
Note that I say should. In practice this is not necessarily always the more workable option, but it should be the theoretical goal.
I believe that CBroe comment is the best option, so I chose to clarify it.
Avoid div's. A div should be your last resort, not your first option. Instead, try to use Bootstrap classes on the actual elements. For instance:
<form class="container">
<fieldset class="row">
<label class="span4" for"search">Type your search</label>
<input class="span6" type="text" id="search" />
</fieldset>
</form>
It is a shame to use fieldset to contain a single field, but it is semantically best than using a div for the same thing. The HTML5 standard defines many new container elements, such as article, section, header, footer and many more. In some cases you will have to use div's, but if you minimize it's use then your code will be way more semantic.
The fundamental difference is that you can "reflow" the layout with Bootstrap for different display sizes simply using media queries without needing to change your markup. For example, I can decide that on desktops, I want your 4 divs to be on same row because user has high resolution wide display but on phones I want 2 dives on one row and next divs on next rows. So this way I can adapt my column count in each row using media queries. If you use hard coded HTML tables then it is very difficult to do this.
Having said that, I don't really like bootstrap implementation for the following reasons:
It has breakpoints hard coded in pixels. This means, as phones and tables advance in display resolution, your website may start showing unexpected layouts on those devices. Pixel count is poor proxy for display size.
It limits maximum used display area to 1170px which is again a bummer for users with nice wide displays they can actually use to see more content in your app.
Bootstrap's layout is not source independent, i.e., you can't change column order that is set in HTML. This is however more of a pedantic point.
The default layout is for very small resolution and higher resolution layouts trigger only when media queries fire, which IMO, is a poor choice considering phones will continue to have better resolution and sooner than later your website would have default layout set for outdated mobile devices.
Bootstrap layouts are not truly "worry free" in the sense that you have to read their fine print to see all the bugs and browsers they didn't see worthy of supporting but which you may care about. If you are targeting users in South Korea or China, you would be in for surprise, for example.
So, not everything is gold in bootstrap and their approach is not necessarily always the best possible (as an aside, one other thing I despise in bootstrap is their obsession with so called "jumbotrones" - those real estate wasting inconvenient in-your-face headers - which I hope community doesn't start taking as "new standard"). Personally I use CSS table layout (display:table) these days which has similar benefits as bootstrap without hardcoding <table> in my markup. I can still use media queries to rearrange rows depending on portrait or landscape orientation, for example. However the most important benefit is that my layouts are truly pixel or even percentage independent. For example, in 3 column layout, I let content to decide how much space first and last columns should take. There is no pixel or even percentage width. The center column grabs up all the remaining space (which is good thing for my app, but it may not be for others). In addition, I use ems in media query break points which bootstrap surprisingly doesn't.
I use the Bootstrap grid for page layout, tables for tabular data.
I think of the grid in Bootstrap, not as a grid in the developer sense, like a gridview control, but more in the design page-layout sense - as a grid to contain the page contents. And even though the Bootstrap grid could be also used to create a conventional grid containing tabular data, as deceze pointed out, this kind of grid is better suited for HTML tables - which are still acceptable to use in this scenario.
if you just use tables i think you will miss out on alot of flexibility in re-sizing your document for mobile/tablets without having to make a separate page for each device. once your table structure is defined all you can really do is zoom in and out.
While there's not necessarily much semantic difference between the two sets of markup (since the classes used by Bootstrap's grid system are indeed purely presentational), one very important distinction is that the grid system is much more flexible.
It would be very difficult, for example, to make your table-based layout respond to different screen sizes. There's no way to tell the browser to display one td element below another td in the same row. Whereas with the div example, that's easy to do, and the same markup can be presented in different ways even when the classes are "presentational" in the sense that they define the relative proportions and positioning of the elements on the page.
If I may, I'd like to summarize what I gathered from the other comments and the link explosion I experienced from this page:
The problem with using tables isn't the grid layout, it is the attempt to express it with HTML instead of CSS.
Bootstrap allows grid layouts through (mostly) pure CSS, which is why it is OK. The 'mostly' part comes because your HTML will still be contaminated by your layout data, but more subtly:
<nav class="span4"> ... </nav>
<article class="span8"> ... </article>
This is surely significantly more semantic and maintainable than the old tabular designs, but the 'span4' and 'span8' are still display-data embedded into our HTML. However, since design can never be truly be decoupled from our data (e.g., nested divs), this is a reasonable price to pay.
That being said, even this coupling can be broken, if you use some more modern CSS features provided by a pre-processed language such as LESS. The same example:
<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>
Coupled with the following LESS:
#secondary-nav{
.span4;
// More styling (padding, etc) if needed
}
#main-content{
.span8;
}
This creates fully decoupled HTML and Stylesheet, which is ideal, because the HTML is cleaner and more readable, and redesigns can be made with less HTML modification. However this only works if you use LESS or some other CSS pre-processor, because CSS currently does not support mixins (AFAIK).
We already use LESS in my workplace, so I know I'll be pushing towards using this type of solution. I'm a very strong believer in semantic HTML and data-design decoupling. :)
Basically DIVs are DIVs & Table elements are simply table elements. The problem with tables is often just keeping track of all of the columns & the rows because it is ultimately a strict data construct. DIVs are far more flexible & forgiving.
For example, if you wanted to to take the four DIVs with the class that equals "span4" and just change them to a 2 column width, all you would need to do is adjust a wee bit of CSS for the outer class "row" and maybe the class "span4". In fact when doing DIVs like this I would avoid calling individual DIVs "span4" or some other number.
My approach would be to create a parent wrapper DIV that is called "rowspan" and the inner DIVs would have some generic ID like maybe "cell".
<div class="rowspan">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
Each "cell" class could have a width of 100 pixels for example, and then the parent "rowspan" could be 400 pixels. That would equate to 4 columns in a row. Want to make it 2 columns? No problem! Just change "rowspan" to be 200 pixels wide. At this point it is all in CSS so it's easy to do without rejiggering page structure in the DOM.
But with tables? Not easy. You would have to basically re-render the table with </tr><tr> tags to create new rows.
Version with table, tr, td depends on browser algorithms - wrapping, dynamic width, margins, centering etc.
Version with div can be more easily tuned by css and scripts.
JS Fiddle Link http://jsfiddle.net/Xfvpu/1/
Okay so I have a document with xhtml doctype and I use the proper br / tag
but for some reason the gap between two images renders differently in Firefox than it does every other browser.
The page is can be found at http://www.safaviehhome.com/Rugs/Area-Rugs.html
the CSS is all mixed up unfortunately so I can't explicitly post it, but the two images are within a DIV wrapper, and the images themselves are not in seperate divs. They both have image maps, and the size between the two images width only differ by around 20px.
In between the two images are two br /
tags, I tried fiddling around in Firebug but could not figure it out .. And I won't be happy until I figure this out .. it's pissing me off! :)
The difference between other browsers and Firefox is around a 10px difference .. Firefox adds extra spacing .. I'm not asking for any help specifically, just wanted to see if there is some rendering issues I'm not aware of so I can put this issue to rest.
Look in other browsers vs Firefox to see what I mean .. I would really appreciate some help I need to figure this out for my own knowledge.
You cannot rely on using <br/> for vertical spacing. You need to use styles, such as
<div style="margin-top:5px">image goes here</div>
Or even:
<img style="margin-top:5px" src="yourimg.jpg" />
In my experience browsers are sufficiently consistent if you use this approach.
Edited to add:
But (and I can't stress this strongly enough): browsers will never be entirely consistent. Designs which assume that 100% consistency is possible will fail. (If this seems harsh, try getting through one day using only your smartphone's browser. Yuck.)
While I do not know the exact reason why Firefox acts like it does, I can offer an advice. From my experience using br tags for layout are, er, not the wisest idea, since you easily lose control of the exact spacing it creates. Like in this case, where it seems that Firefox intreprets two br tags as two lines, whereas at least Opera take the first one as a line break after the map and the second one creates this empty space.
You didn't ask for a workaround, but I can't resist: take a look at br-less alternative.
I've seen quite a few answers on this site which advocate using tables for a design because it can't be done using CSS and Divs... when in actual fact it can be done with a bit of ingenuity.
What are examples of things that genuinely can't be done?
The only one I've ever come across is vertically aligning a box within another box.
*edit: I suppose I'm mostly interested in unachievable layouts using CSS2
Vertical alignment of blocks or text.
Having elastic containers that stretch to the width of their content.
Having several "rows" with the same structure where "cells" are synchronized in width throughout all rows.
Having several "columns" synchronize their height (up to the length of the longest text block).
These are quite basic designer needs that appear in even basic design concepts.
Cells/columns issues can possibly be solved with CSS if you take IE8 into account, but it will be many years until its wide spread (even IE7 in 2-3 years hasn't reached the desired market share).
As for "ingenuity", it is not that good thing in software development. Tricks that your colleagues and you yourself after a couple of months will not be able to understand usually build up that code base that everyone either is scared to touch or determined to refactor/rewrite completely.
Remember the KISS principle. The simpliest way you do this, the more reliably it will work.
The answer to this question depends on a number of things:
How backwards compatible do you need to be? Including IE6 will decrease the capacity of pure CSS; and
How much of your site is fixed-width and/or fixed-height. There are certain things in CSS that become hard if not impossible in variable width and/or height situations.
Side-by-side content is a problem for CSS. You can use floats for this but if the sum of widths exceeds the width of the container, the tail end floats will fall down below. Tables are more capable in this regard as they will squeeze columns where possible to make things fit and cells will never be split onto new rows.
Vertical centering you mentioned. Its trivial with tables and hard or impossible (depending on compatibility and fixed or variable heights of the container and the item) in pure CSS.
You may also be referring to hover content. IE6 only supports the :hover pseudo element on anchors. Javascript is required for that browser for :hover-like behaviour.
Basically if what you need to do can be done fairly trivially with pure CSS then do it. If not, don't feel bad if you have to use tables despite all the anti-table fanatics (and they are fanatics) jumping up and down in horror.
If you want a relatively simple exmaple of this check out Can you do this HTML layout without using tables?. This is a conceptually simple layout problem that is trivial with tables and noone has yet posted a solution meeting the requirements with pure CSS.
"... when in actual fact it can be done
with a bit of ingenuity."
How about 'avoiding the need for ingenuity' as a thing that's hard to do in CSS.
;)
tables should be used for tabular data! We should always try to use the correct HTML for the given content in which to markup. So not just div's (span, ul, li, dl, strong, em ... etc) This ensures that the content is not just looking right but is right (for SEO and accesibile reasons)
By not using tables it allows us to transform the content from one look and feel to the next without having to change the HTML, see Zen Garden
For now though with current browsers CSS table like layouts can be done but are tricky. there are techniques to get round many of the issues, weather they are done though global wrappers with background images, or positioning fixes... where both articles also refer to using Javascript to progressively enhance a page to get those additional classes you may require.
or of course you could use some XSL as a middle ware to help do formating if processing from a CMS.
Alternate row colors in a table without manually (or with the aid of a script) assigning alternate styles to each row.
Determine one element's position relative to another. For example you can't use CSS to determine which position one box is in a bunch of floated boxes using the same class. Would be nice to for example know if one box is the first box floated, or the second, or the last.
Handle widows. A widow is a word that dangles off the end of a paragraph, that is a single word starts the last line on a paragraph. It's a big nono on print design, but in the world of web it's hard to control.
Floating elements in multiple columns, where text in each cell can expand the height of the element, but the entire row below must be pushed down if this happens.
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
| | |BBB| | |
--- --- ---
--- --- ---
|AAA| |BBB| |CCC|
--- --- ---
An image cannot placed in exact center of a cell with align attribute.It can be done with some brute force .
Sounds obvious but you can't change content with CSS, it can only be used for styling.
Rory, I think you're absolutely right. Vertical alignment can be done with line-height, and creating lay-outs in CSS really isn't that hard. In fact, it's far more flexible when using absolute/relative positioning and floats.
People still using tables for design should really brush up with the current standards.
Going on topic, with CSS3 coming up it's hard to think of stuff CSS can't do. Image manipulation, content manipulation, advanced selectors, it's all going to be possible. But if I had to name one thing, it's that with CSS you can't (and won't) be able to rotate elements.
I was unable to use a transparency to create a variable-height text area across all pages. I believe it's impossible. I ultimately just wrote a quick javascript function to reset the height after the page load, to get the layout to work. See http://peterchristopher.com to see what I mean by transparency for the text area.
There is absolutely nothing tables can do that CSS can't.
There seems to be a common misconception that HTML & CSS should be easy. It isn't. If you find yourself wanting to use tables then its your CSS skills that need improving not the technology (although the technology does obviously have plenty of holes that could do with improving).
I generally use a manual process:
Look at the page, figure out the semantic elements, and build the HTML
Slice up the images I think I'll need
Start writing CSS
Tweak and repeat different steps as necessary
Got a better approach, or a tool?
I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:
The page title is a top level heading
Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.
The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.
Section headers are h2, sections within those sections are h3s etc. Stack them up.
Use blockquotes and quotes where possible. Don't just surround it with ".
Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.
<label> your form elements.
Use <acronym>s and <abbr>s where possible, but only in the first instance.
The easiest: always, always give your images some alternate text.
There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.
That's just a few pointers, I'm sure I could think of more.
Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).
Well, when I build a website I tend to try and forget about the design completely while writing the HTML. I do this so I won't end up with any design-specific markup and so I can focus on the semantic meaning of the elements.
Some pointers how to markup things:
menu - use the UL (unordered list) element, since that's exactly what a menu is. an unordered list of choices. example:
<ul id="menu">
<li id="home">Home</li>
<li id="about">About</li>
</ul>
if you'd like an horizontal menu you could do this:
#menu li {
display: block;
float: left;
}
Logo - use a H1 (heading) element for the logo instead of an image.Example:
<div id="header">
<h1>My website</h1>
</div>
And the CSS (same technique can be applied to the menu above if you would like a menu with graphical items):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
IDs and classes - use IDs to identify elements that you only have one instance of. Use class for identifying elements that you got several instances of.
Use a textual browser (for instance, lynx). If it makes sense to navigate in this way, you've done good when it comes to accessibility.
I hope this helps :)
I essentially do the same thing Jon does, but here are a few other ideas:
Use Guides in Photoshop (and lock to them). Figure out all of your dimensions for each box/ region ahead of time.
Collect all of your dimensions and color hex values into an info file (I use a txt file) that you can easily reference. This will reduce your alt-tab tax and selecting colors in Photoshop multiple times.
After all my Guides are in place, I slice out the entire website into my images folder, starting with photos and grouped elements, and ending with the various background tiles/images, should they exist. (Tip: Use ctrl-click on the layer preview to select that layer's content).
Notes on using Photoshop:
Use Guides or the Grid.
Use the Notes feature for any pertinent information
Always use Layer Groups for similar elements. We need to be able to turn entire regions off in one click. Put all 'header' content in one Layer Group.
Always name your layers.
You can put each page template in one PSD file and use nested Layer Groups to organize them. This way we don't have to setup all of our guides and notes for each page template on a site.
No shortcuts :) but everybody works slightly differently.
This tutorial that popped up in my feedreader yesterday shows the process from start to finish and might help people who have never done it before but as you are an old hand it's just about streamlining your own methods.
EDIT:
The listapart link certainly is more automated for 'flat' designs where both imageready and fireworks have had pretty good support from day one and it's got better and more semantic with every release but if you have a more complex design it's the twiddly bits that make the design what it is and these have to be done by hand.
I just thought it was worth pointing out that in addition to the excellent advice you've had so far I'd recommend getting a printed version of the design, using a red pen to mark up all the block elements on the design you think you can spot and sitting down with the designer for half an hour and talking through how they envisioned their design working for the use cases that don't fit the static design.
What happens when more text is put in the navigation?
Is this width fixed or fluid?
Is this content pane to the right fixed height or fluid? If it's fluid why did you put a background on it that can't be repeated?
You have a border extending down the page that breaks two otherwise connected elements. Visually it makes sense, but semantically I not can't just use an li to house both those elements. What do you think is more important?
It'll also help you spot potential problems that you might otherwise not have realised were going to be issues until your elbow deep in css.
Not only does it make your job easier after a few times doing it your designer will get a much stronger sense of what is involved in marking up their work - some designers have real trouble comprehending why something they think looks visually very simple will take a few days of css tweaking to make work.
Some of the designers i know, usually uses Illustrator to make the design elements.
This page shows how to do it a little more automated.
Also, get to know the "Layer Comps" feature. I use this for changing button states.
Create layer comps for normal, hover, and active.
In each of these, set up the effects/color overlays and visible layers which belong with that state.
Save for web: go to a different folder for each state, unless it's easier to rename each slice (otherwise your hover button slices will overwrite your regular slices).