Logo image with unexplained rectangular border

At www.mauivacationrental.com there is a logo image at the top of each page.  On some pages, such as index.htm, there is no border on it.  On other pages, such as location.htm, there is a border, which is unintended.  The border is visible using IE8, and I haven't checked under other verions of IE.

Both of those pages are attached to the same dynamic template, and subject to identical styling (I believe).  Can you explain the spurious border?
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
On your home page you're  including a stylesheet called supersized.css, and in that you have the following rule at line 15:

img { border:none; }

You're not including that stylesheet on the location page!
Dave BaldwinFixer of ProblemsCommented:
You have an extra <script> tag on line 25 in 'location.htm' and line 26 in 'index.htm'.  Probably not the problem but it doesn't help.  Also... IE8 doesn't do HTML5.
Patrick TallaricoFSEP Systems AnalystCommented:
I am looking at the pages in chrome on a linux machine and the element shows the same on both pages you mentioned.  This means that your page should be designed properly to show the element the same way. Looking at the code, it appears as though they are identical.
Have you tried explicitly setting the border to no border in your css? If you include this in your css

One of the things that I had to do for certain layout options on a few previous sites is to set specific css for certain elements on a per browser basis.  One way to do this is mentioned on theis site:
<!--[if IE 8]><link rel="stylesheet" href="http://mysite.com/path/to/ie8.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="http://mysite.com/path/to/ie9.css" type="text/css" media="screen, projection"><![endif]-->

Your code already looks like it is filtering the css for phone type broswers with the following code:
@media only screen and (max-device-width: 480px) and (orientation : landscape) {...

Upon looking at the css it looks like you have the fancy style set to have a 1px border.  I am not sure why it would show up on one page differently than the other. The file that contains the css code is "p7affinity-1_01.css"
img.scalable {
      height: auto !important;
      width: auto !important;
      max-width: 100%;
      border-radius: 5px;

.fancy {
      border: 1px solid rgba(255,255,255,.2);
      box-shadow: 0px 0px 30px rgba(0,0,0,.65);

This could just be an IE8 browser quirk.
First I would pull up both pages in internet explorer 8 and see if you can determine that the css being delivered to the browser is the same. I can't quite remember how to do this, but this page should help:
Then I would try modifying the fancy style to see if the border changes you make there affect your site.
I would also then try to make a browser specific inclusion to see if you can resolve the issue with IE8 directly since other browsers appear to interpret the css the same.

I hope this helps.
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Site down again.
ddantesAuthor Commented:
Thanks to all experts for comments.

I removed "fancy" from the styling of the logo, and in the style sheet I removed border-radius.   Is the border-radius essential for scalable images?

I like the appearance better now, but the border persists under IE8.

I'll try adding "border:none" to the img styling on the location page and post again.
ddantesAuthor Commented:
Adding "border:none" to the "scalable" code of p7affinity-1_01.css fixed this.  I think that was a keen observation, Chris.

I'm awarding points, but I would appreciate feedback about whether removal of the border-radius from scalable images is likely to cause anything unintended.

Thanks again to all.
Chris StanyonCommented:
Removing border-radius will make the corners square instead of rounded. Nothing more than a visual effect
ddantesAuthor Commented:
No problem, since the border is gone entirely.  Thanks again.
All Courses

From novice to tech pro — start learning today.