homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
mysterious character needed
smallcompany




msg:4662648
 9:57 pm on Apr 12, 2014 (gmt 0)

I wonder about the code like this:

<li>
<img src="/images/someimage.png" width="80" height="127" alt="Something">
<a href="#">Some link</a>
</li>
`
</ul>


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.

Thanks

 

lucy24




msg:4662670
 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.

drhowarddrfine




msg:4662777
 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.

smallcompany




msg:4663380
 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.

tangor




msg:4663391
 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.

penders




msg:4667774
 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".

LifeinAsia




msg:4668023
 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. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved