HTML/CSS Image Positioning Issue

Question

I am currently working on a project where I am trying to position an image within a div, but I do not want to div height which is set to 'auto' to expand when this image is placed so far I have got the following:

HTML:

<div id="LogoAndMenu">
<div class="Center">


    <div id="LogoIcon">
        <img style="    text-align:center;"src="images/logoicon.png" />
    </div> <!-- end div #LogoText-->

    <div id="LogoText">
        <img src="images/logotext.png" />
    </div> <!-- end div #LogoText-->


    <div id="Menu">
        <jdoc:include type="modules" name="Top" /> 
    </div> <!-- end div #Menu -->

</div><!-- end div #Center -->

CSS:

.Center{
margin:0px auto;
width: 1000px;
    text-align:left;
}

#LogoAndMenu{
    margin: 0; 
height:50px;
width: auto;
background: #e00b3b; 
text-align:center;
}

#LogoText{
float: left;
margin-top: 5px;
}

#LogoIcon{

float: left;
}

#Menu{
font-family:"Arial", Verdana, Serif;
font-size: 15px;
font-weight: 300;
color: #ffffff;
    }   

#Menu ul{
padding: 1.3% 0 1.3% 15%;
list-style-type: none;
text-align: center;
}

#Menu li { 
display: inline; 
}

#Menu li a{
padding: .2em 1em;
color: #ffffff;
text-decoration: none;
}

#Menu li a:hover{
font-weight: 700;
color: #ffffff;
background: #141515;
}

This works in Firefox and Chrome but I am having issues with Internet Explorer 8 would be grateful for some feedback on how to resolve this as it's leaving me baffled...

Link to site at current stage: www.enbright.co.uk/trunk/

Answer 1

The reason it doesn't work in IE8 is that your page is being displayed in Quirks Mode .

If you get rid of this line at the top of your document:

<!--<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>-->

It'll look fine in IE.

To avoid problems like this in the future, remember that the doctype should always be the very first line.

Answer 2

My advice would be to set a background-image of 1px wide red on white, with the height you want on #LogoAndMenu eg:

#LogoAndMenu{
background:url(blackwhite.png) top left repeat-x; // your 1px x Npx image
height:40px //set to what you want
}

Coded it up here - http://jsfiddle.net/uxNZQ/

Answer 3

Have you tried adding overflow: hidden; to #LogoAndMenu 's styles?