• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 308
  • Last Modified:

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?
0
ddantes
Asked:
ddantes
1 Solution
 
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.
0
 
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:
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
<!--[if IE 8]><link rel="stylesheet" href="http://mysite.com/path/to/ie8.css" type="text/css" media="screen, projection"><![endif]-->
2
 
3
<!--[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:
http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx
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.
0
 
GaryCommented:
Site down again.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Chris StanyonCommented:
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!
0
 
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.
0
 
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.
0
 
Chris StanyonCommented:
Removing border-radius will make the corners square instead of rounded. Nothing more than a visual effect
0
 
ddantesAuthor Commented:
No problem, since the border is gone entirely.  Thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now