Ask MetaFilter posts tagged with css

Would it just be easier to tell my customers to buy a Mac?

pantheON — Mon, 06 Oct 2008 06:54:46 -0800

I designed this website on my Mac. The problem is that it looks slightly different on the PC (or Windows in VMWare) and my skills aren't advanced enough to figure out this problem on my own. More inside. Basically, when my site is viewed on a PC, I want it to look identical to what it looks like on my Mac (fonts, layout, everything). The problems are:

(i) the font is slightly different, which leads to
(ii) the spacing is slightly off (particularly in the three brown boxes below the main text area and in the nav bar in the upper right corner of the page), and
(iii) the right margin of the main text area (beginning with "There is nothing...") doesn't extend far enough to the right.

I would also like to make the page static. That is, I want to prevent a user's browser settings (e.g. for font size) from effecting how my page displays. My CSS stylesheet can be found here.

I'm sure this is easy for more experienced developers, but its all slightly beyond me. Any help from those with access to both platforms would be appreciated.

How do I access the drupal admin panel.

BoldStepDesign — Sat, 27 Sep 2008 14:56:44 -0800

Three drupal questions 1. I disabled the log in form on the main page, now how do I get to the admin panel? (Please note, I have a local install of drupal, php, MySQL and Apache for Dev purposes.) 2. How can I create drop down menus? 3. Is there a way I can change the layout for a certain page? Such as I want the main page to be two columns while others to be one with tables or something to that effect for grid data. How can I do this?

Why won't CSS rollovers work for me?

reductiondesign — Thu, 25 Sep 2008 15:16:01 -0800

I'm trying to put CSS rollover buttons onto my website. They show up just fine in Dreamweaver, but not on any browser. This makes no sense, about to go insane, more inside, etc. Alright, I hope someone here can help me.

I'm trying to put some CSS rollover buttons on a page, as so . . .

[MeFi is stripping out my HTML code, but it's basically a link--a href--with a class tag (="artisticroll") and some style for positioning.]
Note: I'm positive that there's not an error in this code.

. . . and this links back to my .css file, part of which is thus . . .

a.artisticroll
{
display: block;
width: 200px;
height: 23px;
background-image: url('artisticROLL.jpg');
}
a.artisticroll:hover
{
background-position: 0 23px;
}

. . . but it only shows up in Dreamweaver--not in any browsers. I've tried doing a local preview as well as actually uploading all the files onto my host and viewing it online. Nothing works.

This isn't the weird part. What's stranger is that I have other CSS rollover buttons on the same page that work just fine.

Code / .css except for working buttons:

[Same issue/code as above, except the class is "contactroll".]

a.contactroll
{
display: block;
width: 130px;
height: 60px;
background-image: url('contactROLL.jpg');
}
a.contactroll:hover
{
background-position: 0 60px;
}

As far as I can tell, there is absolutely no reason for some buttons to work and some not. What am I doing wrong?

Thanks for any/all help; I can provide more details if needed.

How do I override CSS from inside the BODY of the website?

Karmakaze — Tue, 23 Sep 2008 13:36:00 -0800

How do I override a website's CSS with a snippet in the body? The most common example of this would be the elaborate re-designs people do to MySpace pages using the profile field, though I've seen it elsewhere (even, briefly, here.) This isn't a matter of plain CSS coding, but how to use a snippet in a user-editable section of a page to override the whole design. I know it's possible to define classes inside the BODY of a HTML document but I've never gotten the hang of it. Are there tutorials available online that I could use to generalize the process? I'm sure it's straightforward enough if I can just wrap my brain around it.

Explain why headlines on some sites are outlined in Firefox 3

puffl — Wed, 10 Sep 2008 20:54:34 -0800

Why are headlines on a number of websites appearing only as outlines ever since I downloaded Firefox 3? The affected sites include jeffcroft.com (pic), problogger.net (pic) and copyblogger.com (pic).

Is there some setting I can change to fix this or is this poor coding on their behalf? Or is it intentional?

I'm surprised I haven't seen any discussion about this anywhere online because I've found it a very noticeable change on a number of websites.

(I'm on Mac OS X Leopard, by the way.)

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!

How can I lock iPhone orientation in Mobile Safari?

wmeredith — Thu, 21 Aug 2008 11:51:14 -0800

Is there a way to lock or hack an iPhone's orientation in mobile safari using CSS, HTML, Javascript or a combination there of? I am building a website for Mobile Safari users (iPhone, iPod Touch). I want to be able to "lock" the users orientation so that the website doesn't change to a horizontal display when they tilt the hardware. My Google-Fu has failed me, does anyone know how to do this?

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?

Changing a 2-column stylesheet/theme to 3 columns

jbickers — Wed, 23 Jul 2008 08:21:08 -0800

CSS gurus: Changing a 2-column layout to a 3-column one? I've been using this theme for a WordPress site, and it's great ... but it needs to become three columns instead of two. My CSS skills are passable and I've not attempted this kind of major stylesheet surgery before - is this easily doable?

It's a fixed width theme, so all I need to do is shave off enough room from the main column to facilitate a right sidebar that is identical to the one on the left. Any hand-holding would be appreciated.

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!

Are there any other coding nerds out there?

[insert clever name here] — Thu, 03 Jul 2008 16:27:26 -0800

Are there any good html and css forums that focus on writing semantic markup? Specifically, I'm looking for places to bounce ideas off of when I'm trying to write code to come up with the best ways of doing it. Sometimes things aren't as straight forward as "this is a paragraph, here goes the p tag!" A place where people live, eat and breath html and css! There are lot of forums out there for web design and coding, but I don't seem to be finding any that fit into this specific area. Kind of like if a list apart had its own forum/discussion area beyond comments.

Have you had a graphic converted to html and css?

davebush — Wed, 02 Jul 2008 06:15:14 -0800

I'm curious about companies like this one that convert Photoshop files to working HTML/CSS. If you've had an experience with one (good or bad), I'd like to hear how it went.

Fixing a maxheight issue for Safari

drezdn — Tue, 01 Jul 2008 10:28:29 -0800

Getting the correct size of a dynamic website page in Safari? On one dynamically generated page on a website a built, Safari can't accurately measure the bottom of the page and used to end up cutting off content.

I made a kludge to solve the problem by setting the padding-bottom of the page to large enough number to include all of the content when the user is loading the page in Safari.

I've manually changed the padding px setting to keep it roughly inline with the bottom of the content, but soon I won't be able to do that anymore.

Is there a better way (using either CSS, Javascript or PHP) for me to solve the issue?

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 :)

If you were designing a website that relies heavily on photos and text, what CMS platform would you pick?

jrholt — Tue, 24 Jun 2008 10:39:55 -0800

If you were designing a website that relies heavily on photos and text, what CMS platform would you pick? We're looking for a content management system that allows for more flexibility than our current platform (Joomla). Our site features concert reviews and lots of high quality concert photos. If you were designing a new website where you planned to publish reviews and photos, what's the cutting edge CMS you'd pick?

How can I get back up to speed on basic CSS and ColdFusion quickly?

allen8219 — Mon, 23 Jun 2008 07:16:21 -0800

How can I get back up to speed on basic CSS and ColdFusion quickly? I just started a new job, and about 25% of my time is supposed to be spent on maintaining/updating a roster of websites. They are high-traffic enough that it's important to do things right, and complicated enough that I feel like I may be in over my head.

I did some CSS and ColdFusion design work in college, but that was like 5 years ago. And back then I had a supervisor/teacher who was always available to troubleshoot my code and tweak my sloppy code into perfection.

So my question is, how can I get good? I am willing to buy books, though I'd like to keep the cost fairly low. And of course free websites and tutorials would be the best.

My starting level is that intellectually I know a lot of basic stuff, but when it comes down to actually writing a query or formatting a cfoutput, I just don't know how to set it up... so ideally I'd like something where I start very basic and can skim through and refresh all my old implicit knowledge. ColdFusion (8.0) is the aspect I am most worried about, though I certainly need to work on CSS as well.

Sorry that this question isn't better formed, but I am at work right now, worrying about how I am going to fix the problems that are in my inbox.

Thanks in advance for all your help!!

CSS and WordPress woes.

reductiondesign — Sun, 22 Jun 2008 21:04:56 -0800

CSS, WordPress Themes, HTML: Trying to custom-design my new blog's design; only three images out of ~10 appearing. As you can see by the above link, my WordPress header is messed up. All that is visible (at least on my end; Mac OS 10.5, Safari) are the 'Portfolio,' 'About,' and 'Contact' buttons. I'm trying to get my header to look like the one on my new Web site (I want the top three bars--light, medium, dark--to be the same, and then the content of my blog.)

At first, those were the only images that were being accessed through a .css file (as rollover links); however, I've since changed the other images to do the same, but still only the first three show up.

What am I doing wrong? Web designers, help!

CSS Document.
Header.php (for use with WordPress).
Right-click --> Save As..., I guess.

Contact: reductiondesign@gmail.com

Thanks.

IE javascript bug is kicking my ass

Paragon — Thu, 19 Jun 2008 16:06:40 -0800

Javascript/CSS and IE6/7: content called from a javascript file (a modified form of fontSizer) into an otherwise blank div appears and disappears intermittently in IE6/7. Help a newbie! I know enough Javascript to just squeak by, but this bug is bugging the hell out of me. The content written from a .js file (images and text) appears every time in Firefox but only sometimes in IE6/7. Sometimes a page reload will reveal it, sometimes returning to the page from another page on the site will reveal it.

My first guess was the peekaboo bug, but none of the fixes work and if I disable the pages' css the content still appears/disappears the same way.

The pages in question are still in development (i.e. not live), so MeFi Mail me for a URL.

Any ideas or suggestions on how to debug this are gratefully welcomed!

MY EYES MY EYES - help me avoid the WordPress interface and still post to my blog.

jessamyn — Wed, 18 Jun 2008 13:48:15 -0800

I don't like the WordPress 2.5 look and feel. I am not interested in switching CMSes. What are my options for basic postings to my blog with minimal interaction with the WordPress interface? The suboptimal things include having to scroll to choose categories and add tags, the "3D" look to the buttons, all the extra headings and colors, the small "publish" button and all the nagging (I know 2.5.1 is available, I'd like to dismiss that message). I'd like to not have to scroll to write and publish a short post with tags and categories. I think this must be possible.

I am fairly tech-savvy. I want to post a blog entry with maybe a category and some tags, nothing else fancy (this is for my "work" blog, not my personal blog). I can write my own HTML, don't need WYSIWIG. I'm okay using the admin interface for more complicated things or for editing. I like what WP does, just not how it looks.

I had a nice custom admin section before I upgraded; my fallback plan is just to hack away at the CSS like I did last time. I have tried a few things that have not worked so well.

- ScribeFire and Deepest Sender addons for Firefox both kick back errors that I don't quite understand. (I get through installing/configuring them and see my categories but can't post. DS returns "TypeError: node is null" SF returns "The server returned a malformed response. Please check that your blog and API URLs are correct." If this is a chmod problem, I can chmod). If I could get either of those to work my problem would be solved. I have command line access to my account and a medium level of comfort with command line Unixy stuff.
- I have installed a few plugins that claim to make WP easier on the eyes including Retro-Dashboard Admin Theme, Admin Menus, Dashboard Lite and a few more that I may have already deleted. They are fine but don't solve these specific problems.
- I do not want to install an older version of WP just to fix this.
- I have searched the WP plugins admin section and Google for something that seems to do this and tried many things and didn't find anything that looked good.

I'd be happy to hear if you've found something that works but please don't direct me to the WP site (unless there's really something you think I've missed) or to a Google search. Any ideas would be appreciated, thanks!

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.

Renaissance Communications Man Seeks Advice.

producerpod — Mon, 09 Jun 2008 20:24:44 -0800

Am I a marketer? Am I a flack? Am I lost? Yep. I'm currently the marcomm director at a non-profit agency - the only person in my department. I am a true renaissance man, handling marketing, PR, internal communications, the website (I've hand-coded an entire site), all our graphic design and some video production.

I do it all, and that's kind of the problem. I'm looking to leave for the for-profit world, and I don't know which way to go. Marketing seems to be the best solid profession to get into (I am a family man as well, so pay is a big consideration) but I'm not sure I know what a for-profit marketer would do. Most marketing positions I see seem to be industry-specific as well. The more job descriptions I read, and the more resumes I read of people who are in marketing, the more I realize I may not have any idea how to do that at all - and it's rather depressing.

In my former life, I was a TV news producer in a top ten market, which gives me a lot of solid, basic skills that translate into any industry: team leading, writing, ability to grasp complex topics quickly and translate them into common language, working under HIGH PRESSURE under daily deadlines. When I do the PR part of my current job, it's this background I use, and I have a very easy time dealing with the media. I have no problem speaking on camera, or to large groups of people. I see people making PR mistakes ALL THE TIME. Sometimes I think I should go into for-profit PR based on my journalism background, but I dread working for an agency, calling reporters and producers with forced story ideas from a lame client.

My true passions, though, are graphic design and web design. I love CSS, Flash, XHTML, all things Adobe. I'm told I have a talent for it, but referencing a previous point (I'm a family man, entering my mid-thirties) I'm not sure I can create a new career from it.

Bottom line: How do I leave the non-profit world, and which path do I pursue?

How to get / view WWW stylesheets?

Meatbomb — Sat, 07 Jun 2008 02:33:03 -0800

How to quickly and easily view the CSS Stylesheet for a site on the Internet for home analysis and tinkering? I am trying to learn more about CSS, and would like to be able to examine the stylesheet for websites I like. I am hoping there is some easy plugin for Firefox, or some option I am not aware of.

Please help me?

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?