|
CSS - Formatting Of My Tables Gets Blown To Pieces When Long Rss Content Comes Through
Guys, 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. Similar TutorialsI 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! I've run into a brick wall with a problem I'm having regarding text content that's inside a DIV container. To help illustrate the problem I've simplified the code I'm actually working on so that it can be presented here. What's being done: There is a display div tag in which the text content. There is also a transparency layer within the container so I can have a semi-transparent background without having the text content suffer the same inherent transparency. That works fine. What's the problem: Well any text that's in that display div tag doesn't seem to be displaying any of the class formatting I'm putting on it. If I apply the formatting to the display div tag itself it shows. It also shows if I reformat the actual tags (like the <p>) but if I try to use span and apply a class to a specific portion or add a class to the <p> tag it doesn't show. Code sample is as follows: 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" lang="en" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html {
min-height:100%;
margin:0;
padding:0;
height:100%;
border:0;
}
body {
height:100%;
min-height:100%;
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
background-color:#000077;
background-attachment:scroll;
background-image:url(../site/bkg.jpg);
background-repeat:no-repeat;
}
/* Framing */
#screen{
margin:0;
padding:0;
border:1px solid #00ff00;
position:absolute;
left:705px;
top:268px;
width:149px;
height:182px;
background-color:#000000;
}
#logo{
margin:0;
padding:0;
border:1px solid #00ff00;
position:absolute;
left:156px;
top:18px;
width:503px;
height:45px;
background-color:#000000;
}
#display {
position:relative;
width:650px;
height:auto;
min-height:300px;
margin-left:10px;
margin-right:auto;
margin-bottom:0;
margin-top:160px;
border:1px solid #00ff00;
z-index:1;
color:#00ff00;
padding:5px;
}
#display .transparency {
position:absolute;
margin:-5px;
width:100%;
height:auto;
min-height:100%;
background-color:#000000;
z-index:-1;
opacity:0.75;
filter:alpha(opacity=75;
-moz-opacity:0.75;
}
.formatted {
text-align:justify;
text-indent:2em;
}
.yellow {
color:#ffff00;
}
.white {
color:#ffffff;
}
.yellowbold {
color:#ffff00;
font-weight:bold;
}
.whitebold {
color:#ffffff;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="logo"></div>
<div id="display">
<div class="transparency"></div>
<p class="formatted">Something <span class="yellow">something</span> or <span class="white">something</span>.<span class="yellowbold">Something Else</span>.
</div>
<div id="screen"></div>
</body>
</html>
Any assistance or words of wisdom will be greatly appreciated. Thanks in advance. EDIT: From what I'm gathering it has something to do with the hierarchy revolving around Classes and ID Selectors. Apparently ID selectors take precedence over classes so placing a class on an element contained within the ID selector object doesn't show for some odd reason. What I'm trying to figure out is if it's possible to do at all or am I just shooting for the moon here? I have a report that prints a list o people and a select box that will run the same list in a form format (all on one page) so that the user can print this off and get one form per page. I am using page-break after always as part of a div that contains the info to be printed (this is a loop from a db query). On my printer and a few others it works like a charm, but I have a user that gets the first page (first loop) no problem, but after that he gets parts of the pages when he prints (they display fine on the screen in the browser - IE6). Some pages come out with half the info (the bottom half is missing. Anyone ever hear of this issue? He is using WinXP IE 6 Printer is HP 855 (or something like that) 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? 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 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 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;
}
Hi How can I wrap a long line of text inside a fixed width div? 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? 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 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 - 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 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 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 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. When you first load the page, you get the impression that there isn't much, if anything to scroll down to. But if you try anyway, the long scrollbar button quickly collapses, revealing that indeed there is much more to scroll down to. Why is this? The page is three tables with about 7 rows each. And OF COURSE this works perfectly in Mozilla browsers. I have a few div on my page and the ones that have long lines or URL's are expanding width-wise. Code: <div style="width: 300px;">MyVeryLongLineThatCanAndMostLikelyContainsURLs</div> I would like that the div keeps the same width, as the height is not a problem as the div contains other text, causing it to grow downwards anyway, and allow the line to break up with out causing any possible hyperlinks that are in the text to fail if clicked. what happens is that the div grow wider to allow the long line to show inside. I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Anyone know of a good way to break up a long word from an element with a certain width? Say I have a word like wordddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd, I'd want it to show up properly. Here's the best I've come up with: Code:
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
Longworddddddddddddddddddddddddddddddddddd
</div>
</body>
</html>
As you see, just cutting off the word isn't really ideal. Is there a way to auto-break up long words or something? |
|||||||