Image button displays on another row on Firefox and Chrome

Question

1.00/5 (2 votes)

See more:

In an aspx page, there is image control on the banner's right (see the simplified code below). If I drag the page's width narrow, the image control may go to another row. This happens for both Chrome and Firefox browsers, but it is OK for IE. What should I do to make the image control always on the same row as behaved in IE? Thanks.

ASP.NET

<div class="background_tlbr"  style=" float:right; padding-removed200px; padding-removed5px;" >
   <asp:Image id="imgLogo" runat="server" ImageUrl="~/images/xxx.png" style="height:45px; width: auto"  />
</div>

Posted 31-Jul-15 7:09am

s yu

Add a Solution

Comments

Suvendu Shekhar Giri 31-Jul-15 14:48pm

What is written in background_tlbr class?

s yu 31-Jul-15 15:02pm

.background_tlbr {
top:0;
background-repeat:no-repeat; overflow:hidden;
background-image:url(../Images_menu/mv_toolbar_admin.png);
}

Sergey Alexandrovich Kryukov 31-Jul-15 14:50pm

It sounds to me: "it's OK for Chrome and Firefox, but makes a real trouble for IE, where the image does not go to another row". :-)
—SA

s yu 31-Jul-15 15:07pm

Re-tested. Trouble on all of the 3 browsers.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2015-07-31T08:54:00

The problem is clear, you are trying to resize the window. Which indeed, shortens the width and height (in your case only width is to be discussed) of the browser's viewport.

When you shorten the page, the element moves to the next line, because there is not enough space for the element to be rendered on that row. Thus, it moves to the next row. In such cases, it is better to use CSS3 media queries. This way, you will be able to create a separate theme for your elements in different screen sizes. For example:

CSS

//  default settings; I won't talk about them
@media screen and (max-width: 300px) {
   // style for cases where screen is only 300px wide
}

In the media case, you can change the layout of your elements or decrease their paddings, margins and widths so that they can fit into that space. I would also recommend that you try to use the developer tools and check into how elements are resized when your viewport resizes. Try pressing F12 and then check how resolution and elements are rendered. It would at least give you an idea of what is going on.

For more, please read CSS Media Queries on MDN[^].