/    Sign up×
Community /Pin to ProfileBookmark

Image not filling container

Copy linkTweet thisAlerts:
Mar 10.2014

Hi All

I have a test site at: [URL=”http://purple-mouse.co.uk/test/”]http://purple-mouse.co.uk/test/ [/URL]

Does anyone know why the img container shows the background under the image?

I can live with it but would love to know how to control it.

thanks

Mandy

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyMar 10.2014 — I'm not sure I understand your problem (can't see the connection between your topic title and the question in your post). So I guess I'll have to ask some clarification questions.

What is it exactly that you are wanting to happen?
Copy linkTweet thisAlerts:
@mandysuttonauthorMar 11.2014 — I'm not sure I understand your problem (can't see the connection between your topic title and the question in your post). So I guess I'll have to ask some clarification questions.

What is it exactly that you are wanting to happen?[/QUOTE]

Sorry I didn't make it clear.

The image has a transparent word so the background of the a:link shows through and changes on hover. The image doesn't cover the whole of the a:link though so the background shows as an underline. I would like the image to show the background through the transparent central area but not beneath.
Copy linkTweet thisAlerts:
@Sup3rkirbyMar 11.2014 — You can always try something like
[code=html]
#navMenu img { margin-bottom: -3px; }
[/code]

But that's more of a hack than anything. I do hate to offer a 'quick fix', but maybe after work I can take another look and pinpoint where the extra space is coming from.
Copy linkTweet thisAlerts:
@mandysuttonauthorMar 11.2014 — You can always try something like
[code=html]
#navMenu img { margin-bottom: -3px; }
[/code]

But that's more of a hack than anything. I do hate to offer a 'quick fix', but maybe after work I can take another look and pinpoint where the extra space is coming from.[/QUOTE]

That's very kind. I was thinking of a hack like that but really wanted to get the bottom of why it happens. I thought it was the default padding on the UL but seems not as I've styled everything to padding:0;

If what I'm doing is bad practice and there is another way, please let me know. I'm self taught and so must have lots of bad habits.

Mandy
Copy linkTweet thisAlerts:
@ctozMar 13.2014 — Try "text-decoration:none;" in your link style? Could be that the underline isn't apparent in the :link state ?
Copy linkTweet thisAlerts:
@cootheadMar 13.2014 — Hi there mandysutton,

[indent]

the "[i]img element[/i]" by default is an "[i]inline element[/i]" and,

as such, has spacing to the right and to the bottom.

To remove it add the highlighted attribute to your CSS img rules...
[color=navy]
img {[color=red]
display:block;[/color]
width:100%;
border: 0;
}[/color]

[b]Further reading[/b]:-

[indent][url=https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps]Images, Tables, and Mysterious Gaps[/url][/indent]

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@mandysuttonauthorMar 13.2014 — Thanks for both suggestions above. Neither work - and I checked out the further reading too.

Quite a mystery!
Copy linkTweet thisAlerts:
@cootheadMar 13.2014 — Hi there mandysutton,

[indent]
[color=navy] Neither work - and I checked out the further reading too.[/color][/quote]
Do you actually believe that I would go to the trouble of giving you the

solution to, and "Further reading" about your problem if it did not work. ?

Here is the test code that I used...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>

<base href="http://purple-mouse.co.uk/test/">

<meta charset="utf-8">

<title>Testing Responsive Nav img test edit</title>

<style>
html, body,ul,ol,li,img,a {
margin:0;
padding:0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
html {
overflow-y:scroll;
}
body{
background-color:#111;
color:#ccc;
}
img {[color=red]
display:block;[/color]
width:100%;
border:0;
}
#navMenu li {
list-style: none;
background: #111;
width:50%;
margin:0 25%;
}
#navMenu a:link ,#navMenu a:visited{
background: pink;
display:block;
text-decoration: none;
}
#navMenu a:hover {
background:#f00;
}

@media screen and (min-width: 500px) {
#container{
max-width:1000px;
margin:auto;
}
#navMenu li {
float: left;
width:16.66%;
margin:0 ;
}
}
</style>

</head>
<body>

<div id="container">
<div id="navMenu">
<ul>
<li><a href="1.php"><img src="home.png" alt="" /></a></li>
<li><a href="2.php"><img src="home.png" alt="" /></a></li>
<li><a href="3.php"><img src="home.png" alt="" /></a></li>
<li><a href="4.php"><img src="home.png" alt="" /></a></li>
<li><a href="5.php"><img src="home.png" alt="" /></a></li>
<li><a href="6.php"><img src="home.png" alt="" /></a></li>
</ul>
</div>
</div>

</body>
</html>[/color]
[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@mandysuttonauthorMar 13.2014 — Hi there mandysutton,

[indent]

Do you actually believe that I would go to the trouble of giving you the

solution to, and "Further reading" about your problem if it did not work. ?

Here is the test code that I used...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>

<base href="http://purple-mouse.co.uk/test/">

<meta charset="utf-8">

<title>Testing Responsive Nav img test edit</title>

<style>
html, body,ul,ol,li,img,a {
margin:0;
padding:0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
html {
overflow-y:scroll;
}
body{
background-color:#111;
color:#ccc;
}
img {[color=red]
display:block;[/color]
width:100%;
border:0;
}
#navMenu li {
list-style: none;
background: #111;
width:50%;
margin:0 25%;
}
#navMenu a:link ,#navMenu a:visited{
background: pink;
display:block;
text-decoration: none;
}
#navMenu a:hover {
background:#f00;
}

@media screen and (min-width: 500px) {
#container{
max-width:1000px;
margin:auto;
}
#navMenu li {
float: left;
width:16.66%;
margin:0 ;
}
}
</style>

</head>
<body>

<div id="container">
<div id="navMenu">
<ul>
<li><a href="1.php"><img src="home.png" alt="" /></a></li>
<li><a href="2.php"><img src="home.png" alt="" /></a></li>
<li><a href="3.php"><img src="home.png" alt="" /></a></li>
<li><a href="4.php"><img src="home.png" alt="" /></a></li>
<li><a href="5.php"><img src="home.png" alt="" /></a></li>
<li><a href="6.php"><img src="home.png" alt="" /></a></li>
</ul>
</div>
</div>

</body>
</html>[/color]
[/indent]

[i]coothead[/i][/QUOTE]

I'm sorry to cause offence - maybe I didn't implement your solution properly - I will try again.
Copy linkTweet thisAlerts:
@mandysuttonauthorMar 13.2014 — Thanks to coothead - It DOES work. I must have done something stupid when I tried before. It taught me a good lesson in that it helps to have the style in the head rather than a separate stylesheet while testing so you can be sure you are editing the right css.
Copy linkTweet thisAlerts:
@cootheadMar 13.2014 — Hi there Mandy,

[indent]

you did not cause any offence, rather surprise that you dismissed it

even with the comprehensive explanatory link that was supplied. ?

But me though, being a bald headed old fart, am definitely not infallible. :o

[/indent]

[i]coothead[/i]
×

Success!

Help @mandysutton spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...