CSS - How To Stop Text Flowing

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?

Is there any CSS to make my block of text flow between several table cells? (I know tables are a bit anti-css but I don't really have a choice here).

Hi guys, i have a page of categorised links which i've wrapped using definition lists:

Code:

<dl class="link_category">
 <dt class="category_name">Magazines</dt>
 <dt>XchangeIT</dt>
 <dd>The company through which newsagents obtain electronic magazine invoices.</dd>
</dl>

I would like for each list to flow after the proceeding so I've used float: left, however there's the occasional gap (see attached img). And I cant figure out whats causing this!

Here's my CSS:

Code:

.link_category  {
	float: left;
	width: 200px;
	text-align: left;
	margin: 0 20px 20px 0;
}

.link_category dt {
	font-weight:bold;
}

.link dt.category_name {
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 9px 0;
}

Thanks in advance

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

Hi

I'm struggeling with the following:

I have some span elements inside a td.

If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td).

Why does that happen and is there a way to make the td to autogrow to fit all the span's inside?

Se example code below

Code:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;">
<tr>
<td style="background-color:gray; text-align:center; border:1px solid black;">
<span style="margin-right:20px;">First</span>
<span style="margin-right:20px;">1</span>
<span style="margin-right:20px;">2</span>
<span style="margin-right:20px; background-color:orange; padding:10px;">3</span>
<span style="margin-right:20px;">4</span>
<span style="margin-right:20px;">5</span>
<span style="">Last</span>
</td>
</tr>
</table>

******* UPDATE *******
I found this link today:
http://css-discuss.incutio.com/?page=FormattingContexts

which says (among other things):
*************************
Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up.

Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it.
*************************

So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above?
Is there any working workarounds for this...?

I have a div centered in the middle of my page if i type a long paragraph between the two <div> tags it is all one line, and resizes the div, even though i have its width set to a fixed size? is there something im doing wrong? Im completely stumped

thanks in advance

Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code


PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free UFC PPV</title>
    <style type="text/css">
        body
        {
            background-color: #CCC;
            font-family: Tahoma;
        }
        #holder
        {
            width: 75%;
            padding: 10px;
            border: 1px solid;
            text-align: left;
        }
        #img{
            background-image:url(images/header.png);
        }
        #login
        {
            width: 100%;
            font-family: Tahoma;
            font-size:15px;
            text-align: right;
            color: Black;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <center>
        <div id="holder" style="width:75%">
            <a href="index.php">
            <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a>
            <div id="login" style="100%" >
                <form action="">
                    Login:<input name="userlog" type="text" />
                    Password:<input name="passlog" type="text" />
                    <input name="btn_sub" type="button" value="Login" />
                </form>
          </div>
        </div>
    </center>
</body>
</html> 





What can I do to stop resizing?

Hey guys,

So i'm working on the site www. paulfenton .tk.

My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt.

if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how...

Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow.

Any help or ideas would be great, let me know if you have any questions.

-Paul

Hi all,

I was wondering if there was a way to stop an image stretching in all browsers.

I'm creating a gallery for my web page. I've got a load of thumbnails that when you click on one it will display the picture lower down on the page. This image is in a DIV with a set width.

The trouble is that some images could be small, some could be large.

Using CSS I've tried setting the width to something like the size of the containing DIV. This works great for large pics but stretches the smaller pics (obviously it would as I was specifing a width). I then tried max-width. Hurrah, in Firefox this works great. Of course, Internet Explorer being the pile of poop that it is, my images come out huge and throw off the layout.

is there an easy way to ensure that my small images stay small but my large images don't grow too large for both IE & Firefox using CSS?

If not I guess I'll use PHP to determine the image size and go from there.

My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this?

Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13

If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this:

Code:

  <div id="main-image-container">
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blank.png"}"
      alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
    </div>

imagine this set up, div floated left, div floated right, div in between. the middle div has text that wraps and expands the page to the required height. however in firefox, because it expands to the width of the entire page before wrapping, the middle div drops below the two floated divs. i cant fix it's width as it needs to expand to fill the middle width depending on the size of the browser (the left/rigtht floats have fixed width)

if i put one or both of the floated divs within the middle div the text then wraps around the floats and doesnt remain in a column, setting each floats height to 100% is unsatisfactory, adding a further text container div only reproduces the original problem.

so it's a 3 column problem, but also it isnt. going to have a sandwich and try to attack it again, looking for fresh ideas. ultimatley i might have to go back and use a big table. ouch!

edit: just to clarify, the left and right floats are fixed width and height, the middle div can change width to accomodate the browser width, and height to accomodate the text.

I have the code below that basically builds a css based horizontal menu; menu items are floated into the menu bar, then in the same menuvbar, a small search box follows (floated).
At this point I'd like to stop elements being floated, but IE7 has some troubles because it keeps floating the next element, regardless the clear:both or float:none issued.
No problem in FF 3.5 and Opera 9.64

Can someone help?

Just cut the following code and save in a document.htm and test with your favorit browser and IE7.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@charset "utf-8";
/* static START */
body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}

h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}

h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}

a:hover img.sided {
border-color:#A6A6A6;
}

a {
color:#2970A6;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.fixed{
clear:both;
}

/* static END */

/* layout START */
#idwrapper {
padding:0px;
width:1200px;
}

#header {
width:100%;
margin-top:20px;
height:300px;
}

#content{
width:1020px;
}

#footer{
}

#bitmaplogo{
margin-left:20px;
background:url("http://farm1.static.flickr.com/37/112944254_3f5212215a.jpg") no-repeat left bottom;
height:100%;

}

#menu {
display:block;
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-color: Khaki;
width: 1000px;
height: 33px;
text-align: left;
}

#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:black;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background-color: Khaki;
padding: 5px 2% 8px 2%;
text-align:center;}

#menu a:hover {
color: white;
background-color: DarkKhaki;
background-repeat:no-repeat;
text-decoration:none;
}

#searchbox {
background-color: Khaki;
position:relative;
float:left;
clear:right;
height:33px;
width:350px;
}

#cse-search-box{
float:left;
padding:3px 10px;
}

#search-box-text{
float:left;
padding-left:8px;
/*padding-top: 5px ;*/
line-height:32px;
letter-spacing:-0.05em;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:16px;
font-weight:bold;
color: DarkGray;
}

.cse-box-style{
height: 20px;
width: 250px;
}

/* header END */

.tgrow{
margin-top:5px;
width:100%;
}
.adboxyellow {
background:Khaki;
font-size:100%;
color:black;
font-weight:bold;
border:4px solid DarkKhaki;
text-align:center;
}
.adboxblu {
background:#8DC3E9;
font-size:100%;
color:white;
font-weight:bold;
border:4px solid #4C88BE;
text-align:center;
}

.spacer{
background:url(img/spacer.gif);
}

.box_left_padded{
width:300px;
height:252px;
float:left;
margin-right:5px;
padding: 5px 5px 5px 5px;
}

.box_left_unpadded{
width:300px;
height:252px;
float:left;
margin-right:5px;
}

.box_mid_big_unpadded{
width:500px;
height:252px;
float:left;
margin-right:5px;
}

.box_right_unpadded{
width:210px;
height:252px;
float:left;
}
</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo"></div>

<div id="menu">
<a href="/articles">Articles</a> <a href="/guides">Guides</a> <a href=
"/news">News</a> <a href="/join">JOIN!</a> <a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a>

<div id="searchbox">
<div id="search-box-text">
Search
</div>

<form id="cse-search-box" action="http://mydot.com/search-results/"
name="cse-search-box">
<input type="hidden" value="p" name="cx" />
<input type="hidden" value="FORID:9" name="cof" />
<input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript">
</script>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
<div id="content">
<div class="adboxblu" style="width: 1033px; height: 20px; line-height: 20px; margin-top: 7px;">
your text Here! test
</div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style="width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="fixed"></div>

<div class="row">
<div class="spacer" style="height: 7px;"></div>

<div class="box_left_unpadded">
<div class="adboxblu" style=
"width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="fixed"></div>
</div>

<div id="footer"></div>
</div>
</div>
</div>
</body>
</html> 

Hi there,

I really want to not use tables as I want to embrace CSS. Though this problem is killing me as everything looks fine in IE but not in FF, which is never the case so need help.

I require a title (two sentences overlapping each other) to be aligned side by side with a image.

Basically i've got one image and two paragraphs in a container div, the paragraphs are positioned absolute but in FF the look as though they are being place relative ie bottom right of image?

My html file looks like:

<body>
<div id="MainContainer">
<div id="HeaderContainer">
<img src="images/logo.gif" alt="Opix UK" name="Logo"/>
<p id="Title1">Photo products for the contemporary home..</p>
<p id="Title2">or business!</p>
</div>
</div>
</body>

My CSS looks like:

body{
padding:0;
margin:0;
margin-top: 5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}
div#MainContainer{
width: 960px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
div#HeaderContainer{
border: 1px solid Blue;
font-size: 19px;
font-style: italic;
font-weight: bold;
}
p#Title1{
border: 1px solid Red;
color: #333333;
position: absolute;
left: 100px;
top: 5px;
z-index: 1;
}
p#Title2{
border:1px solid Red;
color: #0066CC;
position: absolute;
left: 450px;
top: 17px;
z-index: 2;
}

Any help much appreciated?

Hi all,

I might be having a moment, but I am having a problem with a CSS inheritance of a property. I have a sidebar "left_float_column", which normally has a few divs inside it and hence i have a CSS property "left_float_column div" as below.

Code:

.left_float_column div {
min-height:200%;
border:solid #000 1px;
text-align:center;
background-color:#CADDEE;
margin-top:1%;
padding:2%;
}

Inside this I now want to place another div with a different color background, so i created another class selector:

Code:

.pdfdownload { 
background-color: white;
}  

When a div is nested as follows:
Code:

<div class='left_float_column'>
<div class='pdfdownload'>Hello</div>
</div>

The background color of the pdfdownload is #CADDEE, not white? Is that right? Why is it right? never had this problem before.
I can correct it by renaming the '.pdfdownload' line '.left_float_column .pdfdownload', but its not ideal as I wanted to use the pdfdownload multiple times on some pages in different places.

I have checked using opera "inspect element" and it shows it is using the parents color, instead of the childs.

I just don't understand

I am curious to know what many of you think about the design consideration for 800 x 600. I am about to start a major project and am considering going to a fixed width of 1024 instead of my current default of 770. As I see it only about 1 of 10 use 800 x 600, and I think that will go down in the not too distant future. I wouln't mind learing how to scale a site so it looks good in any resolution but as I understand it you can not scale images that many of my site layouts depend on. Tom