Solved

<img> placement issues in IE / Mozilla

Posted on 2006-11-20
7
237 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
Independent Software Vendors: 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery slideToggle one div at a time instead of all independently 33 81
How to delete "dots" above Bootstrap 3 navbar 4 92
Responsive Font Size 6 48
email validation 9 49
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

726 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