[css-d] IE6 a:hover issue - all images disappear!!
Hi list,
I have an issue in IE6 and I can't find any information about it online.
I have a sub-nav list with a bunch of links and I have a background
image that is set to appear on the links on hover. In IE6, when you
hover over the links all over the images on the page (but not
background images) disappear and they don't reappear under any
circumstances (apart from a refresh of course). The bug seems to occur
if any background property is set on hover e.g.
#sub_nav li a:hover { background: no-repeat; }
I am really lost as to why this is happening. Any solutions?
The code for the nav and sub-nav is below.
Thanks,
Blake
ul id=nav
li class=active
a class=link1 href=#
spanLink 1/span
/a
/li
li
a class=link2 href=#
spanLink 2/span
/a
/li
li
a class=link3 href=#
spanLink 3/span
/a
/li
li
a class=link4 href=#
spanLink 4/span
/a
/li
/ul
ul id=sub_nav
li
a href=#Link 1/a
/li
li
a href=#Link 2/a
/li
li
a href=#Link 3/a
/li
/ul
#nav{ background: #000; float: left;
list-style: none; width: 990px; }
#nav li { display: inline; float: left; }
#nav li a { display: block; float: left; padding:
0 36px 0 18px; }
#nav li a span { background-position: 0 0; cursor:
pointer;
display: block; height: 29px; text-indent: -px; }
#nav li a:hover { color: #f00; }
#nav li a:hover span{ background-position: 0 -29px; }
#sub_nav{ float: left; font-size: 11px;
font-weight: bold;
list-style: none; }
#sub_nav li { float: left; }
#sub_nav li a { color: #000; display: block; float:
left; height:
16px; padding: 7px 10px 6px; text-transform: uppercase; }
#sub_nav li a:hover { background: #a60018
url(background.gif)
repeat-x; color: #fff; }
__
css-discuss [EMAIL PROTECTED]
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] IE6 a:hover issue - all images disappear!!
Try a position: relative; on your lis
On Thu, Jul 24, 2008 at 8:44 AM, Blake [EMAIL PROTECTED] wrote:
Hi list,
I have an issue in IE6 and I can't find any information about it online.
I have a sub-nav list with a bunch of links and I have a background
image that is set to appear on the links on hover. In IE6, when you
hover over the links all over the images on the page (but not
background images) disappear and they don't reappear under any
circumstances (apart from a refresh of course). The bug seems to occur
if any background property is set on hover e.g.
#sub_nav li a:hover { background: no-repeat; }
I am really lost as to why this is happening. Any solutions?
The code for the nav and sub-nav is below.
Thanks,
Blake
ul id=nav
li class=active
a class=link1 href=#
spanLink 1/span
/a
/li
li
a class=link2 href=#
spanLink 2/span
/a
/li
li
a class=link3 href=#
spanLink 3/span
/a
/li
li
a class=link4 href=#
spanLink 4/span
/a
/li
/ul
ul id=sub_nav
li
a href=#Link 1/a
/li
li
a href=#Link 2/a
/li
li
a href=#Link 3/a
/li
/ul
#nav{ background: #000; float: left;
list-style: none; width: 990px; }
#nav li { display: inline; float: left; }
#nav li a { display: block; float: left;
padding: 0 36px 0 18px; }
#nav li a span { background-position: 0 0; cursor:
pointer;
display: block; height: 29px; text-indent: -px; }
#nav li a:hover { color: #f00; }
#nav li a:hover span{ background-position: 0 -29px; }
#sub_nav{ float: left; font-size: 11px;
font-weight: bold;
list-style: none; }
#sub_nav li { float: left; }
#sub_nav li a { color: #000; display: block;
float: left; height:
16px; padding: 7px 10px 6px; text-transform: uppercase; }
#sub_nav li a:hover { background: #a60018
url(background.gif)
repeat-x; color: #fff; }
__
css-discuss [EMAIL PROTECTED]
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 [EMAIL PROTECTED]
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] Firefox 3 bug or template issue?
Dear List, I've got a template which I intent to use for our intranet, but in Firefox 3 there's a strange whitespace on top of the template: http://ebrius.nl/fileadmin/template/mem_don/3/ And I can't seem to fix it. Iexplore 7, 6 render it correctly. Anyone know what causes this whitespace? Regards, Thijs H __ css-discuss [EMAIL PROTECTED] 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] Firefox 3 bug or template issue?
Thijs Hakkenberg wrote:
Anyone know what causes this whitespace?
Try this: h1{margin:0}
It looks like collapsing margins to me.
Hope it helps.
--Bill
--
/**
* Bill Brown
* TheHolierGrail.com MacNimble.com
* From dot concept...to dot com...since 1999.
***/
__
css-discuss [EMAIL PROTECTED]
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] Firefox 3 bug or template issue?
On Jul 24, 2008, at 6:05 PM, Thijs Hakkenberg wrote: I've got a template which I intent to use for our intranet, but in Firefox 3 there's a strange whitespace on top of the template: http://ebrius.nl/fileadmin/template/mem_don/3/ And I can't seem to fix it. Iexplore 7, 6 render it correctly. The usual thing, and IE (6+7) is wrong. Gecko, WebKit, Opera look all the same and are correct. The issue is one of margin-collapsing (-through). The margin-top on the h2 is outside of the blue box (#header). That doesn't happen in IE, 'cause you have declared a 'height' on the div (triggers 'hasLayout'), and that prevents the margin of collapsing through. Try adding a 1px border at the top of the div. That will fix the issue. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
On Thu, Jul 24, 2008 at 8:13 AM, Christopher [EMAIL PROTECTED] wrote: Glenn E. Lanier, II wrote: On Thu, Jul 24, 2008 at 7:37 AM, Christopher [EMAIL PROTECTED]mailto: [EMAIL PROTECTED] wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? #flashbox is positioned in a way that causes part of it to display outside your body, while #topbar is fully contained in your body. You have also applied padding to #topbar, and it contains no content. height:152px might accomplish what you want visually without giving you grief when you add content. I echo *several* other people on the list: generate an image (using your favorite digital tool) of what you want your page to look like when finished. Then we will have a better idea of how to help you style it cleanly. --G To everyone: It is #topbar that if you resize your browser it won't hug the right hand side of the browser. Christopher, #topbar is the item I mention. If you use Firefox and either Firebug or the web developer plugin, you can remove #flashbox from the html (using Firebug) or the styles for #flashbox (using Pedrick's excellent CSS editor), you will see that the #topbar goes to 100% of the body width. The 500px left-margin on #flashbox is your offending item. If you use Firebug and select the inspect option, you'll be able to mouse-over the various block items in your page. Resize the window to a smaller than 500px + 430px (width of #flashbox). See that the #topbar is no longer 100% width of viewport. Start the inspection, slowing moving around the screen. When you highlight the body object, you'll notice that #topbar is 100% of body, but #flashbox extends outside the body. I am saying your problem is not in the styling of #topbar, but the styles set on #flashbox. --G __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Glenn E. Lanier, II wrote: On Thu, Jul 24, 2008 at 7:37 AM, Christopher [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? #flashbox is positioned in a way that causes part of it to display outside your body, while #topbar is fully contained in your body. You have also applied padding to #topbar, and it contains no content. height:152px might accomplish what you want visually without giving you grief when you add content. I echo *several* other people on the list: generate an image (using your favorite digital tool) of what you want your page to look like when finished. Then we will have a better idea of how to help you style it cleanly. --G To everyone: It is #topbar that if you resize your browser it won't hug the right hand side of the browser. __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
On Thu, Jul 24, 2008 at 8:13 AM, Christopher [EMAIL PROTECTED] wrote:
To everyone: It is #topbar that if you resize your browser it won't
hug the right hand side of the browser.
As an FYI, #topbar DOES remain at the right edge of the viewport in
FF2 and Safari on Mac.
I've been hesitant to offer anything to this thread due to the extreme
vagueness of it most of the time. However, I will add a couple things
that will help any who are trying to read and analyze your CSS. If
you are determined to write out rules longhand that have a shorthand
equivalent, then it's very nice to keep like items together. I offer
this from your CSS as an example:
#gallerybox {
background-color: #FF;
border-right-width: 200px;
height: 300px;
margin-left: 135px;
margin-top: -35px;
border-left-width: 0px;
padding-left: 35px;
padding-right: 150px;
left: 40px;
border-top-width: 0px;
The rule above includes several border property:value pairs that are
sprinkled throughout the rule rather than being together. To me, this
is harder to wade through than putting the like properties together.
Even better, just use border-width: 0 200px 0 0 to accomplish the same
thing. Or, yet another option is to just declare the one side that
has a border width unless the element you're applying the rule to has
a default border. If not, there's no need for the '0' values.
As a side note, '0' values on anything don't require a unit (px, em,
%, etc). 0 is just 0.
Another small thing that can shrink your CSS. Any hexadecimal numbers
(#ffccff or #003311) that have three pairs of identical numbers (ff cc
ff or 00 33 11 from the examples just given) can be reduced to a 3
digit version (#fcf or #031).
Shorthand notation is wonderful for shrinking CSS files! Why use:
border-top-width: 2em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF;
border-right-color: #FF;
border-bottom-color: #FF;
border-left-color: #FF;
when you could use:
border: 2em solid #fff;
A reduced version of your current CSS for #flashbox would be:
#flashbox {
height: 410px;
width: 430px;
margin-left: 500px;
margin-top: 70px;
background: #000; /*removed the repeat property as there is no image
to repeat or not repeat */
z-index: 3;
position: relative;
padding: -12px 0 0 0; /* note I left the -12px in, though padding
can't have negative values, only margins */
border: 2em solid #fff;
}
I think the consensus of those that have tried to help you is that
there are many basics that need to be learned first before really
proceeding very far. So much basic CSS and HTML info is easy to find
online that will help you properly structure your documents if you
will only seclude yourself and study it some. Only then will you be
able to really get out of a list like this what you need to without
making a thread quite laborious for the list.
That's not to say you have to be advanced to use a list like this. By
no means! I'm still learning a ton myself. However, with little
basic understanding of general concepts it's hard to even formulate
the questions in such a way to get the desired answers.
One of the simplest requests throughout this thread which has yet gone
unheeded is to provide a static graphic comp of what it is you're
trying to achieve. Do you have one? A Photoshop file, a scanned hand
drawing, anything that shows the concept you're after? if so, the
ones trying to help you would love to see it.
One final note - two of your images specified for that page are not
available on the server. One is called topbarfade4.png and I don't
remember the other one.
Good luck with your project.
Chris
__
css-discuss [EMAIL PROTECTED]
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] Big Blue Bar
Glenn E. Lanier, II wrote: On Thu, Jul 24, 2008 at 9:29 AM, Christopher [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Glenn E. Lanier, II wrote: On Thu, Jul 24, 2008 at 9:07 AM, Christopher [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Chris Akins wrote: I think the consensus of those that have tried to help you is that there are many basics that need to be learned first before really One of the simplest requests throughout this thread which has yet gone unheeded is to provide a static graphic comp of what it is you're trying to achieve. Do you have one? A Photoshop file, a scanned hand drawing, anything that shows the concept you're after? if so, the ones trying to help you would love to see it. coming together as I have designed it, yes I do have a mock up page already designed but I have most of the page layed out and everything is so far so good just a few minor things like for example this #topbar issue and there really as far as I am up to not really much more else needs to be worked out, but your and others who suggested short-handing the style rules, yes this is something I will start doing, asap. Christopher, I think you'd be surprised at the difference in the markup and associated styles generated by some on the list if you provided an image of the final design. I know I've learned by seeing how someone else would create my design (after I'd spent many, many hours on it). Many times, the fewer divs/ID/classes you include, the fewer ways you have to cause yourself grief down the road. --G Alright, if it gets the blue bar fixed sigh Can you upload images to this list or just use a 3rd party site? You can't upload to the list (attachments are a no-no). However, you can put the file on your website and provide the link. Why are you so opposed to doing something that will only take a couple of minutes (at most), considering how much collective time has been spent helping (this said as someone who has not invested much time at all, but I've read many suggestions from others on numerous topics)? --G I'm not opposed of it, I do appreciate the time that everyone on the list has given me or solved for me it has been more appreciated then words can say, well here I upload a mock up of the page some of the graphics are gone but that just due to I may alter them I may not you can see the box more importantly you'll see the #flashbox and the #topbar in the mock up, then I hope someone can help me solve the #topbar not touching the edge of the right hand size dilemma. Thank You all :) Mockup: http://www.walkfar.ca/test/mockup.jpg __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
On 24 Jul 2008, at 15:07, Christopher wrote: Chris Akins wrote: One of the simplest requests throughout this thread which has yet gone unheeded is to provide a static graphic comp of what it is you're trying to achieve. Do you have one? A Photoshop file, a scanned hand drawing, anything that shows the concept you're after? if so, the ones trying to help you would love to see it. One final note - two of your images specified for that page are not available on the server. One is called topbarfade4.png and I don't remember the other one. Chris, I mentioned that I will start using the short forms of doing CSS in a few posts back as I see it does make things simpler. Everything is coming together as I have designed it, yes I do have a mock up page already designed but I have most of the page layed out and everything is so far so good just a few minor things like for example this #topbar issue and there really as far as I am up to not really much more else needs to be worked out, but your and others who suggested short-handing the style rules, yes this is something I will start doing, asap. Christopher Please just post your mock up. Even if you don't think it will help. Even if you think you're one keystroke away from perfecting your site. Just as a favour to the people who have freely donated their time to trying to help you. Please? Jonny __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Chris Akins wrote:
On Thu, Jul 24, 2008 at 8:13 AM, Christopher [EMAIL PROTECTED] wrote:
To everyone: It is #topbar that if you resize your browser it won't
hug the right hand side of the browser.
As an FYI, #topbar DOES remain at the right edge of the viewport in
FF2 and Safari on Mac.
I've been hesitant to offer anything to this thread due to the extreme
vagueness of it most of the time. However, I will add a couple things
that will help any who are trying to read and analyze your CSS. If
you are determined to write out rules longhand that have a shorthand
equivalent, then it's very nice to keep like items together. I offer
this from your CSS as an example:
#gallerybox {
background-color: #FF;
border-right-width: 200px;
height: 300px;
margin-left: 135px;
margin-top: -35px;
border-left-width: 0px;
padding-left: 35px;
padding-right: 150px;
left: 40px;
border-top-width: 0px;
The rule above includes several border property:value pairs that are
sprinkled throughout the rule rather than being together. To me, this
is harder to wade through than putting the like properties together.
Even better, just use border-width: 0 200px 0 0 to accomplish the same
thing. Or, yet another option is to just declare the one side that
has a border width unless the element you're applying the rule to has
a default border. If not, there's no need for the '0' values.
As a side note, '0' values on anything don't require a unit (px, em,
%, etc). 0 is just 0.
Another small thing that can shrink your CSS. Any hexadecimal numbers
(#ffccff or #003311) that have three pairs of identical numbers (ff cc
ff or 00 33 11 from the examples just given) can be reduced to a 3
digit version (#fcf or #031).
Shorthand notation is wonderful for shrinking CSS files! Why use:
border-top-width: 2em;
border-right-width: 2em;
border-bottom-width: 2em;
border-left-width: 2em;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF;
border-right-color: #FF;
border-bottom-color: #FF;
border-left-color: #FF;
when you could use:
border: 2em solid #fff;
A reduced version of your current CSS for #flashbox would be:
#flashbox {
height: 410px;
width: 430px;
margin-left: 500px;
margin-top: 70px;
background: #000; /*removed the repeat property as there is no image
to repeat or not repeat */
z-index: 3;
position: relative;
padding: -12px 0 0 0; /* note I left the -12px in, though padding
can't have negative values, only margins */
border: 2em solid #fff;
}
I think the consensus of those that have tried to help you is that
there are many basics that need to be learned first before really
proceeding very far. So much basic CSS and HTML info is easy to find
online that will help you properly structure your documents if you
will only seclude yourself and study it some. Only then will you be
able to really get out of a list like this what you need to without
making a thread quite laborious for the list.
That's not to say you have to be advanced to use a list like this. By
no means! I'm still learning a ton myself. However, with little
basic understanding of general concepts it's hard to even formulate
the questions in such a way to get the desired answers.
One of the simplest requests throughout this thread which has yet gone
unheeded is to provide a static graphic comp of what it is you're
trying to achieve. Do you have one? A Photoshop file, a scanned hand
drawing, anything that shows the concept you're after? if so, the
ones trying to help you would love to see it.
One final note - two of your images specified for that page are not
available on the server. One is called topbarfade4.png and I don't
remember the other one.
Good luck with your project.
Chris
Chris, I mentioned that I will start using the short forms of doing CSS
in a few posts back as I see it does make things simpler. Everything is
coming together as I have designed it, yes I do have a mock up page
already designed but I have most of the page layed out and everything is
so far
so good just a few minor things like for example this #topbar issue and
there really as far as I am up to not really much more else needs to be
worked out, but your and
others who suggested short-handing the style rules, yes this is
something I will start doing, asap.
__
css-discuss [EMAIL PROTECTED]
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] Big Blue Bar
On Thu, Jul 24, 2008 at 7:37 AM, Christopher [EMAIL PROTECTED] wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? #flashbox is positioned in a way that causes part of it to display outside your body, while #topbar is fully contained in your body. You have also applied padding to #topbar, and it contains no content. height:152px might accomplish what you want visually without giving you grief when you add content. I echo *several* other people on the list: generate an image (using your favorite digital tool) of what you want your page to look like when finished. Then we will have a better idea of how to help you style it cleanly. --G __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Glenn E. Lanier, II wrote: On Thu, Jul 24, 2008 at 8:13 AM, Christopher [EMAIL PROTECTED] wrote: Glenn E. Lanier, II wrote: On Thu, Jul 24, 2008 at 7:37 AM, Christopher [EMAIL PROTECTED]mailto: [EMAIL PROTECTED] wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? #flashbox is positioned in a way that causes part of it to display outside your body, while #topbar is fully contained in your body. You have also applied padding to #topbar, and it contains no content. height:152px might accomplish what you want visually without giving you grief when you add content. I echo *several* other people on the list: generate an image (using your favorite digital tool) of what you want your page to look like when finished. Then we will have a better idea of how to help you style it cleanly. --G To everyone: It is #topbar that if you resize your browser it won't hug the right hand side of the browser. Christopher, #topbar is the item I mention. If you use Firefox and either Firebug or the web developer plugin, you can remove #flashbox from the html (using Firebug) or the styles for #flashbox (using Pedrick's excellent CSS editor), you will see that the #topbar goes to 100% of the body width. The 500px left-margin on #flashbox is your offending item. If you use Firebug and select the inspect option, you'll be able to mouse-over the various block items in your page. Resize the window to a smaller than 500px + 430px (width of #flashbox). See that the #topbar is no longer 100% width of viewport. Start the inspection, slowing moving around the screen. When you highlight the body object, you'll notice that #topbar is 100% of body, but #flashbox extends outside the body. I am saying your problem is not in the styling of #topbar, but the styles set on #flashbox. --G __ css-discuss [EMAIL PROTECTED] 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/ What would be the best way to fix, I want to have the #flashbox in that area. -- *Christopher* - the creative sheep *animator*///motion graphics artist/\\*web dev* web: www.walkfar.ca mailto:[EMAIL PROTECTED] email: [EMAIL PROTECTED] http://www.walkfar.ca/ __ css-discuss [EMAIL PROTECTED] 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] Firefox 3 bug or template issue?
Thanks, I already fixed it with Amrider's advice:
#header h2#id {
background:transparent url(../images/individual.gif) no-repeat scroll
left 50%;
color:White;
font-family:Tahoma,Sans-Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
*- margin-top:25px; // Remove this rule or set margin-top:
0px;text-indent:20px;
text-transform:none;
}
Regards,
--
From: Thijs Hakkenberg [EMAIL PROTECTED]
Sent: Thursday, July 24, 2008 2:35 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Firefox 3 bug or template issue?
Philippe Wittenbergh wrote:
On Jul 24, 2008, at 6:05 PM, Thijs Hakkenberg wrote:
I've got a template which I intent to use for our intranet, but in
Firefox 3 there's a strange whitespace on top of the template:
http://ebrius.nl/fileadmin/template/mem_don/3/
And I can't seem to fix it. Iexplore 7, 6 render it correctly.
The usual thing, and IE (6+7) is wrong. Gecko, WebKit, Opera look all
the same and are correct.
The issue is one of margin-collapsing (-through). The margin-top on
the h2 is outside of the blue box (#header).
That doesn't happen in IE, 'cause you have declared a 'height' on the
div (triggers 'hasLayout'), and that prevents the margin of collapsing
through.
Try adding a 1px border at the top of the div. That will fix the issue.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
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 [EMAIL PROTECTED]
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] Big Blue Bar
Christopher wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? Who cares? Sooner or later you'll have to modify your behavior, accept the suggestions that have been made, and physically change stuff accordingly. Otherwise, most folks with a brain, will simply stop replying to your non-nonsensical repeated requests. Your current assembly of images assembled with over-coded, meaningless, confused CSS, with text layered on top of images, will simply turn into an explosion in a liquor store in the hands of real users. Keep it simple, if not open, honest, direct, and specific, and valid. No images are needed to accomplish what you got. Save the images to display your digital animations or whatever it is you intend to show. Cursory checked in IE/6, IE/7, Mac FF/3.0.1, and Mac Opera, Mac Safari, and Camino, http://www.chelseacreekstudio.com/ca/cssd/chris.html As ever, Quasimodo -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
David Laakso wrote: Christopher wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? Who cares? Sooner or later you'll have to modify your behavior, accept the suggestions that have been made, and physically change stuff accordingly. Otherwise, most folks with a brain, will simply stop replying to your non-nonsensical repeated requests. Your current assembly of images assembled with over-coded, meaningless, confused CSS, with text layered on top of images, will simply turn into an explosion in a liquor store in the hands of real users. Keep it simple, if not open, honest, direct, and specific, and valid. No images are needed to accomplish what you got. Save the images to display your digital animations or whatever it is you intend to show. Cursory checked in IE/6, IE/7, Mac FF/3.0.1, and Mac Opera, Mac Safari, and Camino, http://www.chelseacreekstudio.com/ca/cssd/chris.html As ever, Quasimodo I am almost at the point I need to be. I will get it right, many here have been very helpful as I already have mentioned this. __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Christopher wrote: I'm not opposed of it, I do appreciate the time that everyone on the list has given me or solved for me it has been more appreciated then words can say, well here I upload a mock up of the page some of the graphics are gone but that just due to I may alter them I may not you can see the box more importantly you'll see the #flashbox and the #topbar in the mock up, then I hope someone can help me solve the #topbar not touching the edge of the right hand size dilemma. Thank You all :) Mockup: http://www.walkfar.ca/test/mockup.jpg That is a lot better Christopher. Now you seem to be listening. Thank You. I see that you have the *about me* box with rounded corners and drop shadow. Technically this is quite a tricky thing to do with CSS. The graphic that you have provided is eye catching but very challenging in respect to which browser could show this affect. This would require a few extra divs for this to work in IE. I will point you to this demo. http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm In a browser that is quite up there with CSS standards (Safari 3) this appears like this. http://css-class.com/test/images/box-shadow-rounded-corners.jpg Before you go crazy with divs to create rounded corners and drop shadows you may want to just wait for the other browsers to catch up. I will do a few demos for you later but I will remind you now, creating what you want in your graphic, I can see many hour or even days of work. Be very patient with us. BTW, my email client is fulling fast with threads relating to your various post. Please take it easy on us. Some of us on quite a few mailing list. -- Alan http://css-class.com/ Nearly all men can stand adversity, but if you want to test a man's character, give him power - Abraham Lincoln __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Christopher wrote: David Laakso wrote: Christopher wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? Who cares? Sooner or later you'll have to modify your behavior, accept the suggestions that have been made, and physically change stuff accordingly. Otherwise, most folks with a brain, will simply stop replying to your non-nonsensical repeated requests. Your current assembly of images assembled with over-coded, meaningless, confused CSS, with text layered on top of images, will simply turn into an explosion in a liquor store in the hands of real users. Keep it simple, if not open, honest, direct, and specific, and valid. No images are needed to accomplish what you got. Save the images to display your digital animations or whatever it is you intend to show. Cursory checked in IE/6, IE/7, Mac FF/3.0.1, and Mac Opera, Mac Safari, and Camino, http://www.chelseacreekstudio.com/ca/cssd/chris.html As ever, Quasimodo I am almost at the point I need to be. I will get it right, many here have been very helpful as I already have mentioned this. Many people have been helpful. That was my point. If you think you are at the point you need to be then you may have neglected to view your page in IE/6 and IE/7. And at +2 font-scaling in FF/2+, Safari, and Camino. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] Body background image shifting in Firefox 3.01
On Wed, 23 Jul 2008 23:30:57 -0500, RePost wrote: 1. Is there any way I can get the outer wrapper background to load before the content? The background image in the outer wrapper does not multiply vertically (repeat-y) until all the content has loaded. This happens in Firefox and not IE. Yes. You can pre-load background images by including them in the markup at the top of the page BODY. Apply a width=1, height=0 so they don't take up space, and enclose them in a DIV that's positioned off-left using your favorite method for doing it. Because in-line images generally load before those declared in CSS, this method is pretty effective cross-browser. Just be sure to give them a dimension so they are in fact downloaded. I find that the 1-pixel width I used above works pretty well. (Hat-tip to Thierry for this, from his TIP image placement.[1]) [1] http://www.tjkdesign.com/articles/tip_5.asp Cordially, David -- __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Christopher wrote: David Laakso wrote: Christopher wrote: When you resize the browser on this page http://www.walkfar.ca/test/productionsite13.html you'll see the BiG blue bar now when you resize the browser window you'll notice that the BiG blue bar does not touch the right hand side of the browser window, is this expected or is there a work around? Who cares? Sooner or later you'll have to modify your behavior, accept the suggestions that have been made, and physically change stuff accordingly. Otherwise, most folks with a brain, will simply stop replying to your non-nonsensical repeated requests. Your current assembly of images assembled with over-coded, meaningless, confused CSS, with text layered on top of images, will simply turn into an explosion in a liquor store in the hands of real users. Keep it simple, if not open, honest, direct, and specific, and valid. No images are needed to accomplish what you got. Save the images to display your digital animations or whatever it is you intend to show. Cursory checked in IE/6, IE/7, Mac FF/3.0.1, and Mac Opera, Mac Safari, and Camino, http://www.chelseacreekstudio.com/ca/cssd/chris.html As ever, Quasimodo I am almost at the point I need to be. I will get it right, many here have been very helpful as I already have mentioned this. Many people have been helpful. That was my point. If you think you are at the point you need to be then you may have neglected to view your page in IE/6 and IE/7. And at +2 font-scaling in FF/2+, Safari, and Camino. Beyond helpful, actually -- Quasi, you actually made a page template for him that's completely valid and tested on several browsers?! I don't even think Christopher even noticed the link. __ css-discuss [EMAIL PROTECTED] 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] Vertical Positioning?
I asked this once before and never received a response from the group so I thought I would try one more time. At the link located below, is there any way to position Test Image Box at the bottom of the column on the left hand side? I know I can vary the top margin of the div test on each page to force this image to a position, but I wanted to avoid doing this for every page. I also though absolute positioning might work but have not tried it yet. Any suggestions on how I can make this work? HTML: http://dev.eddysound.com/dev/msc/ CSS: http://dev.eddysound.com/dev/msc/main.css Any help on this would be greatly appreciated. I just need to know if I am trying something which is impossible to achieve in CSS. Thanks! Matt Stoneback __ css-discuss [EMAIL PROTECTED] 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] IE6 a:hover issue - all images disappear!!
On Thu, Jul 24, 2008 at 5:13 PM, Matijs [EMAIL PROTECTED] wrote:
Try a position: relative; on your lis
Unfortunately that doesn't help…
I have fixed the problem but unfortunately the mark-up is quite
bloated (I've had to add a span).
#sub_nav li a { color: #000; display: block; float:
left;
text-transform: uppercase; }
#sub_nav li a span { background: url(background.gif) 0
-29px
repeat-x; cursor: pointer; display: block; float: left; height: 16px;
padding: 7px 10px 6px; }
#sub_nav li a:hover { color: #fff; }
#sub_nav li a:hover span{ background-position: 0 0; }
If anyone knows a better solution please let me know.
Regards.
Blake
__
css-discuss [EMAIL PROTECTED]
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] IE6 a:hover issue - all images disappear!!
Blake wrote: ...In IE6, when you hover over the links all over the images on the page (but not background images) disappear and they don't reappear under any circumstances (apart from a refresh of course). ... I am really lost as to why this is happening. Any solutions? The code for the nav and sub-nav is below. Can you post an URL of a reduction that is showing the problem, or the URL of the original page? regards, Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.com __ css-discuss [EMAIL PROTECTED] 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] Vertical Positioning?
Matthew Stoneback wrote:
At the link located below, is there any way to position Test Image Box at
the bottom of the column on the left hand side?
HTML: http://dev.eddysound.com/dev/msc/
CSS: http://dev.eddysound.com/dev/msc/main.css
Matt Stoneback
Providing you can alter the html, you could put the .test division in
the footer...
html
div id=footer
pCopyright #169; 2008 - Manitou Springs High School - Cheerleading
img src=ms_files/validati.jpg width=170 height=35 alt=XHTML and
CSS Valid //p
div class=test
a href= title=Test Image Boximg src=ms_files/test_ima.jpg
width=170 height=170 alt=Test Image Box //a
/div
/div
/div
/body
/html
!-- This document saved from http://dev.eddysound.com/dev/msc/ --
and position it to the bottom of the left col using ap...
css
.test { background: lime; height:190px; position: absolute; bottom:
70px; left:10px; width: 180px; text-align: center; /*display:
block;vertical-align: bottom;*/ }
.container { position:relative; }
Quick checked in XP IE/6 7; and Mac FF/3.0.1, Safari, Ccamino, Opera.
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
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] Vertical Positioning?
I would change:
#content { position: relative; }
and
.test { position: absolute; left: 0; bottom: 0; width: 198px; height: 175px;
text-align: center; }
Jim
On Thu, Jul 24, 2008 at 3:37 PM, Matthew Stoneback
[EMAIL PROTECTED] wrote:
I asked this once before and never received a response from the group so I
thought I would try one more time.
At the link located below, is there any way to position Test Image Box at
the bottom of the column on the left hand side? I know I can vary the top
margin of the div test on each page to force this image to a position,
but
I wanted to avoid doing this for every page. I also though absolute
positioning might work but have not tried it yet. Any suggestions on how I
can make this work?
HTML: http://dev.eddysound.com/dev/msc/
CSS: http://dev.eddysound.com/dev/msc/main.css
Any help on this would be greatly appreciated. I just need to know if I am
trying something which is impossible to achieve in CSS.
Thanks!
Matt Stoneback
__
css-discuss [EMAIL PROTECTED]
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 [EMAIL PROTECTED]
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] IE6 a:hover issue - all images disappear!!
On Fri, Jul 25, 2008 at 9:32 AM, Ingo Chao [EMAIL PROTECTED] wrote: Can you post an URL of a reduction that is showing the problem, or the URL of the original page? Not at the moment but I will have a look tonight or if I get a moment at work and try to figure out the circumstances of what is causing it and post a test-case. Regards, Blake __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Alan Gresley wrote: Christopher wrote: I'm not opposed of it, I do appreciate the time that everyone on the list has given me or solved for me it has been more appreciated then words can say, well here I upload a mock up of the page some of the graphics are gone but that just due to I may alter them I may not you can see the box more importantly you'll see the #flashbox and the #topbar in the mock up, then I hope someone can help me solve the #topbar not touching the edge of the right hand size dilemma. Thank You all :) Mockup: http://www.walkfar.ca/test/mockup.jpg That is a lot better Christopher. Now you seem to be listening. Thank You. I see that you have the *about me* box with rounded corners and drop shadow. Technically this is quite a tricky thing to do with CSS. The graphic that you have provided is eye catching but very challenging in respect to which browser could show this affect. This would require a few extra divs for this to work in IE. I will point you to this demo. http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm In a browser that is quite up there with CSS standards (Safari 3) this appears like this. http://css-class.com/test/images/box-shadow-rounded-corners.jpg Before you go crazy with divs to create rounded corners and drop shadows you may want to just wait for the other browsers to catch up. I will do a few demos for you later but I will remind you now, creating what you want in your graphic, I can see many hour or even days of work. Be very patient with us. BTW, my email client is fulling fast with threads relating to your various post. Please take it easy on us. Some of us on quite a few mailing list. Hello, Alan thank you for helping me out! The problem I am trying to overcome is if you take a look at http://www.walkfar.ca/test/productionsite14.html is the #flashbox is not in the position I would like it, In order to get the #topbar to touch the border of the browser I have been informed to put a float element on the #flashbox this has put the #flashbox not where I need it to be and everything else like the graphic where main is to some how disappear. I understand the layout is a visually catching but as you said technically challenging. As it's a little late here I will take a look at those links tomorrow and I look forward to your demos and I understand how everyone on this list get a lot of emails and so forth and is trying to squeeze the time so I can finish this as quickly as possible. Thank You Everyone. __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
Alan Gresley wrote: Christopher wrote: I'm not opposed of it, I do appreciate the time that everyone on the list has given me or solved for me it has been more appreciated then words can say, well here I upload a mock up of the page some of the graphics are gone but that just due to I may alter them I may not you can see the box more importantly you'll see the #flashbox and the #topbar in the mock up, then I hope someone can help me solve the #topbar not touching the edge of the right hand size dilemma. Thank You all :) Mockup: http://www.walkfar.ca/test/mockup.jpg That is a lot better Christopher. Now you seem to be listening. Thank You. I see that you have the *about me* box with rounded corners and drop shadow. Technically this is quite a tricky thing to do with CSS. The graphic that you have provided is eye catching but very challenging in respect to which browser could show this affect. This would require a few extra divs for this to work in IE. I will point you to this demo. http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm In a browser that is quite up there with CSS standards (Safari 3) this appears like this. http://css-class.com/test/images/box-shadow-rounded-corners.jpg Before you go crazy with divs to create rounded corners and drop shadows you may want to just wait for the other browsers to catch up. I will do a few demos for you later but I will remind you now, creating what you want in your graphic, I can see many hour or even days of work. Be very patient with us. BTW, my email client is fulling fast with threads relating to your various post. Please take it easy on us. Some of us on quite a few mailing list. I look forward to the demos as well. I did take a look and even previous states of the page look good in FireFox3 or Opera they do fall apart or things are not aligned properly in IE7 __ css-discuss [EMAIL PROTECTED] 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] Big Blue Bar
I would just take your PSD of the desired look-and-feel, minus the text, and use it to make one giant bacground image. Then just position your content, absolutely or otherwise, over the boxes where you want it. The big blue bar strikes me as kind of an odd user interface, and not necessarily worth all the time and effort. On Thu, Jul 24, 2008 at 9:37 PM, Christopher [EMAIL PROTECTED] wrote: Alan Gresley wrote: Christopher wrote: I'm not opposed of it, I do appreciate the time that everyone on the list has given me or solved for me it has been more appreciated then words can say, well here I upload a mock up of the page some of the graphics are gone but that just due to I may alter them I may not you can see the box more importantly you'll see the #flashbox and the #topbar in the mock up, then I hope someone can help me solve the #topbar not touching the edge of the right hand size dilemma. Thank You all :) Mockup: http://www.walkfar.ca/test/mockup.jpg That is a lot better Christopher. Now you seem to be listening. Thank You. I see that you have the *about me* box with rounded corners and drop shadow. Technically this is quite a tricky thing to do with CSS. The graphic that you have provided is eye catching but very challenging in respect to which browser could show this affect. This would require a few extra divs for this to work in IE. I will point you to this demo. http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm In a browser that is quite up there with CSS standards (Safari 3) this appears like this. http://css-class.com/test/images/box-shadow-rounded-corners.jpg Before you go crazy with divs to create rounded corners and drop shadows you may want to just wait for the other browsers to catch up. I will do a few demos for you later but I will remind you now, creating what you want in your graphic, I can see many hour or even days of work. Be very patient with us. BTW, my email client is fulling fast with threads relating to your various post. Please take it easy on us. Some of us on quite a few mailing list. I look forward to the demos as well. I did take a look and even previous states of the page look good in FireFox3 or Opera they do fall apart or things are not aligned properly in IE7 __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Big Blue Bar
Ben Fider wrote: I would just take your PSD of the desired look-and-feel, minus the text, and use it to make one giant bacground image. Then just position your content, absolutely or otherwise, over the boxes where you want it. The big blue bar strikes me as kind of an odd user interface, and not necessarily worth all the time and effort. On Thu, Jul 24, 2008 at 9:37 PM, Christopher [EMAIL PROTECTED] wrote: Alan Gresley wrote: Christopher wrote: I'm not opposed of it, I do appreciate the time that everyone on the list has given me or solved for me it has been more appreciated then words can say, well here I upload a mock up of the page some of the graphics are gone but that just due to I may alter them I may not you can see the box more importantly you'll see the #flashbox and the #topbar in the mock up, then I hope someone can help me solve the #topbar not touching the edge of the right hand size dilemma. Thank You all :) Mockup: http://www.walkfar.ca/test/mockup.jpg That is a lot better Christopher. Now you seem to be listening. Thank You. I see that you have the *about me* box with rounded corners and drop shadow. Technically this is quite a tricky thing to do with CSS. The graphic that you have provided is eye catching but very challenging in respect to which browser could show this affect. This would require a few extra divs for this to work in IE. I will point you to this demo. http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm In a browser that is quite up there with CSS standards (Safari 3) this appears like this. http://css-class.com/test/images/box-shadow-rounded-corners.jpg Before you go crazy with divs to create rounded corners and drop shadows you may want to just wait for the other browsers to catch up. I will do a few demos for you later but I will remind you now, creating what you want in your graphic, I can see many hour or even days of work. Be very patient with us. BTW, my email client is fulling fast with threads relating to your various post. Please take it easy on us. Some of us on quite a few mailing list. I look forward to the demos as well. I did take a look and even previous states of the page look good in FireFox3 or Opera they do fall apart or things are not aligned properly in IE7 __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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/ Well, I could do this but I've almost got it, it's just IE has some problems that my design does not look well in. -- *Christopher* - the creative sheep *animator*///motion graphics artist/\\*web dev* web: www.walkfar.ca mailto:[EMAIL PROTECTED] email: [EMAIL PROTECTED] http://www.walkfar.ca/ __ css-discuss [EMAIL PROTECTED] 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] David Laakso
This is for David Laakso, I was hoping you could tell me what is wrong with my layout that you got yours to work good even with IE7, I could use your template and just adjust it but I'd like to adjust things like my #flashbox and get it to look how it looks in FF3 in IE 7 I was hoping you could pin point the problems and hopefully also the solutions, I would really appreciate it as it would help me understand ! __ css-discuss [EMAIL PROTECTED] 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/
