|
CSS - Setting Properties For Elements With Ids Starting With _
Greetings,
I will preface this by saying that I know this is very poor design but I have been given the mandate from above and must obey... Our web application has many elements that are generated dynamically by the server. Each of these dynamic elements is rendered with an ID attribute whose value is also generated by the server. So there may be 3 form fields that are rendered as such: html4strict Code: Original - html4strict Code <div id="_ctl0_mContentPlaceHolder_Masterfield24" class="cCustomField"> <input type="text" id="someId" /> </div> <div id="_ctl0_mContentPlaceHolder_Masterfield25" class="cCustomField"> <input type="text" id="someOtherId" /> </div> <div id="_ctl0_mContentPlaceHolder_Masterfield26" class="cCustomField"> <input type="text" id="lastId" /> </div>
At design time, all 3 of these fields were intended to display identically/consistently. For this reason using class="cCustomField" was sufficient. Now a bigger customer is demanding that each field have a different look. We do not have the time for a new build of the application so we are limited to making changes to the CSS file only. Under normal circumstances, to change the background color of the text input's container, I would do something like this: Code: #_ctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
The problem here is that the value of the ID attribute for that element begins with an underscore and is thus ignored (by IE) in the CSS. I tried escaping the underscore in the CSS with Code: #\_ctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
and Code: #\5fctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
to no avail. Can anyone think of any other approaches I may take to modify an element's CSS properties, via an external stylesheet, when that element's ID is not a valid CSS selector? Similar TutorialsI've done a lot of reading to recently learn css, but this one stumps me: I have put the one background image in the center of the page so that it looks better than being crammed in the upper left, and to keep a nice layout regardless of screen resolution. so now i want to add a text element that fits into the right place relative to the background, not the page. can i set a point (such as top-center) that all margins will be based on, besides the top and left of the browser page? the non css version of the page (with lots of tables) is at www.stipepainting.com. looking at that might clarify my question a bit. thx in advance Hi does anybody know how to set a tables properties and also give it a class name in an external css so that when i import it i only have to state the class name, instead of all of its properties. Properties such as border color, background color, cell spacing etc Cheers for the help peeps Andy I've seen where the "primary" font and size are set in the body tag, and in various sub-tags, the size and other characteristics such as line height and color are then set. As to size, in the case I describe, I've seen it expressed as a percentage. Is this how it's done, "best practice"? I've seen it on a number of high-profile sites, specifically the NYT site. Example: Code:
body {
font-family: Georgia, Times, serif;
font-size: 12pt;
}
#main {
font-size: 80%;
color: #330;
line-height: 1.5em;
}
Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Yeah so I am trying to get the main structure of a site set up and I am struggling mightily with the CSS. I'm simply trying to layout the page with: four divisions: 3 vertical and one horizontal There is a 10px space between top bottom left and right. My problem at the moment is fitting the horizontal division correctly... Here is the css... all divs are nested inside a wrapper div... Code: @CHARSET "UTF-8";
.wrapper{
position: relative;
float: lt;
left: 0px;
width: 100%
margin-bottom: 10px;
padding-right:0px;
margin-right:0px;
background-color: #221526;
}
.left1{
position: relative;
float: left;
left: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30
}
.left2{
position: relative;
float: left;
left: 1px;
width: 80%;
height: 415px;
background-color: #2C1D30
}
.right{
position: relative;
float: right;
right: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30;}
.bottom1{
position: relative;
float:none;
top:415px;
left:10px;
background-color:#2c1d30;
width: 1375px;
right: 10px;
height: 140px;
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #221526
And if I'm approaching the coding in unadvisable ways (using % for example) please let me know... Thanks for the help. I put a fairly large image and centered it using. Code: background: #484747 url(img/main.png) fixed; background-repeat: no-repeat; background-position: center; That put it exactly in the center in all browsers (that I have). So working great so far. I then want to load a button on top of that image (like just a button) that says "Enter" So I make a button and I go through everything until I choose absolute and giving it percents to be exactly where I want it. I refresh the page and boom its there, I move the webbrowser height, use a different browser and its broken badly. What do people recommend using? Like relative and padding or what? Since what I'm using right now only works for my setup. Hello all, I am dynamicly creating a table with the following structu Code:
<table id="plate_header">
<tr>
<th><a class="header_link" href="link">Header 1<img src="arrow"></a></th>
<th><a class="header_link" href="link">Header 2</a></th>
<th><a class="header_link" href="link">Header 3</a></th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
with the following CSS: Code:
table {
padding: 1em;
border: 1px solid #dddddd;
} /* end table */
.cell { border: 1px solid #dddddd; }
td { padding: 1em; }
th {
background: #206296;
padding: 0 1em;
font-weight: bold;
color: #ffffff;
}
a:link.header_link,
a:hover.header_link,
a:active.header_link,
a:visited.header_link { color: #ffffff; }
#plate_table td { vertical-align: top; }
The problem is in some cases, the <th> is the largest item in that column. So whenever the arrow image appears with it, it will be placed on a new line. How can I force it to be on the same line as the text? 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; 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 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 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... 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"> </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. 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 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> ? 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. 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 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 have a loop in PHP that runs through sets of data and assigns positioning based on its place in the loop. For some reason the styles for position aren't being applied. Any ideas what i'm doing wrong? Code: <html>
<head>
<style>
#wrapper {width:100%; height:100%;}
#box {background-color:gray; width:100px;}
</style>
<body>
<div id=wrapper>
<div style="postion:absolute; left:50px; top:100px" id=box>AA</div>
<div style="postion:absolute; left:100px; top:100px" id=box>BB</div>
<div style="postion:absolute; left:150px; top:100px" id=box>CC</div>
</div>
Hi, I've got a simple page that includes a total of 15 of these: Code: <FORM name="DropdownIndex" style="margin:0"> <SELECT name="URL" width="500" text="black" onChange="if(options[selectedIndex].value) window.location.href=(options[selectedIndex].value)"> <OPTION value=""></OPTION> <OPTION value=""></OPTION> </SELECT></FORM> (Each one is inside it's own single-celled table, all of which are nested inside other tables.) In the document's <head></head> I have Code:
<style type="text/css">
select {width:500px;color:#00ff00;background-color:#000000;font-size:12pt;font-family:Gill Sans MT,Verdana;}
</style>
which controls all the form-selects on the page. How do I write things so that I can assign different properties to groups of forms, without having to insert the properties on each and every form-select? Hope I'm being clear, Thanks, Ez |
|||||||