Re: [css-d] Drop Shadow for a div with rounded corners
On Monday, June 28, 2010 11:17:28 pm Rebecca Gessler wrote:
Hi everyone,
I am trying to add a drop shadow to my container div that has rounded
corners on the top and bottom. I am using the 960 grid system:
http://sasmg.org/sasmg/
Basically the entire thing should be in a drop shadow (from the tree image
down to the bottom). I have looked for tutorials online but my case seems
special due to the rounded corners.
Thank you for any suggestions you can provide,
Becky G
CSS 3 is an option that would make this very very easy, but only if you don't
mind not having the drop shadow and rounded corners in any version of IE.
#container {
position: relative;
overflow: hidden; /* make the container surround the page properly */
-moz-border-radius: 20px; /* change this to whatever number you actually
need -- this line is for Firefox */
-webkit-border-radius: 20px; /* for older versions of Chrome and Safari */
-khtml-border-radius: 20px; /* for Konqueror */
border-radius: 20px; /* for newest versions of Chrome, Safari, and Opera,
and future browsers */
-moz-box-shadow: 3px 5px 2px #ccc; /* for Firefox */
-webkit-box-shadow: 3px 5px 2px #ccc; /* for Chrome and Safari */
box-shadow: 3px 5px 2px #ccc; /* for future compatibility only -- pretty
sure no browsers implement this yet */
}
the box-shadow syntax is vertical offset, horizontal offset, spread, color. So
that creates a drop shadow that is 3px down, 5px right, fades over 2px, and is
gray. You can add more shadows in other colors, and other placements if you
want, but adding another string like that in the list, separating each shadow
with a comma.
The other option for do this is adding the shadow to your corner images, and
then adding more images to finish off the rest of the shadow. If you go that
route, it has support in all the browsers since you're using images, but it
means that you should probably use the Box by tedd technique:
http://sperling.com/examples/box/
---Tim
__
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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
So, I have a page up at http://efri.dreamhosters.com and is loking fine in Firefox, Chrome and Safari, but IE8 looks broken as hell. I tried to pinpointthe problems, but I have trouble with that. First I tried removing the floats, but still gives me problems :( Would you please just take a look at it and point me in the right direction. Thanks! __ 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] learning html5
Any suggestions on how one can learn html5? thanks! J __ 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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
Zoran Zorkic wrote: So, I have a page up at http://efri.dreamhosters.com and is loking fine in Firefox, Chrome and Safari, but IE8 looks broken as hell. I tried to pinpointthe problems, but I have trouble with that. First I tried removing the floats, but still gives me problems :( Would you please just take a look at it and point me in the right direction. Thanks! Add a doctype and bring it back. Replace what you have with this: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head titleEkonomski fakultet u Rijeci - Skripte/title meta http-equiv=content-type content=text/html; charset=utf-8 meta content=Skripte za Ekonomski fakultet u Rijeci. Besplatni download i preuzimanje. name=Description / meta content=skripte, fax, efri, rijeka, ekonomski, fakultet, faks, predavanja, ispiti, ispit, pitanja, salbahter name=keywords / link href=dream_files/favicon0.ico rel=icon type=image/vnd.microsoft.icon / style type=text/css media=screen@importdream_files/efri.css;/style script type=text/javascript Best, ~d -- desktop http://chelseacreekstudio.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/
Re: [css-d] learning html5
On Tue, Jun 29, 2010 at 9:22 AM, John j...@coffeeonmars.com wrote: Any suggestions on how one can learn html5? thanks! J Here are a few links I am trying to learn from: http://diveintohtml5.org/ http://www.html5rocks.com/ http://www.whatwg.org/specs/web-apps/current-work/multipage/ Regards, Claude Needham p.s. I also found the following page very informative http://camendesign.com/code/video_for_everybody __ 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] Drop Shadow for a div with rounded corners
On Tue, Jun 29, 2010 at 1:22 PM, Tim Climis tcli...@exchange.iu.edu wrote:
On Monday, June 28, 2010 11:17:28 pm Rebecca Gessler wrote:
Hi everyone,
I am trying to add a drop shadow to my container div that has rounded
corners on the top and bottom. I am using the 960 grid system:
http://sasmg.org/sasmg/
Basically the entire thing should be in a drop shadow (from the tree image
down to the bottom). I have looked for tutorials online but my case seems
special due to the rounded corners.
Thank you for any suggestions you can provide,
Becky G
CSS 3 is an option that would make this very very easy, but only if you don't
mind not having the drop shadow and rounded corners in any version of IE.
#container {
position: relative;
overflow: hidden; /* make the container surround the page properly */
-moz-border-radius: 20px; /* change this to whatever number you actually
need -- this line is for Firefox */
-webkit-border-radius: 20px; /* for older versions of Chrome and Safari */
-khtml-border-radius: 20px; /* for Konqueror */
border-radius: 20px; /* for newest versions of Chrome, Safari, and Opera,
and future browsers */
-moz-box-shadow: 3px 5px 2px #ccc; /* for Firefox */
-webkit-box-shadow: 3px 5px 2px #ccc; /* for Chrome and Safari */
box-shadow: 3px 5px 2px #ccc; /* for future compatibility only -- pretty
sure no browsers implement this yet */
}
the box-shadow syntax is vertical offset, horizontal offset, spread, color.
So
that creates a drop shadow that is 3px down, 5px right, fades over 2px, and is
gray. You can add more shadows in other colors, and other placements if you
want, but adding another string like that in the list, separating each shadow
with a comma.
The other option for do this is adding the shadow to your corner images, and
then adding more images to finish off the rest of the shadow. If you go that
route, it has support in all the browsers since you're using images, but it
means that you should probably use the Box by tedd technique:
http://sperling.com/examples/box/
---Tim
Hi !
You can use a htc file to enable curved corners in Internet Explorer.
http://code.google.com/p/curved-corner/
--
Donald
__
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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
I have a page up at http://efri.dreamhosters.com and is loking fine in Firefox, Chrome and Safari, but IE8 looks broken as hell. Add a doctype and bring it back. There are also errors in the CSS. For example, there is a missing semicolon on line 22. Try validating the CSS. Russ __ 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] learning html5
On Tue, Jun 29, 2010 at 7:18 PM, Claude Needham gxx...@gmail.com wrote: On Tue, Jun 29, 2010 at 9:22 AM, John j...@coffeeonmars.com wrote: Any suggestions on how one can learn html5? thanks! J Here are a few links I am trying to learn from: http://diveintohtml5.org/ http://www.html5rocks.com/ http://www.whatwg.org/specs/web-apps/current-work/multipage/ Regards, Claude Needham p.s. I also found the following page very informative http://camendesign.com/code/video_for_everybody __ Hi, Hereunder other interesting links about html5 : http://html5doctor.com/ http://dev.w3.org/html5/spec/Overview.html (Overview) http://www.w3.org/TR/html5-diff/ (Differences between html4 and 5) -- Donald __ 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] learning html5
On Tue, Jun 29, 2010 at 1:37 PM, Donald Fruy don...@fruy.eu wrote: On Tue, Jun 29, 2010 at 7:18 PM, Claude Needham gxx...@gmail.com wrote: On Tue, Jun 29, 2010 at 9:22 AM, John j...@coffeeonmars.com wrote: Any suggestions on how one can learn html5? There's this book that's about to come out, recommended by A List Apart: http://books.alistapart.com/ - Bryce Fields Do or do not. There is no try. -- Yoda __ 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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
On Tue, 29 Jun 2010 12:48:55 -0400, David Laakso wrote: Add a doctype and bring it back. Added it. Ah should have used my template, instead of writing everything from scratch (I use only UltraEdit). Wow, it looks good. Thanks! __ 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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
On Tue, Jun 29, 2010 at 7:39 PM, r...@catjuggling.com wrote: I have a page up at http://efri.dreamhosters.com and is loking fine in Firefox, Chrome and Safari, but IE8 looks broken as hell. Add a doctype and bring it back. There are also errors in the CSS. For example, there is a missing semicolon on line 22. Try validating the CSS. Russ Hi, ... and it's important to close properly each open tag !doctype html html head ... /head body ... /body !-- don't forget this -- /html !-- and this -- -- Donald __ 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] learning html5
I really think that before anyone gets too enthusiastic about jumping on the HTML 5 bandwagon, they should take a step back and consider some of the problems that are emerging. I would recommend taking a considered read of the following : http://news.cnet.com/8301-30685_3-20008935-264.html Philip Taylor __ 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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers
On Tue, 29 Jun 2010, Donald Fruy wrote: On Tue, Jun 29, 2010 at 7:39 PM, r...@catjuggling.com wrote: I have a page up at http://efri.dreamhosters.com and is loking fine in Firefox, Chrome and Safari, but IE8 looks broken as hell. Add a doctype and bring it back. There are also errors in the CSS. For example, there is a missing semicolon on line 22. Try validating the CSS. Russ Hi, and it's important to close properly each open tag !doctype html html head /head body /body !-- don't forget this -- /html !-- and this -- The closing tags for BODY and HTML (as well as HEAD and some others) are optional in HTML4.01. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] learning html5
Philip Taylor (Webmaster, Ret'd) wrote: I really think that before anyone gets too enthusiastic about jumping on the HTML 5 bandwagon, they should take a step back and consider some of the problems that are emerging. I would recommend taking a considered read of the following : http://news.cnet.com/8301-30685_3-20008935-264.html Philip Taylor I'd use it at every given opportunity. aside John, do you have question that has anything to do with practical application of CSS :-) ? Best, ~d -- desktop http://chelseacreekstudio.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-d] Using CSS to not display submit input text
I have already created an input element of type submit as follows
input type=submit alt=Next class=next_button
That has the following styles applied:
.next_button {
background:transparent url(next.jpg) no-repeat scroll 0 0;
border:none;
height:34px;
width:70px;
color:transparent;
font-size:0;
}
.next_button:hover{
background-position:-70px 0;
}
The background is the button as I would like it to appear, which for
browsers that suppourt :hover in this context shows a nice rollover with the
image being shifted, which also fails gracefully for the rest. The color:
transparent and font-size:0 styles were added because I do not want the
Next text to appear if CSS is enabled, but I do want some text to appear
on the button if CSS is not available for some reason.
The color:transparent style works for most browsers, but does not function
as desired in Opera or Internet Explorer. The font-size:0 style presents
the desired appearance in Opera.
In Internet Explorer however the text still appears with a 1px height across
the center of the button. Is there any way in Internet Explorer's
interpretation of CSS to not show any of the value or alt text so that it
will appear if the CSS were to fail?
Thanks,
Jack
__
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] Layout help needed, almost right
Thanks for help provided; so far, still looking for more :)
First, the discussion about the font style is a bit early in this process. I
have not decided on a font styling for my pages. The fonts I chose before were
just something I had grabbed from a previous file I had worked on. Below I put
some fantasy fonts to see what they look like. I am not focused on this part
of my design (just yet).
Second, ideas of using h1 and h2 as the header/footer is an interesting
idea, but I'd rather keep those tags for what they ere designed for.
Next, I've updated my test (below). It works better, but still has issues.
For example:
* in Firefox (v.3.6.3) the right sidebar is not visible. What
spacing/padding am I doing wrong?
* The internal links work just fine in Safari (v.5.0), but not in Opera
(v.10.53 v.10.54). The a.. link I have is above each associated header
with a very thin space. Clicking in Opera the paragraph p below the header
is brought to the top of the page. In Safari, the header is correctly at the
top of the page. Is the way I put the internal link incorrect?
* I am not sure the right sidebar is correct. I have to overrule the hr
element to get it to appear. Without that overrule entry the element is barely
visible on the right. What did I miss?
* I agree in some areas, I am a bit verbose in some of the css elements,
still trying to figure out the shortcuts. :)
Thanks again for all your help and insight. Again, I apologize for having such
a long message.
Eric
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=en-US dir=ltr
head
titleTechnical Travails - homepage/title
meta name=author content=Eric Peterson
meta http-equiv=Content-Type content=text/html;charset=utf-8
meta http-equiv=Content-Language content=en-US, en
meta
name=robots
content=noindex, nofollow, noarchive, nosnippet, noodp, noydir,
noimageindex, notranslate
link
rel=icon
href=images/favicon.ico
type=image/vnd.microsoft.icon
style
body {
margin : 0;
padding : 0;
background-color: #FCF8DC;
color : #00;
}
div.header {
background-color: #E9E8AE;
color : #FF6600;
display : block;
font-size : 2em;
height : 1.25em;
margin : 0;
position: fixed;
right : 0;
top : 0;
width : 100%;
z-index : 1; /* be on top of right column */
}
/* over rule hr shorter length */
hr.nav_hr {
width :100%;
}
div#rightcol {
background : #D7D394;
color : #00;
float : right;
width : 10em;
height : auto;
padding-left: 0.5em;
min-height : 100%;
display : inline;
padding-top : 1em;
padding-bottom : 1em;
position: fixed;
margin-left : 85%;
margin-bottom : 4em;
margin-top : 2em;
margin-right: 0;
overflow: auto;
width : 100%;
}
div#content {
background : #FCF8DC;
color : #00;
float : left;
width : 80%;
height : auto;
margin-top : 1.25em; /* height of header */
padding-left: 1.5em;
padding-bottom : 1.5em; /* height of footer */
}
div#footer {
clear : both;
background : #CC9966;
bottom : 0;
color : #FF;
font-size : 1em;
height : 1.5em;
vertical-align : middle;
position: fixed;
text-align : right;
width : 100%;
}
hr {
width : 75%;
color : #CC9965;
}
/* links in TOC on right div */
a.nav, a.nav:visited {
color : #FF;
display : block;
font-weight : bold;
text-decoration : none;
}
a.nav:hover {
color : #006600;
}
h1.title {
color : #CC3366;
font-size : 0.9em;
font-family : fantasy;
padding-left: 0.5em;
padding-top : 0.2em;
margin : 0;
}
h4.title {
color : #CC3366;
font-size : 1.5em;
font-family : Herculanum, Papyrus, fantasy;
margin : 0;
}
table.header {
height : 1.25em;
width : 100%;
}
table.header td {
padding : 0;
}
table.header td#right{
color : #996633;
font-family : sans-serif;
font-size : 30%;
padding-right : 2em;
text-align : right;
}
Re: [css-d] Using CSS to not display submit input text
On Jun 30, 2010, at 3:52 AM, Jack Blankenships wrote: The color:transparent style works for most browsers, but does not function as desired in Opera or Internet Explorer. The font-size:0 style presents the desired appearance in Opera. Which version of Opera ? color: transparent appears to work fine with Opera 10.53 + here. (I forgot when they implemented support the transparent keyword). As for IE, IE 8 has only limited support for this. As for font-size: 0, that is always a poor idea. People can set a minimum font-size in most browser, or override the page specified font-size by other means. Have you looked into using a strong negative text-indent ? Philippe --- Philippe Wittenbergh http://l-c-n.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/
Re: [css-d] learning html5
On Jun 29, 2010, at 11:30 AM, David Laakso wrote: I'd use it at every given opportunity. aside John, do you have question that has anything to do with practical application of CSS :-) ? Best, ~d Not at the mo..It's just that I've been reading about it more and more..there seems to be building momentum behind it, it can supposedly enable pretty cool things and I wanted to be able to prepare myself by learning it..whatever's new over 4. I'm an OK html coder..not a whiz by any stretch..more like a seat-of- the-pants, reference sheet at the ready type of coder. thank you J __ 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] learning html5
John wrote: On Jun 29, 2010, at 11:30 AM, David Laakso wrote: I'd use it at every given opportunity. aside John, do you have question that has anything to do with practical application of CSS :-) ? Best, ~d Not at the mo..It's just that I've been reading about it more and more..there seems to be building momentum behind it, it can supposedly enable pretty cool things and I wanted to be able to prepare myself by learning it..whatever's new over 4. I'm an OK html coder..not a whiz by any stretch..more like a seat-of-the-pants, reference sheet at the ready type of coder. thank you J John, You asked a good question-- nothing whatsoever wrong in that. No disrespect intended. CSS-D deals primarily with practical discussions of CSS and its use. So another list, perhaps WebDesign-L http://www.webdesign-l.com/, may be good place to ask about learning /any/ hypertext markup language -- even html5. Best, d -- desktop http://chelseacreekstudio.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/
Re: [css-d] learning html5
On 2010/06/29 09:22 (GMT-0700) John composed: Any suggestions on how one can learn html5? I've done nothing much special. I just set the doctype, let the validator teach me what's no longer allowed and suggest compliant changes, and pick up bits here and there on added features. If you want to be more active, let Google find you things like http://html5doctor.com/ if that doesn't wet your whistle. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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/
Re: [css-d] Layout help needed, almost right
Eric Peterson wrote: Thanks for help provided; so far, still looking for more :) First, the discussion about the font style is a bit early in this process. I have not decided on a font styling for my pages. The fonts I chose before were just something I had grabbed from a previous file I had worked on. Below I put some fantasy fonts to see what they look like. I am not focused on this part of my design (just yet). Second, ideas of using h1 and h2 as the header/footer is an interesting idea, but I'd rather keep those tags for what they ere designed for. Next, I've updated my test (below). It works better, but still has issues. For example: * in Firefox (v.3.6.3) the right sidebar is not visible. What spacing/padding am I doing wrong? * The internal links work just fine in Safari (v.5.0), but not in Opera (v.10.53 v.10.54). The a.. link I have is above each associated header with a very thin space. Clicking in Opera the paragraph p below the header is brought to the top of the page. In Safari, the header is correctly at the top of the page. Is the way I put the internal link incorrect? * I am not sure the right sidebar is correct. I have to overrule the hr element to get it to appear. Without that overrule entry the element is barely visible on the right. What did I miss? * I agree in some areas, I am a bit verbose in some of the css elements, still trying to figure out the shortcuts. :) Thanks again for all your help and insight. Again, I apologize for having such a long message. Eric Yes, Eric... Any better, now? http://chelseacreekstudio.com/ca/cssd/ee.html Extensive CSS/markup revision. Quick checked in Mac browsers. Not checked in IE/8. Best, ~d -- desktop http://chelseacreekstudio.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-d] Problem with dropdown shifting right in IE6
Hi All,
I am helping out a friend with his site and we're almost there. The only
issue the client is having is that in IE6, the dropdown menu is pushed too
far over to the right by about 50 px or so and the first 30 px of the list
item are cut off. You can see one of the pages here:
http://www.legendinc.com/Pages/LegendAdvertising/LGNDPages/CourierStuff/DBK/DennisKBurke/public_html/Pages/AboutUs.html
The client also sent a screenshot and it shows the list shifted too far over
to the right so that the dropdown list is under the wrong link (for example
the Fuel and Gasoline dropdown is positioned under Lubricants and the first
5 characters are cut off)
The nav is wrapped in an outer div which is relatively positioned and the
div containing the navigation is absolutely positioned. Here's the css for
the nav: (the css is in a file called testnav.css). When I first developed
the menu, the dropdowns were positioning too far to the right, so that's why
there is a negative margin on the #nav ul li a declaration. It looks fine
in FF and Safari, so if there's an IE6 hack out there, that would be a big
help.
#homenav {
position:relative;
top:0px;
width:980px;
margin:0px auto;
margin-top:-25px;
margin-bottom:15px;
}
#innernav {
position:relative;
top:0px;
width:980px;
margin:0px auto;
margin-top:-25px;
margin-bottom:25px;
}
#navigation{
position:absolute;
top:0px;
left:45px;
margin:0px;
width:980px;
font: 12px Arial, Helvetica, sans-serif;
padding-top:15px;
padding-bottom:15px;
}
#navigation li a{
background-color: rgb(51,71,122);
padding-left:5px;
padding-right:7px;
color:#FFF;
font-size:12px;
}
#navigation li a.innerStyle:hover{
background-color: rgb(211,17,67);
color:#FFF;
}
/*subnav styling*/
*+ html #nav ul {
margin: 25px 0 0 -122px;} /* ie 7 hack */
#nav li {
list-style:none;
display:block;
float:left;
}
#nav a {
display:block;
float:left;
padding: 7px 10px 8px 10px;
background-color:#fff;
margin: 0 0 0 0px;
text-decoration:none;
}
/* hide the sub nav */
#nav ul {
display:none;
position:absolute;
margin: 30px 0 0 2px;
z-index:999;
}
#nav li ul {
width:160px;
background-color:#FFF;
}
#nav ul li a {
margin:0px 0px 0px -40px;
width:190px;
border:1px solid #000;
float:left;
}
#nav ul li a.innerStyle:hover {
background-color: rgb(211,17,67);
color:#FFF;
}
I'd like to use this recipe to create dropdown nav on other sites, so any
help with IE's little positioning issue would be greatly appreciated.
Thanks!
Jenn Mears-Nickerson
Jenn Mears Web Design LLC http://jennmearswebdesign.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/
