Ask MetaFilter questions tagged with web and css

Which HTML/CSS/JS IDE do I want?

drjimmy11 — Tue, 27 Oct 2009 13:31:52 -0800

Which HTML/CSS/JS IDE do I want? So I've been doing AS3 development for the last few years, using Flex Builder, but am now moving back into HTML/CSS/JS. I've gotten used to having a fairly intelligent IDE and I'd like to not go back to the bad old days of having to type every single param and property from scratch every time. (I'm looking for code help, not just highlighting.)

I have tried a few but none seems to have everything I want:

1. Dreamweaver:
Pluses: When you link to a stylesheet, you can CTRL+space and get a list of styles to choose from.
Minuses: Weak support for JS. (no auto-complete at all)

2. Aptana:
Pluses: Seems to have excellent JS support, including major AJAX libraries.
Minuses: Unless I am missing something, I can't choose Css styles off a list, and that is a major major timesaver for the work I'll be doing.

3. HTMLPad 2010:
Plusses and minuses seem about the same as Aptana, plus it costs money. (DW CS3 is already installed on my work machine so no cost there.)

So, am i doing something wrong with Aptana? Is there another piece of software I'm not aware of? Or should I settle for DW for html/css and Aptana for JS? (The work will probably be 80% or more on the html/css side.)

thanks!

Pimp my CSS please. Before I kill myself.

miss lynnster — Fri, 12 Jun 2009 11:34:41 -0800

I'm a designer and usually people do programming for me. I'm trying to teach myself how to customize Word Press themes all by myself though... and I thought I was doing pretty well. But then I had people look at it in other browsers. Yuck. Apparently it loads slowly for other people at times, the slideshow doesn't go all the way across, just all sorts of crap. I tried to do verification and there are a bunch of errors. I need to figure this out and move on!

I just really don't know how to fix any of these things. I was already proud of myself just for figuring out how to do the new stuff I've already done. My head hurts.

Can you help?

Oh, and the theme I customized for this was "Modularity" by Graph Paper Press.

CertificationFilter: Help our web/graphic design team find appropriate certification's for our field.

pghjezebel — Fri, 24 Apr 2009 06:10:37 -0800

CertificationFilter: Help our web/graphic design team find appropriate certification's for our field. Where I work a lot of importance is put on getting certifications. Our boss would like to find a standard certification that everyone in our graphic design department can receive.

Some of us are strong programmers, while others are heavily into the design end of things. We all deal with .NET and 508/accessibility on a daily basis.

Finding something that fits for all of us across the board as well as meets the approval of our boss has been a little tough.

What would you recommend?

Dealing with nested floats in CSS?

Wild_Eep — Fri, 19 Dec 2008 12:08:36 -0800

Care to help a CSS newbie with float-related positioning issues? I'm trying to add a form to my WordPress site via the FormBuilder plugin, but the form jumps below the two floated sidebars rather than directly after the post text. FWIW, I'm using the Cordobo Green Park theme.

I've got FireBug installed and I've been attempting to determine what indeed is going on, but this problem exceeds my meager CSS skills.

I'm pretty sure that the 'clear:both' property is in here when it shouldn't be, but the form elements are floated-left, and I haven't found the proper combination

When I emailed the author of the FormBuilder plugin, I received this response:

"I've been looking at your site, and it seems to be related to a lot of quirkiness with your template system. The clear tags seem to be interfering with the display of the sidebars and affecting the content.

I tried messing around a bit with the CSS in firebug but wasn't able to get it to look quite right.

I suspect it might work better if you were able to put the comments div inside the entry div. Not sure though, just a thought."

Custom fonts online... again?

electric_counterpoint — Fri, 19 Dec 2008 07:29:25 -0800

What're the best practices these days for including custom fonts in web design? Last time I looked into it, around a year and a half ago, sIFR was big, but I don't like the hit to usability (no right clicking, no highlighting regular and replaced text together, etc.). I know newer browsers support CSS embedding, but I don't believe that they have a significant market share yet. I'm guessing that, since I still don't see a range of nonstandard fonts on the web, there's still no perfect solution. Any other imperfect solutions I should know about, though?

This is all on a whim, understand — I'm only dealing with a personal website and a few nice, free fonts are my candidates. I'm only thinking of doing headers and page titles. If the state of the art hasn't advanced much, that's fine; I just thought I'd check in.

(To preempt any sidetrack, the free fonts I mentioned above are licensed for web display — I just checked.)

How to fix a website and make it compatible in firefox AND IE?

bigcheesegump — Fri, 29 Aug 2008 18:09:18 -0800

I need some help with a CSS/HTML issue as well as an Internet Explorer issue. I created an online portfolio and have been trying to update the design to make it more user-friendly and more aesthetically pleasing. However, I have run into a few road blocks.

This is the new design that I would like to implement. If you are using Firefox, you should see it as I see it. However, if you are using IE, it is a mess. What can I do to stop this? From brief research, it looks like it is an issue using the position:absolute style tag in my css file. Is there a way to make that design work for both IE and Firefox.

Second, if you navigate to this page you will notice a pdf file that is truncated in height. I cannot for the life of me figure out what is causing this. (The other pdfs on the web site are not configured correctly and I am aware of this)

Any help in figuring out these problems would be appreciated. Thanks!

CSS, JQuery, PHP and Caching: Best practices?

odinsdream — Wed, 20 Aug 2008 09:29:50 -0800

CSS, JQuery, PHP and Caching: What are the best practices for creating dynamic CSS with JQuery and PHP? Examples inside. I'm using PHP to dynamically create links and their associated CSS. I'm doing it dynamically because the number and positioning of these links is dependent on the selected month.

PHP inserts these CSS declarations into the HEAD tag. This seems to work fine on Firefox, but IE apparently caches the HEAD tag. This is a problem when navigating to pages for other months since the number of days will change.

Since I'm also using JQuery for the first time in this project, I wonder if I wouldn't be better off setting the CSS with that, rather than with PHP. The problem with this would be that I'm now mixing math and functions between the PHP sections of the site and the javascript sections. Is there a better way?

An example can be seen here. Source code for the same is available here.

The hover links over each day in each graph are created with a PHP loop based on the number of days in the month. The CSS to position them properly above each day is also created with a PHP loop.

The problem arises if a user selects an old month with a different number of days. Since IE caches the head tag the user only sees 20 day hover links, rather than 30 or 31.

Online documentation, tutorials or book references are very much welcome. Also, if I'm just completely going in the wrong direction please let me know.

Help my site be more Muxtape-y

Blandanomics — Thu, 14 Aug 2008 14:36:00 -0800

How can I get the CSS "color" property to choose randomly between a prelisted set of colors? I'd like to find some sort of script will color my links differently on every refresh.

I see that Muxtape does something like that on their front page.

Any idea how?

I need to improve my CSS

Foam Pants — Fri, 11 Jul 2008 11:04:31 -0800

I am seeking some very specific CSS advice. I learned CSS on my own several years ago. I don't work with anyone who does web design and I think I am suffering from the lack of constructive criticism. I know that my CSS is weak but I have no idea what I should be doing to improve it as I don't even know the shop talk words that would help me find new ideas on the web.

I am about to embark on a rehaul of the three websites I manage and will be implementing a tabbed layout. I have been reading A List Apart to get some ideas. I can't stray much from the look of the page. If you could make me change two things I am doing in my stylesheet that you think are horrid, what would they be? Are there some online resources that you think I should be using?

My basic page
An entry page

My stylesheet

How can I fix my weirdly rendering navigation tabs?

goodnewsfortheinsane — Thu, 10 Jul 2008 18:30:19 -0800

What's wrong with my CSS that makes top the nav render like this or this on some browsers, and how can I fix it? This is an example of a desired rendering, and here's is the CSS. Thanks in advance, guys & gals!

web design term project ideas?

tamarack — Sun, 29 Jun 2008 23:09:35 -0800

Idea Filter: I need to create a six-page website for a term project in web design at uni (intro level). What to do it on? I have been given the go-ahead to choose a topic of my liking for my term project in web design. I find I just keep making the same site layout time and time again and I am in need of some new ideas, vague or specific suggestions, or links to other people's favourite small websites. Any creative inspiration is much appreciated :)

I'm looking for an objectively based survey of websites which use css-based positioning versus tables as layout.

jeremias — Thu, 12 Jun 2008 06:42:04 -0800

I'm looking for an objectively assessed survey of websites which use css-based positioning versus tables as layout. I'm not looking for inspiring sites or well-designed sites, just a recent survey of websites using css-based layout. Ideally it would be something like this w3schools statistic chart on Browser statistics and ideally it would also offer a comparison of table-based layout sites. My guess is anyone doing this would be using a representative sample as the sheer number of sites is overwhelming.

Help, visited messages within Gmail won't change colors.

debu — Fri, 06 Jun 2008 02:05:57 -0800

I have Firefox 3 color options set so that visited links turn a dark Grey when clicked, every site seems to work with this but the sender and subject lines in Gmail.. What's strange is the links on the left hand side of the Gmail page (Inbox, starred, sent mail, drafts, etc ) go dark when clicked on. Does anyone know if Google uses some special CSS or something on the right hand side, can this be overridden so the visited links will turn the Grey I have checked?

wordpress template is screwed up

clockworkjoe — Sun, 01 Jun 2008 11:47:28 -0800

Wordpress/web design problem-my custom template is screwed up and I can't figure out how to fix it. Please help. I just started a wordpress site for my blog. I created a custom template for the page. However, while the code is right, the design is screwed up. The sidebar is at the bottom instead of being at the side. You can see it at raillery.tv/blog

What am I doing wrong?

You can see the code here http://forums.somethingawful.com/showthread.php?threadid=2718078&pagenumber=26#post344233403

Whose line-height is it anyway?

goodnewsfortheinsane — Sun, 04 May 2008 07:51:28 -0800

What's causing these unruly line heights in my web page and how do I solve it? It's the site linked from my profile. Most of it is dynamic content so it changes fairly quickly; the snapshot linked above is how it renders for me right now, FF 3.0 b5, XP. It happens only occasionally, sometimes the lines are all the same height, as I want them to be.

I'm fairly certain I'm overlooking something, but what is it? Is it an inheritance issue? Should some other value be cleared first? Is it not line-height after all but paddings and/or margins? Something else?

Thanks in advance, guys.

Aquify Safari 3 form elements?

tepidmonkey — Mon, 28 Jan 2008 18:32:56 -0800

What should I put in a custom browser stylesheet to override and Aquify all web form element styles (buttons, text fields, etc.) in Safari 3.0.4? I'd like to undo custom properties like colors, fonts, and borders, and make all form elements display natively, using Aqua, like Safari used to do in previous versions. I'm essentially looking for the opposite answer to this question, using a custom userContent.css-esque stylesheet. (Thanks for your help.)

Semantic markup and the world wide web: non-noob needs an explanation.

josh.ev9 — Sat, 22 Dec 2007 08:29:04 -0800

Semantic markup and the world wide web: non-noob needs an explanation. What is all this semantic markup talk about, and where can I learn more? I've been creating web tools/apps/etc. for years with well-written (as far as I can tell) and valid XHTML & CSS code. But over the last few years I've heard lots of people talk about "Semantic Markup."

What is this, and how can I tell if I'm already doing it? Why is it so good, and are there any problems with it? Finally, what are your favorite web and non-web resources for learning more?

Lining up columns in CSS

daksya — Tue, 18 Sep 2007 09:08:11 -0800

CSS: What's the deal with positioning? I am slowly setting up a new Wordpress blog, thanks to the generosity of pocams, and I can't get the hang of positioning in CSS. I'm using K2 0.9.6. The blog's here, and as you can see, the sidebars aren't where I'd like them, and the post text inexplicably overshoots the width of the containing div in both IE6 and FF2.

The relevant page structure in the stylesheet is

body.sidebar-dual

div#page
--div#header
--div.content
----div#primary
------div#current-content
------div#dynamic-content
----div#sidebar-main.secondary
----div#sidebar-alt.secondary
p#footer

The relevant positioning attributes:

#page
width: 950px;
margin: 0 auto;
padding: 0px 0px 10px;
position: relative;
border-bottom: 4px;
clear: both;

#primary
display:inline;
left:170px;
padding:5px;
position:relative;
width:560px;

#sidebar-main (right)
border-left:2px;
float:left;
padding:10px;
width:178px;

#sidebar-alt (left)
border-right:2px;
float:left;
padding:10px 5px;
width:158px;

I removed the 'left' and (negative) margins to get a fresh start.

How do I get a regular 3-column here? Thanks.

What web books do you recommend?

Catch — Mon, 25 Jun 2007 21:46:09 -0800

Wanted: 'WAI for dummkopfs'. Please recommend your favourite dead tree books on web design, usability, accessibility - or anything you wish the average corporate webmaster knew. I've been asked by a friend who is web-master at a small(ish) .govt Ministry to recommend books for the web-team's reference shelf.

This is a sudden and magical "end-of-financial-term-fairy" opportunity to grab some really useful resources.

Areas of interest include web accessibility (currently trying to teach others in the organisation WHY this is important), CSS and content management.

But any recommendations for truly sterling books on web-related topics will be welcome - I'll make him bookmark this thread for future reference.

So: books that you've read and referred to so often that they are dog-eared, books that made a lightbulb go off in your head, books that gave you great lines to fling into arguments. Please.

Can I make different categories of link text on a web page show as "unvisited" after different intervals?

lorimer — Thu, 21 Jun 2007 05:44:00 -0800

With Javascript, CSS or anything else, can I make different categories of link text on the same web page behave differently? Specifically, if I wanted to make a page listing some links I need to visit daily, some I need to visit weekly and some I need to visit monthly -- could I make each category of link text change from "visited" color back to "unvisited" color after the appropriate number of days? Or if this can't be done, how would you solve this need (in a visual way, rather than just "keep a list manually of when you visit each")?

I forgot HTML, I forgot CSS

ztdavis — Sun, 22 Apr 2007 21:29:06 -0800

In making a gallery page for a website, what is the easiest way to have a scrolling area for clickable thumbnails that bring up a larger image, as well as some information about the image, in a table cell above? Specifics, examples, many self links, and my (mangled) code so far available inside. For starters: I want to look like I have it here, but -- you know -- working and all. The three thumbnails at the bottom should be just three of many in a horizontally scrollable area about as tall as they are. Click on any one of these will change the larger image as well as the title of the image and perhaps some other information. The "next" and "previous" links up top would, as you might guess, take you to the next and previous images in the row of thumbnails.

Sounds fairly easy, at least it should be. I just haven't designed a website in four years and I never knew more than pidgin HTML and CSS to begin with. I don't want to use flash, even though I know it might be an easier way to go about it. I have thought about frames, but have yet to try it because I was hoping to just do it on one page if possible.

The rest of my malformed examples have the table borders set to 1, which should make it just a hair easier to follow along at home.

Here is the stylesheet, which has an impact on the spacing of many of the table cells on the site and might make some stuff make a little bit of sense.

To summarize the site structure:
The top row is two cells with colspan each set at 2.
The second row is the largest with two cells, a narrow cell for navigation and a big wide cell for the main content (with a colspan of 3).
The third row is one empty cell (just to be a spacer under the navigation cell) and on most pages has three cells, each with one thumbnail image. For this particular page I want it to be a long row of thumbnails.

In example 2 I have created a new row at the bottom and given it a table with the property of "overflow" set to "scroll". The site didn't like that.

Example 3 has a new table nested into a new row. The result is still very weird.

Example four starts to work, but still no scrolling. Example five is similar, just with a ton more thumbnails. Both of these have a table nestled in one of the cells of the third row. This is the closest to what I want so far, but it still doesn't scroll

Example six has just two cells in the bottom row, and many thumbnails simply dumped into the rightmost one.

That's where I am right now. I don't even know if this is something simple that I am stupidly missing, or something complex that I shouldn't bother with.

If you want to play with the code and see what it looks like at home, the site URL is http://www.welldisposedcameras.com
Images are in the /images folder and thumbnails are in the /images/th/ folder the CSS is just /stylesheet.css (as linked above).

Aside from all this, I haven't even come up with a good idea for linking the thumbnails to the image. Am I going to need to create a separate page for every image and link to it with every thumbnail?

In case any one wonders, this is this and the images are from one of our members. I want to finish the site and get more cameras back from users before I post this to either Projects or MeTa.

Sorry if this is obvious or stupid. Thanks for any help!

Safari, You've Let Me Down

miss tea — Thu, 19 Apr 2007 06:59:48 -0800

What's the best way to have a CSS rule apply only to Safari? I know about a million IE hacks, and half a million old school ones for Netscape. But I've come across a seeminly intractible Safari rendering difference, and I think the easiest way to deal with it should be a Safari-specific rule. But I don't know any workarounds. I thought of applying a separate safari stylesheet, just for that one rule, but I can't figure out what the syntax is-- I am used to the if IE syntax which is mocrosoft proprietary.

Any advice or help is much welcomed!!

CSS and Standards-Based Enterprise Software Solutions

syzygy — Tue, 06 Mar 2007 10:53:14 -0800

Is CSS and standards-based design ready for use in web-based enterprise software solutions? I'm a consultant leading a team of developers on a project that's building an enterprise software solution (think sector-oriented ERP) which has a front end that is 99% web-based.

Most of my developers have reasonable thick client experience, or reasonable web experience using tables for layout. None of them have much CSS experience. I'm pretty comfortable with CSS and standards-based design/layout, but I don't have time to program on this project, and that's not my job description (I take the specifications from the customers and bring them down to the software engineers). I've also never used non-table layouts for more software-oriented solutions (as opposed to websites whose main focus is dissemination of information).

Is CSS and standards-based design ready for use in web-based enterprise software solutions? If so, what are some good resources that deal with this topic?

Technical details: working in ASP.NET 2.0 and developing solely for IE 6+ (for right now - they'd like to make the application cross-browser compatible, down the road).

CSS Issue in Win IE. Help please!

Timen — Fri, 16 Feb 2007 04:38:59 -0800

I run a website and am having a little difficulty getting the CSS to work properly in Internet Explorer. I am trying to implement the search field into a little 'pop-up' in the navigation. It works properly in FireFox and Safari, but in IE for Windows the pop-up shifts diagonally instead of directly below. Any ideas on how to fix this?

Advanced CSS: can I float right with cropping on the left?

jragon — Tue, 02 Jan 2007 23:02:55 -0800

I want to float a css element to the right and have the left side get cropped when I shrink the window size. (Self link example) View that link in Firefox and you'll see the left side of the page disappear as you make the window smaller, with no scrollbars.

View it in Safari or IE6 (though IE6 has other more serious problems too) and the left side of the element fixes against the side of the browser, causing horizontal scrolls to appear.

Any thoughts? I also wrote this code example to simplify the issue, and I see the same problem: