Solved

Strange padding/margin in IE 7

Posted on 2011-03-02
8
515 Views
Last Modified: 2013-12-08
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
Comment
Question by:leena42
  • 4
  • 3
8 Comments
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35019451
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
 

Author Comment

by:leena42
ID: 35019479
Hi Carl_tawn, please check out test1.singulink.com (copy and past into browser)
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35020283
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
 

Author Comment

by:leena42
ID: 35020391
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35020541
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
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 35020823
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
 

Author Comment

by:leena42
ID: 35020866
That's beautiful... I was trying to do something like that because I don't have access to the orginal js file.
0
 

Author Closing Comment

by:leena42
ID: 35020878
Thanks so much for your great ideas and all your help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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 embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

910 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

29 Experts available now in Live!

Get 1:1 Help Now