Minor CSS layout problem

**Diminished29** · Sep 6, 2007 02:44

I've tried all I know to do and I still haven't been able to position the "Recent News" where I need it.

http://www.surveygeyser.com/aussurveys.html

I finally got the News where I want it...under my links, however now the main content of the page has been pushed down, so I'm really unsure as to what I've done wrong with the CSS.

I uploaded the CSS into a .txt format since obviously I can't upload the actual CSS file, any help is greatly appreciated!

Chad

**Centauri** · Sep 6, 2007 05:06

Minor? - you have a major html problem in that you have two divs with an id of "container" - an id can only be used once on a page.

If your "updates" div comes immediately after the "navigation" ul in the html, and its css includes clear: left; it should then sit in the proper place.

**Diminished29** · Sep 6, 2007 10:21

I did the following you suggested with the div's, I should've caught the "id" part and I put clear: left; instead of float: left; in the CSS

It does stay over there like it was before, however the problem still resides with the main-content being pushed down, so thats the part I'm stuck on. It doesn't seem like there is anything extra in there either unless I'm just missing it altogether.

I did, however update the pages html and css.

**Kravvitz** · Sep 6, 2007 18:10

1) Why did you put <div class="container"> around <div id="updates">?

2) Please fix your XHTML errors.

3) Remove the <font> elements. This is a bit old, but much of what it says is relevant -- What's wrong with the FONT element?
What should you use instead of the FONT element? Beyond the FONT tag: Practical HTML text styling

4) Empty <p>s should no be used.

5) Why aren't you using an <ol> to mark up that list under "So, let's get started!"?

**Diminished29** · Sep 6, 2007 19:36

Yes, my CSS isn't much to be seen I'm still definately in the newbie stages.

I put that <div class="container"> around there because I seen something like it in another template because I was trying to get ideas of how to fix my error, but apparently it still didn't do the trick.

I mean really whats the best way to get the "Recent Updates" underneath the menu, without having the content going down to the footer?

**tmmoose** · Sep 6, 2007 20:31

This may help....

Code:

<title>Untitled</title>
	<style>body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000;
	background-color: #fff;
	}
a {
	text-decoration: none;
	font-weight: bold;
	color:  #000;
	outline: none;
	}
a:visited {
	color:  #ccc;
	}
a:active {
	color:  #ccc;
	}
a:hover {
	color: #ccc;
	text-decoration: underline;
	}

h4 {
	font-size: 14px;
	line-height: 26px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
	}

#left {
	position: absolute;
	top: 93px;
	left: 0px;
	margin: 5px;
	padding: 0px;
	border: 1px solid #000;
	background: #fff;
	width: 250px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 250px;
	}
</style>

</head>

<body>


<div id="left">

<p><ul>
				
				<li class="active first"><a href="index.html"> - Home</a>
				</li><li>
					<a href="surveydir.html"> - Paid Online Surveys</a>
				</li><li>
					<a href="gptsites.html"> - Get Paid To Sites</a>
				</li><li>
					<a href="earnings.html"> - Survey Earnings</a>
				</li><li>
					<a href="articles.html"> - Survey Articles</a>
				</li><li>
					<a href="mailto:info@surveygeyser.com"> - Contact Us</a>
				</li>
				</p>	
	<form>
<P><form method="get" action="http://www.google.com/custom" target="_top"></P>
<P><input type="hidden" name="domains" value="surveygeyser.com"></input></P>
<P><label for="sbi" style="display: none">Enter your search terms</label></P>
<P><input type="text" name="q" size="21" maxlength="255" value="" id="sbi"></input></P>
<P><input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label>
<input type="radio" name="sitesearch" value="surveygeyser.com" id="ss1"></input>
<label for="ss1" title="Search surveygeyser.com"><font size="-1" color="#000000">SurveyGeyser.com</font></label>
</p><label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Google Search" id="sbb"></input>
<input type="hidden" name="client" value="pub-6235123796313501"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="en"></input>

</form></ul><h4>Recent Updates</h4>
				<ul>
					<li>
						<h5>August 22, 2007</h5>
						<p><a href="surveydir.html">International directories have been added.</a></p>
					</li><li>
						<h5>August 15, 2007</h5>
						<p><a href="paidsurveysart.html">New Article - "What are Paid Online Surveys?".</a></p>
					</li>
				</ul>

</div>


</body>

**Diminished29** · Sep 6, 2007 23:30

Well, everything is PERFECT on my desktop...but when its all uploaded it looks like crap again in IE and FF.

I don't know what gives. What fixed it in my desktop was I put in a #sidebar <div> to put the navigation, google search, and updates into. I thought I'd finally figured it all out.

Here is what it looks like on my desktop:

**Centauri** · Sep 7, 2007 05:37

The W3C validator is your friend - you have many coding errors. To start to get the cross-browser styling you want, you need to start with valid html, and it is also much easier when you use the appropriate html elements for the job at hand.

Grouping the left column contents within there own div was a good move, but this entire container needs to be floated and given a width, not the individual contents. Similarly, the Google ads column can be treated the same way. If the content div then gets margins to clear those two floated areas, it sits nicely between. Try this cleaned-up html (html 4.01 strict due to reasons that have been discussed at length on these forums before) :

Code:

<!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">
<meta name="description" content="Your Free Guide to Paid Online Surveys and Get Paid To sites!">
<meta name="keywords" content="australian paid online surveys, paid surveys online surveys, get paid to sites, survey geyser">
<title>Survey Geyser - Australian Paid Surveys</title>
<link href="styles.css" rel="stylesheet" type="text/css">
 <!--[if lte IE 6]>
	<style type="text/css">
	#container {
	  width:expression((document.documentElement.offsetWidth) >930 * (parseInt(document.body.currentStyle.fontSize) / parseInt(document.body.currentStyle.fontSize)) ?  "900px" : ((document.documentElement.offsetWidth) < 740 ? "710px" : "95%")); 
	}
	</style>
  <![endif]-->
</head>

<body>
<div id="container">
  <h1>Survey Geyser - Australian Paid Surveys</h1>
  <div id="leftsidebar">
    <ul id="navigation">
      <li><a href="index.html">- Home</a></li>
      <li><a href="surveydir.html">- Paid Online Surveys</a></li>
      <li><a href="earnings.html">- Survey earnings</a></li>
      <li><a href="articles.html">- Survey Articles</a></li>
      <li><a href="mailto:info@surveygeyser.com">- Contact Us</a></li>
    </ul>
    <!-- SiteSearch Google -->
    <form method="get" action="http://www.google.com/custom" id="googform">
      <fieldset><legend>google search</legend>
	    <input type="hidden" name="domains" value="SurveyGeyser.com">
        <label for="sbi" style="display: none">Enter your search terms</label>
        <input type="text" name="q" size="21" maxlength="255" value="" id="sbi">
        <input type="radio" name="sitesearch" value="" checked id="ss0">
        <label for="ss0" title="Search the Web">Web</label>
        <input type="radio" name="sitesearch" value="SurveyGeyser.com" id="ss1">
        <label for="ss1" title="Search SurveyGeyser.com">SurveyGeyser</label>
        <label for="sbb" style="display: none">Submit search form</label>
        <input type="submit" name="sa" value="Google Search" id="sbb">
        <input type="hidden" name="client" value="pub-6235123796313501">
        <input type="hidden" name="forid" value="1">
        <input type="hidden" name="ie" value="ISO-8859-1">
        <input type="hidden" name="oe" value="ISO-8859-1">
        <input type="hidden" name="cof" value="GALT:#00aaff;GL:1;DIV:#333333;VLC:eeeeee;AH:center;BGC:333333;LBGC:336699;ALC:ffffff;LC:ffffff;T:ffffff;GFNT:eeeeee;GIMP:eeeeee;FORID:1">
        <input type="hidden" name="hl" value="en">
	  </fieldset>
    </form>
    <!-- SiteSearch Google -->
    <h2>Recent Updates</h2>
    <dl id="updates">
      <dt>September 5, 2007</dt>
      <dd><a href="http://www.surveygeyser.com/pcrecruit.html">Pinecone Research needs age 18+ males!</a></dd>
      <dt>August 22, 2007</dt>
      <dd><a href="http://www.surveygeyser.com/surveydir.html">International directories have been added.</a></dd>
      <dt>August 15, 2007</dt>
      <dd><a href="http://www.surveygeyser.com/paidsurveysart.html">New Article - "What are Paid Online Surveys?".</a></dd>
    </dl>
  </div>
  <div id="rightsidebar">
    <script type="text/javascript"><!--
	google_ad_client = "pub-6235123796313501";
	google_ad_width = 160;
	google_ad_height = 600;
	google_ad_format = "160x600_as";
	google_ad_type = "text";
	//2007-08-25: MainSkyScraper
	google_ad_channel = "7702161567";
	//-->
  </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
    </div>
  <div id="content">
    <h2>Australia - Paid Online Surveys Directory</h2>
    <p>Here is a list of paid survey sites for those of you living in Australia.  I've chosen only companies which offer cash rewards.  These companies may also offer sweepstakes, gift certificates amongst other nice prizes, but ALL of them pay in cash for their surveys.  I will be updating this list with about 20-30 more sites sometime in September, so stay tuned.</p>
    <p>Do understand that the reason Survey Geyser doesn't have the long directories of 300+ surveys is because we concentrate on the companies which actually offer money and not just sweepstakes, prizes and/or gift certificates. While these items may be offered at times, ALL companies we list will usually offer cash as their main incentive for surveys.</p>
    <p><strong>So, let's get started!</strong></p>
    <ol class="linklist">
      <li><a href="http://www.livewireresearch.com/">Livewire Research</a> -- <a href="http://www.surveygeyser.com/livewirereview.html">Review</a></li>
      <li><a href="http://www.decisionanalyst.org/acop/backend/affiliate.aspx?AffiliateID=156939&amp;Type=Text&amp;Task=Click&amp;SubId=0&amp;L=English">American Consumer Opinion</a></li>
      <li><a href="https://www.surveysavvy.com?id=2866719&amp;action=join/">Survey Savvy</a> -- <a href="http://www.surveygeyser.com/surveysavvyreview.html">Review</a></li>
      <li><a href="https://www.onlineglobalrecruiting.com/register.asp">Online Global Recruiting</a></li>
      <li><a href="https://www.clearvoicesurveys.com/register.asp">Clear Voice Surveys</a></li>
      <li><a href="https://www.surveys.com/register.asp">NOP World</a></li>
      <li><a href="https://www.globaltestmarket.com">Global Test Market</a></li>
      <li><a href="http://www.opinionate.com.au/register/">Opinionate Australia</a></li>
      <li><a href="http://www.spidermetrix.com/sm120.php">spiderMetrix</a></li>
      <li><a href="http://au.lightspeedpanel.com/register/join.html">Lightspeed Australia</a></li>
    </ol>
    </div>
  <div id="footer">
    <p>&copy; Copyright 2007 - SurveyGeyser.com</p>
  </div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
	_uacct = "UA-1186754-4";
	urchinTracker();
</script>
</body>
</html>

css in next post (due to total post size)

**Centauri** · Sep 7, 2007 05:38

The styles.css file :

Code:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
}
a:link { 
	color: #0000FF;
}
a:visited { 
	color: #000;
}
a:hover { 
	color: #000;
	text-decoration: underline;
}
a:active { 
	color: #777;
}
p {
	padding-bottom: 1.5em;
	line-height: 1.4;
}
#container {
	width: 95%;
	min-width: 710px;
	max-width: 900px;
	margin: 0 auto;
}
h1 {
	height: 179px;
	font-size: 1px;
	color: #FFFFFF;
	background-image: url(geyserlogo.jpg);
	background-repeat: no-repeat;
}
#leftsidebar {
	float: left;
	width: 170px;
	border-right: 1px solid #ccc;
}
#navigation {
	background: #E7F7D0 url(img05.gif) repeat-x;
	padding-top: 2em;
}
#navigation li {
	list-style: none;
}
#navigation a {
	display: block;
	height: 20px;
	line-height: 20px;
	padding: 0 4px;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
	border-bottom: 1px solid #666;
}
#navigation a:focus, 
#navigation a:hover, 
#navigation a:active {
	color: #FFFFFF;
	background-color: #666;
}
#googform {
	background-color: #E7F7D0;
	padding: 5px;
	text-align: center;
}
#googform fieldset {
	border: 0;
}
#googform legend {
	display: none;
}
#googform label {
	font-size: 11px;
	margin: 5px 0;
}
#googform input {
	margin: 5px 0;
}
#leftsidebar h2 {
	color: #0000FF;
	font-family: Times, serif;
	font-size: 150%;
	margin: 1em 0;
}
#updates dt {
	font-weight: bold;
	margin-bottom: 0.5em;
}
#updates dd {
	margin-bottom: 2em;
}
#rightsidebar {
	float: right;
	width: 160px;
}
#content {
	margin: 0 175px 0 170px;
	border-left: 1px solid #ccc;
	padding-left: 16px;
}
#content h2 {
	color: #0000FF;
	font-family: Times, serif;
	font-size: 200%;
	margin-bottom: 1em;
}
#content .linklist li {
	list-style-position: inside;
	font-weight: bold;
	padding-bottom: 1em;
}
#footer {
	clear: both;
	padding: 10px 0 0 20px;
	font-size: 80%;
	background: #E7F7D0 url(img05.gif) repeat-x;
}

Cheers
Graeme

**Diminished29** · Sep 11, 2007 06:38

Sorry, for getting back to you late on this, but I want to thank you for all your help, its great to know people like you still exist.

I've already seen my adsense CTR go up as well, I think not only is that part because I floated the adsense ads into the center and now they're more or less the first thing a person sees when they come on to my page.

Though I believe the new layout helped as well, since you got the Recent Updates up and going people are now more interesting and are enticed to click on through to new pages throughout the site.

Again, I haven't fully completed changing over everything from your new code, but I hope to have all the little things worked out by the end of this week, however the page as it stands now is fully functional and I appreciate your help greatly!

Thank you so much!

Chad

User Tag List

Thread: Minor CSS layout problem

Thread Tools

Display

Minor CSS layout problem

Bookmarks

Bookmarks

Posting Permissions