How can I center an image next to text on two lines, that is compatible with IE7?

Question

How can I center an image next to text on two lines, that is compatible with IE7?

I am trying to align an image (logo) with text in two lines - the website title and a brief description.

Here is my attempt using HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
    <head>
        <link type="text/css" rel="stylesheet" href="style.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <div id="site">
            <div id="header">
                <a title="Return to home" href="#"><img width="40" height="40" title="my logo" alt="my logo" src="images/logo.png"/></a>
                <div class="title">
                    <h1>My Website</h1>
                    <div>my subtitle with some g's and p's</div>
                </div>
                <div class="switchlanguage right">
                    <a href="#" title="english site"><strong>english</strong></a>
                </div>
                <div class="clear"></div>
            </div>
            <div id="content">
                <p>homepage</p>
            </div>
        </div>
    </body>
</html>

To style this, I'm using the following CSS:

/**********
 * RESET *
 **********/

(remaining CSS code here)

In IE7, I encountered an issue where 'p' and 'g' letters were cropped.

View the result here

What is the best way to successfully align an image and text in two lines?

css internet-explorer-7

Answer 1

Answer №1

Here's the CSS code you need to adjust:

#header div.title div {
    font-size: 1.8em;
    line-height: 0.917em;
    height: 1em;
}

To fix the issue, try increasing the line-height. The exact value may vary depending on your design, so some testing will be necessary.

You might also consider wrapping your text in <p> tags instead of <div> tags for better semantics, as you have done with other parts of the code.

Answer 2

Here's the CSS code you need to adjust:

#header div.title div {
    font-size: 1.8em;
    line-height: 0.917em;
    height: 1em;
}

To fix the issue, try increasing the line-height. The exact value may vary depending on your design, so some testing will be necessary.

You might also consider wrapping your text in <p> tags instead of <div> tags for better semantics, as you have done with other parts of the code.

Answer 3

Answer №2

Update the HTML code to

            <div class="header">
                <h1>My website</h1>
                <div class="description">my subheading with g and p</div>
            </div>

and apply the following CSS

.header .description{
   padding: 0 0 2px 0;
}

If you anticipate having one div inside the header in the future, you can simplify the style like this

.header div{ padding: 0 0 2px 0;}

Avoid creating a separate class (.description) as shown above for better organization.

Answer 4

Update the HTML code to

            <div class="header">
                <h1>My website</h1>
                <div class="description">my subheading with g and p</div>
            </div>

and apply the following CSS

.header .description{
   padding: 0 0 2px 0;
}

If you anticipate having one div inside the header in the future, you can simplify the style like this

.header div{ padding: 0 0 2px 0;}

Avoid creating a separate class (.description) as shown above for better organization.

How can I center an image next to text on two lines, that is compatible with IE7?

Answer №1

Answer №2

Similar questions

Tips for capturing the dx dy SVG attribute using CSS

Horizontal scrollbar displayed by CSS Bootstrap

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

Uncertainty surrounds the interaction of computed height and margins with CSS float right

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

What is the proper way to execute a JavaScript function within a JavaScript file from an HTML file?

sliding to the right gets jammed

applying hover effect to text within a table

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

Can HTML text areas be designed to adjust their width automatically, as well as their height?

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

Looking to place the bootstrap menu icon on the right side of the page

The phenomenon of IE6 Float Drop

Creating a fixed list with top-sticking elements on a webpage using HTML

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

My webpage lacks responsiveness

Transitioning with a CSS cubic-bezier function results in a noticeable jump of the content

Attempting to achieve CSS shadows on both the right and left sides of the element

Ensure that site content remains visible above the table when refreshing the Ajax Table

Issue with event.preventDefault() in Jquery not functioning as expected