Question

IE 7's rendering: IE 7 Everything else's rendering: Everything else There are a few problems between those two images, but the one I'm concerned with is that there is way too much spacing between lines. I set the line-spacing to 0px, and then the "page name here" at the top looks right, but everything else is messed up. Set everything else to 1.2 and everything looks somewhat fine... but that messes every other browser up. What should I do? Is there another property I'm missing, or do I have to ind a work-around?

Code:

The div around the top "Page Name Here"

#TopBar {
    padding: 0px;
    height: 50px;
    max-height: 50px;
    overflow: hidden;
    z-index: 250;
}

The actual h1 element of the "Page Name Here"

.TitleText {
    font-size: 2em;
    color: white;
    text-align: center;
    line-height: 1.2;
}

Everything:

* {
    padding: 0px;
    margin: auto;
    font-family: Tahoma;
    line-height: 1.2;
}

I tried messing with the values a bit but I can only get it to look good on either IE7 or everything else

Was it helpful?

Solution

Figured it out while posting my code...

In my code:

* {
    padding: 0px;
    margin: auto;
    font-family: Tahoma;
    line-height: 1.2;
}

I set the margin for everything to be auto by default, making IE7 render a different value other than 0px. By setting it to 0px for the margin-top property, it gets rid of the extra space at the top of the title bar and fixes the cutting off problem.

OTHER TIPS

use this IE7 hack:

#TopBar { *height: 40px; }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top