Solved

<img> placement issues in IE / Mozilla

Posted on 2006-11-20
7
238 Views
Last Modified: 2006-11-20
Hi
I have some html as follows (3 buttons one under the other):

Some text bla bla<br><br>
<A href="http://www.somewhere.com"><IMG height=22 width=80  src="http://www.somewhere.com/images/gold.jpg\" border=0></A> Click here <br>
<A href="http://www.somewhere.com"><IMG height=22 width=80 src="http://www.somewhere.com/images/platinum.jpg" border=0></A> Click here<br><br>
<A href="https://www.somewhere.com/order.php"><IMG height=40 width=120 src="http://www.somewhere.com/images/upgrade.jpg" border=0></A>

In IE6 and Opera they are positioned one under the other properly. In Mozilla, they overlap vertically. How can I fix this problem in Mozilla AND not screw up the code in IE?
Thanks
tr5
0
Comment
Question by:tr5
[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
  • 4
  • 3
7 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 17979966
Greetings tr5,

Try adding

<style type="text/css">
a {display:block;}
</style>

in the head of the page or a {display:block;} in your stylesheet

If that doesnt work, post a link to the page or the code of the page and I will try to fix it for you

Regards
0
 

Author Comment

by:tr5
ID: 17980181
An improvement, but now (looking at the following lines) the "Click here" is now underneath the image, I guess because of the block. Any way to position it next to the image?
 
<A href="http://www.somewhere.com"><IMG height=22 width=80  src="http://www.somewhere.com/images/gold.jpg\" border=0></A> Click here <br>
0
 
LVL 30

Expert Comment

by:Steggs
ID: 17980251
<a href="http://www.somewhere.com"><img height="22px" width="80px" src="image.jpg" border=0 />Click here</a>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 17980281
If you dont want the click here to be part of the link, you could do something like this

<div>
<a href="http://www.somewhere.com"><img height="22px" width="80px" src="image.jpg" border=0></a> Click here
</div>
<div>
<a href="http://www.somewhere.com"><img height="22px" width="80px" src="image.jpg" border=0></a> Click here
</div>

You wouldnt need the a {display:inline;} in the css aswell
0
 

Author Comment

by:tr5
ID: 17980478
I don't want the "click here" to be part of the link. The <div> solves the problem, but it puts a different amount of space below the image depending on whether it is IE or Mozilla!! How would you deal with that?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 17980566
add
* {
padding:0;
margin:0;
}

to your styles. This will set the default padding and margin on all elements to 0. ie adds padding by default. If the space is still there, try removing whitespace from your html i.e. no spaces between tags in the html
0
 

Author Comment

by:tr5
ID: 17980816
I am going to go with the <div> as the solution. It is good enough. Seems like getting the same behavior in different browsers is impossible anyway.
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

690 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