0

I have this code, which is behaving differently in firefox vs chrome.

<h2>Presenting 
<span style="font-weight:bold">Analytics by </span> 
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>

the class fi_logo referenced above is :

.fi_logo {
    min-width: 35px;
    height: 35px;
    margin-left: 40px;  
    position: absolute;
    top:-5px;
    left: 262px;
    float:right;
}

In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.

So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?

8
  • 2
    you have a syntax error <img src="IMAGEURL"</div> the img is not closed Oct 1, 2011 at 6:42
  • 1
    and in your css you need a '.' before fi_logo Oct 1, 2011 at 6:43
  • you basically need the text"Presenting Analytics by" and then the image on the right. Is that right. Lemme know and i'll suggest you a better way of doing it thru CSS
    – Bala
    Oct 1, 2011 at 6:45
  • give an example in jsfiddle.net . So easy to solve
    – sandeep
    Oct 1, 2011 at 7:00
  • i tried the same code not sure about the image size, result is same browsers firefox 4.0, chrome.
    – Punit
    Oct 1, 2011 at 7:40

6 Answers 6

0

Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/ Use combination of position relative and absolute. Also, do not use div inside h2 - bad markup

1
  • you can ( and need to ) accept one of the answers as best/most suited. Oct 2, 2011 at 6:29
0

Maybe if you set .fi_logo display:block

2
  • Perhaps you are having difficulties because you are trying to float and position:absolute. I'm not sure if this is invalid code per se, but I cannot see how it would ever make sense to do. Oct 1, 2011 at 18:09
  • i appreciate your commments here.. i am a newbie to the world of css.. i am trying to do a hot-fix for already existing code there is which is written by someone else. I will try to get more info about this and let you know.. Thanks again.. Oct 1, 2011 at 20:48
0

I think, your problem is with specific browser version. I checked it in FF 3.6.2, which return same result like Chrome

0

Well it sounds like you still haven't sorted this out so I will make a little more commentary.

I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.

It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.

If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach

0

Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.

0

Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);

1
  • edited the question. it was a problem in posting the question, not the code.. sorry about that. Oct 1, 2011 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.