CSS - [help]->css At Separate File Does Not Work.

I have the following css at the top of a phpbb3 template page that works perfectly fine (phpbb3 properly assigns the {MAX_SURVEY_HEIGHT} variable to the template before it gets parsed by the browser):

Code:

<style type="text/css">
.survey_max_height {
   max-height: {MAX_SURVEY_HEIGHT}px;
   overflow: auto;
}
</style>

But now I need to move that css code to a separate style sheet that phpbb3 does not pass variables to. So my question: is there a way when you call a css element in an html page - i.e. in this example when you use <div class="survey_max_height"> in an html page - to somehow pass a parameter (in this case whatever is in {MAX_SURVEY_HEIGHT}) to the css stylesheet?

I have a form with several input and option fields, can I apply a separate background color to an individual input field possibly by name or id ?

Code:

#form1 
 INPUT, OPTION {

	background-color: #999999;
	
}

Hi all,

I'm using this code for separate CSS style sheets for screen, handheld and print.

<link rel="StyleSheet" href="css/style.css" type="text/css" media="screen" />
<link rel="StyleSheet" href="css/style_handheld.css" type="text/css" media="handheld" />
<link rel="StyleSheet" href="css/style_print.css" type="text/css" media="handheld" />

I'm trying to view these using the Firefox Developer Toolbar and 'Display CSS by media type' options, but it's not working. However, when I do a print preview or actually print the document, it does work. Can anybody tell me why this is and how I can get it working?

Cheers.

I know how to do this using Javascript, but I'm not sure if it can be done using CSS itself.
I have a bunch if div tags and some anchor tags on my page. By default, the div tags are hidden, and when I mouseover an anchor, I would like a specific div to be displayed. Again, I can do this in Javascript, but would like to see if there is a CSS-only approach to this.

Example HTML:
Code:

<div id="div1">Option1</div>
<div id="div2">Option 2</div>
<div id="div3">Option 3</div>

<a id="link1" href="somepage.html"></a>
<a id="link2" href="someotherpage.html"></a>
<a id="link3" href="someotherpageentirely.html"></a>

Example CSS:
Code:

div#div1 div#div2 div#div3 {
  display:none;
  width:50px;
  height:50px;
  background-image: url(divimage.png);
}

a#link1 a#link2 a#link3 {
  display:block;
  width:100px;
  height:100px;
  background-image: url(myimage.png);
}

a#link1:hover a#link2:hover a#link3:hover
{
  display:block;
  width:120px;
  height:120px;
  background-image: url(myotherimage.png);
}

So in this instance, when one of the anchor tags is hovered over, I would like to change the associated (link1 -> div1, link2 -> div2, link3 -> div3) div CSS to change to be something like this:

Code:

div#div1
{
  display:block;
}

I realize I've generalized these CSS definitions and on my actual page I have individual CSS definitions for each anchor and div separately as they all differ slightly.

Is there a way to do this using straight CSS or am I bound to Javascript in order to do this?

Thanks!

- skubik

Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors.

A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid.

Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures.

Here's the HTML involved:
Code:

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
  
  </div>

<div class="node">
      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
  
  </div>

<div class="node">

      
    <div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
  
  </div>

And the CSS as well....
Code:

.node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
 
}
 
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
 
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0; 

I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??).

Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well.....

Good morning

I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems.

1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them?

2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus?

3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered?

4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this?

5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu?

6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu?

Thanks immensely for your help. The menu's stylesheet is below.
/p

Code:

#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}

#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}

#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}

#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}

/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}

/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}

/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}

Hi everyone.

I have a header with a menu div inside of it with the following settings:
position: absolute
margin-left: 250px
margin-right: auto

and height...

Now, below that menu, I have a sub menu - it uses the same settings, with a bigger height of course, but it is styled completely different.

The idea is, I want the sub menu to be different for every page the user is on. The main menu may change, I.e., have an extra menu item in it for specific pages.

So, this is what I am trying to achieve...

If MAIN MENU is a longer length then SUB MENU, I would like the sub menu to be the same width. Keeping in mind that the main menu is fluid and width is not set.

Now, alternatively, if the SUB MENU is longer than the main menu, I would like the main menu to be the same length as the sub menu, again, keeping in mind that the sub menu is also fluid and will change width depending on the number of menu items.

I mean, I know I could just set some arbitrary width for both, something I am sure will be wide enough despite what is inside of each menu, but I'd really rather avoid doing that, I don't want them both to always be X width, rather, I want the width to be able to change, but both at the same time, not one or the other.

I hope that explains what I'm trying to accomplish here, if not, please feel free to ask any questions that would help you understand what I mean better.

Thank you much.

I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple:
PHP Code:
 h3 {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
p {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
a {
    text-decoration: none;
}
a:hover {
    color:#636500;
}
a:visited {
    color:#cecf9c;
}
a:link {
    color:#cecf9c;
} 





searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore.

I think it may be affected by the a:visited style, but how do I make a:hover work all the time?

Thanks for helping.

How do I get a seperate scroll bar for the text on my website?

If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct.

I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now.

Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style?

for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app.

then in my css definition i assign border color based on the user defined variable like

Code:

.table { border: solid 1pt $C1 }

when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do?

thanks,
JOhn

Hi Guys, I have a pretty specific page here, work fantastically in Firefox, but not in IE6/7 (or Safari/Opera etc ). Any ideas?! Thanks!

(URL address blocked: See forum rules)


Darren.

Im not good at all with CSS and need some help getting this to work in IE8 or older/newer versions. Works great in Firefox though.

<div style="width:90%;height:150px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border:4px solid #F4F4F4;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 15px 15px 15px;-moz-box-shadow: #B3B3B3 15px 15px 15px; box-shadow: #B3B3B3 15px 15px 15px; padding-top:2%;
padding-left:2%;">

Any help making this work in IE8 would be great.