Css - Headings with 2 images

[Grafdude]

I have this webpage, which has some green and grey headings with 2 images (rounded borders):

http://megamatique.ca/PDLM/index.asp

The page will display fine in IE, but in gecko bases browsers, its a different story.

I played a lot around with the css to figure out whats the problem, and Im out of ideas.

Anyone has an idea?

[trinity0159]

I would try using line-height it avoids broken box model.

.h4 {
font-size:1.2em;
font-weight:bold;
text-align:center;
background:#DAF3C1 url(images/h4_l.gif) no-repeat top left;
line-height:1.5em;
}

[RetroNetro]

Hello

I am looking at it in Firefox 1.0PR and IE6 SP2 and it looks great in both. I checked it at 800x600, 1024x768 and 1280x1024 and all looks good.

Maybe I am missing what you mean. Are you talking about the rounded green corners where it says "Emissions" and "Recettes" If so, I do not see any problems.

Johnny

[RetroNetro]

Hello

I see it now. I was looking on the outside not inside, but I swear I stared at it for 5 minutes.

Sorry, Nice site by the way.

Johnny

[Grafdude]

lol thanks!

Yes Im really wondering what the problem is, I tried really all sorts of stuff!

[Grafdude]

I would try using line-height it avoids broken box model.

Code:

.h4 { font-size:1.2em; font-weight:bold; text-align:center; background:#DAF3C1 url(images/h4_l.gif) no-repeat top left; line-height:1.5em; }

I added the code into the headings, did not help really, go take a look.

Thanks for all the feedback

[Paul O'B]

Hi,

If you are talking about your .h1 classes (and the other similar ones) then you have set the height to 16px. If you measure the height in firefox you will see that they are 16px high as you have instructed. Therefore there is not enough room for the contents to fit.

If you look at ie and measure the container then you will see it is actually about 29px high!.

So set the correct height (or no height at all) and it will display ok in firefox.

.h1 {
font-size:1.3em;
font-weight:bold;
text-align:center;
background:#f3f3f3;
background-image:url(http://megamatique.ca/PDLM/images/h1_l.gif);
background-repeat:no-repeat;
background-position:top left;
height:29px;
margin-right:6px;
line-height:29px;
}
.h1 div {
background-image:url(http://megamatique.ca/PDLM/images/h1_r.gif);
background-repeat:no-repeat;
background-position:bottom right;
}
.h1text {
}/*not needed if line -heigh is set*/

Hope that helps.

Paul

[Grafdude]

So set the correct height (or no height at all) and it will display ok in firefox.
Code:

.h1 { font-size:1.3em; font-weight:bold; text-align:center; background:#f3f3f3; background-image:url(http://megamatique.ca/PDLM/images/h1_l.gif); background-repeat:no-repeat; background-position:top left; height:29px; margin-right:6px; line-height:29px; } .h1 div { background-image:url(http://megamatique.ca/PDLM/images/h1_r.gif); background-repeat:no-repeat; background-position:bottom right; } .h1text { }/*not needed if line -heigh is set*/

I tried that, it really did help!
The headings now appear correc... almost correctly in gecko browsers.
In you look at the page in IE, you will notice that the headings have a 6px padding from the images, but in gecko, the headings are right beside the photos.

Anyone got a clue?

[Grafdude]

Also, I am not achieving the desired effect in gecko browsers, the headings are suppose to display a rounded border in top left and bottom right corner. (depending on the float position)

[Paul O'B]

Hi,

You are getting a round border in gecko except that you just can't see it because its behind the image.

In compliant browsers the backgrounds and borders of elements adjacent to floats will pass under the float. A float only moves the content away and not the background of the adjacent element.

Therefore you will need to gice specific widths to your elements.
e.g.

.h1 {
font-size:1.3em;
font-weight:bold;
text-align:center;
background:#f3f3f3;
background-image:url(http://megamatique.ca/PDLM/images/h1_l.gif);
background-repeat:no-repeat;
background-position:top left;
width:207px;
}

Hope that helps.

Paul

[Grafdude]

Yes I already knew that, thanks anyways
The reason why I dont want to use a specific width, is beacause the content will be subject to change a lot, including the photos, so the width of the headings have to be dynamic.

Are you saying that because of the floats, it would be impossible to achieve this in Mozilla?

[Paul O'B]

Are you saying that because of the floats, it would be impossible to achieve this in Mozilla?

Well if you can't supply a width then it should normaly not be possible.

However you might want to try this hack although I can't guarantee if there are any drawbacks with it. If you add overflow:auto to an element next to a float then mozilla takes its margins from the float and not the container.

.h1 {
font-size:1.3em;
font-weight:bold;
text-align:center;
background:#f3f3f3;
background-image:url(http://megamatique.ca/PDLM/images/h1_l.gif);
background-repeat:no-repeat;
background-position:top left;
height:25px;
line-height:25px;
overflow:auto;
}

This is a bug that I noticed some time ago that hasn't been documented (AFAIK) so test it first but it seems to do what you want without problems.

Paul

[Grafdude]

Thanks you soo much, it does work nicely! Now the headings appear correctly.

But theres one more problem... When you change the font size in the browser, the heading images wont place accordingly. I'd have to remove the height of the headings, but then if I remove the height, headings will look bad in gecko. Any suggestions?

[Paul O'B]

Any suggestions

Try setting the height using em. Then when font size is increased the em size is also adjusted automatically.

Paul

[Grafdude]

That also does work, thank you soo much Paul, you've been very helpfull!