|
CSS - Overflow Property-- How To Make A Long Word Break Lines?
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? Similar Tutorialsw3 css-validation tool Quote: context:html body Property word-break doesn't exist : break-all it doesnt validates ,, why?? It changes both attribute in ie and firefox,, I use it because when people choose bigger text sizes my divs mix up because of long words so I use word-break. What do you prefer me?? Live without validation 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 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? <div id="whatever"><img src="..." /></div> div#whatever { overflow: hidden; background-color: gray; } div#whatever img{ float:right; } When I set overflow: visible; the image is not properly wrapped within the div. When I set overflow: hidden; the image is properly contained within the div. (you can see with gray background) My question is, w3schools.com says that overflow property visible - show the content even if it overflows hidden - hide the part of the content that overflows With those definitions, I should be seeing the image chopped by div and don't even see it at all? Safari does not recognize the CSS property overflow. Does anyone have a workaround for this? I have been made aware of this bug just today, Safari does not handle this gracefully, it actually renders the div very very poorly, destroying it really. I would remove the overflow element but i need it. If I use word-break:break-all solves the problem when I enter a word without spaces (for e.g pppppppppppppppppppppppppppppppppppppppppppp), it breaks and coming in line by line like (ppppppp ppppppp ppppp) as I required. If I use word-break-cjk solves the problem when I enter a word without spaces (for e.g Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La), it breaks the word as I required. But I need both scenarios should work. Which style I need to use...? Is there a CSS quivalent to the Word Break <wbr> tag? Hi Could someone tell me why the content is not showing in Netscape 7 please This is the site http://www.hardingscatering.co.uk/06/index.htm I have put an overflow property on the container div, so FF can show white as the bground colour. But when viewed in Netscape the content is not there and on other pages a scroll bar appears. I always have trouble with this, and would really like to know what I am doing wrong. Thanks for any help. Hi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help?
Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
<title>Comments on 2005-02-10: February 10, 2005</title>\n
<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
<div id="entry" xml:lang="en-US" lang="en-US">
<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
<p class="dream">I can only remember two things... That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games. One was for a calculator I had only owned in the dream, and it was spectacular!
</p>
<p class="normal">I brought my "newphonium" to school today.</p>
<p class="normal">We had a pretty normal session in Jazz. <em class="entry">Someone actually got a trombone solo.</em></p>
<p class="normal">Our teacher was back. The entire first half of the period going over our homework. <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em> Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>
<p class="happy">We didn't do much in Japanese. All we really did was read Katakana and finish our puzzle. <em class="entry">A few of us found new words.</em> I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>. During resource, I looked over this book with a couple of friends of mine and their friend. <em class="entry">It was so funny, too!</em></p>
<p class="normal">In Health, we continued our lecture on alcohol. <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
<p class="happy"><span class="normal">Class started off with a lock-down. <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English. <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>
<p class="sad">Before actually eating, I wandered a bit. <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
<p class="normal">We continued on proofs. <em class="entry">It took a bit of effort to do.</em> <span class="happy">Still, we finished the investigation.</span></p>
<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span> Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
<p class="happy">I got a ride home</p>
<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
<p class="happy">Once done with my homework, I took a two-hour nap.</p>
<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>. Also, I remember psychically communicating with my section from Band. <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span> Also, my old friend, who is a freshman now, was mentioned.</p>
<p class="happy">The dream gave me the idea to call him up. <em class="entry">Apparently, the call woke him up.</em> We talked about how our lives were going, along with school. <em class="entry">Apparently, the school banned people from using their calculators. How could they!? He also told me that some kids were goofing around during Breakout library time.</em> We scheduled a time to meet and talk about some more things. <em class="entry">I could show him Linux.</em></p>
<p class="happy"><strong class="entry">I fixed the comments system!!</strong> <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
<div class="right">
<img src="comments_files/right_main_bar.png" alt="right_side" />
</div>
<div class="left">
<img src="comments_files/left_main_bar.png" alt="left_side" />
</div>
<div class="center">
Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
<br />
Name: <input type="textarea" name="name" class="lower" />
E-mail: <input type="textarea" name="e-mail" class="lower" />
</div>
<div class="comment">
<input type="textarea" name="comment" class="text" />
<input type="submit" value="Post!" class="click" />
</div>
</form>
</body>
</html>
CSS: Code: h2 {
text-align:center;
font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
color:rgb(0,150,150);
}
h3 {
text-align:center;
font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
color:rgb(0,0,150);
}
form#main {
display:block;
}
form#main div.left {
float:left;
background-color:rgb(255,255,255);
}
form#main div.right {
float:right;
background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
height:60px;
}
form#main div.center {
background-color:rgb(0,0,0);
background:url(comments_files/center_main_bar.png);
font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
color:rgb(255,255,255);
padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 10% 2px 0;
}
form#main div.center input.lower {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 8% 2px 0;
}
form#main div.comment {
width:95%;
border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
width:90%;
margin:5px 5% 5px 5%;
height:100px;
}
form#main div.comment input.click {
width:25%;
margin:5px 37.5% 5px 37.5%;
}
body p {
text-align:justify;
font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
color:rgb(150,0,0);
}
a {
color:rgb(0,100,0);
text-align:left;
}
a:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
a#title {
color:rgb(0,100,0);
text-decoration:none;
margin-left 25%;
text-align:left;
}
a#title:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment a.mail {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,100,0);
text-decoration:none;
text-align:left;
}
div.comment a.mail:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment span.mail {
margin-left 25%;
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,0,150);
text-align:left;
}
div.comment {
border-bottom:2px dotted rgb(0,0,255);
margin:1.5em;
}
div.comment p {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
display:block;
}
/* ENTRY */
div#entry {
border:4px double rgb(0,0,0);
padding:0.25em;
margin:0.5em;
min-height:79em;
}
div#entry p {
font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
text-indent:2em;
text-align:justify;
}
div#entry p.dream {
font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
color:rgb(150,150,0);
text-indent:2em;
text-align:justify;
}
em.entry {
font-style:italic;
}
strong.entry {
font-weight:bold;
}
span.uentry {
text-decoration:underline;
}
span.hider {
color:rgb(255,255,255);
}
div.story {
border-left:2px solid rgb(0,0,0);
border-top:2px solid rgb(0,0,00;
}
div.story div.title {
border-bottom:1px solid rgb(128,128,128);
border-right:1px solid rgb(128,128,128);
font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
width:50%;
text-align:center;
}
div.story div.storybody {
padding:0.25em;
}
span.happy, p.happy {
color:rgb(0,100,0);
}
span.sad, p.sad {
color:rgb(0,0,100);
}
span.normal, p.normal {
color:rgb(100,0,0);
}
img.center {
margin:0.25em auto;
}
img.right {
float:right;
margin:0.25em;
}
img.left {
float:left;
margin:0.25em;
}
I've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu
{float: left;
width: 20%;
padding: 1%;
}
.contents
{float: left;
padding: 1%;
width: 76%;
}
Hi; Could anyone tell me How to make the words(Australia, lawer, other..and so on) bigger from the select boxs ? Thanks Code: <form name="search_form" id="sf" action="search_p1.php" method="get"> <div> <span class="search_form">Country:</span> <select name="country" id="country" onchange="setStates();"> <option value="Australia">Australia</option> </select> <span class="search_form">state:</span> <select name="province_state_territories" id="state" onchange="setCities();"> <option value="">Please select a area</option> </select> </div> <div> <span class="search_form">city:</span> <select name="city" id="city"> <option value="">please choose a city</option> </select> <span class="search_form">area:</span><input type="text" name="area" size="10"> <span class="search_form">business type:</span> <select name="business_type"> <option value="solicitor">lawer</option> <option value="other">other</option> </select> </div> <div> <input type="submit" id="search_submit" name="search_submit" value="submit"></div> </form> My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } 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 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? 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'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 - |
|||||||