Solved

Logo image with unexplained rectangular border

Posted on 2014-03-08
8
289 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 82

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 42

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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 42

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

706 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

17 Experts available now in Live!

Get 1:1 Help Now