|
CSS - Height/scrolling/overflow Issues In Ff/ie
Hi -
I'm working on a page with what I think should be a relatively simple CSS layout. Basically, I have a table on the top half of the page (it displays an address book). The table has a <thead> and <tbody>, and the <tbody> is set to overflow: auto, to give me a scrollbar when its contents gets too big. The bottom half of the page uses AJAX to fetch an entry from the address book, and display more details. It too uses overflow: auto to show scroll bars when necessary. Each element is in a <div>, and I used height: 45% (or so) on each to try to make the whole thing fit on one page, so that there is no whole-page vertical scrolling. An example of the code I'm working with can be found at http://kc9ddi.us/ex.html . My design is working nicely in Firefox, but not IE. IE does not seem to do the right thing with the height: attribute in CSS, so their is no scroll bars in the individual parts of the page, like I want. Can anyone offer any advice here? Similar TutorialsI'm having a little trouble with the Overflow attribute on my side scrolling website. I have uploaded 2 versions one and two of the same site, one with
Code: overflow:hidden; overflow-x:visible; and one with just. Code: overflow:hidden; the first one is completely static in safari and won't scroll at all but scrolls really nicely in firefox (with a scroll wheel as there are no scroll bars). The second one has a horizontal scroll bar but goes really wierd and starts scrolling horizontally as well which I don't want to happen as it messes up my site. Is there a way to get the site to scroll horizontally without scrolling vertically? I have tried it both this way and by only using Code: overflow-y:hidden; but it has similar results. Any help on this would be greatly appreciated Fun title anyway - pretty straight forward question : essentially i have 2 divs, we'll say Div A and div B -- now heres their relation : Code:
<div id="a">
<div id="b">
</div>
</div>
=====
css info :
/*DIV A*/
#pageContent {
position : absolute;
display : block;
top : 6.75em;
left : 38em;
width : 340px;
overflow: hidden;
height : 19em;
z-index: 2;
font-family :arial;
font-size : 12px;
color : #c8c8c8;
}
/* DIV B */
#scrollo {
overflow: scroll;
width : 150px;
height : 150px;
margin: .1cm;
z-index: 1;
font-family :arial;
font-size : 12px;
color : #c8c8c8;
}
in my CSS file, DIV A has a specific Width / Height set -- AND -- an "overflow" setting of "hidden" ( aka hides anything that exceeds its boundries - obviously. ) DIV B has it's overflow set to "scroll" OK WHY ? essentially I wish to hide the horizontal scroll bar (since its of no use). THE CATCH 22 : Safari : This works fine. FireFox 1.5.x : Horizontal Scroll bar is still displayed. 3 cheers for standards right? Anyway - I was curious if anyone has encounted this, and if so, knows a work around . Thanks ! edit: The child being Z-indexed lowwer then the parent was just a "logic attempt" on my part - it does not change the outcome if its zindexed to the same or high lever. Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance 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> For some reason overflow hidden is not working in chrome, ff and ie both seem to work as expected. I am totally lost here? Code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style type="text/css">
div.menuMaster {
position:absolute;
height: 450px;
width:200px;
margin-top:52px;
border-right-style:solid;
border-right-color:#FFFFCC;
background-color:#323B45;
-webkit-border-top-right-radius: 100px 400px;
-moz-border-radius-topright: 100px 400px;
border-top-right-radius: 100px 400px;
border-width:2px;
overflow:hidden;
z-index:50;
}
.sublink1 {
display:block;
float: left;
height:30px;
width:200px;
padding-top:10px;
font-family:georgia;
vertical-align:left;
text-align:left;
}
.sublink1 a {
display:block;
height:30px;
padding-top:10px;
padding-left:20px;
align:left;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
}
.sublink1 a:hover {
display:block;
height:30px;
align:left;
padding-left:20px;
color:#fff;
border-bottom-style:solid;
border-bottom-color:#526070;
border-width:1px;
border-top-style:solid;
border-top-color:#2B3239;
border-width:1px;
text-decoration: none;
background-color: #293D51;
}
.sublink1 a:link {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
.sublink1 a:visited {
display:block;
height:30px;
vertical-align:left;
padding-left:20px;
color:#fff;
text-decoration: none;
}
</style>
</head>
<div class="menuMaster">
<div class="sublink1"><a href="../admin/index.php">link1</a><br></div>
<div class="sublink1"><a href="../index.php">link2</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link3</a><br></div>
<div class="sublink1"><a href="../index.php?location=involved">link4</a><br></div>
<div class="sublink1"><a href="../index.php?type=sets">link5</a><br></div>
<div class="sublink1"><a href="../index.php?location=external_links">link6</a><br></div>
<div class="sublink1"><a href="../index.php">link7</a><br></div>
<div class="sublink1"><a href="../index.php?location=branches">link8</a><br></div>
</div>
Does anyone know why overflow:hidden does not work when height is given in percentage? The following example does not work and all values from 1 to 20 are shown on screen ... Code: <div style="overflow:hidden;height:10%;border:1px solid green;"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> </div> Changing height:10% to height:50px makes the overflow:hidden works fine. Does anyone know how I can make the overflow:hidden css rule with height rule given in percentage? I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? I'm having a problem getting a child element to be the full height of its parent without going over. So if I have: Code: html, body {
height: 100%;
background-color: #E2E9EA;
}
#mainContainer {
width: 770px;
height: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
position: relative;
}
and then I implement: Code: <body> <div id="mainContainer"></div> </body> This should show a centered area in a layout. However, using a hieght of 100% for the child (mainContainer) makes it too long on the page and it extends beyond the border of the "parent" body tag. Even when I try using: Code: body #mainContainer { ... }
it does not work. How can I make the child (mainContainer) element be 100% of the parent (body) element without going over? Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE. The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal. Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration. Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation. http://neville.f2o.org/nifty_TEMP2.html Hey guys, I built a site that uses a linked list as an multi-level menu. This menu works fine in Moz/Netscape, but I have to use IE behaviours (thus JavaScript) for it to work in IE. Because this is a list I've contained it in a div with overflow: auto. And set a new external css file using JavaScript to convert that list into the multi-level menu. The problem is the menu's horizontal submenus appears within the parent div, rather than overflowing above the parent. I was able to fix this problem using a z-index and overflow: visible in IE. However, in Gecko based browsers the menu's submenu's links aren't accessible over the site content also contained in an overflow: auto div. But, as said works fine in IE. Here is the site. To test this bizare functionality manipulate the #contentArea and #navArea properties in this css file. You will notice that there is a DHTML custom scrollbar if JS is enabled, this is because the only way I could get the submenu's to be accessible above the content in Gecko is to make the div overflow: hidden. Myself, and the developer of the orginal menu, have been working on this for weeks (well, more me) and haven't determined how to make the menu accessible while mantaining overflow: auto on the #contentArea div. Just today we had some limited success changing the #navArea position to fixed rather than absolute in Gecko. After some repositioning the menu was fully accessible at medium/100% text size. But, once the site was resized using font sizes (it uses a relative font size 'em' for an elastic layout) the fixed div wouldn't stay in position. I'm hoping that someone here is able to tell me how to set overflow: visible to overflow above an overflow:auto div in NS/Moz (I'm using FF0.8) and still work in IE? I'd greatly appreciate it because I want to replace the custom scrollbar with default scrollbars for accessibility. Thanx. Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin Hi, I want to display a background image on the bottom right of the page. Using the following css. It actually worked. But now I have builded a page that needs to scroll down to display all the content. In this case, the background image shows up at the bottom right of the screen and not at the bottom of the page. Any solution for this ? Code:
html
{
height: 98%;
}
body
{
height: 100%;
width: 100%;
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
#container
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: url(images/bas.gif) no-repeat 100% 100%;
text-align: center;
width: 100%;
height: 100%;
}
I'm attempting a page layout that contains a scrolling div for the main content (overflow: auto. I want this div to be placed a fixed position from the top of the browser window but to expand vertically to fill up the rest of the window space. I can get something working in IE6 using an MS expression for the height of the DIV Example 1 But obviously this doesn't work on Firefox. I tried a different method to avoid the expression. Example 2 This one is odd, in that at first site it doesn't look as though it works in IE6... BUT if you re-size the window (even slightly) it then appears how I would expect. However this version still doesn't give a scrolling div in Firefox, it seems the height of 100% given to the div #bottomHalf is over ridden. Is there actually a way I can achieve what I'm after that will work across the latest browsers? (I'm not worried about IE5, NN4 etc). I have a couple divs using percentage columns. The issue I am having is that when the page is displayed (in IE or FireFox) I am getting the horizontal scrollbar. It scrolls an extra ~15%. I am learning CSS (slowly) so any help would be greatly appreciated. -K html Code:
<div id="wrapper">
<div id="content">
<p>
text
</p>
</div>
</div>
<div id="navigation">
<p>text</p>
</div>
<div id="extra">
<p>text</p>
</div>
Code:
div#wrapper{float:right;width:100%;margin-right:-33%;
display:block;}
div#content{
margin-right:33%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
}
div#navigation{
float:left;
width:32.9%;
}
div#extra{
float:left;
clear:left;
width:32.9%
}
p{margin:0 10px 10px}
Hello. Im new to the forums and Im hoping someone would be able to help me and I hope Im posting in the correct forum. I recently redesigned my site with Adobe Dreamweaver utilizing CSS. Both the HTML and CSS validates. I have tried to search for my problem but havent found it already addressed. I had CSS before but my old software didnt support it as well. Im still learning a lot about the CSS so my problem might be minor, but I just dont have enough knowledge yet to know or to even begin to fix it. The site appeared fine in IE. I didnt think (stupid I know) to test it in firefox. Recently I did and noticed it did not show the top header, the right menu or did it allow you to scroll down the page. Ive read elsewhere that part of my problem may be due to having this at the top of my page Code: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> but if I remove that, then the site looks the same in IE as it does in Firefox. Here is a link to the index page of my site. I currently have the above line of code in the page so you can see what it is suppose to look like. Please view this in both browsers so you can see what its suppose to look like (IE) and how firefox is displaying it: http://www.herbal-connection.com/index.htm Here is a copy of my css: Code: table.sale {
border-collapse: separate;
background-color: white;
text-align: center;
vertical-align: middle;
width: 30em;
margin-left:auto;
margin-right:auto;
}
img
{ border-style: none;
}
body {
text-align: center;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
}
.twoColFixRtHdr #container {
width: 1043px;
margin: 0 auto;
border: thin solid #000000;
text-align: justify;
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
.twoColFixRtHdr #header {
background-image: url(herbalconnectionlogo1.gif);
HEIGHT: 82px;
background-repeat: no-repeat;
overflow: visible;
position: fixed;
}
.twoColFixRtHdr #header h1 {
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #004278;
font-size: 30px;
background-color: transparent;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 5px;
}
.twoColFixRtHdr #header H2 {
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #006397;
background:transparent;
vertical-align: top;
font-size: 20px;
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 5px;
}
.twoColFixRtHdr #mainContent {
background-color: #FFFFFF;
padding-right: 20px;
padding-left: 20px;
position: fixed;
width: 860px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
}
.twoColFixRtHdr #mainContent h1 {
PADDING: 0em;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: x-large;
text-align: center;
COLOR: #004278;
MARGIN: 1em;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent h2 {
PADDING: 0em;
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
FONT-SIZE: large;
text-align: center;
COLOR: #004278;
MARGIN: .1em;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent h3{
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
COLOR: #004278;
font-size:medium;
text-align:center;
background:transparent;
margin-top: .5px;
}
.twoColFixRtHdr #mainContent h4{
FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
color:#B22222;
font-size:medium;
text-align:center;
background:transparent;
margin-top: .5px;
}
.twoColFixRtHdr #mainContent a:link {
color: #B22222;
font-weight:bold;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent a:visited {
color: #B22222;
background-color: #FFFFFF;
}
.twoColFixRtHdr #mainContent a:hover {
color: white;
background: black;
}
.twoColFixRtHdr #mainContent a:active {
color:#B22222;
background-color: #FFFFFF;
}
.twoColFixRtHdr #sidebar1 {
float: right;
width: 140px;
background-color: #D7DEE4;
text-align: center;
position: fixed;
background-position: top;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000000;
}
.fltrt {
float: right;
margin-left: 8px;
width: 0px;
}
.fltlft {
float: left;
margin-right: 8px;
width: 0px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.center {
text-align: center;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
background-color: #FFFFFF;
}
.hrule {
border-bottom-width: 0.04em;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-top: 0em;
padding-bottom: 1em;
}
I appreciate all input anyone can give, just please dont get to high techy with me as Im still learning. This is my business site and now I see why my sales have declined since probably a lot of people cant see the site properly. Please let me know if you need any other details. Thanks, Pamela Excuse the pretty terrible code, but I was trying to come up with an example. Take a look at the following code in IE vs Firefox. You'll notice that in Firefox(3.5b) the middle section gets the majority of the height because it's attempting to fill the table's height requirement without violating the top and bottom part's set heights. IE(7) however, doesn't behave like that. How can I achieve what Firefox is doing in all browsers? Any solution is fine, divs, tables... etc. Thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body { height: 100%; margin:0; padding:0; }
#wrapper td { border: 2px solid #f00; }
</style>
</head>
<body>
<table id="wrapper" height="100%" width="100%">
<tr>
<td height="10">Header</td>
</tr><tr>
<td>This section should take up most of the page</td>
</tr><tr>
<td height="50">Footer</td>
</tr>
</table>
</body>
</html>
Hello, sorry to post another problem but I am trying to give my website a minimum height and it's just not working. I have written body {min-height:100%;} and even put html.body{min-height:100%} then i've created a container with min-height 100% and it doesn't create anything. So I changed it to #container {min-height 768px;} and put everything inside that div. This creates a box 768px high but doesn't extend when the content goes beyond that. to view this please visit #www. wheretoflyguide .com# and click 'add entry'. you will see that the content_area div which holds the main component extends down but the wrapper doesn't. The hideous colours are for illustrating the problems rather than design taste! Appreciate your help. first off, not sure what happened with that last post but i couldn't even edit or reply to it to fix it. so i'll try again. in firefox and ie i am having a problem making the center column stretch to 100% window size when the content within is not sufficient to take up the space of the browser window. have tried using min-height and height equaled to 100% in the body and center column. neither of which made any change. here is my css code: Code:
body, html {
font: 12px/1.5 Verdana, Arial, sans-serif;
color: #99ccff;
background-color: #ffffff;
margin: 0;
padding: 0;
}
img {
border: 0;
}
#centerColumn {
position: relative;
background: #ffffff url(images/columnBack.gif) center 0 repeat-y;
width: 800px;
left: 50%;
top: 0;
margin: 0 0 0 -400px;
}
#banner {
position: relative;
background: url(images/banner.jpg) center center no-repeat;
width: 788px;
height: 100px;
left: 6px;
top: 0;
z-index: 20;
}
#navigator {
position: relative;
background: transparent url(images/navBack.jpg) 0 0 no-repeat;
width: 788px;
height: 29px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
z-index: 20;
}
#navList {
position: relative;
top: 3px;
left: 0;
margin: 0 112px 0 112px;
padding: 0;
z-index: 20;
}
a#nav1 {
display: block;
position: absolute;
background: transparent url(images/navIntroduction.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 0;
top: -3px;
z-index: 10;
}
a#nav1:hover {
background-position: 0 -29px;
}
a#nav2 {
display: block;
position: absolute;
background: transparent url(images/navAboutUs.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 144px;
top: -3px;
z-index: 10;
}
a#nav2:hover {
background-position: 0 -29px;
}
a#nav3 {
display: block;
position: absolute;
background: transparent url(images/navOnlineApplication.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 288px;
top: -3px;
z-index: 10;
}
a#nav3:hover {
background-position: 0 -29px;
}
a#nav4 {
display: block;
position: absolute;
background: transparent url(images/navCalculators.jpg) 0 0 no-repeat;
width: 144px;
height: 29px;
left: 432px;
top: -3px;
z-index: 10;
}
a#nav4:hover {
background-position: 0 -29px;
}
#contentSpace {
position: relative;
background-color: transparent;
width: 788px;
left: 6px;
top: 0;
z-index: 20;
}
#contentHolder {
position: relative;
background-color: #ffffff;
width: 542px;
left: 0;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#contentHolder h1 {
text-align: left;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
font-style: italic;
margin: 10px 0 20px 20px;
}
#contentHolder h2 {
text-align: right;
font: 14px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 0 15px 15px 0;
}
#contentHolder h3 {
text-align: left;
font: 12px Verdana, Arial, sans-serif;
font-weight: bold;
margin: 2px 0 0 0;
}
#contentHolder p {
text-align: left;
text-indent: 10px;
margin: 10px 15px 15px 20px;
}
#contactHolder {
position: relative;
background: #ffffff url(images/contact.jpg) center 20px no-repeat;
width: 242px;
height: 310px;
top: 0;
float: left;
clear: right;
z-index: 20;
}
#legal {
position: relative;
background-color: #ffffff;
font: 10px Verdana, Arial, sans-serif;
text-align: center;
width: 788px;
height: 14px;
left: 6px;
border-top: 3px solid #99ccff;
border-bottom: 3px solid #99ccff;
clear: both;
z-index: 20;
}
|
|||||||