33 replies [Last post]
mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

hey everyone. This is my page:

http://www.scenepointblank.com/matt/dev/latest.php

I'm talking about the ugly-coloured news boxes on the left.

See the second one down? It weirdly indents the headline if the news body text doesn't extend longer than the image.

Also, I can't figure out how to make the <div> for the news body text stick to the side of the image, if you follow me. The edge (on longer posts) doesn't stay in one place. I tried setting the newstext CSS to float:left but it just destroyed the page with stuff overlapping.

Here's my CSS:

.headline {
	font: bold 20px Georgia, "Times New Roman", Times, serif;
	background: #00CCCC url(corner.gif) no-repeat right top;
}
.info {
	font: normal 10px Arial, Helvetica, sans-serif;
	background: #999966;
}
.bar {
	font: normal 10px Arial, Helvetica, sans-serif;
	background: #3333CC;
	float: left;
}
.newsstory {
	font: normal 12px/16px Georgia, "Times New Roman", Times, serif;
	background: #FFFFFF;
	float: left;
}

aaaaaaand here's the html:

<div class="headline">&nbsp;<a href=\"displaystory.php?id=$id\">$headline</a></div>
<div class="bar"><img src=\"news/images/$topicimage\"/></div>
<div class="info">Posted by <a href=\"mailto:$Staff_Email\">$username</a> on $datetime | Read $hits times</div>
<div class="newsstory">$text<br /><br /><a href=\"displaystory.php?id=$id&amp;mode=full\"><b>(Read More)</b></a></div>

drhowarddrfine
Offline
Leader
Last seen: 13 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

simple floats problem

Validating is a wonderful tool. Don't you think? You have problems with ul and li among other things.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Thanks for that, although I wasn't asking so much about validation.

I may need to change my doctype, based on those errors. Even so, the majority of them are caused by other included files in that layout, not the one I'm having problems with, so you seem to have answered an unasked question.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

simple floats problem

mattpointblank wrote:
Thanks for that, although I wasn't asking so much about validation.

I may need to change my doctype, based on those errors. Even so, the majority of them are caused by other included files in that layout, not the one I'm having problems with, so you seem to have answered an unasked question.

Courtesy costs nothing, you know. Pffft, the youth of today Wink

Validation will fix up errors which may fix up the problem. If not, it always helps to work with a correct page.

And if you really want to use those deprecated attributes (lets face it, they are over 10 years old), then drop down to a 4.01 transitional DTD.

Verschwindende wrote:
  • CSS doesn't make pies

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Aha, so I should be replacing all those image attributes with css ones? Gotcha.

I'm still not sure where I'm going wrong with the list code stuff, though.

Regarding courtesy, I didn't think the reply was all that friendly either! I did say thank you though Tongue

But back to the original problem: can anyone see some reason, discounting my poor code on other parts, that is causing that error?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

simple floats problem

So if the news content is longer than the image, the headlne is indented?

This is odd. I'll have a closer look.

(I didn't mean to come across as angry, glad we sorted out that mess. Although validation does help Laughing out loud )

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

simple floats problem

For a start, this:

<ul>
      <li><a href="displayreview.php?id=515">Fall of Lordaron</a><ul>
          <li>by Neil F.</li>
        </ul>
      </li>
    </ul>

  </li>
 </ul><ul>
  <li><a href="displayreview.php?id=514"><b>Pelican</b></a>
    <ul>
      <li><a href="displayreview.php?id=514">The Fire in Our Throats Wil...</a><ul>
          <li>by Michael</li>
        </ul>

      </li>
    </ul>
  </li>
 </ul><ul>
  <li><a href="displayreview.php?id=513"><b>Lost Patrol, The</b></a>
    <ul>
      <li><a href="displayreview.php?id=513">The Lost Patrol Band</a><ul>
          <li>by Scott</li>

        </ul>
      </li>
    </ul>
  </li>
 </ul><ul>
  <li><a href="displayreview.php?id=512"><b>Modern Life is War</b></a>
    <ul>
      <li><a href="displayreview.php?id=512">Witness</a><ul>

          <li>by Multiple</li>
        </ul>
      </li>
    </ul>
  </li>
 </ul><ul>
  <li><a href="displayreview.php?id=511"><b>Xiu Xiu</b></a>
    <ul>

      <li><a href="displayreview.php?id=511">La Forêt</a><ul>
          <li>by James</li>
        </ul>
      </li>
    </ul>
  </li>
 </ul>		

is unsemantic, and would probably be better as a definition list. Have a read of them first.

/edit

You're suffering from divitis.

		  <div class="headline"><a href="displaystory.php?id=1027">Clutch - Burning Beard Video</a></div>
<div class="bar"><img src="news/images/bands.gif"/></div>
<div class="info">Posted by <a href="mailto:[email protected]">Michael</a> on Wed 27th Jul, 2005 | Read 8 times</div>
<div class="newsstory">Clutch's video for the song "Burning Beard" has been posted online <a href="http://www.drt-entertainment.com/videos/clutch/clutch.mov">here.</a> The song is off of the band's latest full-length, <i>Robot Hive/Exodus.</i><br /><br /></div>

is much better written as:

<div class="article">
<h2><a href="displaystory.php?id=1027">Clutch - Burning Beard Video</a></h2>
<h3>Posted by <a href="mailto:[email protected]">Michael</a> on Wed 27th Jul, 2005 | Read 8 times</h3>
<p> Clutch's video for the song "Burning Beard" has been posted online <a href="http://www.drt-entertainment.com/videos/clutch/clutch.mov">here.</a> The song is off of the band's latest full-length, <i>Robot Hive/Exodus.</i></p>
</div>

Then this: <img src="news/images/bands.gif"/> could be used as a background image.

Play around with it.

Verschwindende wrote:
  • CSS doesn't make pies

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

thepineapplehead wrote:
So if the news content is longer than the image, the headlne is indented?

This is odd. I'll have a closer look.

(I didn't mean to come across as angry, glad we sorted out that mess. Although validation does help Laughing out loud )

It's the reverse. If the news content ISN'T longer than the image, it indents the headline. Look on the page!

Thanks for the info about the list stuff. I know it looks odd, but it displayed okay when I previewed... (is that the same as "no, these mushrooms aren't the poisonous kind!"?)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

I'm not sure what indent you're talking about unless it's IE's 3 pixel jog bug. If that's not it, post a (cropped) screencap, with the problem marked.

[edit] Never mind, I wasn't viewing in a wide enough window to create a short new item. I see it now and will consider. [/edit]

Make .newsstory {margin-left: 121px;}.

You're apparently using an MS editor, as it's saving as a proprietary MS text instead of ASCII. Be sure that the text mode you're saving as is plain ASCII text. As is, it's mapping - to &#150; and / to &#146; which are illegal numeric entities for printable characters. Decimal 0-31 and 128-159 are reserved. ASCII is a subset of utf-8/unicode, but don't save as utf-8 or unicode from a Microsoft editor as it handles those wrongly, too.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Thanks for the tip, I tried that and it worked well. I would have done it before had I realised that background-color for heading tags applied it with 100% width rather than just behind the heading text as I thought it did.

My problem is displaying the image. I tried floating it and displaying it 10 pixels down from the heading, but it just distorts. Any suggestions? I'm not sure what you meant about using it as a background.. to which element?

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

kk5st wrote:

Make .newsstory {margin-left: 121px;}.

You're apparently using an MS editor, as it's saving as a proprietary MS text instead of ASCII. Be sure that the text mode you're saving as is plain ASCII text. As is, it's mapping - to – and / to ’ which are illegal numeric entities for printable characters. Decimal 0-31 and 128-159 are reserved. ASCII is a subset of utf-8/unicode, but don't save as utf-8 or unicode from a Microsoft editor as it handles those wrongly, too.

cheers,

gary

Using Dreamweaver (old habits die hard..). All the text on that page is pulled from the database, does that mean I have some mysql encoding issues?

As for the fix, thanks, I'm using thepineapplehead's method now though Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

Quote:
Using Dreamweaver (old habits die hard..). All the text on that page is pulled from the database, does that mean I have some mysql encoding issues?
Likely it's not a db issue, but a problem with the editor used to create the text. Just be sure of the character encoding in the future. Don't do ms-1252 or whatever it's called. Be sure it's ASCII or ANSI plain text.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Text input into the database was done through php webforms.. hm. I might have to investigate this one.

drhowarddrfine
Offline
Leader
Last seen: 13 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

simple floats problem

Quote:
Validation will fix up errors which may fix up the problem. If not, it always helps to work with a correct page.

I'm turning into a cranky old man. Because I've veered off in a totally new direction lately, but still trying to keep my finger in the CSS pie, I feel I could make a career just out of telling people to fix their own problems if they would just validate; and it irritates me that this obvious, fundamental step is ignored, or pooh-poohed, by many.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

simple floats problem

mattpointblank wrote:

It's the reverse. If the news content ISN'T longer than the image, it indents the headline. Look on the page!

No, I'm afraid I'm right - if the content is longer than the image, the header is indented.

http://i4.photobucket.com/albums/y136/thepineapplehead/indented.jpg

Verschwindende wrote:
  • CSS doesn't make pies

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

thepineapplehead wrote:
mattpointblank wrote:

It's the reverse. If the news content ISN'T longer than the image, it indents the headline. Look on the page!

No, I'm afraid I'm right - if the content is longer than the image, the header is indented.

http://i4.photobucket.com/albums/y136/thepineapplehead/indented.jpg

Oh yeah- odd. If you look at the longer posts at the bottom though, they don't do this - it's so odd.

drhowarddrfine - I do appreciate the importance of validation; I guess I thought leaving it till the end was appropriate. I'll have to brush up on that.

drhowarddrfine
Offline
Leader
Last seen: 13 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

simple floats problem

Validation is automated error checking. Without it you must rely on yourself and forums to find your errors by staring at it.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Okay, to make things easier, I seperated the part that's giving me issues:

http://www.scenepointblank.com/matt/dev/news/latestnews2a.php

I tried validating that:

"Sorry, I am unable to validate this document because on line 49, 56, 62-63 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication."

The contents of those lines don't seem to contain anything odd:

49: <div class=\"info\">Posted by <a href=\"mailto:$Staff_Email\">$username</a> on $datetime | Read $hits times</div>

To be sure, I saved the file as UTF-8, and changed the table in the database to UTF-8 unicode too. No joy.

The page itself has some improvements; I used <div class=\"clearfix\"><br><br></div> between news posts, although this doesn't work properly if the news story is shorter than the images. How can i keep the image in its own "column" and the text in a different one?

Matt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

Do not save as utf-8, save as plain ASCII text. Since your db may be corrupted by illegal characters (not a fatal error, so don't sweat it right now), code a static page for debugging and validation. The easy way is to save source from the served page and run it through Tidy! to clean the character set.

The mini-page must still have the usual DTD and head section. Since your server does not specify the character-set, you must do so yourself or accept the default, not a good plan.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Okay, I have a validated page:
http://www.scenepointblank.com/matt/dev/news/test.htm

BUT! That's still not what I need! I need the box to look like this:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

simple floats problem

If you mean that you don't want the text wrapping around the image when the window is narrowed then you need to give the text a left margin the width of the image; however as things stand your text is loose in the .newsstory div, so margining it will cause your white background to pull away from the image which I guess you don't want.

You should enclose the text in a paragraph element and put the left margin on that and probably move the .bar div into the .newstory div.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

As Hugo points out, you don't have proper structural markup. Well structured html is always easier to deal with, because, among other reasons, it gives you a context for your elements. It helps too if you use the appropriate semantic/structural tags for each element rather than use non-semantic styled divs.

I rid the stylesheet of superfluous to the issue rules. It is good form, when posting problem code, eliminate everything not a part of the problem, and in repeating code like this, to include only representative snippets—like a long and a short content.

Compare this markup and styling to the original;

 <!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 name="generator" 
        content=" 
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" /> 
         
  <title>test page</title> 
  <link href="test_files/style.css" 
        rel="stylesheet" 
        type="text/css" /> 
  <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" /> 
<style type="text/css"> 
/*<![CDATA[*/ 
html, body { 
    margin: 0; 
    padding: 
    width: 100% 
    } 
 
body { 
    background-color: #E4E5E0; 
    padding: 20px; 
    font: 90% "Trebuchet MS", verdana, geneva, sans-serif; 
    color: #3D3535; 
    } 
 
p { 
    font-size: 1em; 
    } 
 
 
/*just a fix, taken from http://www.positioniseverything.net/easyclearing.html*/ 
.clearfix:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
} 
 
.clearfix { 
        display: inline-table; 
} 
 
/* Hides from IE-mac \*/ 
* html .clearfix { 
    height: 1%; 
    } 
 
.clearfix { 
    display: block; 
    } 
/* End hide from IE-mac */ 
 
.headline { 
    background: #740000 url(corner.gif) no-repeat right top; 
    } 
 
.info { 
    font: normal 10px Arial, Helvetica, sans-serif; 
    margin: 0; 
    background: #EDEEEA; 
    } 
 
.newsstory { 
    display: table; 
    width: 90% 
    font: normal 12px/16px Georgia, "Times New Roman", Times, serif; 
    background: white; 
} 
 
.newsstory h3, 
.newsstory h4 { 
    font-size: 12px/16px; 
    margin: 0; 
    } 
 
.newsstory h4 { 
    float: left; 
    } 
 
.newsstory .text { 
    margin-left: 125px; 
    } 
 
.text ul { 
    margin-left: 40px; 
    padding: 0; 
    list-style: none; 
    } 
 
.text p { 
    margin: 8px 0; 
    } 
 
.headline a:link { 
    text-decoration: underline; 
    color: #fff; 
    } 
 
.headline a:visited { 
text-decoration: underline; 
color: #FFFFFF; 
    } 
 
.headline a:hover { 
    color: #ccc; 
    } 
 
.headline a:active { 
    color: #fff; 
    } 
 
.info a:link { 
text-decoration: underline; 
color: #993300; 
} 
.info a:visited { 
text-decoration: underline; 
color: #993300; 
} 
.info a:hover { 
text-decoration: underline; 
color: #990000; 
} 
.info a:active { 
text-decoration: underline; 
color: #993300; 
} 
 
/*]]>*/ 
</style> 
</head> 
 
<body> 
  <div class="newsstory"> 
    <h3 class="headline"><a href=" 
    http://www.scenepointblank.com/matt/dev/news/displaystory.php?id=1027"> 
    Clutch - Burning Beard Video</a></h3> 
 
    <p class="info">Posted by <a href=" 
    mailto:[email protected]">Michael</a> on Wed 27th Jul, 
    2005 | Read 8 times</p> 
 
    <h4><img src="bands.gif" 
         alt="Bands" /></h4> 
 
    <div class="text"> 
      <p>Clutch's video for the song "Burning Beard" has been posted 
      online <a href=" 
      http://www.drt-entertainment.com/videos/clutch/clutch.mov">here</a>. 
      The song is off of the band's latest full-length, <i>Robot 
      Hive/Exodus.</i></p> 
    </div><!-- end text --> 
  </div><!-- end newsstory --> 
 
  <div class="newsstory"> 
    <h3 class="headline"><a href=" 
    http://www.scenepointblank.com/matt/dev/news/displaystory.php?id=1021"> 
 
    27 Release Update / European Tour</a></h3> 
 
    <p class="info">Posted by <a href=" 
    mailto:[email protected]">Michael</a> on Mon 25th Jul, 
    2005 | Read 7 times</p> 
 
    <h4><img src="bands.gif" 
         alt="Bands" /></h4> 
 
    <div class="text"> 
      <p><a href="http://www.27.vg/">27</a> recently wrapped up the 
      recording of their new album, <i>Holding on for Brighter 
      Days,</i> which will be released in the UK by Undergroove Records 
      on September 5th. Making a guest performance on the album is Clif 
      Meyer of Isis/Red Sparowes.</p> 
 
      <p>The band also has a split 12&Prime; Bug on Noise Appeal Records 
      in the works. The band plans on contributing some out-takes and 
      rarities to their side of the split which is slated for an August 
      release.</p> 
 
      <p>Finally, 27 will be heading out for a full European tour with 
      dates in the UK from September 1st - 15th and mainland Europe 
      September 16 - October 2nd. Here are the dates that are confirmed 
      as of now:</p> 
 
      <ul> 
        <li>Fri, Sept 16 - Germany, Saarlouis - Bloom Explode 
        Festival</li> 
 
        <li>Sat, Sept 17 - Belgium, Dendermonde - City Sounds 
        Festival</li> 
 
        <li>Tue, Sept 20 - France, Montpelier - The Peanuts</li> 
 
        <li>Wed, Sept 21 - Switzerland, Geneva - Usine</li> 
 
        <li>Sun, Sept 25 - Austria, Vienna - TBA</li> 
 
        <li>Tue, Sept 27 - Germany, Berlin - Magnet Club</li> 
 
        <li>Thu, Sept 29 - Netherlands, Tilburg - Cul de Sac</li> 
 
        <li>Sat, Oct 1 - Belgium, Kortrijk - Textielhuis</li> 
 
        <li>Sun, Oct 2 - Greece, Athens - Underworld</li> 
      </ul> 
    </div><!-- end text --> 
  </div><!-- end newsstory --> 
 
</body> 
</html>
I used {display: table;} on the float's parent to do the clearing, but if you prefer to use Tony's clearfix method, the class belongs on the float's parent, not in an orphan div. In this case, <div class="newsstory clearfix">

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

kk5st wrote:
As Hugo points out, you don't have proper structural markup. Well structured html is always easier to deal with, because, among other reasons, it gives you a context for your elements. It helps too if you use the appropriate semantic/structural tags for each element rather than use non-semantic styled divs.

I rid the stylesheet of superfluous to the issue rules. It is good form, when posting problem code, eliminate everything not a part of the problem, and in repeating code like this, to include only representative snippets—like a long and a short content.

I used {display: table;} on the float's parent to do the clearing, but if you prefer to use Tony's clearfix method, the class belongs on the float's parent, not in an orphan div. In this case, <div class="newsstory clearfix">

cheers,

gary

thanks for that: I did just preview that code though and got some odd (Firefox) results; irregularly sized divs etc.

Apologies for the lack of etiquette in posting code, I'm really showing myself up in this thread. In my defence, I'm only 19 and not yet well-versed in manners and such things..

As for the code: My problem with formatting and structure is that all my content is pulled from a database. The actual file generating the code just uses variables. I take the point though, and when the site eventually goes live I'll tidy up all of the code a lot.

Every time I run into issues like this with css I get tempted to go back to tables, where I could (and have!) make this work in about 3 minutes..

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

mattpointblank wrote:
thanks for that: I did just preview that code though and got some odd (Firefox) results; irregularly sized divs etc.

My bad. I didn't test in wide windows. That's an artifact of display: table;. Remove that rule from .newsstory. Go ahead and use the clearfix hack. Mark up each <div class="newsstory clearfix">.

Quote:
Apologies for the lack of etiquette in posting code, I'm really showing myself up in this thread. In my defence, I'm only 19 and not yet well-versed in manners and such things..

No problema. Too many Windows folk here to be really strict, they get their feelings hurt too easily. Smile Not nearly enough folk do follow the protocols, but that doesn't mean we can't keep trying to encourage it. It really is a selfish thing. Following tried and true methods makes it easier for others to help you—and vice versa.

Quote:
As for the code: My problem with formatting and structure is that all my content is pulled from a database. The actual file generating the code just uses variables. I take the point though, and when the site eventually goes live I'll tidy up all of the code a lot.

You've got that backwards. Create the html first. Get it right first. Then write the server side logic to fill in the blanks. Notice how each .newsstory div holds a single record of the query results. Look at the source for this site. Tony has refactored it as css based layout.

Quote:
Every time I run into issues like this with css I get tempted to go back to tables, where I could (and have!) make this work in about 3 minutes..

I suppose I might have gone through a time thinking that. Once you get over the hump in the learning curve, you won't be able to imagine going back to table layouts. A big problem right now is that you haven't needed to write structural and semantic markup. As you get better at html, the css will get easier.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

simple floats problem

Gary in a utterly censorious and unforgivably condemnatory fashion , that can only be seen as wholy defamatory and a contumelious statement that should be regarded with the contempt it deserves wrote:
Too many Windows folk here to be really strict, they get their feelings hurt too easily


I am not folk, how can you say our feelings get hurt so easily, what do you base this blanket statement on then huh, come on defend your scurrilous and downright obloquious remarks.

Am I wrong to boot up my XP OS in the morning, does it make me a lesser person in the eyes of the geek community, does it, am I to be derided and looked down on then am I ? am I any less productive, huh.

Oh and I have a linux distro running now. It's alright *shrug*; does this qualify me as proper computerer now Smile

oops sorry Mattpointblank taken your thread off topic, but then we do get upset and a little tetchy apparently Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

Hugo wrote:
Gary in a utterly censorious and unforgivably condemnatory fashion , that can only be seen as wholy defamatory and a contumelious statement that should be regarded with the contempt it deserves wrote:
Too many Windows folk here to be really strict, they get their feelings hurt too easily

Bought a new thesaurus, did we?

Quote:
I am not folk, how can you say our feelings get hurt so easily, what do you base this blanket statement on then huh, come on defend your scurrilous and downright obloquious remarks.

Am I wrong to boot up my XP OS in the morning, does it make me a lesser person in the eyes of the geek community, does it, am I to be derided and looked down on then am I ? am I any less productive, huh.

Less productive? In a word, yes.

You see, Matt? These whiney MSWindows users make my point just by opening their mouths.

Quote:
Oh and I have a linux distro running now. It's alright *shrug*; does this qualify me as proper computerer now Smile

Depends on the distro. Real men run Debian on their personal machines.

Quote:
oops sorry Mattpointblank taken your thread off topic, but then we do get upset and a little tetchy apparently Smile

Whiney, Hugo. The word you want is whiney, not tetchy.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

simple floats problem

Just as I was expecting Gary wrote:
Real men run Debian on their personal machines


Oh how predictable I was just waiting for you to say that :roll:

Lifes to short for the install routine, I guess I'm still struggling to grow up then as SuSe will do just fine.
*waits for the next censorious comments*

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

I tried installing Fedora Core 4 just the other day, it said it worked fine, then I booted, no operating system found. This was the fourth install attempt.. damn.

Anyway, let's keep this ontopic guys..

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

simple floats problem

Were waiting on you then Matt, Gary has given form to what I suggested, you should now have your image floating left within .newstory and your text residing in a semantic paragraph with margin left to clear the image and stop text wrap. newstory needs to be cleared to contain the floated image and on this one Gary favoured his display table trick where I would have gone for the clearfix solution Tongue.

How are you fairing with this ? have you implemented clearing on the .newsstory div ? or are you in need of help with it ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Hey guys,

Implemented the clearfix part, here's the odd results:

http://www.scenepointblank.com/matt/dev/latest.php?page=2

This is the file that's being included (modified slightly to work standalone):

http://www.scenepointblank.com/matt/dev/latest.php?page=2

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

simple floats problem

OK, I didn't think about too much clearing Sad. Back to the drawing board for clearing method 3. Remove the clearfix class from the newsstory divs. Go back where I had the {display: table;}, and put this in, .newsstory {overflow: hidden;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

simple floats problem

Ah yes the clear: both is clearing the adjacent float as well, makes a change to see a problem in FF rather than IE, you could loose the clear:both or set it to clear:left in the clearfix rules, but Gary's overflow is probably more apt for this problem.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mattpointblank
Offline
Enthusiast
Last seen: 14 years 16 weeks ago
Joined: 2005-08-16
Posts: 60
Points: 0

simple floats problem

Sorry for the absence guys, in the last few weeks I left home and started University! Also enrolled on a Introduction To Programming (in Java) course, out of interest.

Anyway. I fixed up the problems, thanks a ton, but here's the latest issue:

http://www.scenepointblank.com/matt/dev/news/displaystory.php?id=1024

Individual news pages fall apart when using the same html/css rules. Is it down to the floats? Am I gonna have to use a seperate sheet? Eventually that page is going to be worked into the layout in previous links, so maybe it just looks odd now on its own?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

simple floats problem

I'm not quite sure what you're doing. Your individual page isn't built the same way as your main page. Is it supposed to be?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference