|
CSS - Is One Css File Shared By Multiple Domains Possible In Ie?
I've managed to do this successfully in Firefox and Opera, but can't get it to work in IE. Privacy/security settings are low as possible. Any suggestions?
Thanks Similar TutorialsHi 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! 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 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. 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 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! Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? Hi all, I have several CSS files to look after different browsers, but I use javascript to match the IE css with IE browsers, etc. Can you only have one CSS file that looks after ALL browsers? So that if the user doesn't have javascript it's not a problem? I've heard of css hacks and css filters being used but I'm not all that familiar. Ben Is it possible to use CSS to "call" multiple PHP scripts and display them on one page? I want to display several different RSS feeds on a page. I have tried using plain tables, but I get an error: "Cannot redeclare startelement() (previously declared........." I put the script in a table he http://rottweilerconnection.com/test1.php This is the RSS feed (script) without the table: http://rottweilerconnection.com/test11.php And here is the script itself http://rottweilerconnection.com/test11.zip 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 does anyone know of a good, non-outdated method for installing and /or using both IE6 and IE7 on one machine (windows xp)? right now I have IE6 installed because it is the most different from FF3 (my true love), but I can't test sites on IE7. and I know (well, assume) that if I just install IE7, I can't switch back. Hello, I am creating a message to display on my web sites. The HTML markup is as follows: <div class="Error"> <h3> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon" style="border-width: 0px;"> <span>Header</span> </h3> <p>Description</p> </div> And the CSS: div.Error { background-color: #FFD9D9; border: solid 1px #FF9595; padding: 0.4em; position: relative; min-height: 1.25em; width: 120px; } div.Error h3 {} div.Error h3 img {vertical-align: middle;} div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva, sans-serif;} div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-serif; I have 3 types of messages: Warning, Error and Success. The only difference between the CSS of each message is the colors properties. Should I use a class named Message to define all common properties and then 3 other classes: Error, Warning and success to define the color properties: <div class="Message Error"> Or should I use three different classes? How is this usually done? Any other advice on how I am building my message is welcome to. Thanks, Miguel I know that there have been a few posts on this in the past but none seem to specifically cover what I am after. I am currently creating a CMS for a few sites that I run. Now don't get me wrong this is nothing flashy, it's just a personal project, however, when designing pages I can get everything to display in FF, Opera and IE perfectly well, however, as I add new elementes to the page things seem to get a little.. out of place. My pages always display perfectly well in FF and Opera, however, IE 6 & IE 7 usually have small problems to do with margins and such, nothing life changing but I am very critical of my own work. My question is whether or not I should create seperate style sheets for IE6 & IE7 that overwrite certain bits of the CSS that IE doesnt like and replace it with code that works well in IE, whilst hiding it from other browsers. I would also be interested if people have other suggestions with regard to this as I am always up for learning new skills and ways of doing things. Thanks for reading! Regards, Matt. 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> Hi, i need to delvelop something like "SomeName X". Currently i am doing with DIV(1 DIV for 'SomeName' and 1 DIV for 'X' and finally float-left to another DIV). Since these names(like "Somename1 X",'Somename2 X"...) are populated in the div container, when it reaches the right end of the container, "X" alone getting wrapped to the next line. But it has to be along with 'SomeName' always. As other forums says, I tried with table but it didn't work since the final div container is fixed and i get multiple names with variant length. I tried clear:both, float left - it too didn't work. I have seen like the one in facebook - compose page. I would like to know how to implement this. Any help appreciated. Thanks in advance. Based on CSS, on a static XHTML-written site, can multiple languages be used? And can they be user-switchable? Thanks, Chris http://www.brendanclements.com/UPS/ Code:
@charset "utf-8";
/* CSS Document */
body{
background-color:#000;
text-align:center;
min-width:800px;
background-image:url(images/lft.jpg), url(images/rht.jpg);
background-repeat:repeat-y, repeat-y;
background-position:top left, top right;
}
table{
background-color:#000;
border:none;
border-style:none;
min-width:800px;
width:75%;
margin-left:auto;
margin-right:auto;
}
td{
color:#FFF;
border:none;
border-style:none;
text-align:center;
}
WHY WHY WHY WHY! lol, this is very frustrating. I have 2 background images, one for the left side to repeat down and a mirrored one on the right. I have done my research, I have tried multiple ways posted online to layer background images to have more than one. But it won't work. I have verified the background url's which work when there is only one, but not when I try to have two. I know I could get a workaround with a div but I want to know why this is not working and don't want to make my code more sloppy. Thank you. My website works in safari, but not in IE or firefox. My question is, how do I get my links to match up in the other browsers? |
|||||||