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?

cssinternet-explorer-7

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Electron fails to display images in the compiled version

I'm currently troubleshooting an issue related to displaying images using CSS in my electron project. In the latest version of the application, the images are not showing up when linked from a CSS file. However, in a previous version, the images disp ...

javascripthtmlcsselectron

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

When the width of the window is hidden, conceal

My webpage has a carousel with pictures, but on smaller devices, they do not appear properly. I am now trying to figure out how to hide the div if the width is less than 1015px. Here is the code for my div: <html> <body> <div id="myCarou ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm having trouble getting my login page centered when using Semantic UI

Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page. I have attempted to link all the necessary files in the ...

htmlcsssemantic-ui

Guide on modifying HTML attribute with TFHpple in the Swift programming language

I have received an HTML string and I want to modify the elements inside them, specifically the img tags, so that they have a style of width = 100% and height set to auto. This way, when I embed these images into a web view, they can easily adjust to fit th ...

htmlcssswifttfhpple

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js

What is the best way to ensure that my website functions properly on Safari mobile?

I successfully created a website that functions well on my computer across all modern browsers. However, a user reported that it is not working on Safari mobile. Upon testing the website on Safari for Windows, it appeared to display correctly. After view ...

htmlcssmobile-safari

Creating movement in an SVG patterned background

Currently in the process of designing a brand new website using NextJS and Tailwind. I am looking to incorporate an infinitely translating background effect that moves towards the bottom right, similar to this example (but with my own unique pattern): htt ...

htmlcssreactjssvgnext.js

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

javascriptjqueryhtmlcss

I am noticing that my popover is causing my page to shift when I click it. It is expanding the width of my page more than I would

Upon clicking the user id popover on my page, it expands the page width instead of adjusting within the page boundaries. This is the issue: https://i.stack.imgur.com/EqaMo.png There's a small white space present that I want to eliminate. When the po ...

javascriptcssreactjsmaterial-uipopover

Elements in Bootstrap Container class failing to align properly

Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...

htmlcsstwitter-bootstrap

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

Sliding out the sidebar menu with Jquery

Hey there! I'm currently working on implementing a swipe feature for the side menu bar. I have already added a click method in my code, but now I also need to incorporate a swipe technique. When the side bar is opened, I want to remove the inside im ...

javascriptjqueryhtmlcss

Unable to place a div below another div

I am in the process of creating a website for my mother, using my limited knowledge. Despite numerous attempts, I have not been able to achieve the desired outcome. Currently, the website looks like this: https://i.stack.imgur.com/ItOcp.jpg However, I e ...

htmlcss

Enhance CSS delivery for the items listed below

Reduce the delay caused by rendering JavaScript and CSS above-the-fold. There are 16 CSS resources currently blocking the rendering of your page. This delay could be affecting the loading time of your content. To improve this issue, consider deferring or ...

javascriptphpjqueryhtmlcss

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

javascriptjqueryhtmlcss

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Can I replace an Arabic font with a custom one using font-face in CSS3? I've successfully done it with English but I'm not sure if it's the same for foreign languages, so I wanted to check. Also, I feel silly asking this question, but I&apos ...

htmlcssfont-face