Solved

Strange padding/margin in IE 7

Posted on 2011-03-02
8
526 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

776 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