|
CSS - Some Ie6s Displaying Strangely When One Div's Content Is Long
I just can't seem to figure this out! it is driving me nuts!
The page I am working on is he http://www.iskippedlunch.com/z_test/index_2.php and the style sheet is he http://www.iskippedlunch.com/z_test/styles/shfb_basic.css I am using php to import sections into the page. For some reason when I include the Client Story (blue) section on the homepage all the content in the green sidebar gets pushed way down the page in a couple versions of IE6. I have narrowed the problem down to this area of code, it is the only part that makes the page go wonky. I even rewrote the CSS, but I must be missing something. The lower levels of the site are based on this home page, and have the same problem if the main (white) content is long. You can see how some have the problem and some display correctly. Help will be greatly appreciated, my eyes are getting crossed! PS, on some of the lower level pages, the (orange)footer background creeps up the page! This is new! Similar TutorialsGuys, i've read a ton of posts here, and the quality of members is one of the best i've seen anywhere. so, i have high hopes for what you might suggest. Here's my deal: i have a table that is 254 pixels wide (you can see it at: (URL address blocked: See forum rules)/RSStest.php ) When text comes through the RSS feed that is wider than 254 pixels, the table border expands, and this throws off the formatting. If you check this link, it may not necessarily show the problem, but if you wait a while, when a long link comes through you'll see exactly what i'm talking about. I simply don't want the table to expand when long text comes through the RSS feed (which is long link strands, for the most part). I thought selecting "hidden" for overflow in the styles options would solve this, but it hasn't. Here are my CSS settings: .secondrssstyle { width: 254px; display: table-cell; text-decoration: none; overflow: hidden; position: relative; visibility: visible; } I can apply these styles to the table in the xsl file in Dreamweaver, but not the php file you actually see in the link i've posted. i don't think that's a big deal, b/c either way i can't get the tables to work. I seriously appreciate any help. Best regards. I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies). Presently looking page can be seen on: http://allinclusivewebdesign.byetho...esign/about.php The related CSS code is: Code: #centerContentContainer
{
width:100%;
}
#centerContentShadow
{
background:url(content-shadow.jpg) #FFFFFF;
width:760px;
float:left;
}
#centerContent
{
background:url(contentbackground.jpg) #FFFF00;
color:black;
text-align:center;
position:relative;
width:700px;
margin-left:30px;
float:left;
border-left:1px solid #999999;
border-right:1px solid #999999;
}
And to display it within each html files, I've got: Code: <div id="centerContentContainer"> <div id="centerContentShadow"> <div id="centerContent"> Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from: http://allinclusivewebdesign.byetho...esign/about.php while in Internet Explorer this "centerContent" drags down. In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byetho...esign/about.php) I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border. Hi, I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there. Here's my code: CSS Code:
html {
scrollbar-face-color: #ADDFE7;
scrollbar-highlight-color: #ADDFE7;
scrollbar-3dlight-color: #ADDFE7;
scrollbar-darkshadow-color: #ADDFE7;
scrollbar-shadow-color: #ADDFE7;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ADDFE7;
overflow:hidden;
}
body {
background: #FEFFED;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 10px;
color: #000000;
cursor:default;
margin: 0; padding: 0;
overflow:hidden;
}
div.center {
/* Make element float in the center */
position: absolute;
left: 50%;
top: 50%;
/* Set the width and height */
width: 750px;
height: 410px;
/* Set margin to half the values of width/height */
margin-left: -375px;
margin-top: -205px;
}
div.rect {
background: #ADDFE7;
padding: 0px;
width: 750px;
height: 410px;
overflow:auto;
border: 1px solid #000000;
z-index: 1;
}
Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top. and this is a 'View source' to show where I put the code: 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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>form one : shop</title>
<meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution." />
<meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution. - form one, merchandise, t-shirts, cds" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" />
<base href="http://formone.net/shop/" />
<link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index">
<div class="center">
<div class="rect">
<table class="centershop" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center">
<tr class="headerNavigation">
<td align="left" valign="top" width="33%" class="headerNavigation">
<a href="http://formone.net/shop/index.php?main_page=index">Home</a> |
<a href="http://formone.net/shop/index.php?main_page=login">Log In</a>
</td>
<td align="center" width="25%"></td>
<td class="headerNavigation" align="right" valign="top" width="33%">
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
<tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
<td valign="middle" height="23px" width="200px">
<a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a> </td>
<td align="center" valign="top">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="main_page">
<tr>
<td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td>
<!--// bof: categories //-->
<table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table">
<tr class="leftboxheading" id="categories-heading-tr">
<!-- Sidebox Header -->
<td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td>
</tr>
<tr>
<!-- Sidebox Contents -->
<td colspan="3" class="leftboxcontent" id="categories-content">
<br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a> </td>
</tr>
<tr>
<!-- Sidebox Footer -->
<td colspan="3" height="5px" class="leftboxfooter" id="categories-footer">
</td>
</tr>
</table>
<!--// eof: categories //-->
</td></tr></table></td>
<td valign="top" class="center_column" width="100%"> <table border="0" width="100%" cellspacing="2" cellpadding="2">
<tr>
<td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.</h1></td>
</tr>
<tr>
<td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td>
</tr>
<tr>
<td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td>
</tr>
<tr>
<td class="plainBox">Define your main Index page copy here.</td>
</tr>
<tr>
<td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td>
</tr>
</table><br />
</td>
<td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td>
</td></tr></table></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="footertop">
<td class="footertop" align="center"> | <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | </td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer">
<tr>
<td class="footerbottom">Your IP Address is: 69.159.1.195</td>
</tr>
<tr>
<td class="footerbottom"></td>
</tr>
</table>
</td></tr>
<tr>
<td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td>
</tr>
</table></div>
</div>
</body></html>
They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box. It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in. Does anyone know why this is happening? If you want to see what it is doing right now, it's http://www.formone.net/shop . So, I've got the following CSS code that I use to give a cell a background that aligns to the bottom: Code:
td.flag {background: url(images/flag_s.gif) no-repeat center bottom;}
td.main {background: url(images/march.gif) no-repeat center bottom;}
Unfortunately, only the td.main works as it should. The first entry td.flag doesn't show the image. I have verified that the gif image of flag_s.gif exists in /images/ and I cannot figure out why td.flag won't work when td.main does.... Any ideas? The CSS is syntactically correct. In my html I call td class="flag".... doesn't work. Any help would be appreciated! I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
ajarnforumDOTnet/erwinsample/ Thanks for any help you can give me. I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
(URL address blocked: See forum rules)/erwinsample/ Thanks for any help you can give me. I have a very simple drop down menu that I'm playing around with and trying to make cross-browser. The drop-down currently looks OK in Mozilla/Firefox. Presently, it does not work in either IE 6 or IE 7. You can see the drop down HERE I have noticed that when you alter the URL in this line of code, inside the href attribute (for example): Code: <li><a href="">Computer Hardware (1)</a></li> ...sometimes the menu will work (or break) in ANY given browser (IE or Mozilla)... Try substituting different values for the href attribute inside the link. Depending on the href value, sometimes the code works, and sometimes it doesn;t (in either IE or Mozilla). Something screwy is going on with the href attribute, but I can;t tell what it is. Any help is appreciated. Hello Devshed! I'm new to CSS and i'm having some problem with position and i think with div's as well. When i resize the browser window, move the borders, images move also. Also when i add images, as you can see i have to add really big negative values to bring them on top of each other. What am I doing wrong and how should I code in a professional matter? This is what I've worked on so far: http://www.stars.ehlo.ro/ 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="USN, United Stars, Gaming, Network,counter-strike, CS, 1.6, servers, tracker, games, community, forums" />
<meta name="description" content="USN - United Stars Network is a gaming network offering players to easily interact" />
<meta name="Revisit-After" content="2 Days" />
<meta name="robots" content="all,index" />
<meta name="author" content="Sergiu/z3rongod for www.usn.ro." />
<title> United Stars Network | Gaming Network | Home </title>
<link rel="shortcut icon" href="www.usn.ro/favicon.ico">
<link rel="icon" href="www.usn.ro/favicon.ico">
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(index.css);
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
<!-- Bara de sus -->
<div id="topbar">
<img src="webimages/topbar.png" /> </div>
<div id="usnbanner">
<img src="webimages/usnbanner.png" /> </div>
<div id="topheader">
<img src="webimages/topheader.png" /></div>
<div id="navbarborder"></div>
<div id="navbarbox"> </div>
<div id="mboxborder"> </div>
<div id="mbox"> </div>
<div id="downbar">
<img src="webimages/downbar.png" /></div>
<div id="dboxborder"> </div>
<div id="dbox"> </div>
<!-- ======== Google Reclama ====== -->
<div id="gleader">
<img src="webimages/gleader.png" /> </div>
<div id="gside">
<img src="webimages/gside.png" /> </div>
</div>
<!-- Flags -->
<div id="flags">
<div id="usflag">
<img src="webimages/usflag.png" /> </div>
<div id="roflag">
<img src="webimages/roflag.png" /> </div>
</div>
<!-- Big Links -->
<div id="biglinks">
<div id="bbhome">
<img src="webimages/home.png" /> </div>
<div id="bbservers">
<img src="webimages/servers.png" /> </div>
<div id="bbforums">
<img src="webimages/forums.png" /> </div>
<div id="bbfiles">
<img src="webimages/files.png" /> </div>
<div id="bbnews">
<img src="webimages/news.png" /> </div>
<div id="bblinks">
<img src="webimages/links.png" /> </div>
</div>
<!-- Navbar -->
<div id="navbar">
<div id="nhome">
<img src="webimages/nhome.png" /> </div>
<div id="nborder1">
<img src="webimages/nborder.png" /> </div>
<div id="nforum">
<img src="webimages/nforum.png" /> </div>
<div id="nborder2">
<img src="webimages/nborder.png" /> </div>
</div>
</div>
</body>
</html>
CSS: Code:
/* ToC
1. defaults
2. structure
3. links and navigation
4. fonts
5. images
Notes
*/
/* Defaults */
/*Avoid default browser margins and padding */
* {
margin: 0;
padding: 0;
}
/* Avoid browser font resize */
html { font-size: 100%; }
/* --------- 2. structure --------- */
body {
font: 100%/2 Verdana, Arial, Helvetica, sans-serif;
background: #000000;
}
#wrapper {
font-size: 1.2em;
line-height: 1.2em;
padding: 0;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 920px;
margin: 0 auto;
}
/* ============== Layout pictures ============== */
#topbar {
position: relative;
float: middle;
}
#usnbanner {
position: relative;
float: middle;
top:-4px;
}
#topheader{
position:relative;
float: middle;
top:-8px;
}
#mboxborder{
position: relative;
float: right;
background: #c7ced6;
width:747px;
height:300px;
top:-312px;
left:-2px;
}
#mbox{
position: relative;
float: right;
background: #e9f2fb;
width:746px;
height:300px;
top:-612px;
left:-2px;
}
#navbarborder{
position: relative;
float: middle;
background: #c7ced6;
width:164px;
height:300px;
top:-12px;
left:5px;
}
#navbarbox{
position: relative;
float: left;
background: #e9f2fb;
width:162px;
height:300px;
top:-312px;
left:6px;
}
#downbar{
position: relative;
float: left;
top:-612px;
}
#dboxborder{
position: relative;
float: left;
background: #6da7e6;
width:918px;
height:214px;
top:-616px;
left:0px;
}
#dbox{
position: relative;
float: left;
background: #e9f2fb;
width:910px;
height:208px;
top:-828px;
left:4px;
}
/* Reclama Google Adsense */
#gleader{
position: relative;
float: left;
top:-1526px;
left:2px;
}
#gside{
position: relative;
float: left;
top:-1480px;
left:665px;
}
/* ======= flag icons ======= */
#roflag{
position: relative;
float: left;
top:-1840px;
left:520px;
}
#usflag{
position: relative;
float: left;
top:-1840px;
left:490px;
}
/* ======== Big Buttons ====== */
#bbhome{
position: relative;
float: left;
top:-1518px;
left:48px;
}
#bbservers{
position: relative;
float: left;
top:-1518px;
left:138px;
}
#bbforums{
position: relative;
float: left;
top:-1518px;
left:208px;
}
#bbfiles{
position: relative;
float: left;
top:-1162px;
left:-157px;
}
#bbnews{
position: relative;
float: left;
top:-1162px;
left:-60px;
}
#bblinks{
position: relative;
float: left;
top:-1162px;
left:33px;
}
/* ============= Navigation Bar =========== */
#nhome{
position: relative;
float: left;
top:-1478px;
left:-608px;
}
#nborder1{
position: relative;
float: left;
top:-1463px;
left:-698px;
}
#nforum{
position: relative;
float: left;
top:-1446px;
left:-791px;
}
#nborder2{
position: relative;
float: left;
top:-1461px;
left:-237px;
}
h1 {
font: 1.5em/1.8em Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
}
p {
margin-bottom: 1.5em;
color: #ffffff;
}
/* ---------- 3. links and navigation ---------- */
/* ---------- 4. fonts ---------- */
/* ---------- 5. images ---------- */
Yours gratefully and impatiently, Sergiu. I have a div using width Code:
div.contain {
width:200px;
font-style:italic;
}
Say, I have a long word such as: Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu If i have multiple words, they will break after 200px width. Is there any CSS tag that will contain long words? I am trying to get some URLs to wrap within table cell which I am able to do with the CSS "word-wrap:break-word". However, when it comes to Mozilla, this CSS property does not work. I understand that the word-wrap property is specific to IE. But does anyone know of a way to make this work with Mozilla? If I have to parse the string incvolved with Javascript, so be it! (But please don't make me!!) Hi How can I wrap a long line of text inside a fixed width div? Hi I'm in the middle of creating a web forum, and I've run into a little 'snafu'. Forum replys have a fixed width design so when words are used that are greater than width of the design, 500px, the word actually expands the design. All I want is for the word to stop at 500px and begin on a newline. A picture can always explain it better: Code: <table class='forum_block'> <thead> <th>mikeymike</th> </thead> <tbody> <tr> <td class='post_text' colspan='2'>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggg</td> </tr> <tr> <td class='post_date' colspan='2'>1280199359</td> </tr> </tbody> <tfoot> <tr> <td colspan='2'><a href='?edit=51'><button><img src='/_images/icons/comment_edit.png' />Edit</button></a> <a href='?post_form=17'><button><img src='/_images/icons/comment.png' />Post reply</button></a> <a href='?post_form=17,quote=51'><button><img src='/_images/icons/comment_add.png' />Quote</button></a> </td> </tr> </tfoot> </table> Code:
.forum_block {
font-family: verdana, Arial, Helvetica, sans-serif;
width: 99%;
margin: 10px auto;
}
.forum_block th {
background: #b7cade;
font-weight: bold;
color: #fffefe;
padding: 0.5em;
}
.forum_block td {
background: #efeeee;
border: solid 2px #efeeee;
padding: 0.5em;
}
.forum_block td textarea, .forum_block td input {
background: #efeeee;
width: 510px;
}
.forum_block tfoot td {
background: #b7cade;
border: none;
color: #fffefe;
font-weight: bold;
padding: 0.5em;
}
.forum_block .post_text {
font-family: Georgia, "Times New Roman", Times, serif;
}
.forum_block .post_date {
font-size: 0.7em;
text-align: right;
font-style: italic;
}
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? Hello, I posted this in the HTML forum too but didnt get any replies so maybe people in here know it. When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached? thanks in advance Hello, I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length. Instead the text just covers and hides the footer. I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique. If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed. As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy. ------- Here's a link to the page thats having issues with the footer... *** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........ infoheaven.bravepages.com/Testamonials/Testimonials.htm The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above. I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message. Sorry for the inconvenience.... Dan - Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page? I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any. What am I missing here? Thanks hi i have a page that contains a large html table. this table spans many pages (in internet explorer it spans 6 pages). however, when i view the print preview in firefox it only shows 1 of 1 page, and at the bottom of the page, where i would expect a page break to exist, the table continues on and then off the bottom of the page. basically, it seems to be attempting to render the entire table on to one page, even though it won't fit. has anyone got any ideas how i can make this table print on multiple pages? i've read somewhere that gecko based browsers have a problem with floated content, but i'm sure i've un-floated everything. thanks in advance. dave This is the line in my index.html: PHP Code: <PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> This is my PRE code in style.css: PHP Code: PRE { BORDER-RIGHT: #2f6fab 1px dashed; PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9; width: 90%; } PRE.yup { COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; text-align: left; width: 80%; margin: 12px auto; } The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas? Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. |
|||||||