CSS - Using Multiple Ies (6 And 7) Together On One Machine

Hello!

I'm gonna try to keep this as simple as I can, I don't know css at all...

I have a site where I'm gonna feature trailers in Quicktime and I'm planning on using a script called clearbox to open these trailers. Go to my site and view the trailers to see what clearbox is.

Now, to my problem. I'm gonna have 20 trailers per page, but all the trailers are not the same size. If you check out the trailers on my site you can see that the close button for the Pirates 2 trailer is a bit off, as to the National Treasure trailer where the button is where it's supposed to be. That's because the trailers are in different sizes, and the boxes/windows also are in different sizes. To change the position of the close button, I have to edit the clearbox.css file.

What I'm getting at is that I must have one clearbox.css file for each trailer/window and that every clearbox.css file needs an id or something so I can call it from within the html/php file.

Here's the code for clearbox as I have right now on my site. First up is the code I have within the head section...

Code:

<link href="piratesofthecaribbean2/css_trailer/clearbox.css" rel="stylesheet" type="text/css" />
<script src="piratesofthecaribbean2/js/clearbox.js" type="text/javascript"></script>
<link href="nationaltreasure/css_trailer/clearbox.css" rel="stylesheet" type="text/css" />
<script src="nationaltreasure/js/clearbox.js" type="text/javascript"></script>

And here are the links for the "View trailer"-buttons...

Code:

<a href="piratesofthecaribbean2/trailer.php" rel="clearbox(668,,330,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

Code:

<a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

Clearly, this setting doesn't work.

What I wanna know is if I can have multiple clearbox.css files with different settings (to suit each trailer/window) and if I can call these clearbox.css files in this link:

Code:

<a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

I hope someone understands what I want, I really want this to work!

Thanks in advance!

I would like to have multiple id and all using hover link for all

#test1, #test2, #test3, #test4 a:hover{
color:#0F0;
}

this doesn't work. NOT sure why??
thanks

Ok.

So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this:

http://www.leeksoftware.co.uk

And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is:

Code:

    div.logo
    {
	height: 70px;
	width: 618px;
	background-color: #476cD9;
	float: left;
    }

    div.home
    {
	height: 70px;
	width: 100px;
	background-color: #E29942;
	margin-left: 619px;
	float: left;
    }

    div.soft
    {
	height: 70px;
	width: 100px;
	background-color: #CC3333;
	margin-left: 719px;
    }

    div.tuto
    {
	height: 70px;
	width: 100px;
	background-color: #006666;
	margin-left: 819px;
    }

    div.cont
    {
	height: 70px;
	width: 100px;
	background-color: #254D78;
	margin-left: 919px;
    }

I tired adding float left to all of them but that made them go diagonal. Can any one help?

Thanks
Matt

Based on CSS, on a static XHTML-written site, can multiple languages be used? And can they be user-switchable?

Thanks,

Chris

this code inherits properly in FF, but not in IE. any workarounds?

Code:

.red
  {
    background:red;
  }

.yellow
  {
    background:yellow;
  }

.red.yellow
  {
    background:purple;
  }

Code:

<table border=1>
<tr class="red"><td>red</td></tr>
<tr class="yellow"><td>yellow</td></tr>
<tr class="red yellow"><td>red yellow</td></tr>
</table>