2014-02-13 3 views
0

Добрый вечер, очень новый для мира веб-дизайна, но любящий его до сих пор, и этот сайт мне очень помог, но я застрял в проблеме firefox.Ширина жидкости не работает в firefox

В Safari, IE, Chrome и Opera мой макет работает так, как предполагается. Но только в Firefox свойство min-width не работает! Компоновка держит сжатие и 15px правый край продолжает двигаться влево, вместо остановки (как это происходит в 4 других браузерах!)

<html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="IL_new.css"> 
     <title>Name here</title> 
</head> 

<body> 
<header> 
<div id="header-text">Name here</div> 

<nav> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
     <li>item 5</li> 
    </ul> 
</nav> 
</header> 
<div id="margin"> 
<div id="shell"> 

</div> 
</div> 


</body></html> 

с укладкой:

header { 
background: -webkit-linear-gradient(top,  #19cad5 0%,#0066b5 100%); 
background: -moz-linear-gradient(top,  #19cad5 0%,#0066b5 100%); 
background: linear-gradient(to bottom, #19cad5 0%,#0066b5 100%); 
border: solid black; border-width: 1 0 1 0; 
height: 125px; 
margin: 0 0 0 0; 
position: relative; 
min-width: 900; 
} 



#header-text { 
    border: 1px solid black; 
    color: #610079 ; 
    height: 125; 
    position: absolute; left:0px; bottom:0px; 
    padding:0 0 0 30; 
    font-family: "verdana"; font-size: 48px; font-weight: bold; 
} 



/* START DROP DOWN NAV MENU */ 

nav { 
    position:absolute; right:0px; bottom:0px; 
    padding:0 30 0 0; 
} 
nav ul li { 
    float: left; 
    padding: 0 15; 
    list-style: none; 
} 

/* END DROP DOWN NAV MENU */ 

/* END HEADER */ 

/* START CONTAINERS */ 

#margin { 
border: 1px solid red; 
height: 300; 
margin: 10 15; 
min-width: 870; 
} 

#shell { 
border: 1px solid green; 
height: 300; 
min-width: 870; 
} 


/* END CONTAINERS */ 

Будучи столь новой для этого , Я не сомневаюсь, что в моей заметке есть некоторые ошибки/обратные действия, но, как уже упоминалось, он работает именно так, как я хочу, в Opera, Safari, IE и Chrome, но НЕ FIREFOX!

границы и т.д. есть для моего дизайна ссылки

Я использую последние версии всех браузеров

Большое спасибо за ваше время. Шейн

+0

вам нужно добавить меру ваших ширины, мин ширины, отступов, границ и т.д. - например, рх, эм,% – Pete

+0

Спасибо Пит. Я неправильно предположил, что, поскольку я мог бы написать «margin: 0 auto»; что я мог бы отказаться от px от всего – NZGamma

ответ

1

Добавить «точки» в конце вашей ширины, обивка, декларации высоты

+1

, что является наименьшим из его беспокойств lol – httpgio

+0

Спасибо. Я неправильно предположил, что, поскольку я мог бы написать «margin: 0 auto»; что я мог бы отказаться от px от всего. – NZGamma

+0

Это острое предположение. Только ноль (число) объявлений css может иметь нуль или 0 без суффикса, привязанного к его значению. Все, что нужно, должно быть прикреплено к ним px, em, cm, rem и т. Д., Чтобы правильно рассказать браузеру, в какой единице измерения он должен разбираться. И как примечание. Не волнуйтесь, мы все были новичками. Продолжайте бить ногами и пытаться! –

1

Выполнить свой HTML через валидатор, исправить ошибки, а затем взглянуть на него.

http://validator.w3.org/

+0

Спасибо, httpgio. Основная проблема: у меня не было doctype html. Есть ли что-нибудь еще действительно очевидное, что я наполняю? – NZGamma

+0

да, возьмите совет OZ Laurens и используйте px в ваших объявлениях размера. Я думаю, что есть и валидатор CSS. но для примера: nav { позиция: абсолютная; право: 0px; внизу: 0px; padding: 0px 30px 0px 0px; } – httpgio

+0

PS: u не нужно использовать px, когда его 0 (я просто сделал это для примера) – httpgio

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