H1 and Image on same line - need help

Hello,

I hope someone can help me with my problem.

I want a title and an image on the same line/height. Unfortunately I don’t get this to look the same on different browsers :frowning:

Here is my code:

<!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">
<head>


 <style type="text/css">

body {
		margin: 0;
		font-family: Helvetica, Arial, san-serif;
		font-size: 12px;
		color: #35342f;
		}


h1 		{
		font-size: 14px;
		font-weight: 800;
		text-transform: uppercase;
		margin-top: 0px;
		margin-bottom: 20px;
		}

h1 img 	{
		vertical-align: -8px;
		margin-right: 5px;
		}


		
.path {
		text-align: right;
		font-size: 11px;
		font-weight: 800;
		width: 100%;
		height: 23px;
		border-top: 1px solid #afab98;
		border-bottom: 1px solid #afab98;
		}
		

.title {
		width: 100%;
}


 </style>


</head>

<body>

<div class="title">
<h1>
<a href=""><img src="" border="0"  height="30px" width="30px"/>Title</a>
</h1>
<span class="right">
<a href="" target="_blank">
<img src="../images/literatur/amazon_105x43.gif" border="0" style="float:right; margin-top:-47px;" />

</a>
</span>

</div>
<div class="path">another title</div>


</body>
</html>

Finally I want the look of the Safari screen shot, but as you can see, all browsers react different. IE is the worst…

  • Safari is fine
  • FireFox Mac is about 2px to high
  • FireFox Win is about 1px to high
  • IE has to much room under the image - like a whole paragraph.

Tanks for your help!
Floezen

I think the first thing you should do is put in a reset CSS that way your styles will look more or less the same across browers. Each browser as you have already found out renders elements different in terms of size/height…etc…

Put in a reset and see if that works first. If you don’t know where to get the reset search for eric meyer reset in google. Althought that reset is a bit overkill, you can try it out first to see if it solves your problem. Even if it doesn’t, it is still good to have a reset loaded first in practice…

Hi Floezen,

  • IE has to much room under the image - like a whole paragraph.
    You have a floated image in the span, it is an IE bug that seems to ignore the fact that floats are removed from the flow. I pieced together a test case of the code you posted (with demo images sized the same) and I was able to see the large space in IE. That was the 20px bottom-margin you had on the h1.

The width on the .title div had given "haslayout to IE and then it enclosed all the inner elements. After enclosing everything it began the bottom margin after the floated span image. This same issue has come up a few times recently, here is a post where I gave a test case of a similar issue with IE.
Why is this looking different in MSIE?

Our resident Guru (Paul O’B) wrote an article that goes into detail about some of these IE bugs and floats being removed from the flow.
Let’s Be Clear About This!

To get your code looking consistent in most all browsers I wound up setting a float on the .title div to force it to enclose all it’s inner floats. Then I moved the bottom margin from the h1 to the .title div. Then we need to clear the .path div that follows in the html.

Here is a Live Test Case with the code below. I have it consistent in FF, Safari, Opera, and IE6 & 7.
Hope that helps Clear things up for you. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>H1 Image Test</title>
<style type="text/css">

body {
    margin: 0;
    padding:0;/*added this*/
    font-family: Helvetica, Arial, san-serif;
    font-size: 12px;
    color: #35342f;
}

img {border:none;}
a {text-decoration:none;}

h1{
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    margin:0;
    /*margin-bottom: 20px; moved to title div*/
    /*background:pink;/*for testing*/
}

h1 img     {
    vertical-align: middle;/*was -8px;*/
    margin-right: 5px;
}        

.path {
    clear:both;/*added this*/
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    width: 100&#37;;
    height: 23px;
    line-height: 23px;/*added this*/
    border-top: 1px solid #afab98;
    border-bottom: 1px solid #afab98;
}    

.title {
    float:left;/*added this to enclose floated span*/
    width:100%;/*this is needed so float does not shrink wrap*/
    margin-bottom:5px; /*20px may not be needed now with float applied*/
    background:palegreen;
}
.right{
    float:right;
    /*margin-top:-47px;*/
    margin-top:-28px; /*19px less since bottom margin has been moved to .title from h1*/
}
</style>
</head>
<body>
<div class="title">
    <h1>
        <a href="#"><img src="demo.gif" width="30" height="30" alt="alt text">Title</a>
    </h1>
    <span class="right">
        <a href="#" target="_blank">
            <img src="105-43.gif" width="105" height="43" alt="alt text">
        </a>
    </span>
</div>
<div class="path">another title</div>
</body>
</html>

Thanks Rayzur! I will test his soon.
I only hope those changes will not affect the rest of the page…

:o) Flözen

Want to tackle a different iteration of a similar problem?

I’m trying to get a set of four small icons to sit beside and to the right of an h2 header inside a rounded-corner block element. You can see the less-than-satisfactory results on this demo page (scroll down to the first blue box in the main content area). I tried a rather quick-and-dirty method that works, sort of, but I want the images sitting beside the h2 text, not below it. I also had to use a rather blunt-force method of forcing the <p> text to begin displaying below the header and images. Not what I want to do…

span.iconsleft {
	float: left;
}
span.iconsright {
	float: right;
}
	<span class="iconsleft"><h2><a href="#">1973-1979: US Starts to Provide Support to Islamists Opposing the Soviets in Afghanistan</a></h2></span>
	<span class="iconsright">
	<a href="#" class="sharelink"><img src="images/icons/edit1.png" title="Edit this entry"></a>&nbsp;&nbsp;
	<a href="#" class="sharelink"><img src="images/icons/folder_open.png" title="View history"></a>&nbsp;&nbsp;
	<a href="#" class="sharelink"><img src="images/icons/share_this.png" title="Copy/move this entry to another project"></a>&nbsp;&nbsp;
	<a href="#" class="sharelink" title="Delete this entry"><img src="images/icons/no.png"></a></span>
	<div class="spacer"></div>

In Firefox and Opera, the icons sit below and to the right of the header. In IE6 the four icons group themselves two by two beside the header.

Any thoughts on how to make this work?

Any thoughts on how to make this work?
Hi Max,

Something Like This.

Just bring your span.iconsright before the h2 in the html. That is, bring your right floats first in the html.

Then get that block level h2 out of the span tag and apply the class to the h2. I know you set a float on the span which made it a block level, but we can do away with the span.

In the link above I condensed your css for that demo. Just view the page source for the html changes.

The relevant css changes are as shown below -

[B]h2.iconsleft [/B]{ /*was span class iconsleft*/
    [COLOR=Blue]overflow:hidden;[/COLOR] /*keep any bg colors from sliding under the float*/
    background:yellow;/*for testing*/
}
[B]* html h2.iconsleft[/B] [COLOR=Blue]{height:1&#37;;}[COLOR=Green]/*IE6 haslayout, we don't want to reset the overflow to visible in this case*/[/COLOR][/COLOR]

span.iconsright{
    float: right;
  [COLOR=Blue]  margin-left:20px;[/COLOR]/*give some cushion*/
    background:palegreen;/*for testing*/
}

/***begin rounded corners styling ***/

.raised {
    background: transparent; 
    width:98%;
    max-width: 750px;
    margin-top: 20px;
}
[B]* html .raised[/B] [COLOR=Blue]{width:750px;}[/COLOR] /*IE6 does not support min-max widths without javascript expressions*/

Ray, you are so the man. I will try this later this evening.

Ray, it works perfectly, even in twitchy IE6. Thanks again, buddy.

No problem, glad it worked out for you. :slight_smile:
Yeah, I made sure it was working in IE6 before posting it.