Can't figure my CSS!

[Muzzy]

Hi Everyone.

I'm in the middle of building a new site for the lads (band) at my church using CMSMS Ver 1.0.6 and everything is going great except for the following 2 things:

1) On the gig photos page, the thumbnails are not lining up and they are breaking out of my CSS div to the left when I view the album. It's probably very simple, perhaps something to do with my CSS - but I can't see it. 
http://www.mikemuscroft.com/broken_test/index.php?page=gig-photos

2) The same thing is happening here with the contact form. 
http://www.mikemuscroft.com/broken_test/index.php?page=contact

It's the same viewed in IE 7 or Firefox. So far I've spent 3 hours pulling my hair out, but can't for the life of me figure out where I have gone wrong. Any help would be most appreciated. 

Mike.

[Anastasis]

Hi Muzzy

With your image browser you need to amend your picturelist class to have: margin-left:16pt; (or something close to 16pt). That seems to work in the test I made using Firebug in Firefox, but I cannot test it in IE but it should work.

With your form you need to add something similar to your formbuilderform class assigned to the containing table. At the moment you do not have that class defined in your CSS, so you would need to add it or include the margin-left: 16pt; as an inline style.

Hope this works and all the best with the band!

[Muzzy]

Hi Anastasis.

Thank you my friend. I did as you suggested and the thumbs display correctly now, though the album thumb is still a little wayward - needs more work.

I also defined a class for the form and the input and textarea, so these are now to my size and positioned correctly.

Thank you and bless you.
Muzzy.

[Anastasis]

Hi Muzzy

Glad that helped. The album thumbnails look fine to me in both Firefox 2 and IE7. Where does it still look wrong to you? Possibly IE6?

[Muzzy]

Where does it still look wrong to you? Possibly IE6?

Hi Anastasis.
It only looks wrong on the main albums page. There it shows the thumbnail for the album in the middle of the page, but the text appears on the left.

Not sure why?

Muzzy.

[Anastasis]

Hi Muzzy

I don't know what browser you are using but in Firefox the Charity Concert thumbnail appears to the left and the text is indented and so looks a little wrong. In other words the other way around to the way you describe it.

To correct the indented text you would need to change the line which the section which starts <p class="albumname" to a span as follows:

Code: Select all

<span class="albumname">
Charity Concert
<br/>
<span class="albumpicturecount">(17 images)</span>
<br/>
<span class="albumcomment"/>
</span>

and then in your CSS add the following line for your albumname class:

Code: Select all

margin-left: 10px;

That makes it look right for me.

[Muzzy]

Hi Anastasis.

If I alter the margin-left: to 10 px it throws my text off the page to the left, so I have left it at 30px to keep all other pages right.

I have added another album for test purposes and it sits under the other thumb, which on my own site does not happen, they sit side by side.

I looked with Firefox and as you say it looks OK, but I'm looking at it with IE 7 and the album thumbs still hang in the middle of the page... Weird.

Muzzy.

[Anastasis]

Hi Muzzy

Why does IE always make things complicated! 

Can you try the following... In your albumlist class remove

Code: Select all

float: left;

(or comment it out) and also

Code: Select all

margin-left: 30px;

and add just this line:

Code: Select all

margin:0px auto 0px 0px;

- although you may need to change the last 0px to 30px (which is margin-left).

[Muzzy]

Why does IE always make things complicated! 
and add just this line:

Code: Select all

margin:0px auto 0px 0px;

- although you may need to change the last 0px to 30px (which is margin-left).

Thanks Anastasis.
Altered the code as you suggested, but still sitting in the middle. It would seem that IE does not want to render correctly, perhaps I will just have to live with it, shame.

Thank you.
Muzzy.

[Anastasis]

IE is so frustrating.

One option would be to install a copy of Firebug Lite (see http://www.getfirebug.com/lite.html) and then we could have a look and try out changes to your IE CSS and HTML on the fly. I have Firebug installed natively in Firefox and it is just brilliant for experimenting with styles and saves bucket loads of time sometimes.

[Muzzy]

Thanks Anastasis.

I'll take a look and give it a try, can't hurt anything trying - right.

Bless you.
Muzzy.