Firefox is breaking website
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
Modified by prawson
Chosen solution
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...
Read this answer in context 👍 0All Replies (4)
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/
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
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.
Chosen Solution
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...