макет CSS отлично работает в сафари, но не в firefox?

Я использовал Safari для просмотра моего макета до сих пор. Все появилось совершенно так, как я хотел, чтобы это было в Safari, простой макет с логотипом, панель навигации, изображение заголовка, а затем область тела с двумя столбцами. Тем не менее, в Firefox оба изображения заголовка и логотип даже не отображаются, а два столбца для области тела не работают и вместо этого погружаются в один ... Я не уверен, что происходит, или какие типы проблем Я буду сталкиваться в других браузерах, но, возможно, кто-то может найти то, что это не так:макет CSS отлично работает в сафари, но не в firefox?

body { 
background-color: some color; 
background-attachment:fixed; 
margin: 0; 
padding: 0; 
} 

#wrapper { 
width: 950px; 
background-color: some color; 
margin: 0 auto; 
text-align: left; 
border-right: 1px solid some color; 
border-left: 1px solid some color; 
} 

#logo { 
background-image: url('some url'); 
height: 100 px; 
text-align: left; 
border-style: none; 
} 

#navigation { 
background-color: some color; 
text-align: center; 
border-top: 2px solid some color; 
border-bottom: 2px solid some color; 
height: 30 px; 
} 

#navigationElement { 
display: inline-block; 
padding-top: 2 px; 
padding-left: 10 px; 
padding-right: 10 px; 
border-style: none; 
} 

#navigationElement a:link { 
color: some color; 
text-decoration: none; 
} 

#navigationElement a:hover { 
color: some color; 
font-weight: bold; 
} 

#headerImg { 
background-image: url('some url'); 
height: 200 px; 
text-align: left; 
border-style: none; 
} 

#left { 
background-color: some color; 
width: 475 px; 
float: left; 
text-align: center; 
border-style: none; 
} 

#leftElement { 
background-color: some color; 
padding: 40 px; 
text-align: center; 
border-style: none; 
} 

#right { 
background-color: some color; 
width: 475 px; 
float: right; 
text-align: center; 
border-style: none; 
} 

#rightElement { 
background-color: some color; 
padding: 40 px; 
text-align: center; 
border-style: none; 
} 

#footer { 
background-color: some color; 
height: 40 px; 
text-align: left; 
border-style: none; 
clear: both; 
}

Вот HTML код:

<body> 
<div id="wrapper"> 

<div id="logo"></div> 

<div id="navigation"> 

<div id="navigationElement"><a href="link1">nav 1</a></div> 
<div id="navigationElement"><a href="link2">nav 2</a></div> 
<div id="navigationElement"><a href="link3">nav 3</a></div> 


</div> 

<div id="headerImg"></div> 

<div id="bodyArea"> 

    <div id="left"> 

     <div id="leftElement"> 
     left element text 1 
     </div> 

     <div id="leftElement"> 
     left element text 2 
     </div> 

    </div> 

    <div id="right"> 

     <div id="rightElement"> 
     right element text 1 
     </div> 

     <div id="rightElement">  
     right element text 2 
     </div> 

    </div> 

    <div id="footer">some footer text</div> 

</div> 


</body>

источник

2013-07-13 Jen

Могу ли я увидеть HTML? Или фактический CSS, который не имеет 'some this' или' some that'? – hungerstar

Видя html-код тоже поможет – dcodesmith

@Jen Создайте http://jsfiddle.net –

это, вероятно, потому, что вы используете пробелы между значениями и рх в атрибутах высоты (т.е. height: 100 px; должно быть height: 100px;). Различные браузеры обрабатывают подобные ошибки по-разному, поэтому всегда полезно проверять ваш css, когда вы испытываете странные ошибки: http://jigsaw.w3.org/css-validator/

источник

2013-07-13 21:23:16 Dunno

Работает! Спасибо!! – Jen

Удалите промежутки между значениями пикселей.

height: 100 px; в height: 100px;

источник

2013-07-13 21:25:09 hungerstar

макет CSS отлично работает в сафари, но не в firefox?

ответ

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