|
CSS - Dynamic Css (expressions) & Document.recalc
I have CSS that contains numerous dynamic style properties, using the IE propriety css expressions. However, this causes IE to sometimes display sections of the page as blanks. The page get rendered properly once the use resizes the window.
One could get past the issue using the following JavaScript (DHTML) expression: document.recalc(true); This expression can be called once the page has finished loading. I have however found that this does not always help. Those sections appears blank until the page is resized. Anyone knows of a solution? Similar TutorialsMy subject title may be a little off (terminology). I'm looking for a good resource on embedding 'expressions' in CSS - mostly for learning. I've lost all my links because I did an Office update on my Mac and somehow lost all my email settings. I posted in the Mac forum a couple of weeks ago, but to no avail. So, I'm beginning to build my info up again (damn). I've seen Pure CSS tooltips, Opacity for IE, Conditional Statements and more, but I can't remember all the things I'd found. Can someone point me to a good resource on this area of CSS please? Would be much appreciated. I have a css stylesheet and an xslt stylesheet. In my xml doc i apply the xslt stylesheet, but how do i also apply the css? thanks I've got a 2 column layout. It goes like this: .leftnav { position: absolute; left: 0px; top: 0px; } .content { position: absolute; left: 150px; top: 0px; } In the html: <div class="leftnav">A bunch of navigation</div> <div class="content">A bunch of content</div> Now, underneath both of these columns, spanning the width of both, I want a footer div. The leftnav and the content will not be the same length down the page. I don't know which of these 2 columns will be longer on any given page. However, underneath the longest column, I want to put my footer div. I could do this with a table easily enough. But how fun would that be? Is there a way to expand the height and width of a DIV to the height and width of the document, not the browser window? When I set it too 100%, and scroll, the div remains the size of the original window. The DIV is for a background grey out screen, and I want it to encompass the height and width of the document and persist when scrolling. Explicitly setting height and width with pixels doesn't work, because that depends on the user's screen resolution. Any thoughts? Many thanks... OK not only am I having problems giving a background image to individual cells. I have a problem where I cannot give the whole document the same background. I mean the background appears but one table (tab2) and one cell (td1) do not show the image that should span their areas too. Ive included the css, I think I may be some suspisious code. If you could please have a look for me. Thanks (see attached) Can somebody please help me with a problem i am having with my footer. I have been reading through articles and help forums for days now trying to get a footer on my theme that will stick to the bottom of the document. At the moment the Footer is sticking to the bottom of the page, but as the content of my pages are longer than the viewpoint, My footer is appearing in the middle of my content. I have been trying all sorts to try and figure this out, and everything i try seems to not work. My website is here My HTML code can be found here And my CSS Code can be found here Many thanks, Hi all, Position Fixed does not work IE so the approach I used was document.body.scrollTop in my css. My approach seems to work but the div is very jumpy and does not run very smoothly. css Code: Original - css Code <!--[if lte IE]> <style type="text/css"> .banner { position:absolute; top:expression(eval(document.body.scrollTop + document.body.offsetHeight - 45)); left:0; margin:0; padding:0; height:42px; width:100%; color:#FFFFFF; background:#DDDDDD; } </style> body > banner { position: fixed; left: 0px; top: 0px; } <![endif]-->
html Code: Original - html Code <div id="banner" class="banner" align="left"> <div id="banner" class="banner" align="left"> Stephen I've got a problematic background DIV. It fills up the entire viewport and looks correct, but cuts off at the bottom (one screen height down) when I scroll. How can I get this DIV to span the entire height of the document, instead of just the height of the viewport? BTW, it works fine in IE 6, but cuts off in FireFox 0.9, Opera 7.5, and Netscape 7.1 Here's the code (you'll have to populate the content DIV to get scrollbars and witness the problem): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #F1EFE2;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
.bg {
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 960px;
height: 100%;
background: #F7F6EF;
text-align: center;
border-right-color: #9E987F;
border-right-width: 1px;
border-right-style: solid;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #9E987F;
}
.heading {
position: relative;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
background: #7C2812;
color: #F7F6EF;
vertical-align: middle;
text-align:left;
padding-top: 10px;
padding-bottom: 10px;
text-indent: 10px;
}
.content {
position: relative;
top: 20px;
padding-left: 15px;
padding-right: 15px;
width: 920px;
vertical-align: top;
text-align:left;
}
-->
</style>
</head>
<body onResize="window.location.href = window.location.href;">
<div class="bg">
<div class="heading">
heading goes here
</div>
<div class="content">
content goes here
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! I was thinking of using DIVs insteed of table to layout my page. The page would be dynamic meaing the text would come from DB so i would have new articles comming in daily. I will like I cant controll where the text is put on the text. If I use CSS width="20px" and hight"20px",, <-- Yeah i know it down to the pixle,, but that would mean i would need to make a new CSS for every article that where put into the db. <-- which would be a pain. So how can I keep the controll of placing my text without using tables ? Please help a new CSS user. Hi Guys... (and Girls) Great Forum you have going here... I've got a quick question regarding Dynamic CSS. I need to mention now though - I'm doing some development work at the moment, but, I'm not a developer so my approach and question might seem unusual to the experienced guys out there. Situation: I'm currently building a new site which is styled completly with CSS - e.g. No Tables or Cells. It's the first time I've done it but it's working great! The website is currently a fixed 760px across so that it will fit into 800 x 600 screen. Market research suggests about 20% of the visitors to this site use a 800 x 600 screen resolution and so I don't want them to have a horizontal scroll bar, but I would like the site to be at least 800px across for everyone not using a 800 x 600 screen resolution. My question is - Can I use a Javascript function to grab the screen resolution of a visitor to the site and then dynamically update the CSS of the site depending on screen resolution? And if so do you think it's a good approach? I'm sure there are others ways to do it but I'd prefer to work within the skills I already have, which includes Javascript and PHP. Thanks for the help... Matt Edwards I have <div> content that diplays at different sizes in IE and Mozilla, which makes lining up the <div> container below it difficult. How can I get the <div> container to expand to the size of the content height wise so that I can then capture it's height with js, setting the <div> container below it to it's proper poisition. Thanks. I want to have a web page with a list on it that dynamically resizes to fit the browser viewport with a minimum distance between list items. Here's an example I faked in TextPad: Normal view: User enlarges browser: User shrinks browser: How would I accomplish this in HTML/CSS? Thanks! Hi I'm trying to CSS a dynamic table using Dreamweaver CS4 the problem i have is to set my css i have to have 2 rows 1 odd 1 even and dreamweaver only gives me 1. I've added a second row which just remains blank. Can anyone help Heres my html / PHP: <div class="donation_table"> <table> <thead> <tr> <th>FAMILYNAME</th> <th>FAMILYCODE</th> <th>DONATION</th> <th>DATE</th> </tr> </thead> <?php do { ?> <tbody> <tr> <td><?php echo $row_Recordset3['FAMILYNAME']; ?></td> <td><?php echo $row_Recordset3['FAMILYCODE']; ?></td> <td>$<?php echo $row_Recordset3['DONATION']; ?></td> <td><?php echo $row_Recordset3['DATE']; ?></td> </tr> <tr class="rowline"> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); ?> </table> </div> And heres my PHP code $maxRows_Recordset3 = 25; $pageNum_Recordset3 = 0; if (isset($_GET['pageNum_Recordset3'])) { $pageNum_Recordset3 = $_GET['pageNum_Recordset3']; } $startRow_Recordset3 = $pageNum_Recordset3 * $maxRows_Recordset3; mysql_select_db($database_MafiaLive, $MafiaLive); $query_Recordset3 = "SELECT FAMILYNAME, FAMILYCODE, DONATION, `DATE` FROM donations ORDER BY DONATION DESC"; $query_limit_Recordset3 = sprintf("%s LIMIT %d, %d", $query_Recordset3, $startRow_Recordset3, $maxRows_Recordset3); $Recordset3 = mysql_query($query_limit_Recordset3, $MafiaLive) or die(mysql_error()); $row_Recordset3 = mysql_fetch_assoc($Recordset3); if (isset($_GET['totalRows_Recordset3'])) { $totalRows_Recordset3 = $_GET['totalRows_Recordset3']; } else { $all_Recordset3 = mysql_query($query_Recordset3); $totalRows_Recordset3 = mysql_num_rows($all_Recordset3); } $totalPages_Recordset3 = ceil($totalRows_Recordset3/$maxRows_Recordset3)-1; Thank you Daniel I have the task of creating a question with multiple correct answers without using form checkboxes (for reasons I won't go into here.) I've made a simple question that works by replacing the src of a tickbox image with a ticked one when that answer is selected. It works in IE5.5 and Firefox but in IE6 the images show when the page loads, then disappear on clicking and don't come back. Can anyone suggest why? I've stripped out all the branding etc and put the basic page at http://www.normanlamont.com/test/mu...pages/index.htm Here's the code that does it: Code: function markup(which) {
// toggle tickbox on and off until submit
if (document.getElementById('c' + which).className=="chosen") {
document.getElementById('tick' + which).src="../q_images/tickbox_0.gif";
document.getElementById('c' + which).className="not_chosen";
selected[which-1]=0;
}
else {
document.getElementById('c' + which).className="chosen";
document.getElementById('tick' + which).src="../q_images/tickbox_1.gif";
selected[which-1]=1;
}
}
hi all ! I have some dynamic data that gets inside a cell in a table, the problem is that Im having problems to adjust the cell so the data can be seen more user friendly. The max width for the table is 1024 px. This is how it looks: Is there a way to make it look better using dynamic css,script,etc? Thanks a lot ! Despite looking through the forum, having problems with dynamically creating an external CSS file. Can any one explain? Basically I currently have a CSS file: Code:
.normal
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.userdef
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
font-weight: 800;
}
.big
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
I have set the site up so that the user can define there own colour of text for the userdef style, but im unsure how I can put this colour variable into the CSS file. I'm guessing I have to rename it into a .php file... but how will the browser still know its a CSS file?? Thanks very much for your help Hi all, Bit of a stupid question this as I have checked w3 and w3schools et al and could find anything on this, but: Are wildcards usable in CSS? Example: I am going to be generating blocks dynamically, and instead of writting all these blocks into a stylesheet, I wondered if you could do it using wildcards. Example: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Creation date: 01.10.2004 -->
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
<!--
#block {color: red;}
-->
</style>
</head>
<body>
<div id="block">Text</div>
<div id="block2">Text 2</div>
<div id="block3">Text 3</div>
<div>Text 4</div>
</body>
</html>
Changing the #block reference to #block* doesn't work, any ideas? I don't want to have to add #block, #block2, #block3 {color: red;} etc... Hello all, I'm trying to create a site using all css positioning but I'm running into some problems that to me, shouldn't even be problems. The main issue I'm having is getting a container div's height to expand based on the height of divs nested inside the container. Vut all I get is the nested divs flowing outside of the container div. I don't have any code to share, because I have it so screwed up right now it wouldn't even help explain my issue. I'm going for a 3 column design, that is wrapped by said container div, and the container divs height would be based on the height of the longest div nested within. I've done alot of searching on the web, and the answer seems to be that this can't be done. But I'm giving it one more try here. I'm also a bit confused about relative positioning. Say that my conatiner div actually worked, and the height adjusted appropriatly. I have a left column, and a right column. both are position relative to the container. But when I do this, it seems to come out that the right columns top positioning is relative to the left columns positioning. If I design everything based on viewable browser area, and allow scrolling when necassery, css is a dream. But thats not very practical. It seems that css great for static websites, but not quite up to par for anything dynamic. Once I calm down and I'm not so frustrated, I'll start over and post some code if my explaination isn't descriptive enough. Any input would be appreciated! :-) Hi All, I've got one of those wonderful CSS/javascript flyout menu's running on my website which is causing me a little bit of grief in Firefox and Safari. Firefox and Safari seem to be placing the 2nd and 3rd level items of the menu underneath all the other content on the page and therefore can't be seen. Seems to work well on Opera and IE. Here are the screen shots of what is happening in each browser: http://dev.platforminteractive.com.au/cssissue/css_ff.jpg - firefox http://dev.platforminteractive.com.au/cssissue/css_opera.jpg - opera http://dev.platforminteractive.com.au/cssissue/css_ie.jpg - ie You can take a look at the site and the coding behind it at http://dev.platforminteractive.com.au - just in development atm but this nav is causing me some grief. Hi all- I am building a tableless site out of divs/css and cant seem to get the one div positioned properly. I need to make the site as dynamic and liquid as possible so absolute positioning (i.e. width:320px; etc) is out of hte question... http://verticalextreme.com/about/hours_pricing.html i am trying to have the HOURS div and hte PRICING div inline with each taking up 50% of the main content width i currently have the following css: Code: #hours {
display: inline;
clear: none;
width: 50%;
}
#pricing {
clear: none;
display: inline;
width: 50%;
}
Thanks for any help in advance - rock on |
|||||||