: CSS formatting output differs among Chrome, Firefox and Opera when viewed as source This question relates to the way CSS looks when you view it as source in a web browser. I like to format

@Smith883

Posted in: #Css

This question relates to the way CSS looks when you view it as source in a web browser. I like to format the css for my website in such a way that you can scan the whole css file quickly and spend a minimal amount of energy looking for things. Here's an example.

.container
{
margin: 0 auto;
padding-left: 10%;
padding-right: 10%;
height: 80%;
width: 100%;
}


However, when you look at the CSS source in Firefox and Opera, the alignment is off about half the time. I think this has to do with they way they treat spaces and tabs, but I'm kind of in the dark as to how to format my CSS so it looks good when you're viewing the source of my site in many browsers. The point here is to communicate my interest in clean looking code to a potential employer or client. It looks fine in my text editor. When I adjust the code for viewing source in Firefox, the indentation is inconsistent in Chrome and Opera. When I adjust it for Chrome and Opera, it's inconsistent in Firefox. This is what I'm seeing and want to correct.
#toggle
{
position: relative;
top: 15px;
text-align: left;
margin-left: 0px;
}

Vote Up Vote Down

Login to post a comment!