I had a page setup the way I wanted, with a logo absolutely positioned in the lower right:
http://testing.wizbury.com/onlinegamepage2.php?id=6
Then I added the following entry to the css, so that when a line of text in the box ran too long it wouldn’t add so much extra space:
.ogfeatures li span {
vertical-align:middle;
display:inline-block;
line-height:1em;
}
That addition causes the logo to sit in the upper left of the content area (under the flash game). I can only post to links, but it is the same link as above, using onlinegamepage.php
The page dynamically generates a lot of content from a db, so Dreamweaver’s preview doesn’t work well. I decided to throw the code into fiddler and hard code things so I could play with the layout…and it works fine in fiddler, even with the spans added in.
http://jsfiddle.net/wrX8g/
So now I am completely befuddled. I’m sure there is something simple going on that I am missing, but I can’t figure it out. I’d greatly appreciate any insight.
Thanks,
Doug
I’m not sure if StackOverflow is doing it or if it’s in your original code, but when I copy your CSS into another file, after the closing }, there is a Zero-Width Space character, which isn’t valid in CSS and, I believe, causing the declaration to be thrown out by the browser. I speculate that in whichever browser ytou’re using, it’s also throwing out all subsequent declarations, and that you’ve put that bit of CSS code right above the CSS declaration that positions the logo, thus preventing that declaration from taking affect and putting the logo where it would be without any applied CSS.
The fix is to simply remove the offending character, which you can probably do by putting your caret to the send of the line with the } in it, and backspacing. The caret shouldn’t move, which tells you it removed an invisible character. If that doesn’t work to remove it, you could also do it in a hex editor.