Firefox / CSS issue

Posted on 2011-09-23
Last Modified: 2012-05-12
I am having trouble with spacing between rows where 2 products are listed for each row.   I was able to fix the problem in IE by changing the .products .pad margin-bottom to 0px (previously 8px), but the issue is still not fixed in Firefox.   Any suggestions?   You will see the "Featured Products" section at the lower left of the page--viewed in IE, they are displayed properly, but you will see the odd spacing from Firefox:   I would appreciate any help on this.  I've spent hours trying to fix this.
Question by:saturation
  • 4
  • 2
LVL 51

Expert Comment

ID: 36588577
i dont see any difference...

please send us a screenshot and show where the problem is...
LVL 51

Accepted Solution

HainKurt earned 500 total points
ID: 36588601
put a

.products_tabular .item {
    height: 60px;

to your item class and it will look nice
or make it a bit less or more to adjust...
LVL 51

Expert Comment

ID: 36588622
or use

.products_tabular .item {
    float: left;
    padding: 0 5px 10px 0;
    width: 380px;

and they will be one column instead of two, but will look nice
IT, Stop Being Called Into Every Meeting

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!


Author Closing Comment

ID: 36588632
Genius!   That fixed it--and it looks better on both browsers now.   Thanks, HainKurt!
LVL 51

Expert Comment

ID: 36588742
you have the same issue on the right side

use 2 columns instead of 3, put a width & height

for example this style makes it better (a bit more space)

ul.KartrisMenu li {

Author Comment

ID: 36588883
Thank you...I'll give it a try!

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

762 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

26 Experts available now in Live!

Get 1:1 Help Now