Mobile CSS Code Problems

Question

I'm trying to make a mobile version of my site. Here is the code for the "banner":

<center>
    <div id="banner">
        <a href="./"><img src="graphics/banner.png" /></a>
    </div>
</center>

And using this CSS:

#banner img a {
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}

When I try it like that it won't work. Everything that was written apparently gets ignored, but if I remove the a, it works normal. But I need it to do that just if the <img> is surrounded by <a>. Why it won't work?

so i guess <center> is supported on mobile?

albert
– albert

2010-12-30 05:36:38 +00:00
Commented Dec 30, 2010 at 5:36 — albert
– albert, Commented Dec 30, 2010 at 5:36

Quentin · Accepted Answer · 2010-12-29 22:31:44Z

1

#banner img a means "An a element contained in an img element contained in an element with the id *banner".

You want: #banner a img if you want to select the img element.

answered Dec 29, 2010 at 22:31

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan Campos Over a year ago

Thanks very much! That's what I mean :)

ballpointcarrot · Accepted Answer · 2010-12-29 22:29:17Z

1

I think that you want to have a comma between the HTML elements you want to apply the style to. Try #banner img, a{ ... } instead.

answered Dec 29, 2010 at 22:29

ballpointcarrot

1131 silver badge6 bronze badges

Collectives™ on Stack Overflow

Mobile CSS Code Problems

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related