[Help] Styles for Wrapper DIV Not Applied

Hi. I've been updating the Hollow Earth Expedition character sheet and just noticed that the styles for my wrapper div are not being applied. <!-- .charsheet is parent --> <div class="sheet-hex"> <!-- This element missing min-width and max-width --> <!-- Character sheet worker and elements code in here are properly styled--> </div> When I look at the inline style sheet the following is here: .charsheet .sheet-hex { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; max-width: 640px; min-width: 480px; width: 100%; } But the sheet-hex class is not being attached to the div in web inspector and clearly when I shrink the sheet down it doesn't stop at 480px (resulting in a predictable jumbled mess). I'm not sure why this would be. Is there something special about the root element of the character sheet I'm missing?

Ok, the problem is there's 1 "invisible" garbage character at the beginning of the CSS file. Firefox style editor shows it as a red dot. When I delete that things seem to work. Does anyone know how these things happen so I can avoid it? Argh. Going to have to push a change for 1 character!

Try adding quotes around all of your fonts. (...'Arial', 'sans-serif' ;)

Carl T said: Ok, the problem is there's 1 "invisible" garbage character at the beginning of the CSS file. Firefox style editor shows it as a red dot. When I delete that things seem to work. Does anyone know how these things happen so I can avoid it? Argh. Going to have to push a change for 1 character! Sounds like a Byte Order Mark. Could have been automatically added by the text editor you're using if you have unicode symbols in the CSS file.

Brian said: Carl T said: Ok, the problem is there's 1 "invisible" garbage character at the beginning of the CSS file. Firefox style editor shows it as a red dot. When I delete that things seem to work. Does anyone know how these things happen so I can avoid it? Argh. Going to have to push a change for 1 character! Sounds like a Byte Order Mark. Could have been automatically added by the text editor you're using if you have unicode symbols in the CSS file. It does look like this is the issue. I just don't know why it wasn't an issue during the initial release. Somehow some invisible characters must have made it into the SCSS file. There's nothing obvious to delete so I cleansed the file in notepad++, started a brand new file, and then pasted the cleansed content back in. Notepad++ now seems to show a UTF-8 without BOM so hopefully that does the trick. Hate stuff like this.