Ask MetaFilter questions tagged with firefox and css

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.

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!!

Why won't firefox display pages correctly?

runcibleshaw — Wed, 06 May 2009 16:11:29 -0800

What is wrong with my firefox? It seems like firefox has forgotten how to display backgrounds and colors on web pages. I don't know anything about css or html, so I don't really know what the problem is, but I posted a couple screenshots of two pages and the error console for one in this album. I have tried completely uninstalling and reinstalling firefox, but with no luck. Chrome and Safari work fine. This is on an Acer Aspire One running Windows XP.

CSS positioning problem in IE.

Uncle — Tue, 28 Apr 2009 12:55:21 -0800

Why does my sidebar line up fine in Firefox but not IE? So I'm rebuilding my theatre company's website and i can't for the life of me get the sidebar to line up right in IE. (screen shot) The side bar is contained in a div which is floated to the right in a div that contains the whole body.
Here is the CSS.
Here is the HTML for the sidebar.
And here is the main page.
Thanks.

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

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?

Mozilla, Inc. Department of Redundancy Department

Inspector.Gadget — Sat, 17 May 2008 13:46:18 -0800

I'm running Firefox 3 RC1 on Windows Vista. How can I use userchrome.css to hide the "list all tabs" button until Tab Mix Plus is updated? The Firefox 2 userchrome tricks documented at Lifehacker and elsewhere don't work because the element names have changed from Firefox 2 to Firefox 3. The transition has been surprisingly easy for me because I've been able to tweak everything to my liking - except this. Thanks, hivemind!

How do I fix a FireFox z-index bug?

2oh1 — Wed, 23 Apr 2008 14:31:49 -0800

CSSfilter: How do I fix a FireFox z-index bug? I've got a Firefox error. When an absolute-positioned div with a higher z-index scrolls over a fixed-positioned div with a lower z-index, in Firefox, the higher div gets jagged lines and text as it scrolls over the lower one.

Here's the page in question. Scroll way down and you'll see a gray bottom drawer that gets a jagged border and text as it covers the menu. You'll have to view it in Firefox to see the error, and there's a chance it's only a Firefox Mac error (ugh!). Here's an image of the problem.

I realize my fixed position elements won't work in earlier versions of IE. I have a separate stylesheet for that.

P.S. Is there a better / more appropriate place to post questions like this? When I designed sites using Adobe GoLive, I posted in their forums, but I created this site in a text-editor (and will then build in MovableType when I get the bugs worked out!). Is there a great web-design forum?

CSS help is needed

joelf — Thu, 17 Apr 2008 12:25:30 -0800

Can I make this work in IE the same as it does in Firefox? Here is the example i need some CSS help with. This works properly in Firefox, but needs some help in IE. Any suggestions?

Why won't images show up in Firefox?

maxreax — Mon, 10 Jul 2006 15:11:52 -0800

Why won't images show up on my website when viewed in Firefox? From a friend:

I have just recently been attempting some HTML and CSS. The site I've made displays fine in Safari but my images wont show in Mozilla Firefox or Internet Explorer. Not sure what to do- please help.

Here is a link: http://students.oxy.edu/atiziani/Web/Untitled4.html

Re-installed WinXP Won't Show CSS Images

ao4047 — Mon, 12 Jun 2006 20:09:32 -0800

Re-installed Windows XP on my old laptop (Sony PCG-SRX87). Let it run through all the updates. Now neither IE nor Firefox will show CSS background images. Example: when I view Gmail or Google Spreadsheets, there's no background images for any of the rows. Searching Google for css, background images, service pack 2, firefox, internet explorer, troubelshooting, etc... checked Internet Options, Windows Firewall, turned off firewall, turned off virus scanner. Any ideas?

Bonus and maybe related: text sizes in IE are huge. I go to View > Text Size and it is set to Medium but if I got to AOL.com homepage the headlines are massive.

Why won't my website print?

cbrody — Sat, 08 Apr 2006 14:51:39 -0800

Why won't my website print in Firefox? I'm trying to print the contents of this page but Firefox (1.5.0.1, WinXP) only prints the first page. This seems to be a known problem with some pages, though the specific problem doesn't seem to be listed in bugzilla. I've tried putting the data into a table but it makes no difference. Internet Explorer (6.0) prints all the pages, but on some pages the second column of data (the title of the work) is missing. I'll put this down to IE's poor handling of CSS.

The rest of the site prints fine in IE, but FF will only print the first page of data from each web page. What's wrong with my site? It validates as XHTML Strict & CSS.

Help make A Special Thing even more special.

tegoo — Tue, 14 Feb 2006 10:49:48 -0800

How can I make Firefox use a unique custom css whenever I visit a particular website? I love the forums at A Special Thing. I can't handle the whole white text on a black background of it all. I want to small up the text, go black on white, and make it a little less I'm-reading-a-web-forum-on-my-lunch-break-yeah-lunch-break.

javascrtipt access to style sheets.

Tryptophan-5ht — Sun, 29 Jan 2006 16:19:55 -0800

javascript question: im looking for a way to access the style sheet text in firefox. im looking for the full text - like with the comments and everything, not just the cssText attribute of each individual cssRule.

for an example, see the "Edit CSS" option in the developer plug in.

background information: im writting a greaseMonkey script that will allow you to view/edit the markup and css of a page you're viewing. In order to make the CSS editable, i need a way to quickly and easily grab the text from all the style sheets and move them into one style tag, then disable the originals. Ive got a working copy, except that i have to cycle through all the cssRules and grab the text of each and append it to the new style tag - which is slow, destroys the orginal formatting and leaves out any comments.

IE doesn't display gifs, but FireFox and Safari have no problem.

Wild_Eep — Tue, 20 Dec 2005 09:35:07 -0800

WebDevFilter: Why do some gifs GIFs *not* appear in Windows/IE, but do appear in Win/FireFox Mac/Safari and Mac/FireFox? Specific example inside. The site I'm working on seems to appear just fine in 3 browsers, but not in IE for Windows. I get white boxes with red x's in them instead of the gifs I expect.

This output was given to me from an export from Quark XPress, which produced the CSS. I'm a CSS newbie (but I understand the concepts).

Google returns a boatload of results, mostly relating to making changes to the registry and deleting temporary files. Before I do anything that drastic, could I have another set of eyes look over my code?

Need help with Wordpress/CSS

exhilaration — Wed, 16 Mar 2005 14:58:42 -0800

My Wordpress-based site looks perfect in Firefox, but terrible in IE. Can someone with a few minutes give me some advice? Here's my index.php and the CSS. The problem seems to be the with my supernavcontainer div (which contains my menu at the top).

WebDesign: CSS and FireFox

donkeymon — Fri, 01 Oct 2004 21:19:41 -0800

So I have this home page. It looks pretty good (which is to say, it looks like I intended) in Safari, and passable in Internet Explorer. But in FireFox the CSS completely dissapears for some reason, so everything just comes up in a big unstyled pile. So in trying to find out why this is, which I have not done, I came to wonder: Is there a place on the web that has information about the differnces between browsers and how they render various bits of HTML, CSS and so on?

Firefox customization

jfuller — Sat, 25 Sep 2004 05:58:14 -0800

Firefox question. Unmodified, just-installed firefox opens a new tab behind the current tab, instead of on top as Mozilla does; and the right-click popup menu for tabs does not have "close this tab" first in the list, as in Mozilla. Are these two behaviors customizable? I know I'm being lazy but these two misfeatures are deal-killers for me. If you knowledgeable firefox users tell me they're fixable in userChrome.css or users.js or whatever I promise I'll rtfm-rtfm-rtfm and become as rabid a firefox zealot as you might desire. But if they're not changeable then it's all wasted effort and I'll stay with Mozilla (or whatever they're calling it this week.) Thanks!

Why doesn't this page display properly in Netscape 7?

andrewraff — Mon, 20 Sep 2004 13:17:04 -0800

HTML/CSS helpfilter: This page displays properly in Internet Explorer, Firefox and Safari, but confounds Netscape 7.0. Why? [mi] This CSS Style Sheet controls the layout and displays a header and three columns. Netscape 7.0 (Win) only displays the header. Heck, even NS 4.8 displays the page more or less correctly. Although any NS 7 users should probably upgrade to a newer browser, what in the HTML or CSS prevents the 3 columns from displaying in NS 7?

Gecko-CSS

kokogiak — Wed, 01 Sep 2004 11:54:10 -0800

Quickie Gecko-CSS question - not finding useful help on Google. How to align the text (value) of a form button?

This looks great in IE (aligned right), but always reverts to center in Moz/Firefox. Anyone find any clever workarounds (I really don't wanna resort to images) Oh dear - the post got munged (I shoulda posted this inside) - try again here:

[input type="button" style="width:120px;text-align:right;" value="Click Me"/]

CSS and Firefox

nyxxxx — Thu, 15 Jul 2004 21:02:01 -0800

CSS problem wtih firefox. I have this site, it's kind of a porn site, so don't go if that's a problem for you. I can't get the css to work for mozilla/firefox. It works great in IE. No one can seem to figure out the problem. Can anyone help? That site would be sxxxy.org. There was a link problem.

Bad Image in Firefox

grrarrgh00 — Tue, 06 Jul 2004 13:39:17 -0800

Could anyone tell me why the logo is broken up when I load this page in Firefox?