Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 574
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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