background does not stretch

brown2005 · March 6, 2008

	echo"	<div id='famous'>

			<div class='filter'> </div>

			<div id='content'>

				<div class='left'>left</div>

				<div class='right'>right</div>

			</div>							

		</div>";

	body, div, p
{

	margin: 0px;
	padding: 0px;

	width: inherit;
	height: inherit;

}

body
{

	padding: 10px;

}

#famous
{

	width: 650px;

}

#famous .filter 
{

	padding: 10px;

	margin-bottom: 10px;

	border: 1px solid #999999;
	background-color: #EAEAEA;

}

#content 
{

	border: 1px solid #999999;
	background-color: #EAEAEA;

}

#content .left
{

	float: left;
	border-right: 1px solid #999999;

}			

#content .right
{

	float: right;

}

the div content is not stretching with the left and right as

http://www.allinthissite.co.uk/famous-fans.php

any ideas please

GameYin · March 6, 2008

	echo"	<div id='famous'>

		.....
		</div>";

If you are using PHP to parse your HTML, then .. that part should have been

echo "<div id=\'famous\'>

blah blah blah.

You must use \ for quotes. Also for the stretching, use percentages, becuase px will be ineffective for your visitors using different resolutions

haku · March 7, 2008

I really couldn't understand the question, and the link was dead.

But maybe you want faux columns?

TheFilmGod · March 7, 2008

you never cleared the floats. Use <div class="clear"></div> .class { clear: both; } or the "new modern day clearing methods."

Furthermore, through my experience use of such classes like: #content .left is improper. Browsers have problems focusing correct declarations on the correct divs - especially Firefox. I believe it is to do with the way classes are created. .left is created as a global class instead of a class that is only a sub class of another div. So if you have more the one class of .left , will create mass problems for the web page.

brown2005 · March 7, 2008

<div id=\'famous\'>

when do i do this just on div's?

GameYin · March 8, 2008

In PHP, whenever you have a ' or " you must put a backslash otherwise, think about it, it will think that the statement is over with and the rest of you code will be so screwed up.

brown2005 · March 8, 2008

In PHP, whenever you have a ' or " you must put a backslash otherwise, think about it, it will think that the statement is over with and the rest of you code will be so screwed up.

what if i have

include('file.php');

echo'fdgdfgfdgfdgd';

echo'<html xmlns="http://www.w3.org/1999/xhtml">';

echo'<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />';

bronzemonkey · March 8, 2008

I couldn't understand the problem or the question either.

If you are using PHP to parse your HTML, then .. that part should have been

echo "<div id=\'famous\'>

What he did was fine. You shouldn't escape ' within " or " within ', only " within " or ' within '. For example, these are all fine

echo "<div id='famous'>"
echo '<div id="famous">'
echo "<div id=\"famous\">"

Furthermore, through my experience use of such classes like: #content .left is improper. Browsers have problems focusing correct declarations on the correct divs - especially Firefox. I believe it is to do with the way classes are created. .left is created as a global class instead of a class that is only a sub class of another div. So if you have more the one class of .left , will create mass problems for the web page.

Sorry, what are you saying is wrong? The whole point of classes is that they are used on multiple elements. Every class is "global" and you need to be specific in the CSS to ensure that a class which is the child of another element is styled accordingly. I could style elements with a class of "left" differently if they appear anywhere in the document, only within an element with id of "top", or only within other elements with a class of "famous". That's the whole point. Perhaps I have misunderstood your problems.

TheFilmGod · March 8, 2008

Sorry, what are you saying is wrong? The whole point of classes is that they are used on multiple elements. Every class is "global" and you need to be specific in the CSS to ensure that a class which is the child of another element is styled accordingly. I could style elements with a class of "left" differently if they appear anywhere in the document, only within an element with id of "top", or only within other elements with a class of "famous". That's the whole point. Perhaps I have misunderstood your problems.

Sorry to tell you but,

#header .left {

}

#body .left {

}

Aren't absolutely separate classes. Both Firefox and especially Opera have a problem rendering the classes properly. Some of #header .left class gets injected into #body .left class. It would be nice if THEY WERE separate but they aren't.

Sorry for the misunderstanding. Do some tests if you still don't believe me.

bronzemonkey · March 8, 2008

What you're basically saying is that FF and Opera have serious errors when it comes to implementing the css 2.1 spec. I can only assume that you are either making some errors in your css or not realising that you have some styles cascading in certain circumstances.

Find where some of the styles applied to #priCont .left or #secCont .left get injected into the control paragraph.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

html, body, div, h1, p {padding:0; border:0; margin:0; font-family:arial, sans-serif; font-size:100.01%;}

#priCont, #secCont, #terCont {padding:1em; border:1px solid #f00; margin:1em;}

h1 {font-size:1.6em; font-weight:bold;}

#priCont .left {position:relative; width:50%; padding:2%; color:#fc0; font-weight:bold; font-style:italic; line-height:1.5em;}
#priCont .left em {position:absolute; top:0; right:0; font-style:normal; color:#fff; background:#000;}

#secCont .left {width:90%; border:5px solid #ddd; color:#c45; text-transform:uppercase; text-decoration:underline;}
#secCont .left em {float:left; border:1px solid #000; background:#c72; color:#b27;}

</style>

</head>
<body>

<div id="wrapper">
  
	<div id="priCont">
	<h1>Primary Content</h1>
   	<p class="left"><em>This is contained within an em element inside the paragraph with class of left</em>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p>
	</div>
   
	<div id="secCont">
	<h1>Secondary Content</h1>
	<p class="left"><em>This is contained within an em element inside the paragraph with class of left</em>. Nullam placerat. Praesent feugiat pretium lacus. Etiam commodo. Donec metus. Proin sit amet justo non tortor sodales dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p>
	</div>

<div id="terCont">
	<h1>Control Content</h1>
	<p class="left"><em>This is contained within an em element inside the paragraph with class of left</em>. This paragraph also has a class of "left" but the only styles it displays are the defaults following a browser reset. There is no bleeding of css declarations for the primary or secondary content into the content here.</p>
	<p class="left">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p>
	</div>
   
</div>
  
</body>
</html>

If you have an example of the behaviour you are talking about then please post the code. Thanks.

haku · March 9, 2008

I don't get what you are saying either Film God. I'm not saying you are wrong, I just don't get what you mean. If you are saying what I think you may be saying, then then I'm under the impression that you are right, but if you are thinking something else, then as far as I know (which isnt really that far), you may be wrong. Can you give a little more specific example of what you are talking about?

brown2005 · March 9, 2008

I couldn't understand the problem or the question either.

If you are using PHP to parse your HTML, then .. that part should have been

echo "<div id=\'famous\'>

What he did was fine. You shouldn't escape ' within " or " within ', only " within " or ' within '. For example, these are all fine
echo "<div id='famous'>"
echo '<div id="famous">'
echo "<div id=\"famous\">"
Furthermore, through my experience use of such classes like: #content .left is improper. Browsers have problems focusing correct declarations on the correct divs - especially Firefox. I believe it is to do with the way classes are created. .left is created as a global class instead of a class that is only a sub class of another div. So if you have more the one class of .left , will create mass problems for the web page.

Sorry, what are you saying is wrong? The whole point of classes is that they are used on multiple elements. Every class is "global" and you need to be specific in the CSS to ensure that a class which is the child of another element is styled accordingly. I could style elements with a class of "left" differently if they appear anywhere in the document, only within an element with id of "top", or only within other elements with a class of "famous". That's the whole point. Perhaps I have misunderstood your problems.

so as long as i use say

echo'<a href""></a>';

or

echo"<a href=''></a>";

and not

echo"<a href=""></a>";

i dont have to use the \

brown2005 · March 9, 2008

also should am i ok using

#footer .left

or not? im sumwat confused

Sign In

background does not stretch

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information