I need your help, check out this page in Firefox <!-- w --><a class="postlink" href="http://www.cozyclosets.com">www.cozyclosets.com</a><!-- w -->
See under the big image there is a horizontal space. I cant figure out what is causing it. Its not IE or Opera only in FF. Here is the css, does anyone know?
====================================================
/* Cozy Closets CSS v1 2005 */
body { margin: 0px; padding:0px; text-align: center; font-family: arial, sans-serif; font-size: 12px; background: #eee url(/images/bkgd_print.gif) no-repeat 50% 150px;}
img { padding: 0px; margin: 0px; border: 0px;}
a:link, a:visited { text-decoration: none; color:blue; }
a:hover { color
urple; }
hr { display: none; }
h5 { display: none; }
input:focus, textarea:focus, select:focus { background-color: #EEEEEE; }
/* ============================ Wrapper ============================ */
#wrapper {
position: relative;
width: 790px;
margin:0 auto;
text-align: left;
background: /*#99CCFF*/ url(/images/content_bkgd.gif) repeat-y;
}
/* Header */
#header {
width: 790px;
margin: 0px;
padding: 0px;
height: 145px;
background: #eeeeee url(/images/header_bkgd.gif) repeat-x 0% 100%;
border: 0px;
}
#header a img { float: left; }
#header img { float: right; }
/* ============================ Navigation ============================ */
#nav {
width: 786px;
height: 26px;
background: #FF9933 url(/images/nav_bkgd.gif) repeat-x;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
}
#nav ul { list-style-type: none; margin: 0px; padding: 5px 0 0 0; }
#nav ul li { display: inline; list-style-type: none; padding-right: 10px;}
#nav ul li a:link, #nav ul li a:visited { background: url(/images/arrow.gif) no-repeat 0% 50%; font: bold 100% arial, sans-serif; color: #000; margin: 0px 2px 0px 0px; padding-left: 15px;}
#nav ul li a:hover { color: #FFFF99; }
/* =========================== Sub Nav ============================== */
#subnav {
width: 786px;
height: 26px;
background: #666699;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
}
#subnav ul { list-style-type: none; margin: 0px; padding: 5px 0 0 0;}
#subnav ul li { display: inline; list-style-type: none; padding-right: 5px;}
#subnav ul li a:link, #subnav ul li a:visited { font: bold 100% arial, sans-serif; color: #ddd; margin: 0px 2px 0px 0px; }
#subnav ul li a:hover { color: #FFFFCC; }
/* ============================ Content ============================ */
#content {
float: left;
width: 790px;
margin: 0px;
padding: 0px;
border: 0px;
}
#contentPadding { padding: 0 25px 0 45px; margin-bottom: 15px;}
#contentPadding h1 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 160%; padding-bottom: 5px; border-bottom: 1px solid #ccc; line-height: 1.5em; font-weight: normal;}
#contentPadding h2 { font-size: 120%; margin: 0px; padding:0px;}
#contentPadding h3 { margin-bottom: 0; padding-bottom: 0; font-size: 120%; }
#contentPadding img { padding: 0 0 0 5px; }
#contentPadding p { line-height: 1.5em; }
#contentPadding ul { margin: 0px; padding: 0px; list-style-type: none;padding-top: 5px;}
#contentPadding table { margin: 0px; }
/* In Home Consultation Style */
#in-home { text-align:center; background: #eee; border: #aaa solid 1px; padding: 2px 0px; margin: 5px; 0px;}
#in-home a { font-weight: bold; }
/* In-Home Consultation Form */
#contentPadding form { padding: 5px; margin-top: 15px;}
#form select { font-size: 90%; width: 206px; }
/* Table for Admin */
#messages table { margin-bottom: 50px; }
.center { text-align: center; }
.newsItem { margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; display: block;}
.title { font-family: "Trebuchet MS",verdana, arial, sans-serif; font-weight: bold; font-size: 120%;}
.date { font-family: arial, sans-serif; font-size: 100%; font-style:italic;}
/* What is a Cozy Closet */
.aboutTitle { font-weight: bold; }
.aboutImage { padding: 0 5px 0 5px; }
/* Advertisements */
#ads ul { margin: 0 170px 20px 0; border-bottom: 1px solid #ccc; }
#ads ul li { padding: 0 0 5px 10px; }
#ads ul li a { padding-left: 2px; }
#arrow { background: url(/images/arrow.gif) 0% 30% no-repeat; }
#player { float: right; }
#player h4 { margin: 0 0 5px 0; }
#player p { width: 150px; font-size: 80%; color: #666; }
/* ============================ Sidebar ============================ */
#sidebar {
margin: 0px;
float: left;
width: 154px;
color: #ffffff;
background: #666699;
}
#sidebarPadding { padding: 0px 5px;}
#sidebarPadding ul { list-style-type: none; margin: 0px; padding: 0px; margin-bottom: 10px; padding-bottom: 10px;}
#sidebarPadding ul li { list-style-type: none; margin: 3px 0px; color: #000000;}
#sidebarPadding ul li a:link, #sidebarPadding ul li a:visited { background: url(/images/arrow.gif) 0% 50% no-repeat; padding-left: 12px; color: #FFF; text-decoration: none; font-size: 100%;}
#sidebarPadding ul li a:hover { color: #FFA500; text-decoration: underline; }
.catTitle { font-weight: bold; font-size: 90%; color: #000000; background-color: #00CCFF; padding: 1px; padding-left: 5px; border: 1px solid #000;}
#cc { text-align:center; }
#cc p { color: #ddd; margin: 2px; }
#cc img { border: 1px solid #000; padding: 2px; background: #fff;}
/* ============================ Footer ============================ */
#footer {
clear: both;
width: 786px;
height: 26px;
background: #eeeeee url(/images/footer_bkgd.gif) repeat-x;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
#footer strong {
margin: 0px;
float: left;
padding: 7px 5px 0 5px;
font: bold 80% verdana, arial, sans-serif;
}
#footer strong a:link, #footer strong a:visited {
color: #333333;
}
#footer strong a:hover {
color: #FFFFFF;
}
#footer p {
margin: 0px;
float: right;
color: #333333;
padding: 7px 5px 0 0;
font: bold 80% verdana, arial, sans-serif;
}#content img {
display:block;
}
(reason (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#img-gap">http://bonrouge.com/br.php?page=faq#img-gap</a><!-- m -->))it worked! your a genius, how did you know that?Erm... experience?I thought it was study of code necromancy.
The IMG element is inline by default. That means it is rendered on a text line.
Text has three main zones: The Ascendor, that middle part I always forget the name of, and the Descendor.
The Ascendor is where the top parts of tall letters extend to, like the top part of the letter 't'. The Descondor is where the lower parts of letters extend to, like the lower part of the letter 'j'. The middle area is where most lower case letters exist, like the letter 'a'.
The IMG element is vertically aligned so the bottom of the image rests on the bottom edge of the middle zone of a line of text. Compliant browsers will display a gap under the image because that's the Descendor zone of the text line.
Making the IMG a block element removes it from the text line and closes the gap underneath. Vertically aligning the image to the bottom will also remove the gap: #some_ID_of_an_img { vertical-align: bottom; }now thats the type of reply i was looking or, thank you.No prob
Slow day at work.I think I said that in my link...i'm sorry, i didnt see the link called "reason", your site has alot of good information too. cheers!
See under the big image there is a horizontal space. I cant figure out what is causing it. Its not IE or Opera only in FF. Here is the css, does anyone know?
====================================================
/* Cozy Closets CSS v1 2005 */
body { margin: 0px; padding:0px; text-align: center; font-family: arial, sans-serif; font-size: 12px; background: #eee url(/images/bkgd_print.gif) no-repeat 50% 150px;}
img { padding: 0px; margin: 0px; border: 0px;}
a:link, a:visited { text-decoration: none; color:blue; }
a:hover { color
urple; }hr { display: none; }
h5 { display: none; }
input:focus, textarea:focus, select:focus { background-color: #EEEEEE; }
/* ============================ Wrapper ============================ */
#wrapper {
position: relative;
width: 790px;
margin:0 auto;
text-align: left;
background: /*#99CCFF*/ url(/images/content_bkgd.gif) repeat-y;
}
/* Header */
#header {
width: 790px;
margin: 0px;
padding: 0px;
height: 145px;
background: #eeeeee url(/images/header_bkgd.gif) repeat-x 0% 100%;
border: 0px;
}
#header a img { float: left; }
#header img { float: right; }
/* ============================ Navigation ============================ */
#nav {
width: 786px;
height: 26px;
background: #FF9933 url(/images/nav_bkgd.gif) repeat-x;
border-left: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
}
#nav ul { list-style-type: none; margin: 0px; padding: 5px 0 0 0; }
#nav ul li { display: inline; list-style-type: none; padding-right: 10px;}
#nav ul li a:link, #nav ul li a:visited { background: url(/images/arrow.gif) no-repeat 0% 50%; font: bold 100% arial, sans-serif; color: #000; margin: 0px 2px 0px 0px; padding-left: 15px;}
#nav ul li a:hover { color: #FFFF99; }
/* =========================== Sub Nav ============================== */
#subnav {
width: 786px;
height: 26px;
background: #666699;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
text-align: center;
}
#subnav ul { list-style-type: none; margin: 0px; padding: 5px 0 0 0;}
#subnav ul li { display: inline; list-style-type: none; padding-right: 5px;}
#subnav ul li a:link, #subnav ul li a:visited { font: bold 100% arial, sans-serif; color: #ddd; margin: 0px 2px 0px 0px; }
#subnav ul li a:hover { color: #FFFFCC; }
/* ============================ Content ============================ */
#content {
float: left;
width: 790px;
margin: 0px;
padding: 0px;
border: 0px;
}
#contentPadding { padding: 0 25px 0 45px; margin-bottom: 15px;}
#contentPadding h1 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 160%; padding-bottom: 5px; border-bottom: 1px solid #ccc; line-height: 1.5em; font-weight: normal;}
#contentPadding h2 { font-size: 120%; margin: 0px; padding:0px;}
#contentPadding h3 { margin-bottom: 0; padding-bottom: 0; font-size: 120%; }
#contentPadding img { padding: 0 0 0 5px; }
#contentPadding p { line-height: 1.5em; }
#contentPadding ul { margin: 0px; padding: 0px; list-style-type: none;padding-top: 5px;}
#contentPadding table { margin: 0px; }
/* In Home Consultation Style */
#in-home { text-align:center; background: #eee; border: #aaa solid 1px; padding: 2px 0px; margin: 5px; 0px;}
#in-home a { font-weight: bold; }
/* In-Home Consultation Form */
#contentPadding form { padding: 5px; margin-top: 15px;}
#form select { font-size: 90%; width: 206px; }
/* Table for Admin */
#messages table { margin-bottom: 50px; }
.center { text-align: center; }
.newsItem { margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; display: block;}
.title { font-family: "Trebuchet MS",verdana, arial, sans-serif; font-weight: bold; font-size: 120%;}
.date { font-family: arial, sans-serif; font-size: 100%; font-style:italic;}
/* What is a Cozy Closet */
.aboutTitle { font-weight: bold; }
.aboutImage { padding: 0 5px 0 5px; }
/* Advertisements */
#ads ul { margin: 0 170px 20px 0; border-bottom: 1px solid #ccc; }
#ads ul li { padding: 0 0 5px 10px; }
#ads ul li a { padding-left: 2px; }
#arrow { background: url(/images/arrow.gif) 0% 30% no-repeat; }
#player { float: right; }
#player h4 { margin: 0 0 5px 0; }
#player p { width: 150px; font-size: 80%; color: #666; }
/* ============================ Sidebar ============================ */
#sidebar {
margin: 0px;
float: left;
width: 154px;
color: #ffffff;
background: #666699;
}
#sidebarPadding { padding: 0px 5px;}
#sidebarPadding ul { list-style-type: none; margin: 0px; padding: 0px; margin-bottom: 10px; padding-bottom: 10px;}
#sidebarPadding ul li { list-style-type: none; margin: 3px 0px; color: #000000;}
#sidebarPadding ul li a:link, #sidebarPadding ul li a:visited { background: url(/images/arrow.gif) 0% 50% no-repeat; padding-left: 12px; color: #FFF; text-decoration: none; font-size: 100%;}
#sidebarPadding ul li a:hover { color: #FFA500; text-decoration: underline; }
.catTitle { font-weight: bold; font-size: 90%; color: #000000; background-color: #00CCFF; padding: 1px; padding-left: 5px; border: 1px solid #000;}
#cc { text-align:center; }
#cc p { color: #ddd; margin: 2px; }
#cc img { border: 1px solid #000; padding: 2px; background: #fff;}
/* ============================ Footer ============================ */
#footer {
clear: both;
width: 786px;
height: 26px;
background: #eeeeee url(/images/footer_bkgd.gif) repeat-x;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
#footer strong {
margin: 0px;
float: left;
padding: 7px 5px 0 5px;
font: bold 80% verdana, arial, sans-serif;
}
#footer strong a:link, #footer strong a:visited {
color: #333333;
}
#footer strong a:hover {
color: #FFFFFF;
}
#footer p {
margin: 0px;
float: right;
color: #333333;
padding: 7px 5px 0 0;
font: bold 80% verdana, arial, sans-serif;
}#content img {
display:block;
}
(reason (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#img-gap">http://bonrouge.com/br.php?page=faq#img-gap</a><!-- m -->))it worked! your a genius, how did you know that?Erm... experience?I thought it was study of code necromancy.
The IMG element is inline by default. That means it is rendered on a text line.Text has three main zones: The Ascendor, that middle part I always forget the name of, and the Descendor.
The Ascendor is where the top parts of tall letters extend to, like the top part of the letter 't'. The Descondor is where the lower parts of letters extend to, like the lower part of the letter 'j'. The middle area is where most lower case letters exist, like the letter 'a'.
The IMG element is vertically aligned so the bottom of the image rests on the bottom edge of the middle zone of a line of text. Compliant browsers will display a gap under the image because that's the Descendor zone of the text line.
Making the IMG a block element removes it from the text line and closes the gap underneath. Vertically aligning the image to the bottom will also remove the gap: #some_ID_of_an_img { vertical-align: bottom; }now thats the type of reply i was looking or, thank you.No prob
Slow day at work.I think I said that in my link...i'm sorry, i didnt see the link called "reason", your site has alot of good information too. cheers!