CSS - Using Js To Read/get/assign Non-stated/automatic Css Properties

I see that document.getElementById('foo').style.width is a valid property, but yet I see documentation which accesses the style's properties as an array element, example: document.getElementById('foo').style['width']. Are both equivalent? What would be the property equivalent for 'text-align'??? document.getElementById('foo').style.textAlign?? Where can I find the docs for this?

I'm trying to write a function that will resize a few <div>s on my page when it loads. Before I got too far, I wrote a simple function to alert the current height of each <div> to be resized. It looks like this:

Code:

function resizeDivs()
{

	var saidDivs = new Array("cBodyMid", "cLeftPane", "cLeftPanelData", "cRightPaneData");
	for(i=0;i<saidDivs.length;i++)
	{
		
		var el = document.getElementById(saidDivs[i]);
		curElHeight = el.style.height;
		alert(curElHeight);
	}
}

All I get is 4 empty alert boxes.

All of the styles are defined in an external style sheet a la:

Code:

#myDiv {
     height: 25px;
}

and they are all assigned to <div> tags a la:

Code:

<div id="myDiv">here's my div</div>

However, if I create a div with the height specified as an inline style, it works.

I've got to be missing something really simple here. Anyone know how to get that height property?

You know how you can modify Mozilla css with properties like

css Code:
Original - css Code -moz-border-radius: 4px 4px 4px 4px; -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent;

  

 -moz-border-radius: 4px 4px 4px 4px;


 -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent;


 -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent;


 -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent;


 -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent; 

Is it possible to get something like this to work with IE? See on F/F the box is rounded.. but on IE its just a complete square ( duh that's because I'm modding Mozilla css properties ).

I have a unique problem:

I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:

<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>

which works, but only in firefox, and not IE7, or Google Chrome.

I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should

How would I go about making the width of a <div> element as big as it needs to be depending on the amount of text.

I've got, div.note {width: auto;} but it doesn't seem to be doing anything.

(The site in question)

Sorry for being so dumb

Hi!

Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality.

Regards
Bjorn

I was wondering if there was a way with CSS, to create a box, where the text within automatically scrolls.

For example, I have a box that has a date, and then the latest news. Say that there are about 20 lines worth of text, but the box itself, is only 10, I wanted the text to scroll from bottom to top automatically. I know I could probably do something like this in flash, and I'm guessing javascript as well. But don't want to use javascript.

Any help would be appreciated. Thanks.

I noticed that if you place a border around an object with all sides having different colors, that a diagonal appears in each corner where the two colors meet.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>My site</title>
    <style type="text/css">
      #my_id { 
        width: 100px;
        height: 100px;
        border-top: 10px solid red;
        border-bottom: 10px solid green;
        border-left: 10px solid blue;
        border-right: 10px solid black;
    </style>
  </head>
  <body>
    <div id="my_id">&nbsp;</div>
  </body>
</html>

Is there anyway to override this so that for example the bottom border extends from left to right edge at a height of 10px (using the above example) instead of gradually decreasing the height as it nears the edge?

Edited to add: I know that I could achieve this effect by nesting divs but I was curious as if there was a simpler solution.

I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV.

Code:

<div id="horzmenu">
<ul id="horznavmenu">
  <li><a href='rooms.php'>Accomodations</a></li>
  <li class='hot'>Location & Info		 
    <ul>
	<li><a href='/otherprops.php'>Other Properties</a></li>
	<li><a href='/news.php'>News & Photos</a></li>
    </ul>
  </li>
  <li><a href='booking.php'>Booking</a></li>
</ul>
</div> 

So if I were to wish to style this new UL and its LI's do I refer to:
The parent UL as in: #horznavmenu ul ul {
The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{

Or? Thanks in advance for any feedback or suggested reading...

Is it necessary to declare properties like :


border-bottom:none;

text-transform:none;

My question is why would I declare them (above) ? Is it not assumed that unless I need something like text-transform:lowercase; I should not declare text-transform:none; ...this just add up more unnecessary lines of code.

What are the default properties of selectors? if not declared would it be safe to asumme that those defaul to 0, none, etc depending of the selectors?

tahnks

Hey all, I'm developing an app for a client, and I've implemented quite a bit of it already, and it includes CSS.

Code:

<style>
 td {
 	 font-family: Arial, Helvetica, sans-serif;
	 font-size: 11px;
	 color: #000000;
	 text-decoration: none; 
	 } 
</style>

As you all might know, this changes all <td> tags into this particular style. Is there a class that I can include that contains NO properties (default)? I'm not even sure if it's possible.

I just don't want to go back and add class tags everywhere.

Guys

I have the following issue regarding links and colours:

The colours of links are set thus:

a:link : White;
a:hover : Blue;
a:visited : White;

The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...?

I want the iframe to have a horizontal scrollbar but no vertical scrollbar. My code I've been attempting looks like this:

Code:

<iframe scrolling="auto" src="quicklinks.php" width="100%" height="200" name="helpContent" style="overflow-x: visible; overflow-y: hidden"></iframe>

Is this possible? If so, is it compatible with all browsers?

I know many of you are going to say, well you have it on auto and if you don't want it to scroll vertically, don't have a page in the iframe that is too high in height.

However the page has dynamic thing submitted to it and there might be the possibility that a user submits a name too long and I don't want to deal with only showing a certain length of the string.

I have a style for links that I use in my main navigation menu, like so:

Code:

a.main_nav
{
     color:#FFFFFF;
     font-size:12px;
}
a.main_nav:link{  text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }

How can I wrap all the links in a <div> and not have to specify the class on each <a> ?

Hi all

I'm stumbling over the oddities of IE's hasLayout again and again, and often I can fix it using the properties overflow:auto and display:inline-block:

Code:

div#container {
  overflow: hidden; /* For clearing floating inner elements */
  display: inline-block; /* For regarding margins of inner elements etc. */
}

(Of course I only assign the display value to IE only.)

As far as I could see so far, assigning these properties does not affect the expected behavior of the element in any negative way.

Now I thought: why not assign them to all div elements as default?

Code:

div {
  overflow: auto;
  display: inline-table;
}

I didn't test this yet, but as long as the whole website's other CSS and the whole XHTML structure are clean (speak: the elements are only used for purposes they are intended to be used), this shouldn't have any negative consequences, should it?

Thanks for your opinion,
Josh