I was wondering if anyone was familiar with CSS.

I’ve just spent a few days writing all the code for my blog and have only one little box that is refusing to do as it’s told!

http://www.mattclaridge.com/

The box around the time/date on the right hasn’t gone transparent, unlike the box around the title on the left which has.

Anyone got any ideas/suggestions?

You’ve used a class called “highlight2” (.highlight2) to surround the date and a div id called “surround” (div#surround) around the title. Here is the class and id from your css file:

I think if you add the last 3 lines from div#surround to .highlight2, it should fix the problem. So, try changing highlight2 to the following:

Hopefully that will solve the problem.

Just tried it, didn’t work :oops:

let me try and I’ll get back…

Rahul:
Yeah I’d tried some combinations like that already.
I’ve had word from someone else that it does go transparent in Firefox but not IE.  I guess it’s a standards thing…

I can’t get it to work on IE and that’s the only browser I’ve installed on my machine. I also tried moving the 3 lines to div#navigation and reduced the opacity to 45, .45 and .45 respectively. So, while it does make the background of the date section partially opaque, it also does the same to all elements on the right hand side and also messes up the text a bit.

Yeah best not to fiddle with these things too much sometimes!

Welcome to another exiting episode of Why the Fuck Does IE CSS Do THAT???

IE’s opacity filter seems to cascade unstoppably unless you use position:relative in a containing element. Luckily, you don’t use any positioning in DIV#navigation, so just remove the POSITION:relative attribute and it should work the way you want in IE.

The bigger problem that I noticed in the page is that your snowflakes are incorrect. Snowflakes should have 6 sides . This is very disturbing and unnatural and should be fixed immediately. :?

Drachen you have saved the day

CSS is something I’ve taught myself so I tend to just keep trying things until they work.  I really should try and learn in properly so I understand what is going on in there!

As for the snowflake..

I have no excuses.  I borrowed the original image from somewhere and although I spent a while making it into a repeating walpaper image I didn’t spot its extra two sides.  If if wasn’t such an effort to remake it I’d do it right away.  As it is I was planning on changing it at the weekend anyways so I’ll just have to promise to fix it before next christmas :oops:

Ok, run into another issue.

This time I can get it to work on a basic test page, but not on my proper site so I’m guessing one of my style/div elements is messing it up.

http://www.mattclaridge.com/blog/post.php?y=2005&m=112&d=108

If you look at the comment section at the bottom, the white square represents an avatar for the user.  As you can plainly see, although it is contained within the ‘highlight1’ div, the div is not expanding around the image.

Here is the test page I got it to work on
http://www.mattclaridge.com/wrong.php

Thanks in advance   8)

It’s not contained within the div….it’s img tag appears before the start of the div:

<div class=‘highlight1’>

Put it within the div and it should fix the problem.
(edit: doesn’t work :cry: )

You might want to replace spaces with _ for web stuff. It might create problems at times.

Hmm that’s strange.  My code has it inside the DIV but obviously when it ran the code it came out.

I’ve changed it so that it now appears inside the div, but it’s not made any difference :(

It’s always with things like this that I wonder why I bother! 

If you remove the float: right attribute from the users class it does put the entire image inside that frame but it places it above the text making that div much larger. I tried text-align: right (I believe it’s supposed to work for images as well) but that too didn’t work.

Never mind, Drachen will post a solution soon for you

I always have that feeling of just stumbling around in the dark when it comes to things like this.

It just annoys me more knowing that I can make it work on the simple page so I know I have the code right.  It’s elsewhere that is the problem!

wooooo

I managed to fix it.

I bit by bit added complexity to my working test page, until it broke.  Turns out it was the parent DIV.
So I tried adding/taking bits from the the style sheet and it turns out that it requires a height or width to be specified…

Still none the wiser!

[quote author=“Mighty Matt”]wooooo

I managed to fix it.

Just for fun, look at your page in Firefox. (same in Opera and Safari) You have the height expressed as percentage, which doesn’t make a lot of sense when the parent container doesn’t have a height. Also remember that the dynamics of the <div> will change when the text becomes taller than the image. What you actually want is min-height. Unfortunately IE doesn’t support this attribute. To make things worse, the IE version of min-height is cleverly disguised as “height”, which means something different on Firefox, Opera, et al. Read this page for more info and a nasty solution. min-height:100px should be about what you want.

Additionally, you should add style=“margin:0px” to the tag containing “I do quite like it”. If the comment text is ever taller than the image, the tag margin at the bottom will make a big, ugly-looking space right below the text in addition to the padding you’ve already given the <div>.

This is the sort of thing that makes designers prefer *gulp* Flash.