|
CSS - Ie6 Problem - Not Accepting Height Of Div - I Hate Ie6
Hey All!!!
K to everyone that has looked at my other thread, this is a totally different site with a totally different problem. Stupid problem though. tri-m.com/test/eng/ The site looks perfect in FF and IE7 but in IE6 you will see the problem. The divs with height:1px are displaying as divs with a height of 18px in IE6. URGG IE6 should be banned!!!! - Jacenta Similar TutorialsI've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Hi there all, Have been having a little look around and this look slike a great place o get some answers to a few design problems I have at the moment. I am in the process of updating a site and completely revamping it, from the original that I designed at lhdesignz.co.uk I have placed the beggining of my new design (only just started) on another site for testing purposes this is: webwizedezignz.co.uk My problem is this, Firefox, IE7 etc look fine but as soon as you load up in IE6 the design goes all to hell! I have had a read of some of the other posts here and they do give me some ideas but I thought it would be best just to let people see exactly what I am talking about. Hope you are able to help webwize Quote: Alright for some reason this wont work in IE. http://65.26.50.204/ec/index.php?page=1 First off the paragraph isnt moving over 8px like its supposed to, making it appear on the edge of the background in the transitional background. Second off the div's are displaying on 2 diffrent lines... they are supposed to function like table cells. The first problem appears in firefox every 1 out of 10 pageloads, for some reason. Which is bs, how is it rendering it diffrent when its the same exact data? Thats not even possible, the computer cant make its own descisions and its following the same rendering process!!! What the hell is it doing? This is really starting to piss me the hell off. I would really appreciate some help. Well I figured it out, after removing some things, which is gonna require a lot of changing in my sites structure, but oh well. I will move onto 3 other issues. 1. The bottom bar he http://65.26.50.204/ec/index.php?page=1 appears on 2 lines instead of 1, in IE only, but in FF it looks fine. 2. I would like the layouts body background to be "100%", how do I achieve that? 3. I have heard my doctype should not be HTML 4.01 Transitional (because of transitional), and I have absoulutely no idea about what doctypes to use, and where the file is located, so what should I use? (I have never used doctypes in any of my past codings, this is a first) I'm using the suckerfish drop down method to get ie6 to work. For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px. I have #menu li ul {width:213px} I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page. I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place. This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave. Here's the menu stylesheet: Code: #menu {
width:860px;
height:80px;
position:relative; margin:auto;
border:solid 1px #000; border-bottom:none;
list-style:none;
z-index:6000;
}
#menu ul {
list-style:none;
padding: 0;
margin: 0;
float:left;
}
#menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
margin: 0;
height:80px;
float:left;
list-style:none;
}
#menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
height:38px;
width:215px;
display:block;
padding:12px 0px 0 0px;
text-align:center;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
font-variant:small-caps;
background:url(../images/navigation.jpg) no-repeat;
}
#menu li.apply a {
background:url(../images/navigation.jpg) -645px 0 no-repeat;
height:0;
overflow:hidden;
padding-top:80px;
}
#menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
text-decoration:none;
height:38px;
background:url(../images/navigation-hl.jpg) no-repeat;
font-variant:small-caps;
}
#menu li.apply a:hover {
background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
height:0;
overflow:hidden;
padding-top:80px;
}
body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a {
background:url(../images/navigation-hl.jpg) no-repeat;
}
body.ap #menu li.apply a {
background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
}
#menu li ul {
width:213px;
display: none;
z-index:7000;
border:solid 1px #000; border-top:none;
background:#bbbcef;
}
#menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
background-image:none;
color:#333;
border-bottom:solid 1px #999;
padding:5px 0 5px 10px;
font-size:12px;
height:auto;
margin:0;
text-align:left;
position:relative; left:-36px;
width:203px;
}
#menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
background:#ffeecd; background-image:none;
color:#000;
border-bottom:solid 1px #999;
padding:5px 0 5px 10px;
font-size:12px;
height:auto;
position:relative; left:-36px;
width:203px;
}
#menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul {
display: block;
}
I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help: Code:
@charset "utf-8";
/* CSS Document */
#wrapper
{
width: 700px;
position: absolute;
top: 50px;
left: 150px;
margin: 0px 0px 0px 100px;
}
body
{
background-image: url(images/bg1.png);
background-repeat: repeat;
margin:0 0 0 0;
}
#banner
{
height: 125px;
width: auto;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
}
#content
{
width: 400px;
position: static;
background-color: #e8caa6;
font-size: 18px;
margin: 0px 318px 0px 0px; /* 318px right 125px for centered */
padding: 10px 5px 10px 5px;
border-style:solid;
border-color:#000;
border-width:10px;
}
#movietable
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer
{
padding: 0px 0px 0px 0px;
margin: 0px 50px 10px 50px;
text-align: center;
font-size: 14px;
}
#footer a
{
text-decoration: none;
color:#333;
font-weight:500;
}
#footer a:link
{
text-decoration:none;
}
#footer a:hover
{
text-decoration:none;
background:#d9d3c6;
}
#footer a:visit
{
text-decoration:none;
}
#nav ul
{
list-style: none;
width: 700px;
position: relative;
}
#nav span
{
display:inline;
}
#nav
{
height: 40px;
background-color: #8D5C22;
}
#nav li
{
float: left;
margin: 0 0.15em;
}
#nav li a
{
height: 40px;
line-height: 40px;
float: left;
width: 167px;
display: block;
/*border: 0.1em solid #dcdce9;*/
text-align: center;
}
a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }
Html Code:
<body>
<div id="wrapper">
<div id="banner">
<!-- blah -->
</div>
<div id="nav">
<ul id="navblock">
<li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
<li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
<li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
<li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
</ul>
</div><!-- End Nav -->
You can check the site live here . Man i am working an an all new CSS theme and it was all going well intel i seen a bug. It only pops up in ie, the menu gets cut off 10%! If i resize the code it appears larger in firefox,opera,+ but looks ok in ie... I don't want to resize it just for IE witch only 2% of my old members used. Is there way to fix it without a major headach? Page code. Code: <div id="main_menu">
<ul id="main_menu">
<li><a href="home.php">Home Page</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Members</a><ul style="display: none;">
<li><a href="./login.php">Community Login</a></li>
<li><a href="./lostpass.php">Retrive Account</a></li>
<li><a href="./signup.php?task=350_!sx0993tru35500x0p40e_002354mpL334!500X6PK000D30001">Signup Free!</a></li>
</ul></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Features</a><ul style="display: none;">
<li><a href="#">Live Chat</a></li>
<li><a href="#">Live Demo</a></li>
<li><a href="#">Feature List</a></li>
</ul></li>
<li><a href="./forum/">Forums</a></li>
<li><a href="./blogs/">Blog</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Support</a><ul style="display: none;">
<li><a href="./help.php">FAQs</a></li>
<li><a href="#">Mail Us</a></li>
<li><a href="#">Phone Us</a></li>
<li><a href="./contact.php">Contact Support</a></li>
<li><a href="./tos.php">Terms Of Service</a></li>
</ul></li>
</ul></div>
Css: Code: ul#main_menu {
color: #231f20;
padding:0;
margin:0 0 0 0;
background-color:#666666;
border-left:1px solid #6b6659;
border-right:1px solid #6b6659;
border-bottom:1px solid #6b6659;
border-top:1px solid #7d786c;
}
ul#main_menu li {
list-style: none;
margin: 0;
padding: 0;
font-size:12px;
}
ul#main_menu li a {
color: #ffffff;
text-decoration:none;
padding:7px;
padding-left:14px;
padding-right:6px;
width:128px;
display:block;
border-top:1px solid #a29e91;
border-bottom:1px solid #8a8477;
}
ul#main_menu li a:hover {
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
}
ul#main_menu .selected {
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu .down {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down:hover {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down_open {
background-image:url(images/icons/minus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
font-weight:bold;
}
ul#main_menu .down_selected {
background-image:url(images/icons/back16.gif);
background-repeat:no-repeat;
background-position:130px;
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu ul {
color: #231f20;
margin: 0; padding: 0;
border-bottom:1px solid #8a8477;
}
ul#main_menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
ul#main_menu ul li a {
color: #666666;
text-decoration:none;
padding:6px;
padding-left:14px;
padding-right:4px;
width:130px;
display:block;
border:0;
background-color: #CCCCCC;
border-top:1px solid #e4decf;
font-size:11px;
}
ul#main_menu ul li a:hover {
color: #111111;
background-color:#DDFADA;
border:0;
border-top:1px solid #e4decf;
font-weight:normal;
}
ul#main_menu ul li .submenu-down {
color: #ffffff;
background-color: #7e755c;
}
Hey guys i've got a problem that I just can't figure out a solution for, i've attached a screenshot of the design. Basically there are various textboxes arranged in two columns, but their backgrounds (glows/curves behind the boxes) are causing me problems. The width of the design with the curves is larger than my target resolution (1024x768). I've tried playing around with margins but it makes the design generally very inflexible (all boxes have to be non-expandable that way). Is there anyway anyone can think doing this without a) having the minimum with of the website at 1200px b) positioning the boxes absolutely Cheers I'm trying to build a site: http://smith.incyberspace.net/temp/ I left the CSS in the HTML course so you can read it easily. here is those container CSS if you don't wanna view source (i wanna make it easy on you Code:
#container { width: 900px; margin: 0 auto; }
#content { background-color:#333333; background-image:url(content.jpg); width: 640px; opacity:.40; float: left; margin-left: 120px; border-left:groove 5px #003366; border-right:groove 5px #003366; }
#showcase { width: 185px; margin-top: 23px; position:fixed; z-index:99;}
The idea for design is simple enough but I can't get the one DIV (layer) in the same place on IE as I have in Firefox The background stays where its suppose to The middle layer scrolls like it should The top image that is suppose to stay stationary does... but only lines up where i want it to in Firefox (in IE its WAY off to the right)... I dont know if this can be handled with IE only code, but I am hoping it doesnt come to browser specific hacks.. Im actually hoping i just messed something silly up Any and all help is appreciated... I been banging my head off the wall for hours. p.s. i know there is an opacity issue in IE too, but thats not nearly as impt as this one Thank you! I am trying to do a layout thats dynamic for different screen sizes in height. So I have a header at 120px high, footer at 40px high and I want the middle part 100% high. Can anyone help please?? I used a css generator now trying to get the 100% height going and its not working . Thanks http://stealaz.myvnc.com/438335.htm http://stealaz.myvnc.com/438335.css The problem is that it seems to be making a 10px scrollbar that I just can't seem to get rid of. I've tried all sorts of things to get rid of the scrollbar and none of them seem to work. Can anyone give me a helpful hand or some pointers? This is my first go at a fully css xhtml document. Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css">
html,body {
height:100%;
}
#frame {
width:770px;
margin-right:auto;
margin-left:auto;
margin-bottom: 0px;
padding:0px;
text-align:left;
height:100%;
background:#cdcdcd;
}
#contentleft {
width:170px;
padding:0px;
float:left;
background:#dadada;
height:100%;
}
#contentcenter {
width:600px;
padding:0px;
float:right;
background:#eee;
height:100%;
}
#contentheader {
background:#fff;
}
#contentmenu {
background:#fff;
}
p,h1,h2,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
h2 {
font-size:11px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
</head><body>
<div id="frame">
<div id="contentheader"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: static width and centered (Title Pic Here)</h1></div>
<div id="contentmenu"><h2><a href="home.asp">Menu Could go here</a></h2></div>
<div id="contentcenter">
<h1>contentcenter</h1>
<p>3 columns all with static widths, and contained in a parent DIV wihich remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.</p>
<p><strong>Scroll down for the source.</strong></p>
<p >Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>
<div id="contentleft">
<h1>contentleft</h1>
<p>Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. </p>
</div>
</div>
</body>
</html>
the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="aoms.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> d </div> <div id="nav"> d </div> <div id="contentTop"> d </div> <div id="content"> d </div> <div id="contentBottom"> d </div> </div> </body> </html> the css: Code: body{
margin:5px 5px 5px 5px;
padding:0px 0px 0px 0px;
height:100%;
}
#container{
min-width:800px;
max-width:800px;
width:800px;
min-height:100%;
max-height:100%;
height:100%;
background-color:#ffffff;
}
#header{
background-image:url('images/header.jpg');
background-repeat:no-repeat;
min-height:124px;
max-height:124px;
height:124px;
padding:0px 0px 5px 0px;
}
#nav{
background-image:url('images/nav.gif');
background-repeat:no-repeat;
min-height:30px;
max-height:30px;
height:30px;
padding:0px 0px 5px 0px;
}
#contentTop{
background-image:url('images/contentTop.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
#content{
background-color:#A1A1A1;
min-height:400px;
max-height:100%;
height:100%;
}
#contentBottom{
background-image:url('images/contentBottom.gif');
background-repeat:no-repeat;
min-height:28px;
max-height:28px;
height:28px;
padding:0px 0px 0px 0px;
}
the problem 'FF': 'container' is not stretching to 100% height, its only as big as the other divs stretch and in IE its more than 100%? hope you can understand that. Shem Okay so I essentially have 3 divs. #header #body #footer header will ALWAYS be 60px footer will ALWAYS be 20px I would like body to fill 100% of the remaining space no matter what, with no scrollbars showing. Is this even possible? I had gotten it to work in FF and then saw IE7 was a no go. I did something conceptually like this Code:
<div id="container">
<table>
<tr>
<td><div id="header"</td>
</tr>
<tr>
<td height=100%>
<div id="body"></div>
</td>
</tr>
<tr>
<td valign="bottom"><div id="footer"></div></td>
</tr>
</table>
</div>
in CSS, the HTML, BODY, #body, and #container are set to 100% height I'm beginning to convert my site from HTML tables to CSS divs. I am having problems with two of my image borders, both on the left and right side of my layout. Neither of the borders stretch to the bottom of the page. The left border stretches to the height of the content in the current DIV. The right border doesn't appear at all. How do I make to borders stretch to the bottom of the page? CSS version: http://www.depiction.net/layoutsliced.php HTML version I'm trying to match: http://www.depiction.net/?id=tutorials Hi Guys I am building a web log and my plan is to insert text in to the web log dynamically, which means I will not be able to rely on a fixed height. How do i get a div container to follow the height of a div inside it? I am using a div container that has a div floated to the left and a div floated to the right inside it. The text which i want to insert dynamically will appear in the right div, is there a way for the left div to also follow the height of the right div? I have tried using height: auto and height: 100% . my web log can be found here my css file is at In IE the web log looks almost how it should except for the grey space on the bottom left. In FF it is even uglier! Any help or suggestions would be much appreciated Problem fixed... I'm stupid... a moderator can delete this... I am trying to display some data from a mysql file in a spreadsheet format. The first column of data displayed is boolean so I want to show it as a check box, which requires defining a form. When I do this is it increases the row height on the screen, regardess of what I set the height to in the css file. If I take out the form column, it respects the row height setting in the css file. Any thoughts on why the form overrides the row setting and how to fix it? PHP Code: <tr class="firstrow"> <td class="colDone"> <form class="form1" name="form1" method="post" action=""> <input <?php if ($row_rsList['isDone']) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" value="checkbox" disabled="disabled" /> </form> </td> <td class="colItem"><?php echo $row_rsList['taskitem']; ?></td> <td><?php echo $row_rsList['taskpriority']; ?></td> <td><?php echo $row_rsList['taskcategory']; ?></td> <td><?php echo date("m-d-Y",strtotime($row_rsList['taskduedate'])); ?></td> </tr> from css file: tr.firstrow { background-color:#FFFFCC; height: 20px; } Have problem with DIV height not displaying as it should in Explorer 6.0. It displays correct in FF 1.03 and OP 8.0 and NE 7.2 Have not tested any other browsers. Please see attached .htm file for example code. Any idea why not working in IE? Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<br><br>
<table border=1 cellpadding=0 cellspacing=0><tr>
<td>EmptyCellHere</td>
<td valign="top">
<div id="hdiv1" style="display:block; position:relative; z-index:1; height:50px; width:200px; background-color:#44f"></div>
</td>
<td>Why is the red rectangle to the left not 10px x 10px in Explorer (6.0)<br> it is showing up right in FF 1.0.3 and OP 8.0 and NE 7.2</td>
</tr></table>
<div id="hubba" style="display:block; position:absolute; z-index:2; visibility:hidden; top:0px; left:0px; margin:0; padding:0; background-color:#f00; width:10px; height:10px;">
</div>
<!--<img src="spacer.gif" height="10px" width="10px" alt="" border="1">-->
</body>
</html>
<script>
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
// first get left and top of the hdiv1
var el, left, top;
el = document.getElementById('hdiv1');
left = findPosX(el);
top = findPosY(el);
document.getElementById('hubba').style.left = left;
document.getElementById('hubba').style.top = top;
document.getElementById('hubba').style.visibility = 'visible';
</script>
Hello! I want to layout my page using CSS and DIVs. But I have a problem. If you look at this site , you will see that when a give to a div height 100%, it doesn't fill the remainder of the page. How can I fix this problem? Thanks Artashes |
|||||||