css hiding

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Tony Groome 261 posts 804 karma points

May 20, 2015 @ 16:08

0

CSS hiding

Hi All

I just changed the picture used for my background image to a new one and now the background is white. So I tried be restarting my pc. Still the same. I went into App_Data\cache in Web Matrix and deleted all the files here too, still showing white! Am I missing something?

Thanks.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

May 20, 2015 @ 18:11

1

Hi Tony

Can you share some HTML and CSS code with us please?

And have you double checked that the path to the new image is100% correct? I suspect there might be a typo somewhere.

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

May 21, 2015 @ 10:33

0

Hi Jan

I was thinking along your lines too, but it seems right. I did find one thing. There were two versions of my application, one on my c drive and the other on a networked drive, so I deleted the networked one, re-checked the css and path names. Then I cleared the cache under App_Data and cleared the logs there too. I touched the Web.config and restarted the site and still nothing.

Here's the stylesheet:

And here's the Master template:

Thanks.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

May 21, 2015 @ 11:56

1

Hi Tony

Are you able to see the CSS if you go to http://yoursite.com/css/anotherStyle.css ?

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

May 21, 2015 @ 12:09

0

Hi Jan

If I go to http://mysite.com/css/anotherStyle I get my custom 404 lost page, but if I go to htp://mysite.com/css/anotherStyle.css I get this notepad pop up:

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

May 21, 2015 @ 12:36

1

Hi Tony

Ok, so the stylesheet does exist - Just wondering why it's not displaying then.

could you try changing the path to the file say /css/anotherStylesheet.css instead of ~/css/anotherStylesheet.css - Does that make any difference?

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

May 21, 2015 @ 12:52

0

Hi Jan

Yes I tried that too, just in case! I just transferred it over to another machine via a usb stick and it's the same.

Tony

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

May 21, 2015 @ 13:07

1

Hi Tony

Ok...if you change anything else in the template does that then have any effect? If not...are you editing the correct template? :)

/Jan

Copy Link
Tony Groome 261 posts 804 karma points

May 21, 2015 @ 13:25

0

Hi Jan

Yup it's the correct template!

Don't know if you are familiar with this but I'm going mad!

Thanks.

Tony

Copy Link
Tony Groome 261 posts 804 karma points

May 21, 2015 @ 17:22

0

Hi Jan

I have tried lots of things: Under App_Data I deleted all the cache and log files; under Temp I deleted all the files - I left the folders though - just in case. Then I touched the web.config file and restarted the site. Nothing. No CSS. I tidied up my code and took lots of screenshots:

Master Template:

Homepage Template:

Stylesheet:

Media file: This is the image I have tried to set as my background.

Inspect Element in Chrome:

Inspect Element in Firefox:

Thanks.

Tony

Copy Link
Tony Groome 261 posts 804 karma points

May 26, 2015 @ 13:01

0

Hi All

I think I believe that CSS is Voodoo!

Still having this problem. I uninstalled the images and reloaded them in Media. Then I changed their node numbers and url. Still nothing. So I changed the background-color:red and it turned red. So at least the CSS is being read. It just won't display my images. Any ideas?

Thanks.

Tony

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

May 26, 2015 @ 14:08

101

Hi Tony,

I think I might know what is going wrong here. How did you get the path to the image that you are using in the CSS file, to me it looks like that you are compose the url by taking the id of the image node from the media section and the name of the file.

To make sure that you are getting the correct path to the image I would recommend you to click on the preview of the image, when you are on the image in the media section. Then you can copy the correct path to the image from the browser.

Hope this helps,

/Dennis

Copy Link
Tony Groome 261 posts 804 karma points

May 26, 2015 @ 14:16

0

Hi Dennis

I don't believe it! I was getting the node number directly from the media and didn't get it from the preview of the image like you said. Wow, so simple! I have been at this on and off for days!

Thanks a lot.

Tony

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

May 26, 2015 @ 14:24
1
It looks to me like you have an unclosed header element. Actually, there's a few things going wrong in there.

You shouldn't be rendering element tags in your head. That is reserved for title, script, link and meta declarations only.

All other element tags should be contained within the body.

https://our.umbraco.org/media/upload/d4d5d2e9-204e-4742-8e3e-414fde781d6f/master.png

Your markup should be more like.
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title Here</title>
    
    <link rel="stylesheet" href="~/css/Style.css"/>
</head>
<body>
    <header role="banner">
        
    </header>
    <main role="main">
        @RenderBody()
    </main>
    <footer role="contentinfo">
        
    </footer>
    
</body>
</html>
```
Copy Link
Tony Groome 261 posts 804 karma points

May 26, 2015 @ 15:09

0

Hi James

I noticed that the other day all right! I hoped that might sort it, but no chance! Is there any reasons for setting out the markup like you did? I never noticed that mine was a bit off, I was half copying it from Umbraco.tv, but no cigar just yet!

Thanks.

Tony

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

May 26, 2015 @ 15:47

1

Hi Tony,

Yeah a broken url can't be fixed that way ;)

I laid the markup out in that way as that is the way the Html5 specification defines it to be done. Browsers allow for some mistakes (incorrectly in my opinion) but using the incorrect markup will lead to unexpected results and difficult to diagnose bugs.

There's a ton of excellent information here if you want to learn more. http://html5doctor.com/element-index/

Cheers

James

Copy Link
Tony Groome 261 posts 804 karma points

May 26, 2015 @ 16:10

0

Hi James

Wishful thinking on my part! I like browsers that give me some leeway - I need it! Thanks for the link, I'll try to crawl my way through some of it and take away some of the magic in the CSS!!

Tony

Copy Link
James Jackson-South 489 posts 1747 karma points c-trib

May 26, 2015 @ 18:50

1

There's a lot to take in but it does get much easier after time I promise! :)

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?