Hi guys,

Running into a strange problem with a skin. 

For a guest book, I've setup a class to display a large quote as a background image.  As a straight html/css file, I can get the image to appear as expected (see attached w/ image circled in blue), but as soon as I place this code in my DNN skin, I can't seem to do anything to get the image to appear.

Within DNN, I can verify that the CSS works fine - I can change 'background' to a color, or even display a .jpg file that is in the same folder, and these changes show fine in my skin.  However for some reason, I just can't get it to display this .gif or any other .gif file.   I've also double checked that this file location is correct.

Any ides on this one?

Thanks,
~Chris




CSS

.quote{
    background: url(images/global/quotes2.gif) no-repeat;
    padding: 6px 0px 20px 0px;
    color: #6A6A6A;
    font-weight:600;
}

.who{
    color: #AA9F88;
}

There could be something sitting on top of it that has a non-transparent background, so it's not visible.

Thanks for the reply, but I don't think that's the issue - unless there is something specific to DNN that is added to the skin that I'm not aware of. 

I've posted the DNN version of the file as well as the straight html version.  The html/css is exactly the same, but you can only see the background image in the html version.

Any other ideas?

Thanks,
~Chris



DNN version:  http://www.firstclasscroatia.com/en...ments.aspx

HTML version:  http://www.firstclasscroatia.com/testArea/guestbook.html

I don't see any differences between the two URLs.  Did you fix it?

The html and css are the same.  However, the html version displays the quotation mark background image fine, but the DNN one does not display it.   See attached images.

Thanks, now that you pointed them out, I do see the quotes.

Now ... where is the directory in which quote.gif is located?  Most likely, you are referring to it incorrectly in the css.  You have the reference as

	background-image: url(/images/global/quote.gif);

The actual image is at

             http://www.firstclasscroatia.com/Portals/0/images/global/quote.gif

You can see this by plugging this URL into your browser's address bar.  What you need to do is get DotNetNuke to look in the correct place.

Try:

             background-image: url(./images/global/quote.gif);

I'm not where I can test this right now, but ... I hope that version works.   If not, it's close ...

This does work:  url(/Portals/0/images/global/quote.gif)

Hi Joe,

Fantastic, that did it. I really appreciate your help, particularly so promptly.

I understand why that link worked, but I think what confuses me is that in that same site/skin, I can successfully reference other graphics files that are in the same folder, using the path in the CSS examples below. 

If that quote graphic is in the same folder, why would I have to use the longer version you sent me and - <!--[if gte mso 9]> Normal 0 unctuationKerning/> false false false oNotPromoteQF/> EN-US X-NONE X-NONE ontGrowAutofit/> ontVertAlignCellWithSp/> ontBreakConstrainedForcedTables/> ontVertAlignInTxbx/> MicrosoftInternetExplorer4 <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> <!--[if gte mso 10]> url(/Portals/0/images/global/quote.gif) - and not same one I used for the other graphics - <!--[if gte mso 9]> Normal 0 unctuationKerning/> false false false oNotPromoteQF/> EN-US X-NONE X-NONE ontGrowAutofit/> ontVertAlignCellWithSp/> ontBreakConstrainedForcedTables/> ontVertAlignInTxbx/> MicrosoftInternetExplorer4 <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman","serif"; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> <!--[if gte mso 10]> url(images/global/quote.gif)?

Thanks again,
~Chris


#shadow {
    width: 840px;
    background: #b5b5b5;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    background-image: url(images/global/dropShadow.jpg);
    background-repeat:repeat-y;
}

#inforoll{
    background-image: url(images/global/Info_over.jpg);
    display:block;
    height:20px;
    width:85px;
}

Hello,

It appears as though you have fixed this now, I noticed

Joe commented on your CSS code:

background-image: url(/images/global/quote.gif);

I see you currently have it as:
background-image: url(images/global/quote.gif);

Perhaps the first time you added the image code you accidentally added a / before the images folder.

Many of your other images seem to be in an images directory within the skin directory.  If you move your quote.gif file there, you can specify it the same way.

Hey guys,

Thanks, with your help, I think I finally understand what was going on.  

I was confused with the file paths, as I was able to successfully display other images at url(images/global/image.gif), such as the titles, header images, etc., but I could not display the background quote image using the same file path, even though that image was located in the same directory.

I realized that the big difference was that I was referencing the quote image from the CSS file, not the HTML of the page, so I needed to place that image file in the image directory within the skin folder, in order to use that file path.  

The other option, as you pointed out Joe, was to leave the image where it was and reference it using url(Portals/0/images/global/image.gif)

Thanks again for helping me through that.
~Chris