|
CSS - Trouble With Stylesheets In Ie
I'm trying to manipulate a stylesheet to make elements appear and disappear on an HTML form. The code I've adapted from various sources works fine on non-IE browsers and sort of works on IE but there's something I don't understand and can't get to work.
My page starts: Code:
<style ID=\"xyzzy\" TYPE=\"text/css\">
</style>
<SCRIPT TYPE=\"text/javascript\">
<!--
function setClassAttr(c, a, v) {
var agt=navigator.userAgent.toLowerCase();
var e;
// Style sheet management depends on browser.
// See URL or URL
if (agt.indexOf('gecko') != -1) {
e=document.getElementById('xyzzy');
e.sheet.insertRule(c + ' { ' + a + ': ' + v + '}',
e.sheet.cssRules.length)
}
else if ( (parseInt(navigator.appVersion)>=4)
&& (agt.indexOf('msie') != -1) ) {
document.styleSheets['xyzzy'].addRule(c, a+':'+v);
}
}
...
And I use this to set "display" to "block" or "none" for subordinate elements when a checkbox is checked or unchecked. As I said, this works for non-IE browsers but in IE, I click the first checkbox and nothing appears to happen. If I then click the background of the document, the elements appear. I've searched the web and MSDN for some way of flushing the stylesheet change or generating a Click from JavaScript and I can't find anything. I tried disabling and reabling the stylesheet and it didn't help. I tried moveBy(0,0) and it didn't help. Is this a bug in IE or in my understanding of what should happen? If the former, how can I work around it? Can I generate a Click from JavaScript somehow? Redraw the window somehow? If the latter, what am I missing? TIA. Similar TutorialsHello. I have 3 stylesheets included on a page. The first one is for media, the second is for printing and the third I just added for printing an alternate page. Since I added the 3rd sheet my second sheet no longer works. Why is that?? <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> <link rel='alternate' media='print' href="null" id='printstyle'> The third sheet should ONLY get called by this... <script type="text/javascript"> function setPrintPage(prnThis){ document.getElementById('printstyle').href = prnThis; window.print(); } </script> Is there a way to check if the user is using a mac, and if so, tell it to use a different stylesheet? Is there coding that can be added into a stylesheet so that when a <div> tag is used in an HTML document, it will display HTML information (tables, images, hyperlinked text, centering, etc.) from the stylesheet in the HTML document that is linked to that stylesheet? Meaning: If I wanted a single-row table, divided into two columns: one column with plain text, another with hyperlinked text to pages throughout my website (including pages in subfolders) to appear on every page that has a link to the stylesheet. This way, I could have the same table, text, and hyperlinks appear on any page that has the DIV tag placed (ie: <div id="idlabel"></div>) I wanted this so that if I need to update those links, I can do it globally by changing the stylesheet, and not having to go to each page individually. I don't know how to code, nor have a server that can use, ASP or PHP. Can CSS be used to "dynamically" update webpages, just as you can change fonts, spans, indents, text/image placement, etc. globally by changing the stylesheet? Also, if the HTML is possible, can a graphical, Flash, or JavaScript/Form drop-down menu also be handled in the same way? alright just a quickie question, can you include css stylesheets that are outside of the web root folder? cuz i just switched all my include files for a project im working on to outside the webroot, and now my css wont include and yes i changed the path...... might just be a coding error on my part i dont know I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS I'm writing an application that uses stylesheets to display certain items. The user can alter the positioning etc. of these items (which then rewrites the stylesheet for future use), and then reloads the page. Unfortunately the old coordinates are still apllied to the elements in question until I manually hit the browser's reload button, then the new values are used. I'm guessing the style is being cached somewhere? If so can anyone advise how to stop this? thanks p.s. Its just a basic refresh that sorts it out, not a *hard* refresh. ================== I've come up with a fix of sorts. If I write the style out dynamically within the div itself each time then my problem is solved. I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css). Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file? Am I being too persnickety about the look of my code and just use multiple <link>s? Hi all, I know this info is out there, but I'm having trouble getting a precise answer. I am a web software developer, and I would like to include one stylesheet that points to x number of other stylesheets. My goal is to give the designers full control over the styles and I won't have to re-cache pages when they want to import another css file. Will it work to simply link to one main stylesheet, such as @import url('http://www.somewhere.com/css/main.css');, that includes additional @import statements? Thanks! I would like to know if anyone has done something like this - I need to have the look and feel of a site totally configurable through a web interface. All data is going to be stored in a database and I would like to know whether I can autogenerate or update a style sheet based on data from a database. Has anyone done this? Or is this the wrong approach to take in such a case? I also have several clients using the same site, each needing to have their own configurations. I would like to avoid having to have a separate style sheet for each client if possible. Can the properties in a stylesheet be set dynamically on a session per session basis? i thought i was pretty well versed in css, but i have come across an annoying problem. on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible. the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s). i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css . i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css . the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont. i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it. my question is, how do i solve this problem without using !important ? my site: prototism.co.cc full.css css Code: Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }
@import url("background.css");
bw.css css Code: Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }
@import url("spacing.css");
OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at: http://www.getbrightstar.com/v2/ And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing. Thanks, -Daniel This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; } TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; } A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; } A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; } A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; } A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; } #poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px} #poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold } select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; } .pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline} .pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none} body { SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA; ; background-color: D8E0E9 } FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; } TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )} And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work Hi, I got the menu the working the way I want, except I can't get the last two on the menu to be bold becasue they are like Multimodal Corridor Planning, a category with articles under it. Here is the link: http://www.greatstreetsstlouis.net/...d=32&Itemid=204 I just need to get Site Planning to be bold, and then Choices & Guidelines. I have to use CSS as well, becasue the menu is done through Joomla and is dynamic. I need those last two titles to behave the same way when clicked on like Multimodal Corridor Planning does. Thank you. Here is the code: Code: .extmenu .modulebdr div div div #mainlevel {
font:.8em/14px Verdana,sans-serif;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.mainlevel_current {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_active {
background: url(../images/bullet_arrow_down.gif) left center no-repeat;
padding-left:11px;
color:#2E69BF;
font-weight:bold;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel_current {
background: url(../images/bullet_arrow_right.gif) left center no-repeat;
padding-left:9px;
color:#000000;
}
.extmenu .modulebdr div div div #mainlevel li a.sublevel {
padding-left:9px;
}
.extmenu .modulebdr div div div #mainlevel .sublevel_active ul li a.sublevel{
color:#666666;
margin-left:14px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active {
padding:0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_active {
margin-left:11px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_active .sublevel_current {
margin-left:10px;
}
.extmenu .modulebdr div div div ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel_current {
margin-left:8px;
}
.extmenu .modulebdr div div div #mainlevel li .sublevel {
margin-left:7px;
}
Code:
<div class="message">
<table>
<tr>
<td>Hello World</td>
</tr>
</table>
</div>
Code:
div.message
{
border: 1px solid #000000;
}
For some reason that does not produce a border around the div. Is there a reason why not? Hey guys I have a page I am working on and I am running into a little problem. I created a navigation bar using css and now I want to link up the navigation bar. The problem is when I link it it turns it to a blue hyperlink. I know I can change the css to get rid of that, but I also want part of the page to look like and be set up like a regular blue hyperlink. How can I get around this. Here is the page I am working on (URL address blocked: See forum rules) I want the positive and negative tests to be normal hyperlinks but I want the nav bar to stay in the css I set up thanks for the help Sean Hi, I am having some trouble laying out this page: http://209.123.229.141/racing_profile.php?user=2 (Username: devshed Password: css) I want the 'Latest Media' Box positioned in the middle of the left hand side, the 'Latest Replays' box in the middle of the right hand side and the 'Latest Events' box below both. I have floated them to the left and right and cleared the floats for the 'latest events' div, but the media and replays div won't floar in the "middle" of each side. The CSS for the page is: http://209.123.229.141/css/racing_profile.css Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="testcss.css" /> </head> <body> <div id="wall2"> <a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) --> </div> </body> </html> And the css.... Quote: body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;} a{color:blue; border:0; padding-bottom:0px; padding-top:0px;} a:hover{color:#DE7008;} img { border:0; padding-bottom:0px; padding-top:0px;} div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; } img#unsold {border:0px; padding:0px; margin:0px;} The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row. Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers. The code is XHTML and CSS validated. Gareth. ok im having some trouble with the layout of some stuff. i have my webpage set up so i have a <div> floating to the left and a content area to the right. in my "content" area, i have an img where i used "float:left;" so i can have text to the right of it. but now after that, i have <br clear='left' />. the problem is that when i put that break in there, it clears the float for the first <div>. is there anyway around this? here is some sample code. Code:
<html>
<head>
<style type="text/css">
div{
float:left;
width:150px;
color:red;}
</style>
</head>
<body>
<div>
<p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<img scr='fake.jpg'>
<p>text</p>
<br clear='left' />
<p>text under thats not susppose to clear float to the left</p>
</body>
</html>
|
|||||||