|mysterious character needed|
| 9:57 pm on Apr 12, 2014 (gmt 0)|
I wonder about the code like this:
<img src="/images/someimage.png" width="80" height="127" alt="Something">
<a href="#">Some link</a>
A character between </li> and </ul> closing tabs determines how the CSS directed background for the <li> is rendered. If I delete the character, the background image gets cut from the bottom up to the link below image.
What kind of coding is this? I ask it here in CSS forum as I'm sure it has to do something with CSS settings, but hope that one can give a hint about this type of hack so I can go further in eliminating it.
The code comes from quite reputable company I hired for redesign (20k) from which I eventually "divorced" as I was not pleased with their way of work.
Anyway, before I start posting the actual CSS code, I hope one can explain this way of HTML/CSS hacking. I want to eliminate it.
| 11:47 pm on Apr 12, 2014 (gmt 0)|
Drat. I thought this was going to be about some arcane non-ASCII character :(
The issue can't be CSS alone, because a character in that location simply isn't permitted; it's just as invalid as a character coming after a </td> or </tr>. (In an excess of paranoia, I detoured to the validator to make sure I'm not talking through my hat.) Where, if anywhere, does the ` itself appear? Before the whole list?
|the background image gets cut from the bottom up to the link below image |
That's what it should do, unless your CSS also specifies a minimum height for the <li> element. By default, the existence of a background doesn't affect the size of the element it belongs to. Other way around, sometimes.
If something only displays as intended if you introduce an error into the html, then the css needs to be fine-tuned. But it isn't clear from your question whether you want the complete background to display or not.
Tangentially: How big is the image? Why not include it inside the <a href> tags so your users have a bigger clickable area?
Not-so-tangentially: What's the relationship between image and background? Is any background visible above or alongside the image? Or is the background positioned so it doesn't start until the image is done?
Will the text always appear below the image? There's no explicit line break; I hope you're not relying on window width and content alone to put things where you want.
| 2:18 am on Apr 14, 2014 (gmt 0)|
Well, first of all, the extra character makes the HTML invalid but, in addition, browsers handle inline elements differently when there is whitespace after a closing li. Look and see what happens if you remove the closing </li> for all those elements.
I'm going to bed now and very tired.
| 11:50 pm on Apr 15, 2014 (gmt 0)|
Well, let me first state my feeling of being guilty by not checking how this stuff actually shows up in any of the browsers.
As soon as I saw this in Dreamweaver CS3, I made the initial post. Later, when I continued playing with it, and finally copied pages over to a server, I saw that this did not play any role when a page was live in any browser. Dreamweaver reflects the change, it needs the invalid character for proper rendering, I still don't know why. Online, all is in order anyway.
Thanks for replies, and my apology again.
| 5:38 am on Apr 16, 2014 (gmt 0)|
No apology required! You have saved another Dreamweaver CSS coder from the same head-scratching! It is always nice to know something has been resolved.
| 11:33 pm on May 1, 2014 (gmt 0)|
If you ever wonder how invalid code is being interpreted by the browser you can use the in-browser developer tools (object inspector, etc.) and compare this with the actual "source".
| 3:55 pm on May 2, 2014 (gmt 0)|
|Drat. I thought this was going to be about some arcane non-ASCII character |
And I thought it might be a nefarious job posting. ;)