|
CSS - Vertical Borders Extending Past Specified Height In Ff
I have a navigation bar I've created that always extends the vertical borders past it's span tag. Could someone please look at let me know if there's something weird with my css?
Is there some kind of work around for FF for this? In IE it works just fine. I have attached a screenshot for reference of what I'm talking about. CSS -- headertable, headercell, and nav are the ones directly relating to the bar. I put them in for proper context. Code:
.logo {
border: 0px;
display: inline;
}
#header {
height: 92px;
width:188px;
background: url(/theme/Green/logo.jpg) no-repeat;
}
.banner {
border: 0px;
margin: 0px;
padding 20px 5px 5px 5px;
float: right;
}
.headertable {
width: 770px;
padding: 0px;
margin: 0;
height: 133px;
}
.headercell {
height: 35px;
vertical-align: top;
}
#nav{
padding: 5px 0;
float: right;
}
#nav a,#nav a:visited {
background: url(/theme/Green/bgnavbutton.gif) repeat-x;
padding: 9px 9px;
margin: 0;
color: #fff;
font: bold 14px/22px arial,sans-serif;
text-decoration: none;
}
HTML Code:
<table class="headertable">
<tr><td valign="top"><div class="banner"><?=proam_loc(9)?></div><div id="header"><h3><a href="/"><span>TDS</span></a></h3></div></td></tr>
<tr>
<td class="headercell">
<span id="nav"><a href="/index.php" id="home" title="TDS Home">Home</a><a href="http://www.tdstelecom.com/redir.asp?keyword=HOME" id="shop" title="Shop TDS">Shop TDS</a><a href="https://secure.tds.net/" id="mya" title="Manage Your Account" target="_blank">Manage Account</a><a href="http://tdsmail.tds.net/" id="jobs" title="Jobs @ TDS" target="_blank">TDS Mail</a><a href="http://tdstelecomhelp.tds.net/" id="help" title="Help / FAQ" target="_blank">Help / FAQ</a><a href="http://www.tdstelecom.com/hr/job_opps.asp" id="jobs" title="Jobs @ TDS" target="_blank">Jobs @ TDS</a></span>
</td>
</tr>
</table> <!-- End Header Table -->
Similar TutorialsI have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window. I dont think its box model issue because there is no major vertical padding..any ideas? I want to create 2 vertical page borders using an image. Is the best way creating a table? I need a pretty decent jumpstart. Thanks in advance. So I'm trying to be "proper" and move from tables to divs. But one thing keeps getting me. Say I have a shadow that is to the left and right of my center content page. Easy enough w/ tables. (I'm really dumbing this all down). <table> <tr> <td background="images/shadow.gif"><img src="images/spacer.gif"></td> <td>My content here<br /><br /><br />etc.</td> <td background="images/shadow_r.gif"><img src="images/spacer.gif"></td> </tr> </table> In tables, that height of the left and right cells automatically move with the content of the right cell, so that if there's more or less text, the shadow gets longer or shorter. Now, this is how I'm seeing DIVs would work. <div style="float:left; background-image:url(../images/shadow.gif);background-position:top right; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> <div style="float:left">My content here<br /><br /><br />etc.</div> <div style="float:left; background-image:url(../images/shadow_r.gif);background-position:top left; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> But in this case, the divs to the left and right do not automatically adjust to be the height of the div in the center. So I just get one pixel of height for the shadow "cells". Is there a way to use CSS and still do this? Thanks, JBL Hey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta Hi and thanks in advance for any of your help. I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space. I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen. Code is below with screenshot attached of what I expect to happen (as in IE). Code: <html style="height:100%;"> <body style="height:100%; margin:0;"> <table style="height:100%; width:250px;"> <tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr> <tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr> </table> </body> </html> Thanks again for any help or pointers as to where I have gone wrong. I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Well, this would be the first time I actually am starting to use full DIVs to code a website, usually use tables. Anyways, I have most bugs fixed out since I do somewhat know how to code in DIVs - the question is though, on one of the "right" side content area things I have, the content part extending right over the DIV, and even the container. I also gave both with fixed widths, no idea why this is happening. Anyone have any ideas? http://www.futuregamers.net http://www.futuregamers.net/style.css I really like this menu: http://alistapart.com/articles/horizdropdowns (see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm) My problem is that it only works in one level. How can I modify it to support more levels? Or do you guys know any simular menu, that support more levels? Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out. Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs. Here is the HTML: Code:
<!-- TOP -->
<div class="topOutter clearFloat">
<div class="topInner floatLeft">
<div class="floatLeft">
<div class="floatLeft" style="width: 21px;">
<img src="customStyle/structure/top_left.gif" alt="" />
</div>
<div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">
<a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a>
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_end.gif" alt="" />
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_right.gif" alt="" />
</div>
</div>
<!-- /TOP -->
<!-- MIDDLE -->
<table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
<tbody id="collapseobj_forumbit_16" style="">
<tr>
<td class="thead" style="width: 100%; height: 17px;"></td>
</tr>
</tbody>
</table>
<!-- /MIDDLE-->
<!-- BOTTOM -->
<div class="bottomSpacer bottomOutter clearFloat">
<div class="floatLeft">
<img src="customStyle/structure/blc.gif" alt="" />
</div>
<div class="floatRight">
<img src="customStyle/structure/brc.gif" alt="" />
</div>
</div>
<!-- /BOTTOM -->
The CSS Code (spacer and top/middle classes are just bordering and bottom margins): Code:
.clearFloat { overflow: hidden; }
.floatLeft { float: left; }
.floatRight { float: right; }
Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine. And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem. Thx. I'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway http://www.psyberarts.com/work/prism/index.html There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away. Should I just make a repeat image for the footer and do it that way? I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days... Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. I have a div that has a table inside of it. Even though the table expands with content added, the div does not. It's important to me that the div extend with the table because this div in question has a background shadow border for the table. Here is the CSS: Code:
#right {
float: right;
width: 80%;
height: 100%;
}
#rt_brdr {
height: 100%;
width: 100%;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/r_brdr.gif) repeat-y right;
}
My HTML: Code:
<div id="right">
<div id="rt_brdr">
<table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
</tr>
<tr class="white_fill">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
</tr>
</table>
</div>
</div>
I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot. Not 100% sure if this is CSS related, however: The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.) I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements. It has tiered drop downs which extend off the end of the page to the right. Is there a way to make them flip left ONLY if they are at the end of the page? I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy. Anyone else encounter this issue and how did they resolve it? It's hard for me to explain this so bear with me. This is the page in question. The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch. I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right. I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers. Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to? Thanks in advance. Tim I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it. Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox. See he www.djoj.net/test/indexwierd.html Css: (Look at the way bottom of the CSS. The last 3 styles) www.djoj.net/test/styles2.css So I changed my div's to span's and wrapped them in one div labled "bottom" Now look... www.djoj.net/test/index.html Css: (once again, at the bottom) www.djoj.net/test/styles.css How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning. Thank you in advance! ~B |
|||||||