We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Weitere Informationen

Firefox is breaking website

more options

Hey there!

I'm working on a site and it looks fine in other browsers, yet Firefox is breaking it.

The site is http://thefabme.com/. Let me list all the elements that are breaking:

1. The text within the blog circle is shifting up.

2. The search magnifying glass is shifting up.

3. The searchbar is shifting left.

4. On individual product pages, such as thefabme.com/product-category/wedges, the images used for the products are straight up disappearing.

In other browsers, the site looks like this: http://img20.imageshack.us/img20/7241/2uc9.png

Cheers,

Pat

Hey there! I'm working on a site and it looks fine in other browsers, yet Firefox is breaking it. The site is http://thefabme.com/. Let me list all the elements that are breaking: 1. The text within the blog circle is shifting up. 2. The search magnifying glass is shifting up. 3. The searchbar is shifting left. 4. On individual product pages, such as thefabme.com/product-category/wedges, the images used for the products are straight up disappearing. In other browsers, the site looks like this: http://img20.imageshack.us/img20/7241/2uc9.png Cheers, Pat

Geändert am von prawson

Ausgewählte Lösung

On #1 (Blog button), you can get the absolute positioning of the span to work using this:

<div id="blog-button">
  <a href="/blog" style="display:inline-block">
    <span>Blog</span>
  </a>
</div>

This also enlarges the link to be square around the entire circle, which might be helpful to users who have difficulty positioning the mouse pointer more specifically over the word blog.

However, as a general comment, it might be less fragile to use the ordinary flow more and rely less on positioning.

Also, you won't be happy to see it on IE8...

Diese Antwort im Kontext lesen 👍 0

Alle Antworten (4)

more options

I'm sorry this is a Firefox support website and not a web development / designing forum, so you may not get the best answers here.

Here you have a list of recommended web design forums where you have more chances to get an accurate answer: http://www.hongkiat.com/blog/17-forums-web-designers-shouldnt-missed/

more options

Hi Pat,

You may get comments on this forum, but the subject of web design is not really within the scope of this forum. You would be better trying another forum, and specifically relating to Firefox maybe this Mozillazine forum

It will probably be suggested as a first step that you check your code against a validator. When I try that it displays hundreds of errors and thousands of warnings

more options

The image on the Wedges page has a z-index:-1 and thus doesn't show.

.loop_products_additional_img_wrapper {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}

The elements to the right of the search bar probably be fixed by adjusting the left value of the container to accommodate the width of the search bar.

more options

Ausgewählte Lösung

On #1 (Blog button), you can get the absolute positioning of the span to work using this:

<div id="blog-button">
  <a href="/blog" style="display:inline-block">
    <span>Blog</span>
  </a>
</div>

This also enlarges the link to be square around the entire circle, which might be helpful to users who have difficulty positioning the mouse pointer more specifically over the word blog.

However, as a general comment, it might be less fragile to use the ordinary flow more and rely less on positioning.

Also, you won't be happy to see it on IE8...