Solved

Logo image with unexplained rectangular border

Posted on 2014-03-08
8
291 Views
Last Modified: 2014-03-09
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
Comment
Question by:ddantes
8 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39915489
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
 
LVL 6

Expert Comment

by:Patrick Tallarico
ID: 39915501
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
 
LVL 58

Expert Comment

by:Gary
ID: 39915861
Site down again.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39916196
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:ddantes
ID: 39916205
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
 

Author Comment

by:ddantes
ID: 39916214
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39916221
Removing border-radius will make the corners square instead of rounded. Nothing more than a visual effect
0
 

Author Comment

by:ddantes
ID: 39916232
No problem, since the border is gone entirely.  Thanks again.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now