Solved

How can i hide image border or make it ignore image padding?

Posted on 2008-10-07
2
1,154 Views
Last Modified: 2012-05-05
Hello,

I want to add a little padding around my images so that they are seperated from the text in my infowindows.

At present the only viewable image can be seen by clicking on the Norwich (SE England) pushpin marker, followed by the green arrow and then the round icon.

I have tried marking my image up as follows:
<img style="float: left; padding: 0px 10px 8px 0px";" src="/travel_pics/72/Toby Texas Chainsaw Massacre.jpg" width="100" height="100" alt="Highslide JS" title="Click to enlarge"/>

...but as you can see, this doesn't work because the Javascript uses a border which is defined at the top of my script.

How can i get round this, while still making use of the Javascript border (essentially the effect i'm looking for is what happens when you hover the mouse over the image!) ?


Many thanks
0
Comment
Question by:Daniish
[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
2 Comments
 
LVL 5

Accepted Solution

by:
MMeijer earned 500 total points
ID: 22662335
padding is for inside container elements, too which <img /> does not qualify, but 'margin:0px 10px 8px 0px' will do.
0
 
LVL 6

Expert Comment

by:ixti
ID: 22662435
MMeijer is giving you a right point.

Also you may set it via CSS
so add somewhere inside <head></head> block:

<style type="text/css">
    .img_preview { margin:0px 10px 8px 0px }
</style>

another hook is to place image inside block element, such as:

<div><img ... /></div>

So you'll be able to do something like this:

<div style="border: solid 1px black; padding: 0px 10px 8px 0px"><img ... /></div>
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

739 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