|
CSS - Stop Scrolling If 1 Div Is Too High
I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available.
Is this possible? I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content. Any help appreciated thanks! Similar TutorialsHey guys, So i'm working on the site www. paulfenton .tk. My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt. if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how... Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow. Any help or ideas would be great, let me know if you have any questions. -Paul I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods ie testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something how can I make css break that up so the browser window won't scroll vertically? I'm trying to figure out the exact height of a single line of text in units of em. I have a nice tabbed navigation system going with two levels, but the 1.25em that I had estimated isn't exactly correct (I get some misalignment when changing the font size). By putting a character in a div and modifying the height of another <div> next to it, with the font at max size, I managed to come to 1.165em, but this got misaligned at a few lower font sizes. Does anyone know an accurate measurement for this? Or should I just get it close enough for "normal" font sizes? In case that didn't make sense, I'll try to illustrate with some ASCII art: Code: +---DIV---+ +-DIV-+ |some text| | | <- what height should this be to line up perfectly? +---------+ +-----+ Well i am working on a new design but there's a problem, if you go to www.majd-gfx.com you see that the left column does not stretch fully (as long as the content column) i have searched for this and found a tutorial on alistapart.com but it wasn't very helpful as i would have had to rework the whole layout. Is there an alternative? p.s. i have tried height:auto and height:100%...neither worked.... Hi, how do i set a table to be table 100% wide 100 % high using css? i am using the new dreamweaver that includes this in the header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> the 100% height and 100% width html values dont' work, i have tried css to get the table 100% but can't can anyone help? Paul Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas? Code: #page_top_sizing {
background-color: red;
width: 764px;
height: 130px;
position: absolute;
top: 5px;
left: 5px;
z-index:1;
padding:0;
}
Thanks. i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row... as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple).... the problem may be with the way i am calculating the pixels for the div widths? or...? the page is at gatewoodfarms.com (gatewoodfarms.com/gwf.css) a screenshot of the problem is at gatewoodfarms.com/screenshot.png here is the Basic Structure/CSS: <body style="border:0px;padding:0px;margin:0px;min-width:630px;"> <div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;"> <div id="top" style=""> ... <div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;"> <div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div> </div> </div> <div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;"> ... </div> </div> any ideas how i can fix this? thanks! A number of years ago I created a web site for a mattress store where I worked (7 days a week, for 5 years). The point is this: I'm not a great web designer. The code is ancient and the owner wants me to bring the thing up to date. Using tables, I had a system for creating thin, vertical lines that went up and down the entire heighth of the page. The lines divided the content area from the borders in a neat way - although, again, using very old HTML. It looks like this: http://www.wholesalewarehouseinc.com What I'd found was that if I used a fixed-sized header and some tables I could produces the thin line that you see on that page. This was the basic code: Code: <table width=100% height=100% cellpadding=0 cellspacing=0 topmargin=0 leftmargin=0 rightmargin=0> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=50% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </td><td valign=top> <table cellpadding=0 cellspacing=0 border=0 rightmargin=0 leftmargin=0 bottommargin=0> <img src="logo.png"></td> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=100% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </table> My question is this, and maybe this is too general for a meaningful answer. Is there a way to do the same sort of thing with CSS? I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Free UFC PPV</title> <style type="text/css"> body { background-color: #CCC; font-family: Tahoma; } #holder { width: 75%; padding: 10px; border: 1px solid; text-align: left; } #img{ background-image:url(images/header.png); } #login { width: 100%; font-family: Tahoma; font-size:15px; text-align: right; color: Black; border: 1px solid; } </style> </head> <body> <center> <div id="holder" style="width:75%"> <a href="index.php"> <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a> <div id="login" style="100%" > <form action=""> Login:<input name="userlog" type="text" /> Password:<input name="passlog" type="text" /> <input name="btn_sub" type="button" value="Login" /> </form> </div> </div> </center> </body> </html> What can I do to stop resizing? Hi all, I was wondering if there was a way to stop an image stretching in all browsers. I'm creating a gallery for my web page. I've got a load of thumbnails that when you click on one it will display the picture lower down on the page. This image is in a DIV with a set width. The trouble is that some images could be small, some could be large. Using CSS I've tried setting the width to something like the size of the containing DIV. This works great for large pics but stretches the smaller pics (obviously it would as I was specifing a width). I then tried max-width. Hurrah, in Firefox this works great. Of course, Internet Explorer being the pile of poop that it is, my images come out huge and throw off the layout. is there an easy way to ensure that my small images stay small but my large images don't grow too large for both IE & Firefox using CSS? If not I guess I'll use PHP to determine the image size and go from there. My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this? Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this: Code: <div id="main-image-container">
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blank.png"}"
alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
</div>
imagine this set up, div floated left, div floated right, div in between. the middle div has text that wraps and expands the page to the required height. however in firefox, because it expands to the width of the entire page before wrapping, the middle div drops below the two floated divs. i cant fix it's width as it needs to expand to fill the middle width depending on the size of the browser (the left/rigtht floats have fixed width) if i put one or both of the floated divs within the middle div the text then wraps around the floats and doesnt remain in a column, setting each floats height to 100% is unsatisfactory, adding a further text container div only reproduces the original problem. so it's a 3 column problem, but also it isnt. going to have a sandwich and try to attack it again, looking for fresh ideas. ultimatley i might have to go back and use a big table. ouch! edit: just to clarify, the left and right floats are fixed width and height, the middle div can change width to accomodate the browser width, and height to accomodate the text. I have a div centered in the middle of my page if i type a long paragraph between the two <div> tags it is all one line, and resizes the div, even though i have its width set to a fixed size? is there something im doing wrong? Im completely stumped thanks in advance I have the code below that basically builds a css based horizontal menu; menu items are floated into the menu bar, then in the same menuvbar, a small search box follows (floated). At this point I'd like to stop elements being floated, but IE7 has some troubles because it keeps floating the next element, regardless the clear:both or float:none issued. No problem in FF 3.5 and Opera 9.64 Can someone help? Just cut the following code and save in a document.htm and test with your favorit browser and IE7. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@charset "utf-8";
/* static START */
body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}
h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}
h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}
a:hover img.sided {
border-color:#A6A6A6;
}
a {
color:#2970A6;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.fixed{
clear:both;
}
/* static END */
/* layout START */
#idwrapper {
padding:0px;
width:1200px;
}
#header {
width:100%;
margin-top:20px;
height:300px;
}
#content{
width:1020px;
}
#footer{
}
#bitmaplogo{
margin-left:20px;
background:url("http://farm1.static.flickr.com/37/112944254_3f5212215a.jpg") no-repeat left bottom;
height:100%;
}
#menu {
display:block;
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-color: Khaki;
width: 1000px;
height: 33px;
text-align: left;
}
#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:black;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background-color: Khaki;
padding: 5px 2% 8px 2%;
text-align:center;}
#menu a:hover {
color: white;
background-color: DarkKhaki;
background-repeat:no-repeat;
text-decoration:none;
}
#searchbox {
background-color: Khaki;
position:relative;
float:left;
clear:right;
height:33px;
width:350px;
}
#cse-search-box{
float:left;
padding:3px 10px;
}
#search-box-text{
float:left;
padding-left:8px;
/*padding-top: 5px ;*/
line-height:32px;
letter-spacing:-0.05em;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:16px;
font-weight:bold;
color: DarkGray;
}
.cse-box-style{
height: 20px;
width: 250px;
}
/* header END */
.tgrow{
margin-top:5px;
width:100%;
}
.adboxyellow {
background:Khaki;
font-size:100%;
color:black;
font-weight:bold;
border:4px solid DarkKhaki;
text-align:center;
}
.adboxblu {
background:#8DC3E9;
font-size:100%;
color:white;
font-weight:bold;
border:4px solid #4C88BE;
text-align:center;
}
.spacer{
background:url(img/spacer.gif);
}
.box_left_padded{
width:300px;
height:252px;
float:left;
margin-right:5px;
padding: 5px 5px 5px 5px;
}
.box_left_unpadded{
width:300px;
height:252px;
float:left;
margin-right:5px;
}
.box_mid_big_unpadded{
width:500px;
height:252px;
float:left;
margin-right:5px;
}
.box_right_unpadded{
width:210px;
height:252px;
float:left;
}
</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo"></div>
<div id="menu">
<a href="/articles">Articles</a> <a href="/guides">Guides</a> <a href=
"/news">News</a> <a href="/join">JOIN!</a> <a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a>
<div id="searchbox">
<div id="search-box-text">
Search
</div>
<form id="cse-search-box" action="http://mydot.com/search-results/"
name="cse-search-box">
<input type="hidden" value="p" name="cx" />
<input type="hidden" value="FORID:9" name="cof" />
<input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript">
</script>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
<div id="content">
<div class="adboxblu" style="width: 1033px; height: 20px; line-height: 20px; margin-top: 7px;">
your text Here! test
</div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style="width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="fixed"></div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style=
"width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="fixed"></div>
</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
Hi there, I really want to not use tables as I want to embrace CSS. Though this problem is killing me as everything looks fine in IE but not in FF, which is never the case so need help. I require a title (two sentences overlapping each other) to be aligned side by side with a image. Basically i've got one image and two paragraphs in a container div, the paragraphs are positioned absolute but in FF the look as though they are being place relative ie bottom right of image? My html file looks like: <body> <div id="MainContainer"> <div id="HeaderContainer"> <img src="images/logo.gif" alt="Opix UK" name="Logo"/> <p id="Title1">Photo products for the contemporary home..</p> <p id="Title2">or business!</p> </div> </div> </body> My CSS looks like: body{ padding:0; margin:0; margin-top: 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; } div#MainContainer{ width: 960px; text-align: left; margin-left: auto; margin-right: auto; } div#HeaderContainer{ border: 1px solid Blue; font-size: 19px; font-style: italic; font-weight: bold; } p#Title1{ border: 1px solid Red; color: #333333; position: absolute; left: 100px; top: 5px; z-index: 1; } p#Title2{ border:1px solid Red; color: #0066CC; position: absolute; left: 450px; top: 17px; z-index: 2; } Any help much appreciated? I am constructing a new website and need help preventing the header text from overflowing. I have tried combinations of overflow:hidden; but does not seem to work. The site is here. Advice on how I can prevent overflow for FFox, IE6/7 appreciated. Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}
and xhtml (error.html): 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" lang="en" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />
<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id)
{
if (id != null) {
if (document.getElementById(id)) {
//Send all parent's descendents in spans to the back
var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
var s=0;
var c=0;
while (span[s]) {
setzIndexOfBranch(span[s],9);
s++;
}
//bring id and descendants to the front
setzIndexOfBranch(document.getElementById(id),10);
}
}
}
//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
if (node.style != undefined) {
node.style.zIndex = value;
}
var c=0;
while (node.childNodes[c]) {
setzIndexOfBranch(node.childNodes[c],value);
c++;
}
}
function parseXML()
{
text="<root>";
text=text+"<heading>XML CSS HTML test</heading>";
text=text+"<table1data>"+"<table>"+
"<caption>"+
"First table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"</table><br/>Some text after table 1<br/>"+
"</table1data>"+
"<table2data>"+"<table>"+
"<caption>"+
"Second table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"<tr>"+
"<td>row4</td>"+
"</tr>"+
"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
"</table2data>";
text=text+"</root>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("table1").innerHTML=
xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
document.getElementById("table2").innerHTML=
xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
document.title=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
<fieldset id="intro">
<legend>header</legend>
<span id="to"></span><br/>
Header text
</fieldset>
<br/><br/>
<fieldset id="addresses">
<legend>addresses</legend>
<br>This is in the addresses fieldset</br>
<span id="table1" onclick="bringToFront('table1')"></span>
<span id="table2" onclick="bringToFront('table2')"></span>
<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
</fieldset>
<br/><br/>
<fieldset id="footer">
<legend>footer</legend>
This is all
<br/><br/><br/><br/><br/><br/><br/><br/>
footer text<br/>
<br/>Down to here.
</fieldset>
</span>
</body>
</html>
produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. Hi all, I might be having a moment, but I am having a problem with a CSS inheritance of a property. I have a sidebar "left_float_column", which normally has a few divs inside it and hence i have a CSS property "left_float_column div" as below. Code: .left_float_column div {
min-height:200%;
border:solid #000 1px;
text-align:center;
background-color:#CADDEE;
margin-top:1%;
padding:2%;
}
Inside this I now want to place another div with a different color background, so i created another class selector: Code: .pdfdownload {
background-color: white;
}
When a div is nested as follows: Code: <div class='left_float_column'> <div class='pdfdownload'>Hello</div> </div> The background color of the pdfdownload is #CADDEE, not white? Is that right? Why is it right? never had this problem before. I can correct it by renaming the '.pdfdownload' line '.left_float_column .pdfdownload', but its not ideal as I wanted to use the pdfdownload multiple times on some pages in different places. I have checked using opera "inspect element" and it shows it is using the parents color, instead of the childs. I just don't understand |
|||||||