Floating text and image

Squiz Matrix Support
1

Hi,


There is probably a very obvious fix for this but I just can't see it…



I'm trying to float a link with an image next to it. Both appear where it is supposed to in Firefox, but in IE6, but both appear aligned to the top (see image below):





I've tried a few align properties but they didn't change anything. The top-alignment occurs only when I add the image.



I would appreciate any help from the CSS gurus out there. :slight_smile:



Below is the HTML and CSS: 


    HTML
    		 

    		   Link 
    		   
Heading
 
    		 

    		 
    		 
    	 CSS
    		 .header {
    			 background-color: #000000;
    			 padding: 0 8px 0 8px;
    			 line-height: 30px;
    			 margin: 0 0 15px 0;
    		 }
    		 
    		 .header-right {
    			 float: right;
    			 font-size: 90%;
    		 }
2

Have you tried adjusting the width of the <h1> element to 'leave room?'
Have you tried floating the image right as well, or doing something with its layout?



I don't have an IE machine in front of me atm so can't experiment but fiddling with either of these may help.

3

The difference between IE6 and Firefox is caused by the "line-height: 30px;"
doesn't necessary answer your question but hope it helps…

4

Thanks Raena & Jason :slight_smile:

5

[quote]Hi,


There is probably a very obvious fix for this but I just can't see it…



I'm trying to float a link with an image next to it. Both appear where it is supposed to in Firefox, but in IE6, but both appear aligned to the top (see image below):[/quote]



Hi, Did you get this sorted out?



As far as I understand it, on a header element, it is better to use a background image and position it absolutely within the element otherwise you get vertical alignment problems in IE. (courtesy Dan Cederholm Web Standards book)

6

[quote]Hi, Did you get this sorted out?


As far as I understand it, on a header element, it is better to use a background image and position it absolutely within the element otherwise you get vertical alignment problems in IE. (courtesy Dan Cederholm Web Standards book)[/quote]



True! However, since the text bit is a link it obviously can't be backgrounded.

7

[quote]Hi, Did you get this sorted out?


As far as I understand it, on a header element, it is better to use a background image and position it absolutely within the element otherwise you get vertical alignment problems in IE. (courtesy Dan Cederholm Web Standards book)[/quote]

[quote]True! However, since the text bit is a link it obviously can't be backgrounded.[/quote]



No, I didn't get it working… even after trying out all the useful advice here. I eventually decided to place the image before the h1 element and it worked in both browsers.