simple floats problem

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

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.

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

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.

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

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

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 )

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.

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 )

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!"?)

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

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?

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

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

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

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.

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

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.

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

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

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

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:

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.

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

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

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


No problema. Too many Windows folk here to be really strict, they get their feelings hurt too easily. 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.


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.


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

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

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

Bought a new thesaurus, did we?


Less productive? In a word, yes.

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


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


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

cheers,

gary

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*

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

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 .

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

Hugo.

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

OK, I didn't think about too much clearing . 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

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.

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?

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?