Welcome to the Treehouse Community
Looking to learn something new?
Ashlea Bowlin2,591 Points
Downloaded File - li error
I downloaded the files so that I could work off of DW instead of the workspace. However the li tags under the "items" ul are grouped together in one line. In an effort to make it more readable, I separated each li into their own line.
However for some reason this causes the Garth Brooks image to drop down a line. It'll only go back up once I put the li's all on the same line again. From my experience the format of your code shouldn't affect anything on the page like this, since HTML should ignore any blank spaces. Just wondering how to fix it or why it's happening, not a huge deal...but it's kind of bothering me that I can't figure out why. I didn't adjust anything in the html or css other than adding the two php elements that the video instructed after downloading the files (except obviously trying to reformat these li lines). This error occurs in both the html & php version of the file, however doesn't occur in the workspace. Just locally.
Andrew Shook31,709 Points
Without looking over the file my guest would be that white space is causing the issue. Basically, when you use display:inline-block browser will leave about 4 pixels of space between each inline element. One way to combat this is to not have any white space(tabs, spaces, newlines) between the elements in the html. Take a look at this article and it will explain it more. Another tactic would be to float the elements to the left, but it you use floats you will need to clearfix the container holding the floated elements
I had a similar problem, like Ashlea but I opened in workspace. If you uncheck the "Word Wrap" option in the View menu, everything will be fine.