SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Css - Headings with 2 images

    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?

  2. #2
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol thanks!

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

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.
    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*/

    Hope that helps.

    Paul

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.
    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;
    width:207px;
    }
    Hope that helps.

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

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

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Any suggestions
    Try setting the height using em. Then when font size is increased the em size is also adjusted automatically.

    Paul

  15. #15
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That also does work, thank you soo much Paul, you've been very helpfull!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •