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
-
How to get into Google's Tops Stories?
Hi All, I have been doing research for a few weeks and I cannot for the life of me figure out why I cannot get my website (Racenet) into the top stories in Google. We are in Google News, have "news article" schema, have AMP pages. Our news articles also perform quite well organically and we typically dominate the Google News section. We have two main competitors (Punters and Just Horse Racing) who are both in top stories and I cannot find anything that we are doing that they aren't. Apparently the AMP "news article" schema is incorrect and that could be the reason why we aren't showing up in Google Top Stories, but I can't find anything wrong with the schema and it looks the same as our competitors. For example: https://search.google.com/structured-data/testing-tool/u/0/#url=https%3A%2F%2Fwww.racenet.com.au%2Fnews%2Fblake-shinn-booked-to-ride-doncaster-handicap-favourite-alizee-20190331%3FisAmp%3D1 Does anyone have any ideas of why I cannot get my site into Google Top Stories? Any and all help would be greatly appreciated. Thanks! 🙂
Technical SEO | | Saba.Elahi.M.0 -
GWT Fetch & Render displays desktop version of site as mobile
Hi team, I noticed that when I request a desktop rendering in GWT using fetch and render, pages render as the mobile version. Screenshot attached. It's related to the VHS units in our CSS (as far as I'm aware). Does anyone know what the implications of this may be? Does it mean googlebot can only see the mobile version of our website? Any help is appreciated. Jake jgScJ
Technical SEO | | Jacobsheehan0 -
How google crawls images and which url shows as source?
Hi, I noticed that some websites host their images to a different url than the one their actually website is hosted but in the end google link to the one that the site is hosted. Here is an example: This is a page of a hotel in booking.com: http://www.booking.com/hotel/us/harrah-s-caesars-palace.en-gb.html When I try a search for this hotel in google images it shows up one of the images of the slideshow. When I click on the image on Google search, if I choose the Visit Page button it links to the url above but the actual image is located in a totally different url: http://r-ec.bstatic.com/images/hotel/840x460/135/13526198.jpg My question is can you host your images to one site but show it to another site and in the end google will lead to the second one?
Technical SEO | | Tz_Seo0 -
Top 10 keywords is still going strong but the rest just got smashed!
Hi SEOMOZ and it's USERs, Been trying to find my answer online but now after three weeks of reading blogposts I'm going to try this. 🙂 My website was ranking really good on 10 important keywords but not so good on the long tail, between 11 - 50 on maybe 30 different other, not so important keywords.
Technical SEO | | Drillo
So I began doing some work (I'm a newbie) but this is what I did:
1. Changed top navigation structure to get 4 other pages (w/ keywords as links) in it. (used a dropdown)
2. Wrote plenty of text that was a good fit for the page. (The text is OK and not to spammy looking.)
3. Added three links from high quality sites with keywords as links to these pages. I added them from my own site that is on the same server, same IP. 😉 I know, not looking so good.
4. Changed URL structure on a couple of pages to get a keyword in it. (did a correct 301)
5. Changed to better Titles and headings on the page. Keywords in them both but not the same. The result:
1. My 10 most important keywords I began ranking even better. I rank no. 1 on 9 out of 10.
2. Almost all the other pages went from ranking ~ 15 - 50 to not > 50. It has now been 4 weeks since I did most of the changes and 3 weeks since all the pages was hit > 50. So now I'm thinking about what to do?
1. Should I clean up my text, titles so they don't look to over optimized?
2. Should I remove my links from my own pages? (my link profile in general is actually pretty good.)
3. or should I just wait? Because changing more will just indicate to Google that somehing fishy is going on 😉 ? In the beginning I hoped that Google killed my rankings just because of the big changes. But now after 3 weeks I'm more sceptical and thinks I've been hit by a over-optimizing filter. According to webmaster tools I've not been hit by a manually penalty. Please, help me. I would really appreciate all ideas from people here with more experience.0 -
Are there negative SEO implications to pages without any images?
Hi Mozzers, Do you think there are any negative effects of having no images on a page but several hundreds words of text? (There is a logo image and call to action buttons). Thanks!
Technical SEO | | Charlessipe0 -
Google inconsistent in display of meta content vs page content?
Our e-comm site includes more than 250 brand pages - lrg image, some fluffy text, maybe a video, links to categories for that brand, etc. In many cases, Google publishes our page title and description in their search results. However, in some cases, Google instead publishes our H1 and the aforementioned fluffy page content. We want our page content to read well, be descriptive of the brand and appropriate for the audience. We want our meta titles and descriptions brief and likely to attract CTR from qualified shoppers. I'm finding this difficult to manage when Google pulls from two different areas inconsistently. So my question... Is there a way to ensure Google only utilizes our title/desc for our listings?
Technical SEO | | websurfer0 -
Used SEOMOZ top 100 Directories, my site ranking lowered, what can we do to fix this?
We have made a big mistake.... So what can we do to fix this? A trainee member of staff has used the seomoz 100 top directories and added to sites from PR10 to PR6 approx about 25 sites, using keywords were possible instead of using the website URL "which i now was stupid!. Our website ranking have been lowered big time for all keywords used!, eg from 1st to 10th and even disappeared from the top 100 We are contacting all directories asking for the Title link to be changed to the URL instead of a keyword.. Will this help? I understand that Google give sites a penalty for this!!, but what can i do to put this right and how long would this penalty last for? Any advice would be highly appreciated... Thanks Dean
Technical SEO | | deanpallatt0 -
Updated title tags not displayed in SERPs?
A couple weeks ago I updated the title tags and URLs of some of my site's top landing pages, but the new versions aren't indexed in Google. Webmaster tools says that my site has been crawled since updated. I'm using a pretty old version of Joomla for a CMS, and had to fight with the plugins a little bit to make it all work (sh404SEF for the URLs and sh404SEF Custom Tag Module for the title tags). For example, www.radiussecurityinc.com's indexed title is still: Radius Security Solutions | Home But should be: CCTV System Design - IP Industrial Surveillance | Radius Security Other pages besides the home page have the old title tags as well as old URLs. Any ideas how I can fix this? Thanks a lot in advance! Jeff
Technical SEO | | jaysan0