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
leena42Asked:
Who is Participating?
 
DesignbyonyxConnect With a Mentor Commented:
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
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
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
 
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
All Courses

From novice to tech pro — start learning today.