CODEWITHSUNDEEP
htmlcsswindowsmacos
tnichols
tnichols

Reputation: 635

Images rendering differently within Windows and OS X browsers

I'm finding that particular images in my html documents are rendering with a purple border around them with any Windows browsers, but rendering perfectly within OS X browsers.

The code is as follows:

<div class="outer-container">
  <div class="header-container">
    <div class="logo"><a href='/'><img src="images/logo.png" alt="" /></a></div>
  </div>
</div>

CSS

.outer-container{
  width:900px;
  margin:0 auto;
}
.header-container{
  display:block;
  float:left;
  width:900px;
  height:110px;
}
.logo{
  display:block;
  float:left;
  padding-top:12px;
}

Any ideas why Windows might be rendering it with a border while OS X does it perfectly?

Thanks!

Upvotes: 1

Views: 181

Answers (2)

thirtydot
thirtydot

Reputation: 228192

img {
    border: 0
}

in your CSS will fix it.

What you're seeing is the default border in Internet Explorer for images inside links that have an href attribute that has been previously visited.

The reason this happens in the first place is that Internet Explorer presumably has something like this in its User Agent Stylesheet:

a:visited img {
    border: 2px solid purple
}

Upvotes: 2

Zr40
Zr40

Reputation: 1919

Most browsers draw a blue or purple border around images when they're contained inside a link. The color is the same as for text links; blue for unvisited, purple for visited.

You can remove the border by using the following CSS:

a img {
    border: none;
}

Upvotes: 1

Related Questions