Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Ricardo Diaz
Ricardo Diaz
30,415 Points

Chrome Issues

I've been working on my company site for the last few weeks. Its almost done maybe a week or two left to get some script work done and photos but I've been coming across this problem only in Chrome.

They thing is that it appears then disappears on me. I wanted to know if any of you are experiencing it as well or is it just my browser. li and ul tags are moving to the left. CSS looks fine it just is off for some reason.

Black Lion Media

I tried disabling all my extensions, uninstalling chrome and re-installing it. I am running Windows 8 so I'm not sure if that is an issue.

My Company website

15 Answers

samiff
samiff
31,206 Points

Couldn't reproduce issue with latest Chrome on Win7. The only thing I noticed is that if I squished the browser width as thin as it would go, the links would overlap a bit.

Ricardo Diaz
Ricardo Diaz
30,415 Points

Thanks for the help Sam! I have the website on full window and its showing like this. Sometimes it works fine other times it does this. I'm hoping for a Windows 8 user to pop up and tell me its ok on theirs soon. Just so I know this is my browser thats acting this way.

I have Chrome on windows 8 and I couldn't reproduce the issue, even if I squished the browser.

Chrome Version = Version 23.0.1271.97 m

@RicardoDiaz31 - What plugins do you have installed? Maybe they are getting all funky with the code in places.

Matthew Willmott
Matthew Willmott
9,426 Points

I couldn't replicate your issue either.

A quick side-note though. Those slides change way too fast to allow people to read all the text on each one. Sorry if you plan on doing that, just thought I'd give some feedback :)

Ricardo Diaz
Ricardo Diaz
30,415 Points

Thanks for the help everyone. It must be a extension I have installed on my browser that is causing it. I just needed to make sure it looked fine to everyone else.

@Matthew - The site is not 100% done yet so I speeded up the slider so I can see things faster. Once I'm ready to launch I will slow it down. I need to do some back-end verification for the form and also some cosmetic stuff throughout the site first. But don't be sorry for telling me that. I like constructive criticism from anyone because it makes me better.

I know my wife was opposed to the color themes I had on the site but I personally love it and like how things look. I've been influenced by Windows 8 I think. :)

Caroline Hagan
PLUS
Caroline Hagan
Courses Plus Student 12,453 Points

Couldn't duplicate it in Chrome on Mac OS either.

I was taking a look at the code but couldn't make much sense of your CSS :-/

I hope you trim the fat before it goes live :-)

Ricardo Diaz
Ricardo Diaz
30,415 Points

@caroline Thanks for looking! By fat you mean file size, tags, html?

Caroline Hagan
PLUS
Caroline Hagan
Courses Plus Student 12,453 Points

like all the CSS not being used by the page, unused selectors or empty ones :-)

Ricardo Diaz
Ricardo Diaz
30,415 Points

Yup I plan on doing all of that before I make it live. I haven't even done the title's or descriptions yet for the pages :)

Ricardo - I LOVE THIS! The animations are soooo smooth, color choices and fonts go great with the company identity and your own personal style! Love love love it.

Also, I wasn't able to reproduce the link-overlap issue either. Mountain lion, using Chrome + Safari, and usually have my browser windows adjusted to different sizes depending on what I'm doing with Treehouse. Also I couldn't reproduce this when viewing on multiple/different sized screens. Haven't checked it on mobile view just yet.

Hope you're able to solve the overlap.

Ricardo Diaz
Ricardo Diaz
30,415 Points

I tried it on my PC desktop and it works fine its just on my laptop that this issue is happening. Thinking maybe it's the graphic card. I installed a beta version of the driver. Reaching for straws at the moment but I'll just work on desktop from now on.

Thanks Elizabeth for the kind words! Sometimes its nice to hear stuff like that too. I know my wife questioned me about my color choices at the start of the project but I told her that I can see the final version in my head and to trust me. She now really likes the look of it.

James Barnett
James Barnett
39,199 Points

Have you tried viewing the site using a different browser on your laptop or viewing it in Incognito/Privacy mode?


Weird rendering issues can sometimes be due to some bad markup.

Your markup has some errors when you run it through the W3C validator, so I'd check on that.

You probably also want to run your code through csslint.net.

As with validators they are a useful diagnostic tool to catch issues but take them with a grain of salt.

Ricardo Diaz
Ricardo Diaz
30,415 Points

Hello James,

I did try it on different browsers and it looks fine. I even tried incognito and it appears the same way. The thing is that sometimes it looks fine and normal but then when I refresh it looks like this.

As I told Caroline I always clean up my code and part of that process involves me running it through validators, optimizations tools for images, and minify everything I can before gziping it on the server. But I've learned from the past its best to do that in the end of a project rather then focus on it during the process. But thats just me and how I do it. Usually when I do check my code its small things like not adding a / to the end of a tag or using spans incorrectly. Nothing so major that it would cause something like this.

I will probably do a clean install of Windows 8 if I don't find the issue. I didn't do that when I installed it on my laptop but I did on my desktop and that is working fine. So it just might be an underline issue some where. But thank you for the cool tips and links. I didn't know about css lint before. :)