Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

<img> placement issues in IE / Mozilla

Posted on 2006-11-20
7
Medium Priority
?
244 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:Mark Steggles
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:Mark Steggles
ID: 17980251
<a href="http://www.somewhere.com"><img height="22px" width="80px" src="image.jpg" border=0 />Click here</a>
0
Industry Leaders: 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:
Mark Steggles earned 2000 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:Mark Steggles
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

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!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…
Suggested Courses

618 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