Solved

Subtle styling error, only affecting Firefox

Posted on 2010-11-29
18
262 Views
Last Modified: 2012-05-10
I have a page with a liquid layout, that when the browser window is made narrower, certain elements of the page move in a liquid way. The effect works perfectly in IE and Safari, but in Firefox, at a certain point, a portion of the page "jumps" as extra space is inserted.

The screen shot below shows the "normal" look of the page:

View of page showing desired layout
The following screen shot shows what the same page looks like in Firefox when the browser window is narrowed just slightly:

 View of page showing "jump" in Firefox
If you look carefully, you will notice that in the second screen shot there is more space below the table in the upper right and the row of tabs ending with "Free & Deals." Because the "Explain it to me" audio control and FAQ light bulb are positioned absolutely, they have appeared to jump up onto the horizontal bar. However, they have stayed in the same place, and the tabs and everything below have jumped down.

There is a <ul> around the tabs that has padding-top of 10px. If I reduce this in Firebug, the proper positioning of the page can be restored. However, this only demonstrates a possible approach, as it don't think it is a practical approach to try to adjust this for Firefox as the browser is being narrowed.

So I am wondering if there is some styling attribute that I can add to make Firefox less liquid with respect to this jumping.

Naturally, I don't want to break the already properly working Safari and IE.
0
Comment
Question by:jasimon9
  • 10
  • 6
  • 2
18 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 34240008
Have you tried a css reset? As a matter of troubleshooting, try inserting as the first line of your css:

*{margin:0;padding:0;}

This could very well present more problems, but it's easy to try.

Different browsers apply different default margin and padding to page elements (font sizes are also defaulted differently. Using the wildcard selector like this will set all elements to a margin and padding of 0. This is a controversial reset method. There are other ways.

If you could provide a link to your live page, we might be able to better assist.
0
 
LVL 6

Expert Comment

by:kmead6
ID: 34240836
I've encountered strange padding/margin issues within Firefox and not within other browsers as well before.

I agree you might want to try a css reset. The *{} approach mentioned above will work but it can make pages sluggish and clunky to load. If this is something that fixes your problem you might want to try Eric Meyer's CSS reset which is considered one of the best/most comprehensive. Link to this stylesheet above your stylesheet so it loads first.

CSS Reset: http://meyerweb.com/eric/tools/css/reset/index.html
0
 
LVL 16

Expert Comment

by:s8web
ID: 34240908
"The *{} approach mentioned above will work but it can make pages sluggish and clunky to load."

Thus the controversy.

I've timed the parse both ways. No difference.

I have no problem with the css reset at meyerweb, but I do not understand the logic behind the thought that it takes longer to parse 21 characters than 944 when both methods are targeting the same elements.
0
 

Author Comment

by:jasimon9
ID: 34241064
s8web: yes, I have tried setting the margin and padding to 0 and other values. No benefit to the issue. Because the various browsers treat margin and padding differently, so this is one of the first things that I tried.
0
 
LVL 6

Expert Comment

by:kmead6
ID: 34241080
Ah, and the debate continues... =)

"but I do not understand the logic behind the thought that it takes longer to parse 21 characters than 944"

In my opinion I think Christian Montoya explains it well:
"It's very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons. I learned from KuraFire Network that it's far better to have a complete list of default settings to apply from the beginning that targets the specific browser inconsistencies."
0
 
LVL 16

Expert Comment

by:s8web
ID: 34241110
Jasimon, can you link to the live page?
0
 

Author Comment

by:jasimon9
ID: 34241113
Regarding a style reset: the topmost stylesheet for the site in effect does a custom style reset.

However, it is worth a try, so I tried linking eric meyer's in. No help on my problem.
0
 

Author Comment

by:jasimon9
ID: 34241153
There simply seems in Firefox to be some element that is requiring more "clearance". I just cannot find that element using Firebug.
0
 

Author Comment

by:jasimon9
ID: 34241211
The odd thing is that if I deliberately add more "clearance" by adding padding or margins something still causes that page layout to jump. However, on other pages, where the same jump should occur, it does not. Leaving me to think there is probably something about the absolutely positioned stuff that is causing the problem. So I took that out, but still the problem occurs.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:jasimon9
ID: 34241287
I have discovered that by playing around with the <ul> that surrounds the tabs, I can control where the jump occurs. So I believe there is something about that <ul> tag that is causing the problem. The style on that <ul> as shown in Firebug is as follows:

#tabs ul {
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 0 0;
}

By adding width: 900px; to the style and having Firebug show the extent of that element, I can see that the jump takes place as soon as the table touches where the ul is. Firefox is therefore assigning some fixed space to that <ul> that Internet Explorer (as seen in IE Web Developer) and Safari do not.

So I can now see where the problem is. But I still do not know how to make FF behave.
0
 

Author Comment

by:jasimon9
ID: 34241492
The problem with linking to a live page is that it is in a logged in environment.

However, to go to that level, here is something that I am willing to do: instead of our production server, you can go to our development server, which has a sanitized database.

Here are the steps to get to the page:

1. http://dev.rephunter.net/
2. Click Login at the upper right.
3. Use Member ID: 2322 and Password 4PxbJVBpU[2n to login
4. Click on "Find Sales Reps" on the top tabs
5. Click on "By Keyword"
6. Click "Go"
7. You are now on the page with the problem. Narrow and widen the browser window to see the problem. You will see the following depending upon which browser you are using:

IE - the layout does not "jump" as the width of the window changes

Safari - the layout jumps a very slight bit when the window is narrowed past a certain point. But it is so slight as to not be problematic

FF - the layout jumps to an undesirable degree. The absolutely positioned audio controls and FAQ lightbulb are crowded by the rest of the page elements as they "jump down." It is still not really awful, but I'd like to know what the fix is.

Anybody who is willing to go to this much work to diagnose this issue is going to deserve more points so I am upping the points to 500 at this time.

0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 100 total points
ID: 34241654
I'm not seeing the problem. Are you sure you have the most recent Firefox? This is with 3.6.12.
sales-rep-hunter-ss.jpg
0
 

Author Comment

by:jasimon9
ID: 34241896
The plot thickens! And maybe gives a clue to the cause. Firefox on Windows apparently has the same "very small" jump which does not cause a problem. It is Firefox on the Mac that has a problem.

Here is a restatement of the results that I am seeing:

IE - no jump
Safari - very slight jump, not problematic
FF 3.6.12 on Win - very slight jump, not problematic
FF 3.6.12 on Mac - noticeable jump.

Here is the screen shot from FF 3.6.12 on Mac:

 FF 3.6.12 on Mac showing noticeable jump
You will note that the audio controls, and especially the lightbulb are now placed over the bar with the phone number.

Here is what I am thinking could be a clue -- I have noticed in the past differences between FF on Win and FF on Mac due to the difference in the fonts used. By closely comparing the size of the table in the upper right between the two FF versions, it appears that the table is slightly larger on the Mac. So an obvious test at this point is to tweak the font size on the Mac and see if that has any effect.

After artificially tweaking the font size of just the top row of the table by making it very small, the vertical height of the table is shrunk sufficiently so that the problem of jumping that is shown in my screen shot has gone away!

So I am thinking that a simple, browser-dependent tweak to  the font size could be the solution! Will try this and report back.
0
 
LVL 16

Expert Comment

by:s8web
ID: 34242150
I've seen the FF in Win vs. Mac issue before with font-weight too.
0
 

Author Comment

by:jasimon9
ID: 34242293
Yes, I had to deal with it just the other day. Comes up fairly regularly.
0
 

Accepted Solution

by:
jasimon9 earned 0 total points
ID: 34244023
I am confirming that the solution that I came up with works. Final solution involved changing the font-size for Firefox, plus some other related tweaks so as not to have to make the font-size overly small.

Seems the input was helpful, although nothing giving me the direct solution. Although the observation that is was less of a problem on FF-win did lead to the realization that fonts could be involved.
0
 
LVL 16

Expert Comment

by:s8web
ID: 34247902
Glad you figured it out.

Cheers
0
 

Author Closing Comment

by:jasimon9
ID: 34281108
While not giving the solution per se, it inspired me to remember that there is a difference in the way Firefox on the Mac renders from Firefox on Windows (I should have checked myself) due to font sizing. That realization led to the solution.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now