24 replies [Last post]
desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

OK the conversion of the open source internet music template has gone pretty well so far and with some help with fluid css boxes from another post i'm making some steady progress. However i'm really starting to hate CSS Smile I know i know its the way of the future but boy can it be a *beep* for cross browser theming.

Anyway everything works lovely in Firefox and Opera (much to my surprise) but IE on my flatforum refuses to play ball.

I apologise for this posting being so long but i'm really hoping someone can spot something minor that is sending all this out of wack.

Heres how it looks in firefox and opera (which is how it should look)

But in Internet explorer it looks like this

Please help if you can as its driving me insane.

Heres my CSS

/* project: internet music template
author: luka cvrk (www.solucija.com) */


/* default styles
-------------- */

body {
padding: 0;
margin: 0;
font: 0.74em Arial, Helvetica, sans-serif;
background: #fff;
color: #454545;
}

a {
color: #4A8EBC;
background: inherit;
}

a:hover {
color: #C3593C;
background: inherit;
}

a.title {
color: #FE6700;
background: #FFF;
}

h1 {
font: bold 2em "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing: -1px;
padding: 2px 0 0 0px;
margin: 0;
color: #464548;
background: inherit;
}

h1 a, h2 a {
text-decoration: none;
color: #464548;
background: inherit;
}

h1 a:hover, h2 a:hover {
color: #C3593C;
background: #FFF;
}

h1 .red{
color: #C3593C;
background: inherit;
}


h2 {
margin: 0 0 5px 0;
padding: 0;
font: bold 1.5em Arial, Helvetica, sans-serif;
letter-spacing: -1px;
color: #000;
background: inherit;
}

h2 .yellow{
color: #FFFCD1;
background: inherit;
}

p { margin: 0 0 5px 0; }

ul {
margin: 0;
padding : 0;
list-style : none;
}

form {
margin: 0;
}

input.search {
width: 145px;
height: 22px;
border: none;
background: #fff url(images/input.gif) no-repeat;
padding: 5px 10px 0 25px;
color: #808080;
}

input.button {
border: 0;
height: 27px;
width: 76px;
background: #ABC43C url(images/button.gif) no-repeat;
color: #FFF;
font: bold 1.1em Arial, Helvetica, Sans-Serif;
}

input.login {
width: 150px;
border: none;
background: url(images/logininput.gif);
padding: 4px;
}

/* layout
------ */

.content {
margin: 10px auto;
width: 760px;
}

.logo {
float: left;
width: 200px;
padding: 10px 0 11px 10px;
}

.header_right {
float: right;
width: 550px;
height: 72px;
}

.logo p {
font-size: 0.9em;
color: #808080;
padding: 0 0 0 7px;
background: inherit;
}


.top_info {
width: 540px;
margin: 12px 0 5px 0;
padding: 0 5px 5px 0;
text-align: right;
background: #FFF url(images/dot.gif) repeat-x bottom;
color: #444;
}


.slogan {
text-align: right;
width: 160px;
}


.bar {
text-align: right;
font-size: 1.1em;
height: 30px;
}

.bar li {

padding: 0px 10px 8px 10px;
color: #808080;
background: #FFF;
display: inline;
}

.bar li.active {
background: #FFF url(images/bar.gif) no-repeat center bottom;
color: #C3593C;
font-weight: bold;
padding-bottom: 8px;
}

.bar a {
font-weight: bold;
color: #4A8EBC;
background: inherit;
}

.search_field {
text-align: right;
float: right;
width: 540px;
height: 38px;
background: #464548 url(images/searchbg.gif) no-repeat top right;
color: #000;
clear: both;
padding: 10px 10px 0 0;
}

.grey {
font-size: 1.2em;
font-weight: bold;
color: #ccc;
background: inherit;

}

.search {
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background: inherit;
}

.newsletter {
float: left;
height: 33px;
padding: 15px 0 0 15px;
width: 192px;
background: #6E6E6E url(images/newsletterbg.gif) no-repeat;
color: #FFF;
margin: 0 0 3px 0;
}

.subheader {
clear: both;
margin: 3px 0 10px 0;
padding: 8px;
background: #f4f4f4;
color: #808080;
border-bottom: 1px solid #ccc;
}

/* left side
--------- */

.left-narrow {
float: left;
width: 490px;
margin: 0 0 10px 0;
}

.left-wide {
width: 760px;
margin: 0 0 10px 0;
}

.left_articles {
margin: 0 0 15px 0;
padding: 0 0 0 10px;
}

.lt {
height: 10px;
background: #6E6E6E url(images/lt.gif) no-repeat;
color: #FFF;
}

.sticky {
color: #eee;
padding: 3px 12px;
margin: 0 0 15px 0;
background: #6E6E6E url(images/lb.gif) no-repeat bottom left;
}



.sticky a {
color: #FFFCD1;
background: inherit;
}

.sticky h2 {
color: #FFF;
background: #6E6E6E;
}


.thumb {
float: left;
width: 150px;
border: 1px solid #d4d4d4;
color: #fff;
background: #6e6e6e;
margin: 0 15px 15px 0;
padding: 5px;
}

.thumb p { margin: 0; padding: 3px; color: #FFF; background: #6e6e6e; }

/* right side
---------- */

.right {
float: right;
width: 245px;
margin: 0 0 10px 0;
}

.right a {
color: #FFFCD1;
background: inherit;
}


.rt {
background: #C85E35 url(images/rt.gif) no-repeat;
color: #FFF;
height: 7px;
}

.right_articles {
font-size: 0.9em;
background: #C85E35 url(images/rb.gif) no-repeat bottom;
color: #FEE1D5;
padding: 4px 8px;
margin: 0 0 10px 0;
}

.right_articles h2 {
text-decoration: none;
color: #fff;
background: inherit;
}


.image {
float: left;
margin: 0 9px 3px 0;
}

/* footer
------ */

.footer {
clear: both;
text-align: center;
line-height: 1.8em;
color: #808080;
background: #FFF url(images/dot.gif) repeat-x;
padding: 8px 0;
}

.footer a {
color: #C3593C;
background: inherit;
}



.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .taxonomy {
color: #999;
font-size: 0.8em;
padding: 1.5em;
}
.node .picture {
border: 0px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: normal;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 0px solid #abc;
float: right;
margin: 0.5em;
}

/*
** Module specific styles
*/
#aggregator .feed-source {
background-color: #eee;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0 1em 0;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color: #999;
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em 0.5em 0.5em 0.5em;
}
#forum td.forum, #forum td.posts {
background-color: #eee;
}
#forum td.topics, #forum td.last-reply {
background-color: #ddd;
}
#forum td.container {
background-color: #6E6E6E;
color: #ffffff;
}
#forum td.container a {
color: #ffffff;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbb;
}
#forum td .name {
color: #96c;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #abc;
padding: .5em;
margin: 1em 0em 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
.calendar a {
text-decoration: none;
}
.calendar td, .calendar th {
padding: 0.4em 0;
border-color: #888;
}
.calendar .day-today {
background-color: #69c;
}
.calendar .day-today a {
color: #fff;
}
.calendar .day-selected {
background-color: #369;
color: #fff;
}
.calendar .header-week {
background-color: #ccc;
}
.calendar .day-blank {
background-color: #ccc;
}
.calendar .row-week td a:hover {
background-color: #fff; color: #000;
}
.node img {
border: 1px solid #abc;
padding: 0.75em;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 6px;
}

.comment img {
border: 1px solid #abc;
padding: 0.75em;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 6px;
}

#welcome {
border: dashed;
border-width: thin;
background-color: #FFDBA1;
padding: 0.5em 1em;
color: #4E3000;
}

#welcome a, #welcome a:visited {
color: #B63300;
font-weight: bold;
}

img.emoticon{
border: 0px;
padding: 0;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}

/* Flatforum structure */
.forum-comment {

}

.comment-left {
padding: 5px;

}

.comment-right {
padding: 5px;
width: 735px;

}

.comment-left .author-name {
font-weight: bold;
background-color: #EEEEEE;
font-size: 1em;

}

.comment .comment-left .picture {
}

.comment-right .title {
font-weight: bold;
font-size: 1.2em;
}

.comment-right .content {
background-color: #fff;
padding: 5px;
width: 725px;


}

.comment-right .content .links {
float: right;
}

/* Flatforum style */
.comment-left, .comment-right {
background-color: #fff;
}

.comment-right, .comment-left {
background-color: #EEEEEE;
}

.comment-even {
}

.comment-odd {
}

Heres how i'm styling the forum using flatforum


<?php
  if (!_is_forum()) {
    include('node.tpl.php');
    return;
  }
  $curr_user = user_load(array('uid' => $userid));
  $sig = $curr_user->signature;
?>
<div>new ? ' comment-new forum-comment-new' : ''; ?&gt;"&gt;</p>

<p><div class="comment-left">
&lt;?php print $picture ?&gt;
<div class="author-name">&lt;?php print $name . ' ' . $submitted ?&gt;</div>
&lt;?php if (module_exist('flatforum')): ?&gt;
<span class="author-posts">
&lt;?php print t('Posts:') . ' ' . $posts; ?&gt;
</span>
<span class="author-regdate">
&lt;?php print t('Joined:') . ' ' . $joined; ?&gt;
</span>
&lt;?php endif ?&gt;
</div>
&lt;?php
profile_load_profile($node-&gt;uid);
?&gt;
&lt;?php
print $node-&gt;profile_lastname;
?&gt;</p>

<p><div class="comment-right">
&lt;?php if ($comment-&gt;new) : ?&gt;
<a id="new" rel="nofollow"></a>
<span class="new">&lt;?php print $new ?&gt;</span>
&lt;?php endif ?&gt;
<div class="title">&lt;?php print check_plain($comment-&gt;subject) ?&gt;</div></p>

<p><div class="content">
&lt;?php print $content ?&gt;
&lt;?php if ($sig): ?&gt;
<div class="author-signature">--&lt;?php print check_markup($sig); ?&gt;</div>
&lt;?php endif ?&gt;
<div class="links">&lt;?php print $links ?&gt;</div>
<br class="clear" />
</div>
</div></p>

<p></div>
<br class="clear" />

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

We need to see the HTML as

We need to see the HTML as output to the browser, not with unparsed PHP code but what I can tell from what you've got already is that you need to validate your code, because this bit is invalid:

<p><span class="author-posts"></p>

<p></span>
<span class="author-regdate"></p>

<p></span></p>

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

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

Seems my php code got

Seems my php code got mangled and no matter what tags i use it comes out the same so i've attached it as a file attachment. heres hoping someone can offer some advice as its driving me insane.

AttachmentSize
node-forum.tpl_.php_.txt 1.35 KB
desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

Tyssen wrote:We need to see

Tyssen wrote:
We need to see the HTML as output to the browser, not with unparsed PHP code but what I can tell from what you've got already is that you need to validate your code, because this bit is invalid:

<p><span class="author-posts"></p>

<p></span>
<span class="author-regdate"></p>

<p></span></p>

Sorry that seems to be a problem with the cut and paste and the code parser. I've attached my node-forum.tpl.php file. I see this site uses drupal too so i'm really hoping someone can see what my issue is here.

I'm really starting to hate Internet Explorer Smile

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

How about a link? I don't

How about a link?

I don't know what belongs to which or where.

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.

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

Heres a typical internet

Heres a typical internet explorer page output (attached)

The div called pictue is beating floated to the right and works as it should in firefox and opera but Internet explorer seems to be treating it as a block ? Sorry my css skills are not perfect.

AttachmentSize
example.html.txt 7.66 KB
desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

kk5st wrote:How about a

kk5st wrote:
How about a link?

I don't know what belongs to which or where.

cheers,

gary

Thanks for replying gary and i appreciate you guys trying to help here.

You can view the website here
http://82.16.165.102

Check out the body of messages in the forums in both internet explorer and firefox if you can. Firefox is how it should look but IE has me stumped and its driving me insane Smile

Any help and advice you can give would be greatly appreciated.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE encloses floats. Have a

IE encloses floats.
Have a look here to see if you can sort things out :
http://www.satzansatz.de/cssd/acidicfloat.html

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

DanA wrote:IE encloses

DanA wrote:
IE encloses floats.
Have a look here to see if you can sort things out :
http://www.satzansatz.de/cssd/acidicfloat.html

Mmmm this certainly looks likely the cause. How would i apply that fix then ?

Put overflow: hidden in the picture div ?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

You may wait for a better

You may wait for a better answer.
I'd give hasLayout to .comment-left by adding height:1%; to improve things a little.

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

neither of those fixes

neither of those fixes seemed to work (unless ive put them in wrong locations).

The annoying thing is that this code is the same code i use on my live site at www.porttalbotchat.co.uk and this works perfectly in both firefox and IE so i seem to think that maybe the container is at fault here.

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

DanA wrote:You may wait for

DanA wrote:
You may wait for a better answer.
I'd give hasLayout to .comment-left by adding height:1%; to improve things a little.

Mmm that was interesting. Giving .comment-left a height of 1% forced the grey box to expand up to the avatar in IE.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Having a look at the other

Having a look at the other forum, I saw that the structure is different :
display you want:
.picture
.comment-left

wrong display:
.comment-left
  .picture

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

DanA wrote:Having a look at

DanA wrote:
Having a look at the other forum, I saw that the structure is different :
display you want:
.picture
.comment-left

wrong display:
.comment-left
.picture

Yes that was me moving the picture div around to see if that would cure issues, obviously it didn't Sad Ive moved it back now.

Its times like this i seem wish i'd stuck with tables Smile

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

It seems that the inline

It seems that the inline element span .taxonomy in .comment-right is the fix in the good version unless there is a html problem (7 errors in the good version, 32 in the wrong one)

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

DanA wrote:It seems that the

DanA wrote:
It seems that the inline element span .taxonomy in .comment-right is the fix in the good version unless there is a html problem (7 errors in the good version, 32 in the wrong one)

I appreciate your help, you guys on here are fantastic.

I've taken the entire template from the live site and pasted to the test site and now taxonomy is showing up as in the live site. But this hasn't address my issues at all. I'm very confused what the problems could be.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

You should validate your

You should validate your code. IE doesn't fix the html error below (while firefox does) :

<h2>
<a href="">Afan Forest Park ... Bike Lifts.
</h2>
</a>
</br>

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

Also, in the future, please

Also, in the future, please don't cross post at other forums.

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

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

Tyssen wrote:Also, in the

Tyssen wrote:
Also, in the future, please don't cross post at other forums.

Sorry ? I haven't cross posted. This is the only subject i have started here.

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

DanA wrote:You should

DanA wrote:
You should validate your code. IE doesn't fix the html error below (while firefox does) :

<h2>
<a href="">Afan Forest Park ... Bike Lifts.
</h2>
</a>
</br>

Thanks for the tip. I've adjusted the code on that, hadn't even noticed it.

Still can't seem to get a handle on the whys this is doing this though Sad

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

Leelo the fact is that

Leelo the fact is that posting the same question to multiple forums IS considered bad netiquette, I only mention this as I noticed the reply from a sitepoint member stating that it was ok to do this as long as you didn't cross post within the same forum. He is wrong, and I'm a tad sick of seeing them support this practise as they defended someone else in this practise when I mentioned it.

This is not to say in any way that you should discontinue this thread, you're receiving some help which would be wasted if the thread dies, also it's best to remember that most forums will slow down over the weekend so one needs to be a little bit more patient awaiting replies.

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

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

Hugo wrote:Leelo the fact is

Hugo wrote:
Leelo the fact is that posting the same question to multiple forums IS considered bad netiquette, I only mention this as I noticed the reply from a sitepoint member stating that it was ok to do this as long as you didn't cross post within the same forum. He is wrong, and I'm a tad sick of seeing them support this practise as they defended someone else in this practise when I mentioned it.
Hugo.

I have to agree hugo. In honesty i was awaiting a reply at sitepoint but have had this in the past where there was never a reply. I then found your forum by chance and decided to give it a go.

The intent was never to have multiple conversations on the same topic but to seek a solution.

As i say this bug has me stumped and is not allowing me to apply this new theme to our live website. Obviously i wish to proceed with that as quicky as possible as this theme is certainly far better than our live one. Sometimes this does indeed lead to impatience and i apologise for that.

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

Wa-ay overthought

You seem to have made things awfully complex for such a simple layout. Consider that this is really all you need:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <title></title>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
        
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

p {
    font-size: 1em;
    margin: 1em 10px;
    }

.thread {
    width: 90%;
    margin: 1em auto;
    font-size: .8em;
    padding: 5px;
    border: 1px solid silver;
    }

.post {
    border: 1px solid silver;
    margin: 0 0 1em;
    }

.postheader {
    font-size: .9em;
    background-color: silver;
    border: 1px solid silver;
    color: #333;
    }

.postheader span {
    font-weight: bold;
    }

.avatar {
    position: relative;
    float: right;
    margin-right: 15px;
    margin-top: -30px;
    height: 50px;
    width: 50px;
    padding: 5px;
    border: 1px solid gray;
    display: inline; /*IE bug fix*/
    }


/*]]>*/
</style>
</head>

<body>
  <div class="thread">
    <h3><!-- or whatever appropriate level -->Thread Title</h3>

    <div class="post">
      <div class="postheader">
        <p><span>blah by someone at sometime</span><br />
        Posts-a lot<br />
        joined a while back</p>
      </div><!-- end postheader -->
      <img class="avatar"
           src="../bullseye.jpg"
           alt="bullseye" />

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
      ut nisi. Etiam id risus. Vivamus at nibh ut ligula tempor varius.
      Ut velit metus, suscipit vel, pulvinar a, feugiat nec, metus. Sed
      tempor eleifend erat. Nam in neque eu enim posuere semper.
      Maecenas posuere elit eget massa. Class aptent taciti.</p>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
      ut nisi. Etiam id risus. Vivamus at nibh ut ligula tempor varius.
      Ut velit metus, suscipit vel, pulvinar a, feugiat nec, metus. Sed
      tempor eleifend erat. Nam in neque eu enim posuere semper.
      Maecenas posuere elit eget massa. Class aptent taciti.</p>
    </div><!-- end post -->

    <div class="post">
      <div class="postheader">
        <p><span>blah by someone at sometime</span><br />
        Posts-a lot<br />
        joined a while back</p>
      </div><!-- end postheader -->
      <img class="avatar"
           src="../bullseye.jpg"
           alt="bullseye" />

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
      ut nisi. Etiam id risus. Vivamus at nibh ut ligula tempor varius.
      Ut velit metus, suscipit vel, pulvinar a, feugiat nec, metus. Sed
      tempor eleifend erat. Nam in neque eu enim posuere semper.
      Maecenas posuere elit eget massa. Class aptent taciti.</p>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam
      ut nisi. Etiam id risus. Vivamus at nibh ut ligula tempor varius.
      Ut velit metus, suscipit vel, pulvinar a, feugiat nec, metus. Sed
      tempor eleifend erat. Nam in neque eu enim posuere semper.
      Maecenas posuere elit eget massa. Class aptent taciti.</p>
    </div><!-- end post -->
  </div><!-- end thread -->
</body>
</html>

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.

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

Hi gary.

Hi gary.

The site has multiple sections and the forums are just one part. Each section has elements and this is drupal so nodes, blogs, events and comments etc are themed with css also. So the code you posted is fine on a static site but not on a libe site run entirely by php i'm afraid. I wish it really was that simple.

EDIT: I may have been premature here gary as your divs in the css may be exactly what i need. I'll try and implement them tommorrow morning and see if this works.

Thanks for submitting.

desm0n
desm0n's picture
Offline
Regular
UK
Last seen: 15 years 48 weeks ago
UK
Joined: 2006-08-05
Posts: 15
Points: 0

It looks like ive fixed it

It looks like ive fixed it guys.

What i did was remove all hard coded widths and put a single width into the body statement, This is how i added it.

width:760px;
margin-right: auto;
margin-left: auto;

Now everything seems to be functing much better apart from a degrading box in IE on the frontpage (the grey one). I'll try and get to that next but its weird as it seems to do with the hover on the title of the box. When i move my mouse over it the box content degrades or shows.

Anyway i wish to thank everyone for their help and hopefully thats the worse behind me.