Проблема позиционирования изображения HTML / CSS - PullRequest
Новая
       24

Проблема позиционирования изображения HTML / CSS

0 голосов
/ 22 февраля 2011

В настоящее время я работаю над проектом, в котором я пытаюсь расположить изображение внутри div, но я не хочу делить высоту, для которой установлено значение 'auto', чтобы увеличить, когда это изображение размещено так далеко, у меня есть следующее:

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;
}

Это работает в Firefox и Chrome, но у меня возникли проблемы с Internet Explorer 8, был бы признателен за некоторые отзывы о том, как решить эту проблему, поскольку это оставляет меня в замешательстве ...

Ссылка на сайт на текущем этапе: www.enbright.co.uk / trunk /

Ответы [ 3 ]

4 голосов
/ 22 февраля 2011

Причина, по которой он не работает в IE8, заключается в том, что ваша страница отображается в режиме причуд .

Если вы избавитесь от этой строки в верхней части документа: 

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

В IE это будет хорошо выглядеть.

Чтобы избежать подобных проблем в будущем, помните, что тип документа всегда должен быть самой первой строкой.

1 голос
/ 22 февраля 2011

Я бы посоветовал установить фоновое изображение красного цвета на 1 пиксель белого цвета с желаемой высотой на #LogoAndMenu, например: 

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

Здесь закодировано - http://jsfiddle.net/uxNZQ/

0 голосов
/ 22 февраля 2011

Вы пытались добавить overflow: hidden; к стилям #LogoAndMenu?

...