Re: [css-d] Image Slices
Hello, I need some help as in why this page
http://www.thecreativesheep.ca/site/imagepage4.html
dealing with the image slices and the id logo and logo img why the page
looks fine in IE7 but FF and IE6 it breaks?
On Thu, Mar 19, 2009 at 12:07 AM Holly Bergevin ho...@communitymx.com wrote:
From: Christopher R majes...@thecreativesheep.ca
As you can see the image is still not in order it's like a jigsaw puzzle on
the page
http://www.thecreativesheep.ca/site/imagepage3.html
Following are some suggestions that may, or may not be what you're looking
for.
As was suggested, if you want the images to be the size specified in the
HTML, you should resize them in a graphics program rather than letting
browsers do the work.
That being said, here are my suggestions.
Remove all width and height attributes in the HTML for those three images.
Alter the CSS as follows -
#logo {
background-color: transparent;
/*top: -7px;*/ /* remove */
left: 109px; /* change value */
/*width: 850px;*/ /* remove */
height: 250px;
position: relative;
text-align: center;
z-index: 1;
}
logo img {vertical-align: bottom; display:block;} /* remove - it's not doing
anything anyway, despite the spelling correction */
#logo img {float: left;} /* add */
.navigationpanel {
background-image: url(navgraphic.png);
background-repeat: no-repeat;
top: -20px; /* change */
left: -250px; /* change*/
/*width: 400px; /* remove */
/*height: 75px; /* remove */
position: relative;
}
Perhaps these suggestions will give you a new place to start from.
~holly
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image Slices \ Page Breaks
I would like to know why the main image on my page breaks in FireFox and IE6 but looks fine as in how I want it to look in IE7? www.thecreativesheep.ca/site/imagepage4.html __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Alright take a look the page breaks in IE6 and FireFox but not in IE7 in
otherwords if you view the page in IE7, that is how it should look
when you view in FireFox or IE6 you'll see it breaks.
http://www.thecreativesheep.ca/site/imagepage4.html
On Thu, Mar 19, 2009 at 12:07 AM Holly Bergevin ho...@communitymx.com wrote:
From: Christopher R majes...@thecreativesheep.ca
As you can see the image is still not in order it's like a jigsaw puzzle on
the page
http://www.thecreativesheep.ca/site/imagepage3.html
Following are some suggestions that may, or may not be what you're looking
for.
As was suggested, if you want the images to be the size specified in the
HTML, you should resize them in a graphics program rather than letting
browsers do the work.
That being said, here are my suggestions.
Remove all width and height attributes in the HTML for those three images.
Alter the CSS as follows -
#logo {
background-color: transparent;
/*top: -7px;*/ /* remove */
left: 109px; /* change value */
/*width: 850px;*/ /* remove */
height: 250px;
position: relative;
text-align: center;
z-index: 1;
}
logo img {vertical-align: bottom; display:block;} /* remove - it's not doing
anything anyway, despite the spelling correction */
#logo img {float: left;} /* add */
.navigationpanel {
background-image: url(navgraphic.png);
background-repeat: no-repeat;
top: -20px; /* change */
left: -250px; /* change*/
/*width: 400px; /* remove */
/*height: 75px; /* remove */
position: relative;
}
Perhaps these suggestions will give you a new place to start from.
~holly
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Here is my Image slices problem you'll see on the page
http://www.thecreativesheep.ca/site/imagepage3.html
the slices are not in order on the page and they should be at the top within
the div id=logo
On Tue, Mar 10, 2009 at 12:11 PM Christian Kirchhoff
christian.kirchh...@editura.de wrote:
Most of the times when the experts in this mailing list take a look at
some HTML and CSS code they find a solution for problems within minutes.
Therefore I kindly ask and stronlgy encourage you, as it was asked
before, to provide a link to the HTML and CSS code, so the others can
analyze the code in detail.
Without that is is almost impossible to help you cause there can be too
many possible causes for that problem.
Best regards,
Christian Kirchhoff
*Editura Gesellschaft für Verlagsdienstleistungen mbH*
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de
AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski
Christopher R schrieb:
I put in padding 0, margin 0 within the div and that didn't solve it
neither did display:inline or display: block.
idname img {rules} is how I currently have it laid out. Now what also I
find odd is that I have all my slices loaded but 2 slices don't show up
in the right order there still is a gap between the slices that do show up.
On Tue, Mar 10, 2009 at 8:38 AM Virgilio Quilario
virgilio.quila...@gmail.com wrote:
Hi does anyone know why I'm getting white spaces between sliced images ?
I have a bunch of img tags within the div and I can't figure out why
the images have spaces, and currently why half of the image slices look
fine and the rest look like a jigsaw puzzle.
hi, maybe you need:
img {
margin:0;
padding:0;
}
please post a code or link to it.
Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
On 19/03/2009, at 6:11 AM, Christopher R wrote: Here is my Image slices problem you'll see on the page http://www.thecreativesheep.ca/site/imagepage3.html the slices are not in order on the page and they should be at the top within the div id=logo Check your css: http://tinyurl.com/dz4tpy Also image #1 has the width and height swapped. A suggestion - resize your images to the correct size in your graphics application before uploading rather than using peoples' browsers to do it. Saves on user download time amongst other things. And #4 image seems to be nothing but a great big transparent png - no image or graphic at all. It serves no purpose?? Cheers, KathyW. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Alright, I took out the 4th image and I fixed the CSS problem. As you can see the image is still not in order it's like a jigsaw puzzle on the page which is not how it's intended to look and I can't figure out why this is happening when I sliced the graphic nicely. I tried even with more slices which should make no difference with fewer slices or more slices yet the results are near the same. On Wed, Mar 18, 2009 at 6:14 PM Kathy Wheeler kat...@home.albury.net.au wrote: On 19/03/2009, at 6:11 AM, Christopher R wrote: Here is my Image slices problem you'll see on the page http://www.thecreativesheep.ca/site/imagepage3.html the slices are not in order on the page and they should be at the top within the div id=logo Check your css: http://tinyurl.com/dz4tpy Also image #1 has the width and height swapped. A suggestion - resize your images to the correct size in your graphics application before uploading rather than using peoples' browsers to do it. Saves on user download time amongst other things. And #4 image seems to be nothing but a great big transparent png - no image or graphic at all. It serves no purpose?? Cheers, KathyW. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
From: Christopher R majes...@thecreativesheep.ca
As you can see the image is still not in order it's like a jigsaw puzzle on
the page
http://www.thecreativesheep.ca/site/imagepage3.html
Following are some suggestions that may, or may not be what you're looking for.
As was suggested, if you want the images to be the size specified in the HTML,
you should resize them in a graphics program rather than letting browsers do
the work.
That being said, here are my suggestions.
Remove all width and height attributes in the HTML for those three images.
Alter the CSS as follows -
#logo {
background-color: transparent;
/*top: -7px;*/ /* remove */
left: 109px; /* change value */
/*width: 850px;*/ /* remove */
height: 250px;
position: relative;
text-align: center;
z-index: 1;
}
logo img {vertical-align: bottom; display:block;} /* remove - it's not doing
anything anyway, despite the spelling correction */
#logo img {float: left;} /* add */
.navigationpanel {
background-image: url(navgraphic.png);
background-repeat: no-repeat;
top: -20px; /* change */
left: -250px; /* change*/
/*width: 400px; /* remove */
/*height: 75px; /* remove */
position: relative;
}
Perhaps these suggestions will give you a new place to start from.
~holly
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Most of the times when the experts in this mailing list take a look at
some HTML and CSS code they find a solution for problems within minutes.
Therefore I kindly ask and stronlgy encourage you, as it was asked
before, to provide a link to the HTML and CSS code, so the others can
analyze the code in detail.
Without that is is almost impossible to help you cause there can be too
many possible causes for that problem.
Best regards,
Christian Kirchhoff
*Editura Gesellschaft für Verlagsdienstleistungen mbH*
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de
AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski
Christopher R schrieb:
I put in padding 0, margin 0 within the div and that didn't solve it neither
did display:inline or display: block.
idname img {rules} is how I currently have it laid out. Now what also I find
odd is that I have all my slices loaded but 2 slices don't show up
in the right order there still is a gap between the slices that do show up.
On Tue, Mar 10, 2009 at 8:38 AM Virgilio Quilario
virgilio.quila...@gmail.com wrote:
Hi does anyone know why I'm getting white spaces between sliced images ? I
have a bunch of img tags within the div and I can't figure out why the
images have spaces, and currently why half of the image slices look fine
and the rest look like a jigsaw puzzle.
hi, maybe you need:
img {
margin:0;
padding:0;
}
please post a code or link to it.
Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
I put in padding 0, margin 0 within the div and that didn't solve it neither
did display:inline or display: block.
idname img {rules} is how I currently have it laid out. Now what also I find
odd is that I have all my slices loaded but 2 slices don't show up
in the right order there still is a gap between the slices that do show up.
On Tue, Mar 10, 2009 at 8:38 AM Virgilio Quilario
virgilio.quila...@gmail.com wrote:
Hi does anyone know why I'm getting white spaces between sliced images ? I
have a bunch of img tags within the div and I can't figure out why the
images have spaces, and currently why half of the image slices look fine and
the rest look like a jigsaw puzzle.
hi, maybe you need:
img {
margin:0;
padding:0;
}
please post a code or link to it.
Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image Slices
Christopher R wrote:
On Tue, Mar 10, 2009 at 8:38 AM Virgilio Quilario
virgilio.quila...@gmail.com wrote:
Hi does anyone know why I'm getting white spaces between sliced
images ? I have a bunch of img tags within the div and I can't
figure out why the images have spaces, and currently why half of the
image slices look fine and the rest look like a jigsaw puzzle.
hi, maybe you need:
img {
margin:0;
padding:0;
}
please post a code or link to it.
Virgil
http://www.jampmark.com
I put in padding 0, margin 0 within the div and that didn't solve it neither
did display:inline or display: block.
idname img {rules} is how I currently have it laid out. Now what also I find
odd is that I have all my slices loaded but 2 slices don't show up
in the right order there still is a gap between the slices that do show up.
Christopher, a link does help.
BTW, the display:block should be applied to the img and not the div.
img {display:block;}
The div element is display:block by default. Currently I presume the
image is display inline (since its an inline element) so it baseline is
the same level as the base line of the run of line boxes within I
presume the div.
Do you have a link or small sample portion of the code?
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
