Why does IE8 not find jpg/gif in searchpath? Working thru Build yr own web… examples, IE will not locate images in example : g:\my documents\gallery\?.jpg but will load url image from CSS working directory(files copied there).
How do I overcome this issue?
Thank you.
Working through the Build your own is interesting and a challenge!
Following the google “Blogger” for the templete is good reading. It appears the basic templete incorporates the css style and templete information in the same body.
Noticed it’s possible to view “old type templete” but might miss some of the newer innovations.
What’s the best recommendation? Deviate from the Book and use the online templete creator? etc.,
Thank you.
Hey Shuan:
Another view of the CSS I’ve been working and I realized that I ASSUmed parsing was the same for Img src(search record?) and for the url (img) but apparently each is treated differently by the browser(?) as the img src finds the file whereever specified, but url(file) is only loading from the CSS work folder.
Hope this a better description.
Thank you.
why do you have your gallery outside your root?
htmlwork is the root directory. place the gallery folder inside it and link to a pic like this “gallery/image.jpg”
start placing all folders in your root directory.
Shaun Thank you for your response.
Guess, I wasn’t very clear :
working directory is g:\my documents\htmlwork\ and the image directory is g:\my documents\gallery\.
As stated originally images are found in the htmlwork directory but are not found in the image directory. Have carefully examined my typing and path structure - just can’t find the problem. I remember something like this programming in Turbo pascal,too.
[FONT=“Georgia”]I’m not quite sure I follow you, but uploading to a web-server (if you have one available) might help.
It might be a matter of path names. On your machine you’d have folder names with spaces, special characters maybe, and perhaps that is creating a problem.
As a test, try putting the images into the same folder with the stylesheet and linking to it directly there. If that works, try working backward to place your files in a suitable folder.
[/FONT]
Please put code tags around your code. Makes it WAY easier to read!
Two things:
Google “absolute v. relative paths”.
Earlier post today appears to have gone to oblivion…
Following code - annotated with commented line that fails to load url image(palmtree).
If the images should reside with Html code sheets then location in another folder-my problem- may be moot. Note the code loaded into IE8 haven’t attempted another browser -yet.
Thank you.
/*
CSS for Bubble Under site
*/
/* CSS= cascading style sheets 060710, remember underlining is normally used to convey a Link */
/* Link order is: link, visited, hover, active*/
/*class selector denoted by .name { style descriptors*/
/*There can be only 1 specific id per file, ig.,header.*/
/*Span element nearly always used with a class attribute.*/
/*Block level element; Inline elements; symmetry, open & close elements -open then close in reverse.*/
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
for the top-left corner of the browser's content display.
*/
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(tagline-fade.jpg) repeat-y right;
}
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5d8;
}
#footer p {
line-height: 150%;
}
body {
font-family: verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}
h1 strong {
color: red;
}
h1, h2, h3 {
font-family: "Trebuchet MS", ARial, Helvetic, sans-serif;
}
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(header-bg.jpg) repeat-y right;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}
h2, u1 {
margin-top: 15px;
}
li {
font-size: none;
list-style-type: circle;
}
p {
font-size: small;
color: navy;
}
em {
/* font-style: normal;*/
text-transform: uppercase;
}
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: navy;
}
a:hover {
text-decoration: none;
color:white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
.fun p {
color: purple;
}
blockquote.fun {
font-style: italic;
}
.attentiongrab {
width: 50%
font-weight: bold;
}
#mainnavigation {
background-color: pink; <--#ffcc33;-->
<-- font-weight: bold;-->
border: 1px solid green;
width: 200px;
}
.highlight {
border: 1px solid black;/* thickness as px,point, ems, or thn,medium, thick solid (default)
double,dotted,dashed,groove,ridge,inset,outset
color as hexadecimal or color keyword*/
}
.pixelpadding {
padding: 30px;
border: 1px dashed gray;
}
.empadding {
padding: 2em;
border: 1px dashed gray;
}
.percentagepadding {
padding: 5%;
border: 1px dashed gray;
}
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
from the top-left corner of the browser's content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 7.54em;
}
#bodycontent {
left: 200px;
}
#header, #tagline{
width: 100%;
}
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(nav-bg.jpg) no-repeat;
}
#header {
border-top: 3px solid #7da5d8;
}
.nudged {
position: relative;
top: 10px;
left: 20px;
background-color: #ccc;
}
#nav {
float: right;
width: 300px;
background-color: yellow;
}
.contentconstrained {
padding-right: 310px;
}
.feature {
float: right;
margin: 10px;
}
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
.photocredit {
font-weight: normal;
color: gray;
}
.galleryphoto img {
border: 15px solid white;
}
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
.sunset {
border: 1px solid black;
color: white;
font-weight: bold;
font-size: 225%;
background: black url(sunset.jpg);
width: 650px;
height: 125px;
padding-left: 50px;
padding-top: 400px;
}
#repeatedclouds {
border: 1px solid black;
padding: 20px;
background: #aebbdb url(clouds.jpg);
}
#verticalfade {
border: 1px solid black;
padding: 20px;
padding-top: 300px;
background-color: #e3e3e3;
background-image: url(vert-fade.gif);
background-repeat: repeat-x;
}
#horizontalfade {
border: 1px solid black;
background-color: white;
background-image: url(hori-fade.gif);
background-repeat: repeat-y;
padding: 20px;
padding-left: 180px;
}
#palmtree {
border: 1px solid black;
/* background: white url(D:\\My Documents\\Gallery\\palm-trees.jpg) no-repeat top right; */ /* Directory where url fails to load the image Denoted for your information!*/
background: white url(palm-trees.jpg) no-repeat top right; /* working html directory*/
padding: 60px;
padding-right: 210px;
}
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
border: 1px solid black;
}
th {
text-align: left;
background: gray;
color: white;
padding: 0.2em;
}
table.rates {
/* declarations for rates table */
}
table.schedule {
/* declarations for schedule tables */
}
table.events {
border-collapse: collapse;
}
table.events caption {
color: #000066;
font-size: small;
text-align: left;
padding-bottom: 5px;
font-weight: bold;
}
table.events th, table.events td {
padding: 1px;
border 1px solid #000066;
}
table.events th {
font-size: x-small;
text-align: left;
background: #241374 url(header-bg.jpg);
color: #ffffff;
padding-top: 0:
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
}
table.events td {
font-size: small;
background: #e2edff url(td.jpg) repeat-x top;
}
[FONT=“Georgia”]With an external stylesheet, it’s relative to the location of the stylesheet.
Post your code for us.
[/FONT]
[FONT=“Georgia”]As Crazybanana said, why do your have the images outside your website’s main folder?
Also, could you post your actualy HTML/CSS for us to look at?
[/FONT]