CODEWITHSUNDEEP
htmlcssfirefoxwidth
NZGamma
NZGamma

Reputation: 43

Fluid width not working in firefox

Good evening, very new to the web design world but loving it so far, and this site has helped me so much but I'm stuck with a firefox problem.

In Safari, IE, Chrome and Opera my layout works as it is supposed to. But in Firefox alone, the min-width property is not working! The layout keeps compressing and the 15px right margin keeps moving to the left instead of stopping (like it does in the 4 other browsers!)

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

with styling:

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 */

Being so new to this, I have no doubt there's some errors/back practices in my mark up BUT as mentioned, it is working exactly how I want it to in Opera, Safari, IE and Chrome but NOT FIREFOX!

borders etc. are there for my design reference

i am using the latest versions of all browsers

Thank you very much for your time. Shane

Upvotes: 0

Views: 1009

Answers (2)

httpgio
httpgio

Reputation: 127

Run your html through a validator, fix the errors, and then take a look at it.

http://validator.w3.org/

Upvotes: 1

Oz Lodriguez
Oz Lodriguez

Reputation: 973

Add "px" at the end of your width, padding, height declarations

Upvotes: 1

Related Questions