Hi, I am developing a photo sharing website and am having some positioning problems in firefox. All CSS elements position perfectly in IE. But in firefox there is a big gap between the header and the nav bar. I then have a content box that expands with the content that is place in it. This is done by vertically tiling the center of the graphic box. On IE the box expands fine. In Firefox the box doesn't.
Here's the CSS for the header and nav bar:
#header {
background-image: url(../images/header2.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 175px;
width: 770px
}
#menu {
border: none;
background-image: url(../images/navbar.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 57px;
width: auto;
}
Here's the CSS for the 2 column content with the expanding box on the left column:
.page {
width: auto;
border-left: 550px solid #FFF;
border-right: 0px solid #993399;
border-top: 3px solid #FFF;
}
.section {
margin: 0;
width: 100%;
}
.col-A, .col-B, .col-C {
position: relative;
float: left;
}
.col-A {
margin-left: -550px;
margin-right: 1px;
width: 550px;
z-index: 2;
}
.col-B {
margin: 0 -3px 0 -2px;
width: auto;
}
.col-C {
color: white;
margin-left: 0px;
width: 0px;
}
/*stop coloumn overlapping*/
.clear {
clear: both;
}
.page > .section {
border-bottom: 1px solid transparent;
}
/*graphical backgrouds for column A - for map and photos*/
.col-A-topcap {
background-image: url(../images/col_top.jpg);
width: 550px;
height: 115px;
z-index: 1;
}
.col-A-center {
background-image: url(../images/col_middle.jpg);
text-align: center;
width: 550px;
height: 100px;
z-index: 1;
}
.col-A-bottom {
background-image: url(../images/col_bottom.jpg);
float: left;
width: 550px;
height: 143px;
z-index: 1;
}
Any ideas are welcome, thanks. AjayWe'll have to see the HTML too. Internet Explorer and Firefox can be extremely different and frustrating beasts. Once you design for Firefox, which comes closest of all the browsers to supporting standards, you'll find that Internet Explorer is a frustrating beast.
When working in quirks mode, IE-Win gets the box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->) wrong. Firefox, Camino, Netscape 7+, mozilla, Safari, and Opera get it right.
IE and all the others treat floats differently too. You might want to take a trip to Position Is Everything.net (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->). It has an entire section highlighting many of IE-Win's common CSS rendering problems.Never, ever design for IE. It is old, buggy and non-standards compliant. Always design in Firefox so it will work in all browsers. Then adjust for IEs quirks and bugs.
Here's the CSS for the header and nav bar:
#header {
background-image: url(../images/header2.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 175px;
width: 770px
}
#menu {
border: none;
background-image: url(../images/navbar.jpg);
text-align: center;
margin-left: auto;
margin-right: auto;
height: 57px;
width: auto;
}
Here's the CSS for the 2 column content with the expanding box on the left column:
.page {
width: auto;
border-left: 550px solid #FFF;
border-right: 0px solid #993399;
border-top: 3px solid #FFF;
}
.section {
margin: 0;
width: 100%;
}
.col-A, .col-B, .col-C {
position: relative;
float: left;
}
.col-A {
margin-left: -550px;
margin-right: 1px;
width: 550px;
z-index: 2;
}
.col-B {
margin: 0 -3px 0 -2px;
width: auto;
}
.col-C {
color: white;
margin-left: 0px;
width: 0px;
}
/*stop coloumn overlapping*/
.clear {
clear: both;
}
.page > .section {
border-bottom: 1px solid transparent;
}
/*graphical backgrouds for column A - for map and photos*/
.col-A-topcap {
background-image: url(../images/col_top.jpg);
width: 550px;
height: 115px;
z-index: 1;
}
.col-A-center {
background-image: url(../images/col_middle.jpg);
text-align: center;
width: 550px;
height: 100px;
z-index: 1;
}
.col-A-bottom {
background-image: url(../images/col_bottom.jpg);
float: left;
width: 550px;
height: 143px;
z-index: 1;
}
Any ideas are welcome, thanks. AjayWe'll have to see the HTML too. Internet Explorer and Firefox can be extremely different and frustrating beasts. Once you design for Firefox, which comes closest of all the browsers to supporting standards, you'll find that Internet Explorer is a frustrating beast.
When working in quirks mode, IE-Win gets the box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->) wrong. Firefox, Camino, Netscape 7+, mozilla, Safari, and Opera get it right.
IE and all the others treat floats differently too. You might want to take a trip to Position Is Everything.net (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->). It has an entire section highlighting many of IE-Win's common CSS rendering problems.Never, ever design for IE. It is old, buggy and non-standards compliant. Always design in Firefox so it will work in all browsers. Then adjust for IEs quirks and bugs.