Ask MetaFilter questions tagged with css

Why aren't pages loading with their full CSS styling?

chrisbucks — Fri, 18 Dec 2009 22:39:05 -0800

We recently changed internet connections to a different plan with the same provider, now some webpages are loading without their css. What gives? This happens usually with facebook, lifehacker, myspace, and other sites where the css is served from a different server than the rest of the content (I suspect, not entirely sure though). Reloading the page usually fixes it, at least temporarily.

Something to do with concurrent tcp/ip connections?

Using Firefox 3.5 in Windows 7.

Which NYC area colleges and Universities are teaching valid hand marked-up xhtml and css in their web design courses?

stagewhisper — Tue, 17 Nov 2009 07:21:11 -0800

Which (if any) NYC area colleges and Universities are teaching valid hand marked-up xhtml and css in their web design courses? I am trying to find a freelancer or small firm to take over a dating website redesign for a client in the NYC/NJ area. The back-end is/will be Cold Fusion (this is the only option as far as the client is concerned) and the front end styles and all formatting will be implemented using style sheets and fully accessible xhtml. I am having trouble finding an entry level designer who not only has the proper skill set, but who also understands why it is important that their code validates.
The best option seems to be to advertise this job on various area school's alumni and/or student job boards, but if the state university that I am currently a grad student at is any indication, not all web design courses and digital design concentrations teach much beyond WYSIWYG dreamweaver classes, and the computer science classes don't address user interface design and css much, if at all.
Is anyone here familiar enough with the design programs at other schools (Pratt, Parsons, SVA, Rutgers, etc.) that they might suggest the best programs and career services offices for me to contact?

Game got switched. Pass the noobsauce plz?

TomMelee — Wed, 11 Nov 2009 09:04:43 -0800

I suck at wordpress. Should I start over or can someone help me fix this? I do a lot of hardware repair for side money here, and recently had an established customer ask me to do a site for her daughter. I thought it would be extremely simple, and it was. I did a typical wordpress install and modified the heck out of a template I found somewhere to make it match her colors/logo/etc. I don't usually do web work because it's not my strongsuit.

So I'm doing all this in a sandbox site (live, but not at her .com) and thinking its coming together fine. Top menu, 4 pages, nice gradient, etc. This was originally a right-side menu template, and I've taken all the right column out because it's unnecessary. (blogroll, rss, etc.)

Today I get a call that she loves all of it but she wants the menu down the left side. This was a right/top menu template. I'm in waaay over my head trying to figure out how to chop it up. I've looked at the css, and there's nothing in there that declares positions---only widths. I looked in the wordpress themes settings and there's no place to move the menu left. I've played around in the index moving the php calls to alternate locations and the page doesn't change (or doesn't change significantly.) Changing the sidebar.php to "left column" instead of "right column" puts the menu at the bottom of the body, because the body is the left column.

So I'm assuming the only real way to fix this is to figure out how to resize the columns and move the body to the right and the menu to the left...unless I'm overthinking it?

Happy to share the live-site address and assorted template files if anyone out there in mefi land is willing to take a peek. Otherwise I'll just start modifying a left-column template. Grrr.

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!

Help clear my float!

mthomps00 — Tue, 27 Oct 2009 12:53:29 -0800

CSS question: How can I get my floated sidebar to stop overlapping my footer? I'm using clear:both! Take a look at this page.

The structure of the HTML is pretty simple:

There are three main divs - #mainheader, #maincolumn, and #footer. #Maincolumn contains another centered div - #container - which includes a div called #content, and a left-floated div called #sidebar.

After I close #maincolumn, I include a ".clear" div to clear all the floated content, and then there's the #footer.

So here's the structure:

- #mainheader
- #maincolumn
  - #container
    - #content
    - #sidebar
- .clear
- #footer

My problem is that when the text in #sidebar is longer than the stuff in #content, it overlaps the footer.

Isn't clearing all floats supposed to clear all floats? What's happening here? Thanks in advance for your help!

Can I easily control the order in which things load on a page of mine?

fake — Thu, 22 Oct 2009 13:35:56 -0800

I need some help fixing a web page. Images load in the wrong order, and users are finding it confusing. I have a free album up here, and it's gotten about a zillion views, which I'm very happy about. But many users report that the images of the book pages don't show up.

As it turns out, in Firefox (by far the most popular browser that visits the site) they do show up, but they are displaced below the Flash player that plays the album until the entire page loads. Is it possible to force the pages to load right next to the player?

This must have to do with the way Firefox renders things, but the few hacks that I've tried on the code have not changed the order that things appear. Any advice would be much appreciated.

31 stylesheet limit... class != className... double margins... get me out of here!

tmcw — Thu, 22 Oct 2009 12:50:45 -0800

So, I am sadly tasked with debugging sites on IE every once in a while. Is there anything that even approaches the awesomeness of FireBug/Web Inspector for this task? And, the more advanced the better. I'm debugging what one might call 'serious shiz' like namespaces, tricky CSS bugs, javascript screwups...

Thanks! (and, of course, I'd prefer it to be free but if it's a paid deal and it works great it would be cake to sell it to the ol' upper management)

How can I make a div expand vertically to fit it's float'ed content?

arcolz — Thu, 08 Oct 2009 14:07:10 -0800

I'm racking my brains trying to figure out what seems to be an easy problem I'm having with CSS. It has to do with a div not resizing to contain two floated div's inside it. I've uploaded example HTML file to help clarify what I am saying.

What I am trying to do is put "previous" and "next" links at the bottom of each post of my wordpress theme. I want them to be inside a box with a border. The "previous" link should be flush against the left margin of the box and the "next" link should be flush against the right margin of the box. The problem I am having is that when I set the "previous" link to float left and the "next" link to float right, their parent box with the border does not expand vertically to contain them.

As I understand, the CSS 2.1 spec explicitly states that this is what should be occurring in the case, as boxes do not expand to fit floated children unless the box itself is floated. So, I'm trying to find a way to prevent this behavior. I could set the parent box to float as well, but that seems to raise more problems then it solves, especially in regards to its width and how the boxes after it flow.

So I'm stuck, any way around this?

I'm in ur css

yoyoceramic — Mon, 14 Sep 2009 11:52:44 -0800

Can someone please give me an example of what this might look like? I operate a wordpress blog, and I am trying to call different css styles for a particular post (as opposed to using the styles defined in the stylesheet). I came across this advice in my search, but I don't understand it!

Can someone please give me an example of the actual use of this concept in a post? (I understand how to copy and paste the code into header.php)

First, open your header.php file and insert the following code between the and html tags:

<>ID, 'css', true);
if (!empty($css)) { ?>

<>

<>

Once done, when you're writing a post or page which require some custom css styling, you'll just have to create a custom field named css and paste your custom css styles as a value. That's simple as that!

css rollover conflict

bonsai forest — Thu, 03 Sep 2009 09:55:09 -0800

I'm having a problem with conflicting css rollovers. I read Dave Shea's tutorial on css image rollovers, and want to use these techniques on my site, but I am having a problem.

I want to use two css rollovers on one page.

One css rollover is a logo, and the code is based exactly on this example (since my shapes are not overlapping, I don't have the problem that example shows).

The second css rollover is a menu, just like the one in this example.

I have made both of these as standalone examples, and the css rollovers work perfectly with my logo, and my menu buttons.

The problem is that when I try to position the two rollovers on the same page, with the menu buttons rollovers almost directly below the logo rollovers, it goes all wonky, and the logo rollovers bring up parts of the button rollover images in odd locations, and not all of the logo rollovers work.

(the menu buttons rollover, which are below the logo, work fine).

I have a general idea of why this is occurring, but have no idea how to separate the two css rollovers so that the logo rollovers do not "see" the button rollovers.

The code really is exactly like the examples I have linked to, and again, as standalone items, they work fine for me.

Can someone advise how best to code the positioning of these two on the same page so no conflicts occur?

I tried putting the two rollover sections in their own divs, and I tried z-axis stuff, neither of these solved the problem, at least as I implemented them.

Need Non-Cheesy Professional Website Template

swilkerson — Sat, 22 Aug 2009 13:32:36 -0800

Seeking a high-end corporate website template (do those exist?) that is designed for extensive customization. I'm a media consultant working on an extended marketing/rebranding campaign with a mid-size company, and we're in the process of (among other things) developing a new website. I am reasonably proficient in HTML and CSS, but I'd like to have a basic website to use as a jumping off point while I work on designing some of the visual elements and then customize the layout, etc with CSS.

Most of the website templates I've seen are $20-$100 cheesy templates, and I see those same templates appear over and over again on the dozens of template seller sites out there. On the other end of the spectrum is full website creation and customization (usually costing several thousand dollars or more). Surely there is something in between - a small company or individual that designs less commercialized templates? Anyone have any experience or recommendations?

How do I restore the formatting in my blog?

FireStyle — Wed, 12 Aug 2009 19:07:21 -0800

I'm using the Hybrid-News blogger template for my blog. After doing some tweaking to the code, I lost the feature I loved the most - the condensed posts on the front page. Any ideas on how to get it back? (more in explaination). Here is the link to the hybrid-news template

Here is the link to my blog

Notice how in the template the stories are condensed to a few lines. Somehow, I lost that formatting, and my skills in CSS are elementary at best. Any idea how to get it back?

Thanks much, and if you like politics, feel free to comment on the site!

Behind every cloud is another cloud.

nam3d — Tue, 21 Jul 2009 16:58:20 -0800

How would I go about hosting a website (I have my own .com domain) on Amazon S3 (two files, one html and one css)? Is this even possible?

Story problems.

SinisterPurpose — Thu, 16 Jul 2009 10:08:33 -0800

Web Designers! Tell Me Of The Dragons You Hath Slain! We all remember the fun we had with this question. As was suggested to me in that thread, I have been spending as much of my time as possible learning on my own. (Concentration has been mostly on Web Design) Unfortunately, the countless books, articles, and blogs I've read are not completely complimentary to my learning style.

Of course I'm gaining knowledge and skills with these, but I'm looking to sharpen this particular sword as quickly as humanly possible. And for me, that mean hearing anecdotes, stories, and real world challenges from people who live within this realm every day. I understand and process information most effectively when it is wrapped in a pretty little narrative. (Probably why I majored in English in the first go round.)

I'm looking for descriptions of problems you've encountered working in web design. If you found a solution, you can feel free to share it. Or not. Be as detailed as you like.

Also, I'd like to hear about your Eureka! moments as you were learning. What made a particular concept sink into that soft, mushy melon of yours? What was that first baffling problem you had that first day? What issue just keeps coming up and won't go away? Just vent if you like; I guarantee I will mine something out of it.

Inevitably, someone will ask for a clarification on what I mean by "web design". I understand that it is a broad and multi-faceted discipline. If you think you have what I'm looking for here, then you do. I am deferring to your experience here. Let's feel free to err on the side of this-is-probably-what-he-wants-even-if-he-doesn't-know-it.

IE6 Bugfix "R" Us

whycurious — Tue, 14 Jul 2009 03:51:08 -0800

Can I outsource my IE6 CSS? Kinda like a PSD2HTML, but more IE6 Bugfix"R"Us. Earlier this year, Tim Van Damme put out a blog post that called for an IE6 Bugfix "R" Us service. The idea is that you'd outsource your IE6 specific CSS to a company specializing in such.

The post made the blog rounds, and I sort of remember a service popping up shortly thereafter that did exactly that. Anyone remember what that was? I've googled with no luck, and I don't believe it was a general service like PSD2HTML - I'm pretty sure this was a definite IE6-FIXERS company. Any help?

Altering Wordpres's Dashboard CSS

Solomon — Sat, 04 Jul 2009 12:44:55 -0800

Which .css file to I need to edit within my Wordpress 2.8 installation to prevent an annoying Dashboard layout issue, and what information do I need to change? When viewing the Wordpress Dashboard in Firefox, the menu on the left slightly overlaps the rest of the page, when it's expanded. Like this. When it's shrunk, the layout is correct. Like this.

Annoyingly, it all looks fine in Internet Explorer.

What values do I need to change in which .css file to ensure that there's no overlap?

Displaying inline lists with two lines of content

bjork24 — Sat, 27 Jun 2009 18:51:49 -0800

CSS Emergency: This seems so simple, but yet everything I've tried is failing. How in the world can I make an unordered list containing a thumbnail and caption display inline?! It's as simple as this:

1. I have an unordered list
2. Each list item contains a small thumbnail and a two word caption
3. I'd like it to display the caption below the thumbnail

I need the list items to display inline, but when I tell it to do that, the caption displays to the right of the picture. If I add a br between the two, it screws up the entire list. If I throw in a div around the caption, it does the same thing... as does span and any other inline element. Floats won't work, b/c I need these to center themselves inside a parent element.

Please tell me I'm overlooking something incredibly obvious. Here's an image example if I'm not making myself clear. Thanks!

CSS / Lightbox-esque popup/div width issue.

theRussian — Thu, 25 Jun 2009 09:43:14 -0800

Scaling down div width to fit around image which has been scaled down via its height element?? Hello!

I have a simple lightbox type popup on my site, with an opaque overlay and a content "whitebox". Upon clicking a thumbnail, the popup/overlay divs are made visible and an img tag is placed into the popup (into a div named popup-img, there's another div which holds the close button in the popup). I have scaled the image height to fit into the popup, which takes up 75% of the screen. So, recap: popup height = 75%; popup-img div height = 100%, and the height of the img tag itself is also set to 100%. The problem I am facing, in FF and IE (not Safari, though) is that the width popup-img div (into which the img tag is written via JS) is staying the width of the original width of the image - not the new scaled width (scaled due to scaling down the height).

Is there anyway to get the width of the popup div to fit to the new width of the image? This isn't so much of a problem when the original image height is greater than will fit in the box, and scaled, but when the image height is smaller, it gets scaled 'up', but the width of the pop-up stays to fit the original width, and the image goes outside of the popup width-wise.

Sorry if this is a confusing explination - it is confusing to me as well.

Other posibly helpful/hurtful info - the other div inside the popup is the close button - which is floated to the top right. What I would like to happen, ideally - is for the image to be on the left, and the close button on the right, with whitespace under the button. Don't know if there's anyway that working with this element will help.

I can provide more clarification, and possibly a link to the code in question, if someone is interested in helping me out :D

Thanks ahead of time!!

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.

Non-breaking 2-em dash

Busoni — Fri, 05 Jun 2009 07:26:37 -0800

How can I use non-breaking 2-em dashes using HTML or CSS? For example, I'd like to write "R——" and not have that broken up by a line.

It seems I could use the "nobr" tag, although it appears it's not encouraged.

I've been led to believe the 2-em dash is precisely that: two em-dashes. Unless there's a single character I could use?

I should mention I'm just beginning to learn CSS, so if the answer is obvious, my most humble apologies.

Help fix IE6 alpha channel bug

Elminster24 — Thu, 04 Jun 2009 18:03:31 -0800

Help me quash this ridiculous IE6 bug that is putting gray boxes around images on my website! I recently hired a designer to redo my steampunk website and in the process he introduced a bug that appears to be specific to IE6 (I don't have 7 so maybe its in IE7 as well) where gray boxes surround some of the images. It is driving me crazy and I have no idea how to fix it and my designer has from what I can tell bailed on me because he won't respond to emails (he's a college student, go figure).

I have a hunch it has to do with how IE6 handles alpha channels but I don't know enough about coding to solve. Please for the love of god make those boxes go away!

generating tables using mako templates

zippy — Fri, 22 May 2009 04:01:42 -0800

Using a Mako template and CSS, I need to generate a m x n grid display from a variable length list of elements. For simplicity's sake, let's say what I want is a 2 x n table, but I'm fine with unordered lists as long as they appear on screen aligned as if they were in rows and columns.

What does the logic look like in mako to create such a structure? I'm having trouble figuring out when to start a new row or close and old one, while still keeping the template simple and readable.

Please spell things out and use small words as I'm new to both Mako and CSS (but somewhat conversant in Python), and keep me from the temptation to hard-code a solution for a fixed length list of elements.

Any common css includes for iphone web app development?

helios — Tue, 19 May 2009 05:25:29 -0800

I am a bit late in asking this, but has anyone developed and released a standard set of CSS files and templates (and perhaps JS) for building iPhone web applications that mimic the iPhone UI? I want to write a quick iPhone (Safari-based web) app but obviously don't want to waste time doing the UI work if someone else has already done it. Note I'm not looking for a programming API (unless it's a client-side JS library) because I want to be able to write the app in any language. I'm just looking for a CSS file that I can include, and possibly some templates for common scenarios in iPhone apps (such as headers, toolbars, icons, lists etc).

Centering a div element

jgunsch — Sun, 17 May 2009 00:24:12 -0800

What is your favorite method to get <div style="width:400px;height:300px;"> to be in the center of a page (both horizontally and vertically)? Preferably CSS rather than tables.

Tutorial or template for embedding Quicktime VR pano file in a website?

tnygard — Sat, 09 May 2009 07:35:59 -0800

Tutorial or template for embedding Quicktime VR pano file in a website? Hi all, 7 years ago I was part of an archaeological project, and we made one of those stitched together panorama movie files that allow one to explore an environment. I created it with Quicktime VR and it has the pano extension. I would now like to embed this file in my personal website, but I am having trouble finding a good tutorial for that.

The support on the quicktime website says to use the html code that the stitcher produces, but that is no help for me because I do not own the stitching program and do not have the html code it may have produced 7 years ago.

What I do have access to is the full Master Collection of Adobe CS3. Perhaps there is a way that this suite can interact with pano files, but I have not been able to figure it out thus far. I have been using the CS3 version of Dreamweaver and Photoshop to assemble the site, and I am also doing some hand coding. Any suggestions for getting this embedded would be most appreciated