CSS дисплей: блок ломает мой макет в т.е - PullRequest
Новая
       22

CSS дисплей: блок ломает мой макет в т.е

0 голосов
/ 28 июля 2011

, поэтому я создал хорошее меню для моего клиентского веб-сайта ну, по крайней мере, это хорошо выглядит в FF Chrome Safari на Mac и IE 8, но оно ломается в IE 6,7

Вот то, что, как полагают, является релевантным CSS 

.home{
    padding-top:5px;
    position:relative;
    background: black;
    width: 260;
    height: 280px;
    margin:0px 30px 0px 20px;
    top:-60px;
    float:left;
}

.home img{
    max-width: 300px;
    max-height: 100px;
    padding-bottom:8px;
    margin:auto;
    border:none;
    display:block;
}

, но это все на сайте

Я пробовал разные способы получить тот же результат, но я просто не вижучтобы заставить его работать в IE <8 </p>

какие-нибудь идеи?

Редактировать

os, если я уберу дисплей: заблокируйте его показ, но затемне сложены вертикально, как я хочу, поэтому я попробовал float left clear right, и это работает, за исключением того, что они не центрированы, тогда больше предложений?

1 Ответ

2 голосов
/ 28 июля 2011

Семантически, есть несколько вещей, которые вы, возможно, захотите посмотреть в своем HTML. Во-первых, у вас есть доктайп HTML5, но вы не используете теги HTML5. Например, ваши элементы навигации должны быть в <nav>, ваша «история» может быть в <section> и так далее. Взгляните на Окунитесь в раздел указателей HTML5 для получения информации о новых тегах.

Во-вторых, вы, вероятно, захотите поместить свои три изображения логотипа в отдельный контейнер за пределами навигации. Вы все еще можете расположить навигацию там, где она у вас есть, используя отрицательное верхнее поле или отрицательное верхнее и относительное позиционирование. Вы можете добавить z-index к контейнеру логотипов и nav, чтобы упорядочить их соответственно, чтобы фон nav не перекрывал логотипы.

Возможно, вы захотите взглянуть на использование одной из стандартных перезагрузок CSS, плавающих в Интернете. Сброс Эрика Мейера - хорошее место для начала. Как только вы начнете использовать элементы HTML5, вам нужно будет предоставить запасной вариант для браузеров, которые его еще не поддерживают. Я использую Google shiv для этого, и это хорошо соответствует моим потребностям.

Наконец, я вижу, что вы используете GIF-изображения с прозрачным фоном для фотографии вашего продукта, и у вас есть "неровности". Поскольку вам нужно поддерживать старые версии IE, я бы пошел с PNG8 для них. Вы получите изображение более высокого качества и сможете иметь прозрачный фон без зазубрин.

Я думаю, вам будет намного проще исправить этот макет, как только вы внесете некоторые структурные изменения в свой HTML, чтобы очистить его, и вам не придется бороться с размещением этих логотипов в неупорядоченном списке nav. Кроме того, у вас будет более удобная семантическая верстка и удобство чтения для людей, использующих программы чтения с экрана.

Удачного кодирования!

...