CSS Float Top Left Image not displaying
-
Using CSS/HTML in Dreamweaver CC, I am trying to display a SEO friendly matrix of six images wide by three deep on the Home Page, but cannot get the first (top left) image to display consistently.
The page appears correctly in Dreamweaver Design View, but not in the Live View. Equally it works fine in Safari, but not in Firefox nor I.E.
I seem to have tried every CSS variation to resolve this issue, without success. Can someone stear me in the right direction, please?
The relevant HTML Code ...
Celotex PL4050 - 62.5mm insulated wallboard from £11.96 per m² / £34.45 per board
SuperFoil SF19 40mm Multi-foil Roll from £5.23 per m² / £98.00 per 18.75 m² Roll
Celotex GA4000 General application Rigid PIR from £8.56 per m² / £24.66 per board
Rockwool Full-fill 75mm Cavity Wall Slabs from £3.51 per m² / £1.92 per slab
Knauf Earthwool 270mm Loft Roll 44 Combi-Cut from £3.80 per m² / £22.51 per 9.93 m² Roll
Kingspan Kooltherm K8 75mm Cavity Wall Boards from £16.26 per m² / £8.79 per board
Knauf Earthwool 170mm Combi-cut Loft Roll 44 from £3.16 per m² / £25.34 per 8 m² Roll
Kingspan Kooltherm K7 Rigid Phenolic Foam - 75mm £13.91 per m² / £40.05 per board
...
The associated CSS code ...
#popular {
width: 1050px;
height: 800px;
overflow: hidden;
width: auto;
height: auto;
}
#product1 {
background-image: url(../007-graphics/popular/01-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
overflow: auto;
clear: left;
}
#product2 {
background-image: url(../007-graphics/popular/02-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
opacity: 0.85;
}
#product3 {
background-image: url(../007-graphics/popular/03-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product4 {
background-image: url(../007-graphics/popular/04-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product5 {
background-image: url(../007-graphics/popular/05-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product6 {
background-image: url(../007-graphics/popular/06-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product7 {
clear: both;
background-image: url(../007-graphics/popular/07-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product8 {
background-image: url(../007-graphics/popular/08-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product9 {
background-image: url(../007-graphics/popular/09-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
} ...The complete code is located at - www.just-insulation.com/index.html
-
G'day Jesse,
I have added the following code to my .htaccess file ...
RewriteEngine On
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.index.html\ HTTP/
RewriteRule ^(.)index.html$ http://www.just-insulation.com/$1 [R=301,L]All attempts to add a similar code to redirect in the other direction results in the home page not loading, or the creation of an infinite loop.
Open Site Explorer still returns ...
www.just-insulation.com a PA of 32 and
www.just-insulation.com/index.html a PA of 15The thought of all this lost link juice is making me really thirsty.
-
Yes exactly. Assuming you're on an Apache server, of course.
Just to clarify, I ran both URLs through Open Site Explorer and sure enough two different Page Authorities returned:
www.just-insulation.com has a PA of 32
www.just-insulation.com/index.html has a PA of 15
Showing that in fact your link juice is splitting there when ideally you will want it combined.
-
Should I understand that you are proposing that I use the .htaccess file to create a server side redirect?
-
No problem.
While it is good you have the canonical tag present, you should still redirect one to the other. The canonical tag will prevent any duplicate content issues with your site so at least you don't have to worry about that. But not redirecting can still have some unwanted effects on your page.
Basically it can split your PR/PA between two URLs. If somebody links to yourdomain.com and another somebody links to yourdomain.com/index.html these two links are now receiving juice separately. The canonical tag does not carry link juice. That is why you want to 301 the index.html page to your root domain. Your hosting provider should be able to do this easily for you, or go ahead and google it if you have your own server. (the process changes based on whether you're hosting via Apache servers or IIS servers.)
I would still focus on getting that redirected. It'll save you headaches in the future.
Good luck!
-
Thanks again for your input, Jesse.
Your 301 Redirect has me worried. We presently have the canonical statement on our home page ... - and thought that this was the correct way to prioritise http://www.just-insulation.com over http://www.just-insulation.com/index.com . Also, the weekly Moz Campaign Crawl Diagnostics is not showing any errors. Can you elaborate on the best method to resolve this issue?
I continue to search for an appropriate SEO friendly Add-in that will allow me to frequently change the front page images / hyperlinks / descriptions / etcetera. However, I certainly do take your advice on board.
Many thanks.
-
Bravo, sir! May I make one more SEO related quick-suggestion:
Make sure you redirect your page with a 301 to avoid duplicate content. Right now you have two addresses (www.domain.com and www.domain.com/index.html) displaying the same content. These will both be indexed and should be redirected.
Also from a usability standpoint I feel like the images should be clickable... But there are a ton of these little nit-picky changes I'll leave to you
You might be kind of shooting yourself in the foot with the whole image name thing. You don't have alt tags or image names and that can affect your on-site optimization. However you won't rank for every product on one page anyway so in your case it might not matter terribly. Still I'd raise an eyebrow if it were my page..
Anyway good luck!
-
Greetings Jesse,
Thanks for the feedback. It seems that once I removed the drop shadows from the images, the situation resolved itself. Clearly there was a sizing issue with one or more of the images that was throwing the CSS float out of kilter.
The reason that I named the images prod-1, prod-2, prod-3, was to semi-automate future image changes. As these are background images, populated through CSS, rather then HTML, I understood that they had no influence on SEO.
Sorry about your headache, and 'Yes', you were quite right that the 'Happy Monkey' font was totally over the top! That came about because of my mistake in the CSS Links, and has since been resolved.
I have been trying to identify a jQuery Gallery or Lightbox to use instead of CSS, but without luck so far.
Again, my thanks for your critique.
-
Hi there Maximise,
Thank you for the advice. The problem is now solved thanks to the responses to my post.
It seems, that (following Jesse's critique) when I removed the drop shadows from the images, the situation resolved itself. I can only imagine that the Drop Shadows were effecting the image size, and this impacted upon the CSS Float mechanism.
Anyway, thanks again.
-
Thanks!
It relates to elements that are floated. Options are left, right, both or none. So if you have "clear:left" then this element can not have any floated elements to it's left and would therefore be bumped to the next line.
-
Ha! Yeah that'll do it. Nicely done Maximise.
As a side, what does the clear: operator do in CSS?
-
The product 1 image doesn't seem to exist. Are you sure you don't have it cached in some browsers? Follow this link and press F5 to see if it loads - it doesn't for me.
http://www.just-insulation.com/007-graphics/popular/01-prod.png
-
Couple things here --
First off I'm not sure you'll get the best coding advice here on the moz forums.. Although I know there are some people here who are good at it for sure. You may be better off with these types of questions at stackoverflow.com (just a thought)
Moz will give you awesome marketing/optimization tips though. For example, I might say to you "hey why are your images titled '09-prod.png' that isn't doing anything for your optimization..." Or I might say "oof. No offense but that site kinda gives me a headache. See if you can make it less busy and scale that drop shadow down... Is that comic sans?? no."
But also to answer your question, my best bet would be that your first product definition in the CSS has a "clear:left" operator assigned to it. That is most likely why it is not displaying. Try removing that.
Hope this helps!
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Google search console image indexing issue
Google search console tells that only '58 out of the 3553' images in the images sitemap are indexed. But if I search "site:example.com" in Google images there seem to be lots of images. There are no errors in the sitemap and I am still getting reasonable number of image search hits daily. Are the webmaster tools stats for images indexed accurate? When I click on the Sitemap Errors & Index Errors this is what i get - Error details: No errors found. https://www.screencast.com/t/pqL62pIc
Technical SEO | | 21centuryweb0 -
Google lists eBay.au number one for vertical garden and their sellers are using my IMAGES
Is there anyway of getting Google to slap eBay with a loss of page rank ? eBay.au has number one position for vertical garden in google.com.au. (search 9000). Fair enough I suppose because they are delivering a huge range of vertical garden products BUT the sellers are using images for their products that are not showing their products. Most of the sellers are flogging China copies - and I mean these are really bad copies. But what angers me even more is some of their top sellers are using MY IMAGES. They have taken my images used on a UK website and have reused them in AUstralia. Sellers have even rebranded my images. GRRRRR Is there some international sin bin where I can name and shame? Does Google care about such matters?
Technical SEO | | GardenBeet0 -
Image Height/Width attributes, how important are they and should a best practice site include this as std
Hi How important are the image height/width attributes and would you expect a best practice site to have them included ? I hear not having them can slow down a page load time is that correct ? Any other issues from not having them ? I know some re social sharing (i know bufferapp prefers images with h/w attributes to draw into their selection of image options when you post) Most importantly though would you expect them to be intrinsic to sites that have been designed according to best practice guidelines ? Thanks
Technical SEO | | Dan-Lawrence0 -
Can the Hosting location of image files have a negative effect if on the developers own media server rather than on client site server ?
Hi Can the Hosting location of image files have a negative effect if on the developers own media server as opposed to on the actual websites server ? In the case i'm looking at the image files are hosted on a totally separate server (a media subdomain of the developers site server) from the subject sites dedicated server. Will engines still attribute the properties of files hosted in this manner to the main website (such as file name or should they really be on the subject sites server own media folder ? Cheers Dan
Technical SEO | | Dan-Lawrence0 -
Rich Snippets Inconsistent Display
Hi Folks, We implemented Schema mark up on our hotel details page many months ago now (previously we had a different mark up language, but switched to Schema during a complete page re-design). Its been live for plenty of time now and is being picked up in webmaster tools. http://www.asiarooms.com/en/singapore/singapore/175433-orchard_hotel_singapore.html Even before we switched to Schema we had a very inconsistent display of rich snippet data in the search results and this has continued despite the mark up being implemented correctly. For example, a search in Google Singapore for 'Orchard Hotel Singapore' shows the AsiaRooms.com listing without any rich snippets. You can see that the vast majority of our competitors like Agoda, Booking.com always show rich snippet data (search for 'orchard hotel singapore agoda' for example). I have checked the hotel in the rich snippet testing tool and its marked up correctly such that it should feasibly show the review count and the score. http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fwww.asiarooms.com%2Fen%2Fsingapore%2Fsingapore%2F175433-orchard_hotel_singapore.html&html= Whilst Agoda and Booking seem to display rich snippet data on literally EVERY hotel, its very inconsistent for AsiaRooms which is extremely frustrating - feels like some kind of punishment or favouritism. Any ideas why this might be the case and anything I could try to resolve it? Thanks, Ben
Technical SEO | | BenRush1 -
Changing images on site without losing ranking
A number of images on my site rank very well under google image search but need to be replaced with updated versions. If I keep the file name and pixel dimensions identical will switching the image effect my rankings? Thanks!
Technical SEO | | Justin450 -
Getting images indexed in the SERPS
Good Afternoon form 13 degrees C totally Sunny Wetherby UK 🙂 Am i right in thinking that the only way to get images appearing like this in your serps: http://i216.photobucket.com/albums/cc53/zymurgy_bucket/innovia-merchant-immages-serpscopy.jpg is to be hooked up to Google Merchant? Which kind of means if the sight your working on has no images then this type of enhancement is out of bounds? Thanks in advance, David
Technical SEO | | Nightwing0 -
When moving my ecommerce website from one host to another should I also 301 all my image urls?
I'm going to be 301'ing a lot of pages, but should i also 301 my image URLS? Any other helpful hints would be awesome too, as this will be my first move online ever. We've been with our host 3 years. Thanks! Paul Serra STbands.com, Owner
Technical SEO | | Hyrule0