CSS - This Black Box Is Blank In Ie's Print Preview But Not In Ie's Browser Window.
This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.
Code: <style type="text/css"> divBlackBox1 { margin: 50px auto; padding: 0px; width: 400px; height: 4px; display: block; /* for IE stupidity (to make height work correctly with the correct pixels)... */ font-size: 1pt; /* for IE stupidity (to make the smaller height work due to default font-size)... */ overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */ background-color: #000000; } </style> <div class="divBlackBox1"></div> Thanks, FletchSOD Similar TutorialsI have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview. Help ? to add: This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table. Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code: @media print { html{ height:auto;} body{ background-color:#FFF;} #header{ display:none;} #body{ position:relative; background-color:#FFF; background-image:none; height:auto; width:auto; left:0px; top:0px; z-index:0; padding-bottom:0px;} #textbox{ position:relative; overflow:visible; float:none; margin-left: 0px; top: 0px; width:auto; bottom:0px; background-color:#FFF; border:hidden; border-color:#FFF; z-index:0; padding:0px;} #textbox img{ display:none;} .searchbar{ display:none;} #linkbar{ display:none;} .map{ display:none;} .video{ display:none;} #linktext{ display:none;} #clear_both{ display:none;} #menu{ display:none;} #footer{ display:none;} } Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hi Guys, we are currently working on printing a webpage with only printing the body of the page (or the content that we only need) but when it comes to its print preview it's not kinda align or rather it doesn't look good - in its presentation in the print preview screen or on the paper when it's printing time! - so my question is is it possible to use a css code to a print preview? I noticed that in IE6 when I go to print, or even look in print preview, it cuts off the right side of my page. Is there any code to avoid that? Or even any tips? Hi all, Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print. A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method. Any thoughts on how to do this? Thanks, AJ I have two items (text) floated left. But when I hit print preview the second text label "wraps" under the first so the are both aligned left. I would like to keep positions fixed when viewing and printing. Happens in both FF and IE. Thanks, Doug My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area. I think this is a css issue, but I can't figure it out. http://alpineec.com/TEST/index.php Any thoughts? CSS Code: * { padding: 0em; margin: 0em; } body { background-color:#999999; padding: 35px 0px 35px 0px; } body,input { font-size: 10pt; font-family: "georgia", "times new roman", serif; color: #333333; } p { line-height: 1.5em; margin-bottom: 1.0em; text-align: justify; } a { color: #B96D00; text-decoration: underline; } a:hover { text-decoration: none; } h3 span { font-weight: normal; } h3,h4 { display: inline; font-weight: bold; background-repeat: no-repeat; background-position: right; } h3 { font-size: 1.7em; padding-right: 34px; background-image: url('images2/db1.gif'); } h4 { font-size: 1.2em; padding-right: 28px; background-image: url('images2/db2.gif'); } .contentarea { padding-top: 1.3em; } img.left { position: relative; float: left; margin: 0em 1.8em 1.4em 0em; } img.right { position: relative; float: right; margin: 0em 0em 1.8em 1.8em; } .post .details { position: relative; top: -1.5em; font-size: 0.8em; color: #787878; } .post ul.controls { clear: both; } .post ul.controls li { display: inline; font-size: 0.8em; } .post ul.controls li a { background-repeat: no-repeat; background-position: left; padding: 0em 1.0em 0em 20px; } .post ul.controls li a.printerfriendly { background-image: url('images2/icon-printerfriendly.gif'); } .post ul.controls li a.comments { background-image: url('images2/icon-comments.gif'); } .post ul.controls li a.more { background-image: url('images2/icon-more.gif'); } .box { position: relative; background: #FDFCF6 url('images2/boxbg.gif') repeat-x; left: -1.5em; top: -1.5em; padding: 1.5em; border-bottom: solid 1px #E1D2BD; margin-bottom: 1.0em; } ul.linklist { list-style: none; } ul.linklist li { line-height: 2.0em; } #upbg { position: absolute; top: 0px; left: 0px; width: 100%; height: 275px; background-color:#999999; z-index: 1; } #outer { z-index: 2; position: relative; /* The width value below controls the overall width of the design. By default it's set to 82% (so it'll take up 82% of the browser window's width). You can set it to a different percentage value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width. */ width: 700px; border: solid 1px #fff; background-color: #fff; margin: 0 auto; } #header { position: relative; width: 100%; background: #5a5a5a; } #headercontent { position: absolute; bottom: -56px; padding: 0em 2.0em 1.3em 2.0em; left: 274px; } #headercontent h1 { font-weight: normal; color: #fff; font-size: 2.5em; } #headercontent h1 sup { color: #777; } #headercontent h2 { font-size: 1.0em; font-weight: normal; color: #aaa; } #menu { position: relative; background: url('images2/menubg.jpg') repeat-x top left; height: 20px; padding: 0em 1.0em 0em 1.0em; } #menu ul { position: absolute; top: 2px; } #menu ul li { position: relative; display: inline; } #menu ul li a { padding: .5em 1.0em 0.9em 1.0em; color: black; text-decoration: none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; } #menu ul li a:hover { text-decoration: none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color: #FE3D00; } #menu ul li a.active { text-decoration: none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color: #FE3D00; } #content { padding: 0em 2.0em 0em 2.0em; } #primarycontainer { float: left; margin-right: -18.0em; width: 100%; } #primarycontent { margin: 1.5em 22.0em 0em 0em; } #secondarycontent { margin-top: 1.5em; float: right; width: 18.0em; } #footer { position: relative; height: 2.0em; clear: both; padding-top: 5.0em; background: #fff url('images2/border2.gif') repeat-x 0em 2.5em; font-size: 0.8em; } #footer .left { position: absolute; left: 191px; bottom: 1.2em; z-index: 10; } #footer .right { position: absolute; right: 2.0em; bottom: 1.2em; } pre { padding:10px; border: 1px dotted #eee; background-color:#f9f9f9; } #photodiv { background-repeat: no-repeat; } #aboutBLOCK{padding-left:40px;} /* PHOTO GALLERY */ #pg { border:2px dotted #666; padding:5px; padding-top:15px; } #pg ul { list-style:none; left: 10px; padding:0; margin:0; position:relative; float:left; } #pg ul li { display:inline; float:left; margin:0 0 8px 8px; } #pg ul li a { display:block; width:90px; height:90px; text-decoration:none; border:1px solid #000; } #pg ul li a img { display:block; width:90px; height:90px; border:0; } #pg ul li a:hover { white-space:normal; border-color:#336600; background-color:#323E20; } #pg ul li a:hover img { position:absolute; left: 290px; top:110px; width:300px; height: 300px; border:1px solid #000; } #pg ul li a span {display:none} #pg ul li a:hover span { display:block; position:absolute; left:9px; top:110px; width:270px; height:auto; font-size:12px;color: black; } I have that annoying problem that code like this: PHP Code: <img src="images/worsleytop.jpg" width="750" height="175" /> <div id="navigation"> <ul id="nav"> <li> Causes a gap between the image and the navigation div of a couple of pixels. I know why it is happening. And I know that changing it to PHP Code: <img src="images/worsleytop.jpg" width="750" height="175" /><div id="navigation"> <ul id="nav"> <li> fixes the problem in IE, but not in firefox. How do I sort it out universally? Hello, I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off. Can CSS be used to control these margins on the page? I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next. Code: <style type="text/css"> <!-- .style1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; } body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; } body { margin-left: 15px; margin-top: 15px; margin-right: 15px; margin-bottom: 15px; } .style4 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight: bold; } .style15 {font-size: 10pt} .style21 {font-size: 18pt} .style24 {font-size: 24pt} .style25 {font-size: 16pt} .style28 {font-size: 12pt} --> </style> <link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css"> <style type="text/css" media="print"> <!-- .style19 {font-size: 14pt} .style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } .style22 {font-size: 9pt} .style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;} .styleprint { margin: 0in 0in 0in 0in; margin-top: 0in; margin-left: 0in; } --> </style> I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins. How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins? Thanks, Paul Is there any way to force a background color to print in all browsers or at least IE & FF? In the past I have just used an actual image; instead of a background color, but I was wondering if there was a 100% sure way to do this. I tried using media="print" and !import - neither of these worked. So if there is a will, place let me know the way. I am not experienced in CSS or any web design for that matter. I am trying to make a very simple web site using CSS and I am being frustrated by some positioning problems. I would appreciate your help! Problem: When I restore the browser window to a smaller size, "things" in my web page start to overlap eachother. The smaller the window, the greater the overlap. What I have done: I have validated everything, guess and checked multiple positioning elements, fiddled with margins, and have browsed through multiple CSS sites looking for help. What I would like fixed: When the browser is in a smaller window, there will be a scrollbar that appears preserving the size of the web page instead of scrunching it all together. Graphical Representation: Full-Screen Smaller Window - Overlapping I Like This - Note the Scrollbar on the bottom 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=utf-8"> <title>Chapel</title> <style type="text/css"> @import "layout.css"; </style> </head> <body> <div id="chapell"> <img src="graphics\chapel1.jpg" alt="chapel"> </div> <div id="news"> <a href="news.html"> <img src="graphics\news.jpg" alt="news"> </a> </div> <div id="us"> <a href="index.html"> <img src="graphics\us.jpg" alt="us"> </a> </div> <div id="directions"> <a href="directions.html"> <img src="graphics\directions.jpg" alt="directions"> </a> </div> <div id="contact"> <a href="contact.html"> <img src="graphics\contact.jpg" alt="contact"> </a> </div> <div id="schedule"> <a href="schedule.html"> <img src="graphics\schedule.jpg" alt="schedule"> </a> </div> <div id="myspace"> <a href="http://www.myspace.com" target="_blank"> <img src="graphics\myspace.jpg" alt="myspace"> </a> </div> <div id="art"> <a href="art.html"> <img src="graphics\art.jpg" alt="artistry"> </a> </div> <div id="messages"> <a href="messages.html"> <img src="graphics\messages.jpg" alt="messages"> </a> </div> <div id="scoop"> <img src="graphics\scoop.jpg" alt="scoop"> </div> <div class="roundcont"> <div class="roundtop"> <img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br><br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="roundbottom"> <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> </div> </body> </html> Code: body { color: white; background-color: #FDF8DF } #chapell img { position: absolute; left: 21.5%; top: 34%; border: none; margin-bottom: 10%; margin-right: 10%; } #news img { position: absolute; left: 20%; top: 38%; border: none; margin-bottom: 10%; margin-right: 10%; } #us img { position: absolute; left: 20%; top: 42%; border: none; margin-bottom: 10%; margin-right: 10%; } #directions img { position: absolute; left: 20%; top: 46%; border: none; margin-bottom: 10%; margin-right: 10%; } #contact img { position: absolute; left: 20%; top: 50%; border: none; margin-bottom: 10%; margin-right: 10%; } #schedule img { position: absolute; left: 20%; top: 54%; border: none; margin-bottom: 10%; margin-right: 10%; } #myspace img { position: absolute; left: 20%; top: 58%; border: none; margin-bottom: 10%; margin-right: 10%; } #art img { position: absolute; left: 20%; top: 62%; border: none; margin-bottom: 10%; margin-right: 10%; } #messages img { position: absolute; left: 20%; top: 66%; border: none; margin-bottom: 10%; margin-right: 10%; } #whoarewe img { position: absolute; left: 37%; top: 25%; } #scoop img { position: absolute; left: 36%; top: 25%; margin-bottom: 10%; margin-right: 10%; } #findus img { position: absolute; left: 40%; top: 25%; } #banter img { position: absolute; left: 32.5%; top: 25%; } #docket img { position: absolute; left: 39%; top: 25%; } #expressions img { position: absolute; left: 37%; top: 25%; } #listen img { position: absolute; left: 39%; top: 25%; } .roundcont { top: 35%; right: 35%; width: 35%; background: white; color: black; position: absolute; margin-left: 10%; margin-top: 0%; } .roundcont p { margin: 0 3%; font: 12px arial, tahoma, serif; } .roundtop { background: url(tr.gif) no-repeat top right; } .roundbottom { background: url(br.gif) no-repeat top right; } img.corner { width: 3%; height: 15px; border: none; display: block !important; } Thank you, Daniel Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader { width: 800px; margin-top: 0px; margin-left: auto; margin-right: auto; } Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> hey all i have a prob....when the browser window is maximised it is fine...however...when i make it a bit smaller the content div shoots off halfway down the page Go Here To See What I Mean the css can be found here any ideas...cus im stumped thanks very much RF I am trying to center a 760x580 DIV box in the center of the browser window (horizontally AND vertically) regardless of the user's screen size. Horizontal centering hasn't been a problem, but I can't figure out how to get the thing to center vertically. Here is my code at the moment: Code: <html> <head> <title>Center a DIV</title> <style type='text/css'> html {height:100%;} body {height:100%; margin:0; padding:0;} #content { position: absolute; right: 0; left: 0; width: 760px; height: 580px; margin: 0 auto; overflow-x: hidden; overflow-y: hidden; background-image: url(grunge_paper.jpg); } img {display: block;} </style> </head> <body bgcolor='black'> <div id='content'> </div> </body> </html> Can it be done with just CSS? I have a table of data where the text in the data cells wraps and fills the td cell with several lines of text. This is OK when the browser window is a "normal" size, but if someone is viewing with a widescreen monitor I would like the table to get wider and make the cell contents not wrap the text. Or if they are viewing with a small monitor I want it to wrap even more (table would get smaller). Can this be done with CSS, or do I need to do something with javascript? I am trying to get my container to be 100% the height of the browser window but have so far been unsuccessful, and I am not sure what I am doing wrong. Thanks for any help. 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" /> <title>TEST</title> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #333; font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; background: #EEEEEE; text-align: center; } a { color: #434C3E; } a:hover { color: #F15925; } #container { margin: 0 auto; width: 724px; height:100%; position: relative; background: #fff; padding: 0 10px 0 10px; text-align: left; } * html #container { width: 744px; w\idth: 724px; } #logo { position: absolute; top: 20px; left: 70px; width:94px; height:147px; background-image:url(../images/logo.gif); } h3 { color:#555555; } #top { height: 145px; margin-left:240px; } #container #intro #quickSummary .p1 { font-size: 11px; height: 171px; margin: 0; width: 724px; color: #fff; font: 12px/150% Trebuchet MS; } #container #intro #quickSummary .p1 span { padding: 30px 530px 0 30px; display: block; margin: 0; font: 12px/150% Trebuchet MS; } #text { margin: 20px 20px 0 243px; } #text p { line-height: 150%; margin: 10px 0 10px 0; } #footer { color: #fff; height: 48px; text-align: right; padding: 0 10px 0 0; line-height: 26px; font-size: 11px; } #footer a { color: #fff; text-decoration: none; } #footer a:hover { text-decoration: underline; } </style> </head> <body> <div id="container"> <div id="intro"> <div id="logo"></div> <div id="top"></div> <div id="text"> <h3>Heading number one</h3> <p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu purus, sodales volutpat, eleifend ac, semper ut, dolor. Curabitur porttitor suscipit ligula. Sed vehicula mauris non sapien suscipit luctus. Fusce luctus pulvinar lectus. Aenean mi. Pellentesque rutrum nibh ut diam. Mauris porta, lectus sit amet ultricies lobortis, metus mauris semper orci, porta tincidunt neque dui ac magna.</p> <p class="p2">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p> </div> </div> <div id="text"> <h3>Heading Number Two</h3> <p class="p1">Etiam nec metus vestibulum lacus facilisis consectetuer. Cras sed odio. Sed et purus a pede condimentum fermentum. In hac habitasse platea dictumst. Integer ornare nisl eu sem.</p> <p class="p2">Nam laoreet, eros non cursus varius, nisi enim pharetra nisi, ut fringilla nisl turpis a diam. Proin ac elit ut nibh nonummy ultrices. Phasellus felis quam, consectetuer in, bibendum et, dictum id, mi. Nunc quis eros id metus auctor volutpat. Nunc diam odio, vehicula a, accumsan a, semper quis, mauris. Ut mauris enim, ultricies sed, viverra non, porta vitae, dui.</p> <div> <h3>Heading Number Three</h3> <p class="p1">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p> </div> </div> <div id="footer">Foo</div> </div><!--end container--> </body> </html> works in FireFox, page looks the same no matter how u resize the window: http://img63.imageshack.us/img63/3264/firefoxview.png looks bad in IE: http://img63.imageshack.us/img63/8986/ieview.png css: Code: body { height: 100%; width: 100%; margin: 0; padding: 0; } #content { height: 100%; width: 100%; position:absolute; z-index:2; } img#bg { width:100%; height:100%; position:absolute; z-index:1; } img#titleimg { width:100%; height:100%;/*new*/ } img#mainmenuimg { text-align:center; width:30%; height:100%;/*new*/ } img#analogskillsimg { width:40%; height:60%; } img#programmingimg { float:right; vertical-align:bottom; width:40%; height:60%; } img#analogskillstext { vertical-align:bottom; width:40%; height:100%;/*new*/ } img#programmingtext { float:right; width:40%; height:100%;/*new*/ } table.introlayout { width:100%; height:100%; } td.introtitle { width:100%; height:10%; } td.skillpics { vertical-align:bottom; width:100%; height:70%; } td.skilltext { vertical-align:top; width:100%; height:10%; } td.menu { text-align:center; width:100%; height:10%; } xhtml: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <div id="content"> <table class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </div> </body> </html> |