CSS - Text Flowing Longer Than Containing Div

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

hey all, i have a very wierd problem! Im no CSS guru but i thought i could get this right
i have two divs that should both be 100% so i have set them to width:100% BUT....in both Moz FF and IE there is a difference... it is less noticable in IE than in FF but still, not great and kinda wierd!! can anyone adise me please?

here is the code
Code:

#TitleBar {
	position:absolute;
	top: 0px;
	left: 0px;
	/*margin: 0px 0px 10px 0px;*/
	padding: 0px 0px 0px 0px;
	padding-left:10px;
	width:100%;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:170px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #A4AA54;
	border-top: 1px #A4AA54 solid;
	border-bottom: 1px #A4AA54 solid;
	border-width:1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
	
	background-color:#A4AA54;
	background-image:url(../images/logo/gglogo.JPG);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:170px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:170px; width:100%;}

#MenuBar {
	position:absolute;
	top: 137px;
	left:0px;
	width:100%;
	padding:15px;
	background-color:#667138;
	border-bottom:1px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%;}

thanks in advanced

RF

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...?

Hi, I'm pretty new to this so not 100% sure what I'm talking about. I'm trying to complete a university project, in order to do so I have to move images using a style sheet and have done so successfully so far but today when trying to move my rollovers the stylesheet didnt move my images. Previous images I moved worked but the new ones dont. Any help would be greatly appreciated! Thanks!

As box1 is filled with content I need box 2 & 3 to stretch to the same height, and so on for box 2 & 3.
view page:
http://www.franklandmedia.com/test

<html>
<head>
<title>nothin</title>
<style type="text/css">
<!--

body {
text-align: center;
margin: 0px;
padding: 0px;
min-width:780px; /* stop mozilla sliding off the edge */
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 780px;
text-align: left;
}
#container {
float: none;
margin: 0 auto;
width: 780px;
text-align: left;
}
#top {
float: left;
width: 780px;
background-color: #DDD;
}
#navbar {
float: left;
width: 780px;
background-color: #EEE;
}
#middle {
float: left;
width: 780px;
}
#footerblock {
float: left;
width: 780px;
background-color: #666;
}
#box1, #box2, #box3 {
float: left;
width: 260px;
}
#box1 {
background-color: #AAA;
}
#box2 {
background-color: #BBB;
}
#box3 {
background-color: #CCC;
}
-->
</style>
</head>

<body><div class="central">
<!--*******page content start*******-->
<div id="container">
<div id="top">top</div>
<div id="navbar">navbar</div>
<div id="middle">
<div id="box1">box1<br>box1<br>box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
<div id="footerblock">footer</div>
</div>
<!--*******page content end*******-->
</div></body></html>

Has anyone else experienced this? I have a div with a specified width of 503px. If I fill it with text, after about a screens worth it's physically 506px in IE (it's fine in every other browser).

Anyone any ideas what could be causing this, or a solution to this problem?

Many thanks

Please let me know if i've posted in the wrong forum... and I apologize in advance in case I have.

I've built a site using Apache and PHP. On my local laptop, (which is windows xp professional) everything looks great and my styles are being picked up.
When i copy my code over to our unix server, none of the styles are being picked up. I know that Unix is case sensitive but the part thats "failing" is the proper case.

I'm not sure what else I can check for.... here's the code:
Code:

<!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" >
<head>
<title>test.ca</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" text="#404040" link="#0000FF" vlink="#990099" MARGINWIDTH="1" MARGINHEIGHT="1" TOPMARGIN="1" LEFTMARGIN="1" RIGHTMARGIN="1">



<link type="text/css" href="style/menu.css" rel="stylesheet">
<link type="text/css" href="style/gencontent.css" rel="stylesheet">

And in my gencontent.css, i have the following entry for the BODY tag:

Code:

body{
	list-style: none inside;
	font-family: verdana, arial, helvetica, sans-serif;
	background-color: #D2E2F0;
}

ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times?

Thnx

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!

I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example:

Code:

<html>
<body>
<td><p style="text-align:right">Google</p></td>
<td><a href="http://www.google.com" style="text-align:right">Google</a></td>
<td><a style="text-align:right" href="http://www.google.com">Google</a></td>
<td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td>
<td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td>
<span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span>
</body>
</html>

The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions?

(My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.)

i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text.

I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece