CSS - spacing around images?

I have some weird space around some of my images and don't
know how to
get rid of it.
The image on the left, right under the top image had some
weird space ontop?
http://www.pmuck.de/index2.html
This is the css I have for that:
#left {
float: left;
#left img{
padding: 0;
How can I get rid of that?
I think I also have the same problem at the bottom between
the image and
the browser frame?
Thank you for any help!
Brian

Add this style -
#header img { display:block; }
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Murray *ACE*" <[email protected]> wrote
in message
news:e3alhd$2hl$[email protected]..
> Yes - like that. But I guess I'm going to have to look
at the page now,
> huh?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "Brian" <[email protected]> wrote in
message
> news:e3akmi$1ga$[email protected]..
>> Murray, thank you,
>>
>> Like this?
>> #left {
>> float: left;
>> }
>> #left img{
>> padding: 0;
>> display: block;
>> }
>>
>> This did not fix my problem. I also just realized
that the problem is not
>> present in IE on a mac, just Safari and Firefox. Not
sure it that might
>> give some clues to the issue?
>>
>> Thank you for the help!
>> Brian
>
>

Similar Messages

Layout changed when I added spacing around images.

@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #363;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #F00;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #363;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
background: #CF0;
padding-bottom: 10px;
.content {
padding: 15px 15px 15px 15px;
width: 80%;
float: left;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
background: #390;
color: #000;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #6F7D94;
color: #FFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CF6;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yellowstone Biologist</title>
<link href="NationalParks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body onload="MM_preloadImages('habitat def.PNG')">
<div class="container">
<div class="header"><a href= /><img src="animals.gif" width="878" height="193" alt="bison" /></a>
    </div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="NationalParks.html"><strong>Home</strong></a></li>
      <li><a href="Park Ranger.html"><strong>Park Ranger</strong></a></li>
      <li><a href="Biologist.html"><strong>Biologist</strong></a></li>
      <li><a href="Geologist.html"><strong>Geologist</strong></a></li>
      <li><a href="Historian.html"><strong>Historian</strong></a></li>
      <li><a href="Games.html"><strong>Games</strong></a></li>
    </ul>
    <p><strong>Definitions (italicized words):</strong> </p>
    <p><em>Habitat</em>:   the natural conditions and environment in which a plant or animal lives</p>
    <p><br />
      <em>Extermination</em>: completely destroy or kill</p>
    <p><em>USFWS</em>: United States Fish and Wildlife Service</p>
</div>
<div class="content">
    <h1>Yellowstone Biologist    </h1>
    <h2>Mammals</h2>
   <p> Yellowstone is home to the largest concentration of mammals in the lower 48 states. Sixty-seven different mammals live here, including grizzly bears, black bears, gray wolves, wolverine, lynx, elk, bison, moose, and numerous small mammals.</p>
    <p>Visitors must view all wildlife safely. You must stay at least 100 yards away from bears and wolves and at least 25 yards away from all other animals—including bison, elk, bighorn sheep, deer, moose, and coyotes.</p>
    <h4>Bears</h4><img src="grizzly.gif" alt="grizzly bear family" width="150" height="115" hspace="15" vspace="15" align="left" />
    <p>Bears may be seen in Yellowstone March through November of each year. Yellowstone is one of the only areas south of Canada that still has large grizzly bears. Grizzly bears are usually seen in the open areas. </p>
    <p> </p>
    <h4>Wolves</h4><img src="wolves.gif" alt="wolves" width="150" height="115" hspace="15" vspace="15" align="left" />
    <p>
Loss of <em>habitat</em> and <em>extermination</em> programs led to the elimination of wolves throughout most of the United States by early in the 20th century. In 1973, the U.S. Fish and Wildlife Service listed the northern Rocky Mountain wolf as an endangered species and designated Greater Yellowstone as one of three recovery areas. From 1995 to 1997, 41 wild wolves from Canada and northwest Montana were released in Yellowstone National Park. As expected, wolves from the growing population dispersed to establish territories outside the park. More than 1,600 wolves now reside in Idaho, Montana, and Wyoming. In August 2010, a U.S. district judge ruled against a <em>USFWS</em> 2009 decision to remove the wolf from the endangered species list, so wolves are protected as an endangered species in all three states again.<br />
    </p>
<h4>Bighorn Sheep<img src="BigHornSheep.gif" alt="bighorn sheep" width="150" height="115" hspace="15" vspace="15" align="left" /></h4>
    <p> Bighorn sheep once numbered in the millions in western United States and were an important food source for humans. They are named for the large, curved horns on the males, or rams. Females, or ewes, also have horns, but they are short with only a slight curve. In the winter of 1981-82, an outbreak of pinkeye occurred among bighorns in the Mt. Everts area. Many sheep were blinded and/or killed on the adjacent park road or by falling from cliffs. Some are now found comfortable around summer road traffic.</p>
    <h4>Bison<img src="bison.gif" alt="bison" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
    Bison are the largest mammals in Yellowstone National Park. They are strictly vegetarian, and they graze on grasslands in the meadows, the foothills, and even the high-elevation areas of Yellowstone. Despite their slow walk, bison are surprisingly fast for animals that weigh more than half a ton.</p>
<p>Yellowstone is the only place in the lower 48 states where a population of wild bison has survived since prehistoric times, although fewer than 50 native bison remained here in 1902. Fearing extinction, the park imported 21 bison from two privately-owned herds.</p>
    <h4>Bobcats<img src="yellowstone-bobcat.gif" alt="bobcat" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
    Bobcats are small wild cats with reddish-brown or yellowish-brown coats, streaked with black or dark brown. They have prominent, pointed ears with a tuft of black hair at the tip. </p>
<p>Unlike lynx, which they resemble, bobcats elsewhere have been highly adaptable to human-caused changes in environmental conditions; some biologists believe that there are more bobcats in the United States today than in colonial times. Yellowstone has many rock outcrops, canyons bordered by rock ledges, conifer forests, and semi-open areas that seem to offer conditions favorable for bobcats--adequate shelter, a variety of rodents, rabbits, hares, birds, and other small animals as well as seasonal carrion, for food.</p>
<p>Bobcats are known to hole-up and wait out severe winter storms elsewhere. These elusive cats are most active at night, so even those who study them seldom have an opportunity to see one.</p>
    <h4>Coyotes</h4>
    <p>
      Yellowstone's coyotes are among the largest coyotes in the United States. Adults are about 30 pounds, are less than two feet tall and vary in color from gray to tan with sometimes a reddish tint to its coat.</p>
    <p>Small mammals are an important component of coyotes' diets. In Yellowstone, such prey include microtines or voles, mice , pocket gophers, small birds, and in spring and summer, ground squirrels. They also feed on larger mammal's (elk, deer, bison, moose, pronghorn, and bighorn sheep) calves and fawns shortly after birth and young animals.</p>
    <h4>Elk<img src="elk.gif" alt="elk" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
      Elk are the most abundant large mammal found in Yellowstone and historical evidence confirms their continuous presence for at least 1,000 years. More than 30,000 elk from 7-8 different herds summer in Yellowstone and approximately 15,000 to 22,000 winter in the park. </p>
<p>Bulls grow antlers annually from the time they are nearly one year old. When mature, a bull's "rack" may have 6 to 8 points, or tines, on each side and weigh more than 30 pounds.</p>
    <h4>Lynx</h4>
<p>Adult lynx are about the size of a large domestic cat. Males can weigh up to 30 pounds, while females are smaller. The similarity between lynx and bobcats makes it difficult to determine their status in Yellowstone. A large adult bobcat may be larger than a small adult lynx, so size is not a good characteristic for positive identification.</p>
    <h4>Moose<img src="moose.gif" alt="moose" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
    Moose, the largest member of the deer family, were reportedly very rare in northwest Wyoming when Yellowstone National Park was established in 1872. Moose breed from early September to November and one to three calves are born in May or June. Calves weigh 25 to 35 pounds at birth but grow rapidly; adult females (cows) weigh up to 800 pounds and males (bulls) up to 1300 pounds. </p>
<h4>Mountain Lion</h4><p>
    The mountain lion, also called the cougar, is the largest member of the cat family living in Yellowstone. Mountain lions can weigh up to 200 pounds, although lions in Yellowstone are thought to range between 140 and 160 pounds for males and around 100 pounds for females.</p>
<p>Mountain lions are rather secretive, so most visitors are unaware of their existence in Yellowstone. Lions probably live throughout the park in summer. </p>
    <h4>      Amphibians</h4>
    <p>
    Cool, dry conditions limit Yellowstone's amphibians to four species: boreal toad; chorus frog; spotted frog; and the tiger salamander. Population numbers for these are not known.</p>
    </div>
<div class="footer">
    <p>Sources: <a href="http://www.nps.gov/yell/naturescience/mammals.htm">http://www.nps.gov/yell/naturescience/m ammals.htm</a></p>
    <p><a href="http://www.nps.gov/yell/naturescience/amphibians.htm">http://www.nps.gov/yell/naturescienc e/amphibians.htm</a></p>
    </div>
</div>
</body>
</html>
This has happened before, where everything in my content area has dropped down below the sidebar.It's happended on several pages. I don't know why or how to fix it. It's for a class, so where I've posted it is private, but here's the page and css code.
HTML

Murray is right. Padding (and margins) is added to the width. However, when using percentages, you should never use figures that add up to exactly 100%.
Browsers need to convert the percentages to pixels. Because pixels must be whole numbers, some percentages are rounded up, which results in the final element dropping down below its neighbours. With percentages, it's much safer to use values that add up to 98% (99% often works, but 98% is safer).

DW8-Fine white line around images

DW8 - On some of my images there is a very fine white line
around the edge when the site is previewed in the browser. The site
has an almost-black background color (181714), and I use the same
color in making the image backgrounds (in Photoshop CS), for
example roll-over images. How do I get rid of this?

You wouldn't set this in the Property inspector, you'd set it
in the CSS,
and the only time you need it would be when the image is
within a link:
a img { border:none; }
Also, you wouldn't expect this effect to produce a white
border - it would
be a blue one (by default).
I'm guessing the fine white line is part of the image (it's
easy to
undercrop when the canvas is white).
> I've noticed
> that in tables, having nothing there is "bigger" than
specifying a zero.
If you have nothing there, you will get the default value for
the all of the
table attributes, which is often (but not always) not zero.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Damaeus" <[email protected]> wrote in
message
news:[email protected]..
> Reading from news:macromedia.dreamweaver,
> "Fugasi" <[email protected]> posted:
>
>> DW8 - On some of my images there is a very fine
white line around the
>> edge when
>> the site is previewed in the browser. The site has
an almost-black
>> background
>> color (181714), and I use the same color in making
the image backgrounds
>> (in
>> Photoshop CS), for example roll-over images. How do
I get rid of this?
>
> Check to make sure that your image border is zero in the
Properties
> Inspector in Dreamweaver for the specific image in
question. I've noticed
> that in tables, having nothing there is "bigger" than
specifying a zero.
> I
> don't think I get a white border around images with
nothing in the image
> border width setting, but see if that works?
>
> Damaeus

Border around image links

What the heck is it with a blue border around image links in
CS3???? I discovered I can get rid of it by setting the border to 0
in properties but what a pain. I also noticed tables have a 1
border by default. I'm sure there is a place to change the default
but I can't find it.
Any suggestions?
thanks,
CJ

On Fri, 1 Jun 2007 13:11:16 +0000 (UTC), "SeaJaye"
<[email protected]> wrote:
>Win,
>I like the way you think. For those of us who are cake
baking challenged, could you put up a recipe for said cake?
>thanks,
>cj
Sure. This set of stuff:
*zeroes out the margins and paddings
* guarantees a vertical scrollbar (so no jumping between
short and
long pages)
* establishes colours and fonts etc. for the tags I tend to
use
* gives me a way to float images left or right
* defines a tag that I can use to clear floats (the hr tag,
in this
case, since I never use an hr as a visual element: I always
define
borders when I need them)
* styles the form and form elements
I customize these to suit.
/* CSS Document */
margin: 0;
padding: 0;
html {
height: 100%;
margin: 0;
padding: 0;
body {
min-height: 101%;
font: 100.01%/130% "Trebuchet MS", Verdana, Helvetica,
sans-serif;
color: #000;
background: #4f865b url(../images/bgTexture.png) repeat;
margin: 0;
padding: 0;
hr {
height: 0;
line-height: 0.0;
font-size: 0;
margin: 0;
padding: 0;
clear: both;
visibility: hidden;
h1, h2, h3 {
font-size: 150%;
color: #4f865b;
margin: 20px;
font-weight: bold;
h2 {
font-size: 120%;
color: #cc6600;
h3 {
font-size: 100%;
color: #4f865b;
font-style: italic;
p {
font-size: 90%;
margin: 10px 20px;
ul {
margin: 10px 20px 10px 40px;
font-size: 90%;
a:link {
color: #cc6600;
a:visited {
color: #4f865b;
a:hover, a:active, a:focus {
color: #7dd08f;
.imgLeft {
border: 1px solid #dfdabd;
padding: 5px;
float: left;
margin-right: 10px;
.imgRight {
border: 1px solid #dfdabd;
padding: 5px;
float: right;
margin-left: 10px;
/***** CONTACT FORM STYLES *****/
#content form{
margin: 0;
width:450px;
#content fieldset{
border: 1px solid #d69400;
margin-bottom: 10px;
padding:5px 5px 20px 20px;
#content legend {
font-size: 120%;
margin: 12px 0 0 0;
color: #18006a;
#content textarea{
background-color: transparent;
border: 1px solid #18006a;
height:200px;
margin:0 30px 0 0;
#content label{
display:block;
font-size:80%;
padding-top:5px;
#content button{
background-color: #ecc97d;
display:block;
width:80px;
/* sets the enquiry box to the right of the input fields */
.labelfloat{
padding-top:20px;/* float:right;*/
#content input:text, #content select{
/*background-color: #E8E2C2;*/
background-color: transparent;
border: 1px solid #18006a;
display:block;
margin:0 0 0 0;
width:200px;
/* END FORM STYLES */
Win
Win Day, Wild Rose Websites
http://www.wildrosewebsites.com
[email protected]
Skype winifredday

Code for stroke around images

I believe there is a code that will put a stroke around all
images on a site. Am I right? does anyone know what it is?

.oO(redstonegirl)
>I realize this is not a solution because the problem with
adding it to the
>style sheet is that it puts a border around
everything...including my spacer
>images.
Why are you using spacer images at all? With CSS they're
hardly ever
necessary.
>I can figure out how to put the border up
>
> <img src="gfx/x.jpg" width="168" height="105"
border="1"/>
>
> but I can't figure out how to change the color of the
stroke.
Forget that old 'border' attribute, it's deprecated and
doesn't even
come close to what you can do with CSS.
What images are we talking about anyway? Kind of a gallery or
something?
If you want to apply a border to a couple of images it's best
to apply a
class to the element that contains these images and use a
descendant
selector to style them. Something like:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>
Then you can use a CSS like this:
.gallery img {border: 1px solid #000}
This would apply a thin black border to all images inside an
element of
the class "gallery".
Micha

Indesign CS4 adds square boxes around images when exporting to PDF

When I export a brochure created in InDesign to PDF, for some reason the .pdf file (only the PDF - the InDesign version doesn't show these) shows faint squares around images/graphics that have shadow effects applied. These appear around photos, as well as graphic objects that have a solid colour background, for example an orange circle. Some suggested rasterizing images in Illustrator and that didn't help. Transparency doesn't seem to be at fault either. Would anyone have any idea what may be causing this and how to remedy the problem?
FYI, the PDF export pre-sets in InDesign are as follows (I only mention options that are checked, the rest are turned off):
COMPATIBILITY: Acrobat 5 (PDF 1.4)
GENERAL:
     HIGH QUALITY PRINT (modified)
     Export Layers:Visible & Printable Layers
COMPRESSION:
     COLOR IMAGES:
     Bicubis Downsampling to 300 pixels per inch for images above 450 pixels per inch
     Compression: Automatic JPEG
     Image Quality: Maximum
GRAYSCALE IMAGES:
     Bicubis Downsampling to 300 pixels per inch for images above 450 pixels per inch
     Compression: Automatic JPEG
     Image Quality: Maximum
MONOCHROME IMAGES:
     Bicubis Downsampling to 1200 pixels per inch for images above 1800 pixels per inch
     Compression: Automatic JPEG
     Compression: CCITT Group 4
FYI - I use Mac OSX 10.5.8 and InDesign 6.0.3.
I have attached the PDF for your review.
With many thanks,
Alex

BTW, don't use OSX's preview to look at PDFs created by InDesign if they take advantage of high end features such as live transparency.
Preview simply isn't up to the task and you should be using Acrobat or Reader.
Bob

White line around image

Hi everyone,
I keep getting a white line appear around images I save in
Photoshop and then insert into Dreamweaver. It happens when I also
save text with a transparent background. The text has a very faint
white line around it. Why is this?

Where are you seeing this, in PS? or DW design view or in a
browser?
When you insert your pics in an HTML page with 0 border, do
you still see
the border?
This is not a graphics forum. Adobe has a PS forum at
http://www.adobeforums.com/cgi-bin/webx?14@@.3bbf2764
"dollecom" <[email protected]> wrote in
message
news:e5f6cq$fb7$[email protected]..
> Hi everyone,
>
> I keep getting a white line appear around images I save
in Photoshop. It
> happens when I also save text with a transparent
background. The text has
> a
> very faint white line around it. Why is this?
>

How do I get rid of faint white boxes around images?

Some files that I have printed have faint white boxes around images. The images were saved in photoshop with transparent backgrounds that seem to be showing up faintly in the final printed image. Does anyone know how I can get rid of this problem?

signspec,
What happens if you print from Illy?
Your printer (driver) may be overly helpful and performs a bit of colour management all by itself. You may have a look and disable any such management in the printer (driver) options.

How can I use external CSS, JavaScript and Images in PeopleSoft Portal?

I am developing a website and I need to put my CSS, JavaScript and IMG files in a folder on the server that can be used by my HTML objects.
Where should I put the images? How do I get the HTML objects can read these images?
I've tried several things like:
<link rel="stylesheet" href="<%=psCtxPath%><%=psHome%>\MyStyleSheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="\portal\MyStyleSheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="\ps\images\portal_pa\MyStyleSheet.css" rel="stylesheet" type="text/css">

Hi Jim!
Yes, I am using the HTML Object Application Designer. Below is my HTML:
<html>
<head>
<title>My Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language='javascript' src='/jscript/MyJavaScript.js'></script>
<link rel="stylesheet" href="/css/MyStyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<img src="/images/MyLogo.jpg"/>
</body>
</html>
But, the portal is not reading my css, js and images.

IWeb 3.03 and Firefox 4 weird boxes around images

Just built a small site (keepourcityclean (dot) org) but for some reason it looks good on Safari but not on Firefox. There are strange boxes and
lines around images that are obviously indicative of the formatting that iWeb uses, but why doesn't it work across all browsers? Is there a fix?

Not all browsers display a site the same because they implement web standards differently. Tried to log onto you site but it wouldn't load. Just kept the loading wheel going and going and going.
However, this tutorial might be of some help: #7 - Converting Photos w/Frames, Drop Shadows and/or Reflections into a Single JPG Image. It certainly will help in making sites more compatible with Internet Explorer and older versions of Firefox.
Since the http://keepourcityclean.org/Home.html won't load maybe you could take screenshots of the boxes in Firefox and post them in a reply.
OT

Css problem with image

Hello,
I am just starting working with dreamweaver cc for 3 months and try to create a website.
I try to learn step by step CSS uses but since some weeks I have some problems in displaying figure and caption into this page.
It seems very easy when I look for other websites
http://analytics-consulting-v501.businesscatalyst.com/laboratoire_test_2.html
I try to have two images and their captions on the same line. and so on , line after line.
and then isotope to filter them using the criteria in the first line.
Of course, I have test many ways but without success... probably due to a lack of work with CSS.
Thank you very much for any help !!!
Jean-François

I have removed all of your CSS to show images and associated caption being placed in a document.
<!DOCTYPE html>
<html>
<head>
<title>Analytics Consulting</title>
<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    width: 1000px;
    margin: auto;
.thumb {
    width: 50%;
    float: left;
    padding: 15px 25px;
div.thumb:odd {
    clear: both;
.thumb img{
    width: 70%;
    display: block;
    margin: auto;
</style>
</head>
<body>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
<div class="thumb">
<div><a href="" title="Matériels" class="colorbox" rel="gallery-all"><img src="http://livedemo00.template-help.com/drupal_45593/sites/default/files/styles/portfolio_3_cols/public/Image00001.jpg" alt="" title="" /></a></div>
<div><a href="">Materiels</a></div>
<div>Vente et Location. Support et Contrats de maintenance. Pièces détachées.</div>
<div><a href="">Plus</a></div>
</div>
</body>
</html>

Moving lines around images

Hello,
Does anyone know how to make a thick yellow line move around images? If I have two rectangular images on screen, and I want a yellow line to appear, run across the bottom of one, up the side of the next, then turn again and travel across the top of the second image. . . how best to do this in motion?
I was trying in FCP with a solid yellow screen, cropped into a line, then key-framed to move. But someone suggested it'd be easier in Motion, so I thought I'd investigate. I'm not really great in Motion, but I can do some basic stuff. Any suggestions would be appreciated.
Lawrence

Dunno if this is exactly what you're looking for, but it took me less than five minutes in Motion.
Line Draw Movie
I used an open shape to make my line, with the stroke of type: Image. Put a yellow rectangle into the image well, set the draw on and off, and bingo.
Here's my example project.
Patrick

Dreamweaver CSS Mac writes image links wrong... img src="/www/images/asian_sales_office.jpg"

Dreamweaver CSS Mac writes image links wrong... <img src="/www/images/asian_sales_office.jpg" width="x" height="x" alt="x"> Took me a bit to find this, now back to hand coding all image links and also checking other code. Any fixes?

That looks to me like you may have your site definition set up incorrectly and you appear to be using "Site Root Relative" vs "Document Relative"
Go to Site > Manage Sites > click the site you are working on > Click the Edit icon > Advanced Settings > Links relative to: should be set as Document, unless you have a very specific reason for choosing Site Root there
If your server root folder is called www, you'll need to remove that folder from your site root. You are only transferring files from root to root, so the name of your local root folder is not important (the files inside it go to the server root). It is important not to accidentally have a duplicate of the server root folder inside your local root though which would accidentally nest your files within another folder when transferring to the server.

An unwanted white border appears around image after dragging it to the document. Why? How to get rid of border?

Thanks.
Bob

The primary image that I'm concerned with is a jpg file, 74kb, 642x402. Also used same image at 53kb, 400x249.
Here's some good info.
I tried using same image on an old Pages document I made last yr - No border. And - I used an image from the old flyer and put it on the current flyer and - got a Border.
A difference: the flyer I used last yr was a blank document - no template. The current flyer I'm working on is one I chose from the templates with the tear-offs at the bottom for name and phone number.
Is there something intrinsic with this template that creates a border around images?
How do I do a screensnap? If you still need.
Thanks again.
Bob

CSS advice for Image scale mouseover/mouseout event

Hi,
I'm trying to add CSS to an image to create a mouseover/mouseout event. I just can't seem to get it to work.
I wan't the the scale of the image to increase to 1.5 on mouseover, then return to 1 on mouseout.
Any advice on the CSS coding would be greatly apreciated....
Also how would I make an image hover whilst mouseove?.
Thanks, Mike

In mouseover event:
        var escalaX=1.5;
        var escalaY=1.5;
        image.getSymbolElement().css({
            "-webkit-transform":"scaleX(" + escalaX + ")",
            "-moz-transform":"scaleX(" + escalaX + ")",
            "-o-transform":"scaleX(" + escalaX + ")",
            "-ms-transform":"scaleX(" + escalaX + ")"
        image.getSymbolElement().css({
            "-webkit-transform":"scaleY(" + escalaY + ")",
            "-moz-transform":"scaleY(" + escalaY + ")",
            "-o-transform":"scaleY(" + escalaY + ")",
            "-ms-transform":"scaleY(" + escalaY + ")"
if your image is not a symbol, then you must to use sym.$("image").css(... syntax.
If you prefer animation and not instantaneous change, you can to see this thread: http://forums.adobe.com/message/5590639

CSS - spacing around images?

Similar Messages

Maybe you are looking for