I don't have any skillz

Okay here is what I'm doing. So far, so good, kinda. (actually let me know if this works in IE for you, cos it doesn't always for me)

I want to make a white text box under the main zombie image with the same 15px border.

Here's my left hand CSS

#left {
width:480px;
height:auto !important;
height:480px;
min-height:480px;
background:#000000;
float:left;
}

#left img {
margin:15px;
}

#text {
width:480px
height:auto !important;
height:100px
min-height:100px
background:#ffffff
float:left;
margin:15px

And the corresponding HTML

<div id="left">
<img src="images/zombie_450x338.jpg" width="450" height="338" alt="Full View" />


<div id="text">
<p>Here be text!</p>
</div>
</div>

As I'm lacking in mad skillz I don't know what I'm doing wrong, any help appreciated.

 

You need an ending semicolon on all of your css lines in #text and a closing bracket for #text. I can't even tell anything until you first style things in a way the browser can understand. Basically, right now, it should be ignoring all of your styles in #text

 

Which it is.

Doh!

Thanks, actually fixed it before I popped back but that was pretty much the problem. Cheers +.

 

This:

#text {
width:480px
height:auto !important;
height:100px
min-height:100px
background:#ffffff
float:left;
margin:15px

Code (markup):

Should be:

#text {
width:480px;
height:auto !important;
height:100px;
min-height:100px;
background-color:#ffffff;
float:left;
margin:15px;
}

Code (markup):

 

Should be:

#text {
width:480px;
min-height:100px;
background:#fff;
display:inline;
float:left;
margin:15px;
}

* html #text { height:100px; }

 

Does that always work? because someone had an article about the three height declarations for min-height/height and someone in the comments mentioned *html and then there was a reply where in some instance that didn't work. ???

 

As far as I know, that !important is there so that browsers that do support !important (all but MSIE6 and pre) will auto adjust the height. MSIE doesn't understand the "importance" part and ignores it.. since height:100px is AFTER the declaration for height: auto then in MSIE the height is 100 pixels. But as we all know, MSIE6 treats height as min-height, and will expand to fit content regardless if you even set the height to 1px. Modern browsers pick up the min-height of 100 pixels.. and I think that's it.

I hate using the !important trick. Just feed modern browsers the actual property which is min-height, and feed IE 100 pixels seperately, and it would be treated as min-height.

 

Why just #fff or #000? I'll go google it *

Anyway, shifted the page to here, but am now wanting to make it so when you mouse over a certain image on the right it shows up in the big left box with the matching text.

Should I be looking at implimenting a script or can I do this with various pseudo classes such as focus, active and hover?

*edit
Just short hand? I can write red as #f00 instead of #ff0000 and assuming I have a clever enough browser it knows?

 

You shouldn't need to worry what browsers support short hand hexadecimals.. I'm pretty damn sure browsers even before NN4 supported them.

 

There was a version of Mozilla Suite BEFORE firefox was a twinkle in an FLOSS fanboys eye that had problems with them... In other words in this day and age, don't worry about it.

 

Yes, you can do popups (I don't mean new windows) with CSS using :hover. Be aware of IE6's problem with hovers : )

http://mikecherim.com/experiments/css_map_pop.php

One nice exampe.

Another one by Eric Meyer:
http://meyerweb.com/eric/css/edge/popups/demo.html

Be careful with absolute positioning. But these things are fun to make. Esp for those of us without Javascript skillz : )