css problem in firefox

@robbiew24ukMar 04.2006

hello,

~~[url]~~http://bobwebb.u39.smoothnet.co.uk/test[/url]

The page works fine in Explorer but in firefox the box does not work.

Anyone have any thoughts….

Thank you

to post a comment

@robbiew24ukauthorMar 04.2006 — #body {

background-image: url(bg_grad.jpg);

background-repeat: repeat-x;

}

#main_container {

position:relative;

margin:0px auto;

width:700px;

height:533px;

z-index:1;

}

//this is just the name i gave for the title 'asunta mae'//

#title {

position: absolute;

left: -65px;

top: 408px;

height: 106px;

width: 822px;

z-index: 1;

}

#navigation {

position: absolute;

left: 448px;

top: 466px;

width: 323px;

z-index: 1;

}

#navigation a:link {

font-size: 20px;

padding: 10px;

text-decoration:none;

color:#000000;

}

#navigation a:active {

font-size: 20px;

padding: 10px;

text-decoration:none;

border-bottom-width: thin;

border-bottom-style: dotted;

border-bottom-color: #000000;

}

#navigation a:visited {

font-size: 20px;

padding: 10px;

text-decoration:none;

color:#999999;

}

#navigation a:hover {

font-size: 20px;

padding: 10px;

text-decoration:none;

color: #993300;

}

.bl {

background: url(bl_corner.gif) 0 100% no-repeat #CCCCCC;

width: 700px;

height: 200px;

}

.br {

background: url(br_corner.gif) 100% 100% no-repeat

}

.tl {

background: url(tl_corner.gif) 0 0 no-repeat

}

.tr {

background: url(tr_corner.gif) 100% 0 no-repeat;

padding: 10px;

}

#reflection {

position:absolute;

left: 0px;

top: 364px;

width: 692px;

}

@JayMMar 04.2006 — #Your document is not valid xHTML. Make sure it's [URL=http://validator.w3.org/]valid[/URL] first.

@robbiew24ukauthorMar 05.2006 — #i've not finished it yet, i was just asking about curved boxes in firefox

@pcthugMar 05.2006 — #

+ http://www.alistapart.com/articles/customcorners/

@tenor20Mar 05.2006 — #don't specify the height of .bl. The text overflow can determine the height (as it is doing in IE)

@drhowarddrfineMar 05.2006 — #As usual, the problem is with IE, not Firefox. Firefox is behaving correctly.

tenor is correct. You specify a 200px height and FF is obeying your command while IE is ignoring it and expanding the div incorrectly, fooling you into thinking all is right in the world.

Also, #reflection is absolutely positioned which takes it out of the flow in FF (correct behavior) but not so in IE (incorrect).

Sorry, don't have time to look further.

css problem in firefox

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css problem in firefox

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴