Fri, 2004-01-16 16:29
Okay, here is the problem. I have 2 images I want on a page, but I not want the large CSS image properties on the page's source. I have created an external <link href="external file" rel="stylesheet" type="text/css"> file on my site and inserted the code below into it.
<style>i.top{BACKGROUND:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/top.png);BACKGROUND-repeat:no-repeat;BACKGROUND-position:top,left;color:white;
height:302;width:700;position:absolute;top:0;left:130}</style>
<style>i.side{BACKGROUND:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/side.png);BACKGROUND-repeat:no-repeat;BACKGROUND-position:top,left;color:white;
height:500;width:200;position:absolute;top:258;left:708}</style>
However, I cannot view the images on the page. I have tried everything from adding a table with the <table/td class="name"> properties and have done the same with images, div, and layers. Nothing is working. However, they show up fine if I copy and paste the following script into the page source itself. Unfortunatly, the host (Neopets.com Guild) only allows so many characters per page and using my large CSS script would go over the limit leaving no room for content.
Also my background <style>BODY{background-image:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/background.jpg)} </style> does not work unless on the page either.
I guess my question is how do I get these pictures to view in my wanted position with out having a large hideous code on the page? Please help. Appreciate it. Thanks.
Fri, 2004-01-16 17:36
#1
External problems, not i class
Okay, I have concluded that the problem I am having is related to the external file and not the code itself. My things such as filters, table, image, and text effects are working fine. It just appears to be messing up with positioning related styles, div, and layers. These things do not show up with out me placing the code right on the page. Also, things including background or background-image are not working within the external file. The file script is below.
/* CSS Document by gwd - freewebs.com/gwnp */
<style>BODY{background-image:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/background.jpg)}
</style>
<style>BODY{SCROLLBAR-FACE-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-SHADOW-COLOR:#ffffff;SCROLLBAR-3DLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#990000;SCROLLBAR-TRACK-COLOR:#333333;SCROLLBAR-DARKSHADOW-COLOR:#fffff}
</style>
<style>#foo{text-align: center}
{text-indent: 1em}
</style>
<style>i.top{BACKGROUND:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/top.png);BACKGROUND-repeat:no-repeat;BACKGROUND-position:top,left;color:white;
height:302;width:700;position:absolute;top:0;left:130}</style>
<style>i.side{BACKGROUND:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/side.png);BACKGROUND-repeat:no-repeat;BACKGROUND-position:top,left;color:white;
height:500;width:200;position:absolute;top:258;left:708}</style>
<style>
TD {FONT-SIZE: 7pt; FONT-FAMILY: tahoma}
FONT {FONT-SIZE: 7pt; FONT-FAMILY: tahoma; COLOR: white}
P {FONT-SIZE: 7pt; FONT-FAMILY: tahoma}
A {FONT-SIZE: 7pt; COLOR: white; FONT-FAMILY: tahoma}
A:hover {CURSOR: none; COLOR: red}
A {FONT-SIZE: 7pt; FONT-FAMILY: tahoma}
I {FONT-SIZE: 7pt; FONT-FAMILY: tahoma}
TABLE {BACKGROUND: none transparent scroll repeat 0% 0%}
TD {BACKGROUND: none transparent scroll repeat 0% 0%}
TABLE {BACKGROUND: none transparent scroll repeat 0% 0%}
IMG {FILTER: alpha(Opacity=50), xray}
P IMG {FILTER: chroma(color=none)}
TABLE {BACKGROUND: none transparent scroll repeat 0% 0%}
</style>
<style>#caff{position:absolute; left:730px; top:320px; width:180px; height:450px; z-index:1;color: #FFFF00}</style>
Here is the page's source. I want to condense what I have in bold.
<link href="http://personal.bgsu.edu/~jpierpo/gwnp/darigan/CSS/dCSS.css" rel="stylesheet" type="text/css">
<style>BODY{background-image:url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/background.jpg)}
</style>
<TABLE style="LEFT: 130px; POSITION: absolute; TOP: 0px"><IMG src="http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/top.png" border=0><TBODY></TBODY></TABLE>
<div style="position:absolute;left:730px; top:320px;width:180px;height:450px;z-index:1;color:red">Insert links here.</div>
<TABLE style="LEFT: 708px; POSITION: absolute; TOP: 258px"><IMG src="http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/side.png" border=0><TBODY> </TBODY></TABLE>
Still looking for help or advice. Thanks.
Fri, 2004-01-16 18:28
#2
Problem with linked "i class"
first of all, your css file is all wrong.
you don't put <style>....</style> in a .css file just
body {
background-image: url(http://personal.bgsu.edu/~jpierpo/gwnp/darigan/images/background.jpg)
}
....
maybe start by fixing that and running it through the css validator
Fri, 2004-01-16 21:15
#3
Problem with linked "i class"
Everything thing checked out okay. It it did not seem to matter if I had <style></style> in my external file. Still not working as planned.