Solved

Logo image with unexplained rectangular border

Posted on 2014-03-08
8
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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
 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

623 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