css - Media object & position: absolute -


I am trying to recreate an image to show an image next to the media object formatting a new block Uses overflow: hidden to create references. This ensures that the text does not wrap around the image.

However, when my media object is positioned exactly, then Firefox renders separate text from Chrome and Internet Explorer. Firefox seems to be based on the breadth width of the media box rather than the width of the image and width of the text altogether.

Chrome and Internet Explorer (Icho Expected behavior)

 Chrome and Internet Explorer

Firefox

 Enter image details here

 . Media: After {content: ''; Display area; Clean both; } .media .img {float: left; Margin-right: 8px; } .media .img img {display: block; }. Media. BB {Overflow: Hidden; }   

See this for an extended example.

I was wondering if anyone knew that there is an alternative solution for this and probably why Firefox presents it differently.

Absolutely deployed elements are removed from the normal document flow, so they are 100% of their parents % Do not like the regular Regular block level element Instead, they rely on their content width or a specified width. Firefox applies slightly differently than Chrome or IE, which is why this cut off is visible.

Your use case or browser which you support is not certain, but you have a few options:

  1. A width on the element at the right
  2. If you do not need it, you can do the media object
  3. If you do not want to cut the text, you can use that new one. It uses the display: table-cell for the media body. It is advisable that your media mainly takes maximum room, because it behaves like a table cell, which may be that you are not later.

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -