I am csstuck

I have this curios problem with the design on this page: http://solvang.vevstova2.no
While I am building up the design, I check it regularly in Firefox, Camino, Opera, Safari and Chrome on my Mac, and in Firefox, Chrome, Opera, Safari and IE8 on my PC running Windows Vista.
But then I tested on my two laptops (one with Windows XP and IE7 the other with Windows 7 and IE8. And something happens with the slogan div under the header div. The reasen can be the way I am letting the ascenders of the Tangerine font (from Google font API) go up in the header div (which I intend to do). I have tried different solutions to solve the problem, but now I am stuck in the CSS (and may be in the html?)
The solution is probably there, just in front of my eyes, but I am not able to si it.
I appreciate all solutions.

Hi audun, welcome to SitePoint! :slight_smile:

So what is the actual problem? I wasn’t able to see the problem on my computer. Could you take a screen shot? What’s different about your laptop?


I can see the problem in iE7 and its because you have a font-size of 40px but only a line height of 16px which means IE7 will cut it short.

I would do it differently and set a height on the container of 30px and then absolutely place the p element so that t doesn’t take part in the flow and then nudge it into position.

In your IE stylesheet do this:

#slagord {
    width: 960px;
    z-index: 1;
    position: relative;
    background: url(http://solvang.vevstova2.no/stilar/img/g-trans3.png) repeat;
 [B]   height:30px;[/B]

#slagord p{
    color: #fff;
[B]    font: italic 40px/40px "Tangerine", arial, sans;
    padding:0 0 0 175px;
    letter-spacing: 2px;
 [B]   position:absolute;

Adjust the top position until its correct.

Hi there - this made my day - almost. The index-file I had uploaded was the one I used to try to adress the IE-problem, and not the correct one that doesn’t call a special IE-stylesheet. I prefer to make designs that don’t need extra IE-stylesheet(s). But your solution still runs well on all the browsers - with the same stylesheets (except for Camino, which doesn’t render the Google-font, I have to make a different solution for that).

The correct line height unveiled the desenders (a typical copy paste-error).

The only thing I can see now, is that the elements (header, slogan and wrapper) go from eachother when I try to scale the page (in IE7).

ralph.m: Though I think I got a good answer from Paul O’B, here are screen shots of the original problem. I had uploaded the wrong index file in my first question, so you didn’t really get the correct picture of the problem:
Thanks for quick response.

You could probably get around that by using a top:auto position and then using a negative to margin to pull it into position.