Welcome to WebmasterWorld Guest from 54.167.253.186

Forum Moderators: not2easy

Message Too Old, No Replies

3 different size logos linked to home page not loading

     
4:45 pm on May 9, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


I'm trying to set up a logo/banner with a link to the home page with the logo/banner in 3 different sizes for Responsive with media queries but the images aren't loading when I test the site online.

Can anyone see what's wrong in my code?

=======the HTML ==========

<div id="header">
<!--#include file="header.txt" -->
</div>


The header.txt file :
<a href="index.html"><div id="logobanner"> </div></a>

======the CSS==========

#header { margin:0 auto; }

Desktop:
#logobanner {background: url(images/header-desktop.jpg) top center no-repeat; }

Mobilie:
#logobanner {background: url(images/header-mobile.jpg) top center no-repeat; }

Tablet:
#logobanner {background: url(images/header-mobile.jpg) top center no-repeat; }


=========the 3 images ======

The 3 images are all in the images folder using exact names as listed above.
4:57 pm on May 9, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 19, 2002
posts:3328
votes: 30


the div has got no size?

in any case i don't think using a backround image for your logo is a good idea symantically

OT... i've been using the <picture> tag with great success - setting different images for different screen widths
3:23 am on May 10, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:7876
votes: 546


Where is your viewport test code? Two of your images are named the same. Just askin'!
4:03 am on May 10, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


1. What is seen when viewing the source code?
2. Have you checked headers to see the server response if/when an image is requested?
3. Have you tried validating the css and html?

W3.org can help isolate a problem when you have unexpected results.
HTML Validator: [validator.w3.org...]
CSS Validator: [jigsaw.w3.org...]
5:14 pm on May 10, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


@topr8

re div size -- I figured I can't do that as the logos come in 3 different sizes.
I don't like using a background img for logo as can't use alt tag, etc., but don't know of another way to do it.
I'll check into the picture tag as I"ve never used it.

@Tangor

The 2 image names being the same was due to copy/paste into this forum. It's ok on the website.
Re viewport test code - I haven't been using Chrome's test code as I don't like Chrome. I use Firefox when working with websites. Besides I just checked Chrome and it says that Mac 10.7 is no longer supported and I'm not ready to upgrade. I write code by hand, check pages visually by resizing the browser window, run everything through W3C and finally an online tablet/mobile checker.

@not2easy

The source code for header is same as I posted above for ID = header and header.txt file.

When using firefox developer/view source it shows an error on that line but it looks correct to me. (missing </a> before <div>)

<div id="header">
<a href="index.html"><div id="logobanner"> </div></a>
</div>

I suspect Firefox isn't set up for HTML5 which I'm using as other errors do not apply.

The HTML validates, the CSS validates except for a new nav I'm trying out. I don't think it's interfering with the header data. The logobanner not loading affects all pages, not just the page I'm testing.

I have written in the url for logobanner on the home page exactly as described above, and that loads fine so it's not a missing image, etc.

Can you explain how to view the server response?

--
thanks to everyone for trying to help.
5:23 pm on May 10, 2016 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Apr 30, 2008
posts:2630
votes: 191


(missing </a> before <div>

It is because it does not like to have <div> inside <a>.

Try to style <a> with display: block and/or replace div inside <a> with <span> which also has display:block
7:25 pm on May 10, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:7876
votes: 546


Does this misspelling occur elsewhere in the code?

Mobilie:
7:35 pm on May 10, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 182


Can you explain how to view the server response?

I use a Firefox extension that can be activated just to check the headers of a page request, it produces a file which can be saved as plain text to see specific resource requests and server responses. It looks messy until you spend a little time looking through it. I believe there is a headers tool here in the forum's free tools also.
8:21 pm on May 10, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14245
votes: 550


div size -- I figured I can't do that as the logos come in 3 different sizes

Sure you can. Put the CSS in the same place that you're currently defining the three different background-images, and for each one specify a {min-height} for the div, determined by the image size plus whatever padding you need.

When I have something whose sole content is a background image, I always feel safer saying <div blahblah>&nbsp;</div> because then abracadabra you've got content as far as the browser is concerned. (Same thing with borders of empty table cells, so you don't have to trust the browser to do what it's supposed to do.)

It is because it does not like to have <div> inside <a>.

How many antique versions of MSIE do you need to support? On paper, <a> used to be considered an inline element, so <div> inside <a> would fail validation even when browsers were happy to display it. Today it should make no difference.
8:59 pm on May 10, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


@ aakk9999

I added this to the header.txt and it didn't work - even emptied the cache and tried again.

<a href="index.html" class="display:block;"><span id="logobanner" class="display:block;"> </span></a>

Lucy24 said it's not needed so I removed it again.

@lucy24

I added width and min-height to css everywhere I listed the images and that didn't work.

Then I added &nbsp; between the div's in header.txt and that fixed it.
Alll this trouble for lack of a space &"0@0&^! (grrrrr).

PS. Being a Mac lover I have no interest in supporting any version of MSIE. :) but thanks for confirming I don't need to make changes to the <a>.

I'll make note of what worked for future reference.
----
Thanks everyone! It's working now.