Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 581
  • Last Modified:

Strange padding/margin in IE 7

please see the difference between ie7 and ie8.  Firefore, chrome and Opera generally are showing correctly, just IE 7 is giving me hassels.

I have a reset style sheet to help with styling across browers but looks like it's not helping for this. I tried googleing the float problem...added display:inline to the floated elemenets with no luck, so it took it off again.

you can see the code here test1.singulink.com

Please help me pin point the problem!  It's driving me up the wall !!!
ie7.png
0
leena42
Asked:
leena42
  • 4
  • 3
1 Solution
 
Carl TawnSystems and Integration DeveloperCommented:
It's difficult to pin point anything purely from an image. Is the site available anywhere to view, or can you post the markup and styles?
0
 
leena42Author Commented:
Hi Carl_tawn, please check out test1.singulink.com (copy and past into browser)
0
 
DesignbyonyxCommented:
Its a  line height thing.

First of all, line height should have some sort of measurement such as px or pt:

line-height: 25px;

Also, if you have a height on an element... I usually make the line-height the same.  so for your header, it's about 50-60px tall, so I would do this:

height: 50px;
line-height: 50px;
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
leena42Author Commented:
Thanks, designbyonyx.  I didn't set the height.  I wanted it to stretch based on what is in there.  So the Home banner image is bigger...

Anyway, there was a line-height that was in there for some reason, I thought it was good to be in there at the time... so now it's gone and I've just positioned the text absolutely.


However this hasn't fixed the problem I am having with the navigation.... any ideas for that?
0
 
DesignbyonyxCommented:
With regards to the arrow... you have padding-top: 26px;

Instead of doing that, you want to remove the padding and use this instead:

bottom: 0;


However, you have some script which is moving the arrow.  The script is setting the CSS "top" property to 11px, which will prevent the suggestion I made with regards to "bottom" from working.  Can you modify that script that is moving the arrow?
0
 
DesignbyonyxCommented:
If it were me, I would remove the arrow image and use it as a background image for the highlighting DIV:

.fluidHighlight_SelectedLeft {
  position: absolute;
  background: transparent url(path/to/arrow.png) no-repeat bottom center;
  height: 35px;
}
0
 
leena42Author Commented:
That's beautiful... I was trying to do something like that because I don't have access to the orginal js file.
0
 
leena42Author Commented:
Thanks so much for your great ideas and all your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now