CSS - Iframe External Style Challenge

I've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess).

Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it!

I swear I've done some searching on this but I haven't been able to find a satisfactory answer.

I have a style sheet in the root of my site with this declairation in it:
Code:

#nav
{
	float: left; 
	width: 190px; 
	height: 600px; 
	min-height: 600px; 
	margin-right: 10px; 
	background-image: url(images/gradientBg.jpg); 
	background-repeat: repeat-x;
}

The file the id="nav" is in is being included in the index.php page that's being called from the root also. So we have a structure that looks like this:
Code:

/root
  styles.css
  index.php

/includes
  nav.php

/images
  gradientBg.jpg

The stylesheet is being included like this
Code:

<link rel="stylesheet" type="text/css" href="/styles.css" />

Now for my problem...

The styles and backgrounds all show as expected in Firefox. However, in IE any of the styles that apply to files from the /include directory like nav.php are not followed at all.

I find it hard to believe that my only option is to make the styles inline but I'm not sure what else to do at this point.

Thanks for staying with me this far and for any advice.

I need to modify an external style sheet so that background images on each page can be changed. Please help

Hi All,

How can i apply style to following table? Class attribute is not working. following is the code.

function links(){
var xmlDoc=new ActiveXObject("Microsoft.xmlDOM")
xmlDoc.async="false";
xmlDoc.load("ticker.xml") ;
xmlObj=xmlDoc.documentElement;
nodes=xmlDoc.documentElement.childNodes;
document.write("<table border=1 align=left >");
for( var count = 0; count<nodes.length; count++){
document.write("<tr>");
document.write("<td>");
document.write("<a href='" + (xmlObj.childNodes(count).getAttribute('URL')) + "'>" + (nodes.item(count).text) + "</a><br>");
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
Please guide me for the same.
Thanks in advance

Hi.

In my external style sheet i have this:

Code:

body
    {
	margin-left: 100;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
    }

I am completely new at CSS and am only doing it because supposedly my tables are out of fashon!

Thanks
Matt

Hey, I'm a CSS noob, and I'm having some trouble with centering the content of my page. When I have the coding as an internal style sheet the page is centered, but when I put it in an external style sheet it looks the exact same...except for that it's left aligned. All I do is copy and paste it, but it change the layout around? Any tips?

I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy.

When I have:
body {
background: url('resources/assets/background.jpg') no-repeat bottom left;
}

in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results.

Does this just not work from an external css, or am I missing something?

Thanks y'all.

i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css...

when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css..

what shld i do to attain that?

I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example:

Currently like this
Code:

#store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}

want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}

with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet.

effectively so i can just change the other external style sheet to change the gif file and keep this one the same.

HOW? possible?

How am I supposed to make this with html/css? For the header, I will make it different color; blue, green, pink, etc. But I think the hard part is the rounded border with thin black. I've attached an sample, please help me if you can.

Ok, here's a bit of short background.

I haven't done web design or graphic design of any kind in years, and I decided a good way to get back into it would be to give my band's (Cassius) myspace page a facelift. I set up a phony copy of our own, in order not to frustrate any users on our page while I inevitably blundered through the new design.

Now, if you aren't familiar with coding on Myspace, it only allows you to edit several sections of your page, and not at all the overall code of the document itself. This means any serious changes you want to make are done very vicariously through CSS, being placed somewhere in the middle of the actual source of the page itself. Irritating, but workable.

Everything was going very well. I got frustrated several times, but always found a way to do what I wanted. That is, until I opened the page in IE (v6 and v7 later).


(URL address blocked: See forum rules)


That is the address. So far, everything appears as I want in Firefox. However, when using IE, the flash player doesn't position correctly, and there are some other minor issues as well. The flash player is the largest problem.


So my question is this....how can I persuade IE to position everything properly, while fitting within the ridiculous (im)practical constraints of the actual coding, placed by Myspace?

Thanks in advance!!

Hi,

This will be similar to Sitepoint's CSS Quizzes. If you know how to do the particular image I assign then please PM me the answer with the code to see if you figured it out

I was asked to fix this problem the other day and it took me about half an hour to work out how to do it. So lets see how bright you lot are and who can give me the solution first.

Your job is to produce this effect

http://www.devwebsites.com/temp/quiz1.PNG

Rules
Can not touch the HTML in the <body> section
No javascript or scripting of any kind
No expressions or conditional comments
Use Valid CSS
Use Valid xhtml
No hacks, no child selectors, no universal selecors, no means of offering separate code toeach browsers. Must work in IE7

If you manage to get it in IE6 then bonus points

If no one gets this then I will just post the solutions at the end of the week. Please remember to PM me the answers and not post the answer code in the thread. If you have any quiz ideas, please PM me also.

Here is the base code you must use. Edit the CSS all you like, but remember the rules

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Quiz 1</title> 
<style type="text/css"> 

</style> 
</head> 
<body>  
<div id="green"> 
<div id="yellow"></div> 
<div id="orange"></div> 
<div id="red"></div> 
<div id="blue"></div> 
<div id="indigo"></div> 
<div id="violet"></div> 
</div> 
</body> 
</html>

I am sitting here with a css challenge and I cannot even start to imagine how to do it. In fact, I think it is impossible to do, but just thought I'd ask you guys in case I am wrong:

I want to create a dropdown menu (something like coolmenus) that can be created dynamically out of a database.

The first thing I want to happen is that all primary navigation items are lined up horizontally next to eachother. That one was easy: I put each item into a DIV and float them left.

Now the problem: whenever a user moves the mouse over a primary navigation item, a dropdown menu will appear underneath it. However (!), this dropdown menu may be wider than the DIV above it! Here an example:

------------- -------------
| Item 1 | | Item 2 |
------------- -------------
-----------------------
| Dropdown 1 |
-----------------------
-----------------------
| Dropdown 2 |
-----------------------

The problem I see is that I want the dropdown menu to always be left aligned with the primary navigation item. As I don't know the absolute position of either of them (being created dynamically out of a database), the only way to get the left alignment is to write the DIVs (primary item and its dropdown) directly after each other in the code. However, if I do that I cannot get the primary navigation items to appear one next to each other. Well, I could, but they wouldn't overlap with the dropdowns as I want them to.

To give you an idea of what I am trying to achieve, have a look at the dropdown he

http://www.rmitenglishworldwide.com...ts/products.asp

Hi all,

I've been trying hard but I can't figure out this one:

I have two pieces of HTML content inside a container DIV: the first block is short, the second one is LONG.
They must stay up as two columns (the long block can't wrap under the short one), but NO assumptions on contents of block #1 or #2 can be made: no width values can be chosen.

The intended layout is something like:


┌─────────────────────────┐
│ External container │
│ ┌───────┐┌─────────────┐ │
│ │Block 1 ││ Block 2 │ │
│ │ ││ Both widths │ │
│ └───────┘│ are UNKNOWN │ │
│ └─────────────┘ │
└─────────────────────────┘


i.e. I want to reuse this code in a variety of situations (where I can't foresee how much content will be on either one but they still must fit two columns) so I can't use a silly solution like 'set margin of block X to be wider than block Y and make it float'. Remember: we have NO IDEA of what block 1 or 2 width may be set to.

Any ideas?

TIA,
Hataru Mendohohoh

I have a link such as this

<div id="columns">
<a href="whatever.htm">Whatever</a>
</div>

For reasons I won't go into here, I cannot change the div.
And that div contains:

#columns a:link {
color: #0000C0;
text-decoration: none;
font-weight: bold;
}

#columns a:visited {
color: #000080;
text-decoration: none;
font-weight: bold;
}

#columns a:hover {
color: #FF0000;
text-decoration: underline;
font-weight: bold;
}


The above is fixed, non-changeable.
What I want to do is change the color of the link, even thought I cannot change the div or the CSS code above.

I tried:

<a href="whatever.htm" class="colorchange">Whatever</a>

where colorchange is:

.colorchange {
color: red
}

Nope. Doesn't work.

I'd like to put some kind of class in the middle of the <a tag that will have some effect on the appearance of the link, but the above doesn't work. Any ideas what I can do, given that I can only change the <a link and not the <div> or the CSS?

Thanks

...Vidya
www.webwisesage.com