Совместите DIV с помощью CSS

У меня есть следующий определенный в моем CSS файл:Совместите DIV с помощью CSS

body { 
    text-align: center; 
    float: right; 
    position: fixed; 
} 
.twoColFixRtHdr #container { 
    width: 780px; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

и я мой HTML определяется следующим образом:

<body class="twoColFixRtHdr"> 
    <div id="container"> 
    <div id="header">

Проблема заключается в том, в IE (все версии Я был в состоянии проверить) центр содержимого страницы, но в Firefox он выравнивается по левому краю. Я знаю, что text-align: center будет центрировать содержимое элемента, но не сам элемент, поэтому вам нужно вложить свой контент, для чего нужен дополнительный div. Но я должен упустить что-то о различиях между IE и Firefox в том, как он отображает этот тег.

Любые идеи? Вы можете посмотреть на сайте: http://www.solar-fit.ca

источник

2009-11-18 Elie

Кузов плавает вправо? Я этого никогда не видел. –

Интересно, зачем вам плавать и позиционировать свой html 'body'. – mauris

Меня попросили исправить это для клиента, который построил это из шаблона. Я предоставил ссылку на сайт. – Elie

эти две причины проблемы

тело -> поплавок: право; позиция: фиксированная;

удалить те

источник

2009-11-18 03:03:29 Moak

Теперь он выровнен по правому краю, а не по центру. Скорее всего, это помогает, так как раньше он был выровнен. Позвольте мне попробовать сменить float на центр. – Elie

Там мы идем - удалили неверную строку. Благодаря! – Elie

Удалить 'text-align: center' тоже .. поскольку он ничего не делает, чтобы центрировать ваш контейнер. Центрирование выполняется с помощью «margin: 0 auto»; – codeinthehole

Как насчет размещения margin: 0px auto; в теле?

источник

2009-11-18 02:57:34

Извините, это тоже есть. Я обрезал css. Сейчас я добавляю больше информации. – Elie

Вы пробовали это еще?

#container{ 
    width: 780px ; 
    margin-left: auto ; 
    margin-right: auto ; 
}

Вам не нужно иметь вложенные div с этим подходом. Согласно source ...

"Код выше был протестирован с IE 6, 7, Firefox, Opera и Safari."

источник

2009-11-18 02:58:19 JohnFx

Да, я просто сделал. Кажется, не имеет никакого значения. – Elie

Не уверен в причине, но исправление помещает IE в стандартный режим через DOCTYPE, например.

<!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 { 
     text-align: center; 
     float: right; 
     position: fixed; 
    } 
    .twoColFixRtHdr #container { 
     width: 780px; 
     margin: 0 auto; 
     border: 1px solid #000000; 
     text-align: left; 
    } 
</style> 
</head> 
<body class="twoColFixRtHdr"> 
    <div id="container"> 
    <div id="header"> 
    Some text goes here 
    </div> 
    </div> 
</body> 
</html>

источник

2009-11-18 03:02:00

Но в IE он отображается правильно! Почему я хочу это изменить? – Elie

Каков желаемый результат? Извините, я предположил, что результатом firefox был тот, который вы хотели. –

Удалить поплавком и позиции свойств от правила тела и добавить ширину 100%.

body { text-align: center; width: 100% }

источник

2009-11-18 04:16:41

Совместите DIV с помощью CSS

ответ

Смежные вопросы