Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Same basic CSS but different appearance?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #166023
    Everton
    Participant

    Hello

    I have two pages that use the same basic stylesheet. One page is here:

    China and the other is here:

    India

    (please excuse the colour schemes – still working on that!).

    Down the left-hand side of each page there is a box. The China page is entitled Subheading 1, and the India page Auctor ligula neque.

    The problem I am having is that Subheading 1 needs to look like Auctor ligula neque, but doesn’t. The China Subheading 1 appears to have a thick, ugly image, while the India page has a more attractive thin image (both these png/jpg images have exactly the same 19 x 70px dimensions). In my CSS for the China page, I have:

    #sidebar h3 {
    background: url(images/headerbg.png) repeat-x top left; 
    height: 40px;   
    font-size: 2em; }

    while on the India page, I have:

    #sidebar h3 {    
    background: url(images/headerbg.jpg) repeat-x top left; 
    height: 40px;   
    font-size: 2em;
    }

    I thought this was a transparent PNG image versus JPG problem, but it is not – I have tried interchanging them – so the problem lies elsewhere. I just can’t find where.

    Thanks for any suggestions.

    Everton

    #166025
    Atelierbram
    Participant

    It’s the vertical repeating background-image on #main, which has a different color then the horizontal repeating background-image on the #sidebar h3 header.
    When you would temporarily overlay a background-color on #sidebar with the same background-color as the horizontal-repeating header #sidebar h3 background-image, then you will see that background-image will blend in with the background-color. This is to explain what’s happing, but can imagine your long term solution would be different, like editing that header background-image.

    #sidebar {
    width: 300px;
    float: left;
    padding: 35px;
    color: #E8D6C9;
    background-color: #BCBA3F;
    }
    

    Very well formulated question BTW.

    #166028
    Everton
    Participant

    Hello Atelierbram

    Thank you for your reply!

    So, basically, I would need to make the repeated headerbg.png in #sidebar h3 the same colour as the repeated background3a.png in #main to avoid that colour discrepancy?

    Thanks again!

    Everton

    #166104
    Everton
    Participant

    This is sorted out now!

    Many thanks for your help.

    Everton

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.