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!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
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 displaying root domain instead of country locale
Hi, For many months now, Google refuses to display the relevant locale in many markets, and instead shows the root domain as number 1 result. The country locale isn't even in the SERP in some countries(!). This only applies for branded searches. It appears Google is treating the root domain as an international landing page or something, while this isn't the case - visitors get redirected automatically based on their Geo-IP to the relevant country locale if they enter the root domain, there is no "flag selector" that people or bots can choose. Site: example.com If someone searches for "example" from Google Canada, they should be met with example.com/en-ca/ as the first result for branded searches. Instead, example.com is ranking, and example.com/en-ca/ is nowhere to be found. This problem is in all our English markets; Canada, India and UK. For non-english countries, branded searches return the relevant locale, but the root domain is often the 2nd result as well. This isn't as bad as the case with the English markets, but still. Any help whatsoever would be greatly appreciated, or if you can recommend great reading assets. I have researched this thoroughly and tried different technical solutions, but nothing has worked so far. Thanks!
Technical SEO | | LeoVegas0 -
Do you Index your Image Repository?
On our backend system, when an image is uploaded it is saved to a repository. For example: If you upload a picture of a shark it will go to - oursite.com/uploads as shark.png When you use a picture of this shark on a blog post it will show the source as oursite.com/uploads/shark.png This repository (/uploads) is currently being indexed. Is it a good idea to index our repository? Will Google not be able to see the images if it can't crawl the repository link (we're in the process of adding alt text to all of our images ). Thanks
Technical SEO | | SteveDBSEO0 -
Google Only Understand Image in img src=image path and not data-src= image path
Hello Moz Team Actually for my ecommerce site at product page for one product i have many images and what my developer did for 1st image is on Img src format but other images load on after click for that they have used data-src= image path, data-big= image path so Google Only Understand Image in img src=image path and not data-src= image path? If yes that means only img src = image path will index in google and not other images?2) So in images sitemap xml I have to submit only images scr = images path images only?3) Currently in my images sitemap xml all images are there either img src, data-src etc so what will google do here? He will ignore data-src images or he will try to search on website ? Will he confuse or use by bandwidth or crawl rate? Can you pls guide me? Thanks!
Technical SEO | | Johny123450 -
Webpages & Images Index Graph Gone Down Badly in Google Search Console Why?
Hello All, What is going on with Sitemap Index Status in Google Search Console :- Webpages Submitted - 35000 index showing 21000 whereas previously approx 34500 were index. Images Submitted - 85000 index showing - 11000 whereas previously approx 80000 were index. Whereas when I search in google site:abcd.com is it showing approx 27000 index for webpages. No message from google for penalty or warning etc.Please help.
Technical SEO | | wright3350 -
Removing images from site and Image Sitemap SEO advice
Hello again, I have received an update request where they want me to remove images from this site (as of now its a bunch of thumbnails) current page design: http://1stimpressions.com/portfolio/car-wraps/ and turn it into a new design which utilized a slider (such as this): http://1stimpressions.com/portfolio/ They don't want the thumbnails on the page anymore. My question is since my site has a image sitemap that has been indexed will removing all the images hurt my SEO greatly? What would the recommended steps to take to reduce any SEO damage be, if so? Thank you again for your help, always great and very helpful feedback! 🙂 cheers!
Technical SEO | | allstatetransmission0 -
If content is at the bottom of the page but the code is at the top, does Google know that the content is at the bottom?
I'm working on creating content for top category pages for an ecommerce site. I can put them under the left hand navigation bar, and that content would be near the top in the code. I can also put the content at the bottom center, where it would look nicer but be at the bottom of the code. What's the better approach? Thanks for reading!
Technical SEO | | DA20130 -
Webmaster Tools - Clarification of what the top directory is in a calender url
Hi all, I had an issue where it turned out a calender was used on my site historically (a couple of years ago) but the pages were still present, crawled and indexed by google to this day. I want to remove them now from the index as it really clouds my analysis and as I have been trying to clean things up e.g. by turning modules off, webmaster tools is throwing up more and more errors due to these pages. Below is an example of the url of one of the pages: http://www.example.co.uk/index.php?mact=Calendar,m1a033,default,1&m1a033year=2084&m1a033month=3&m1a033returnid=59&page=59?phpMyAdmin=xxyyzz The closest question I have found on the topic in Seomoz is: http://www.seomoz.org/q/duplicate-content-issue-6 I want to remove all these pages from the index by targeting their top level folder. From the historic question above would I be right in saying that it is: http://www.example.co.uk/index.php?mact=Calendar I want to be certain before I do a directory level removal request in case it actually targets index.php instead and deindexes my whole site (or homepage at the very least). Thanks
Technical SEO | | Mitty0 -
Get to the top of Google in 30 days?
I see on sites like scriptlance where webmasters post a project for SEO services and bidders offering their services to get you to the top of Google in 30 days. Is that out of the question or is it reasonable because they use a service like SEOMoz?
Technical SEO | | webtarget0