[css-d] Problem with dropdown shifting right in IE6

[Jennifer Nickerson]

  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 
__
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

[David Laakso]

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  and  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  link I have is above each associated header 
> with a very thin space.  Clicking in Opera the paragraph  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  
> 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?


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/

Re: [css-d] learning html5

[Felix Miata]

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] learning html5

[David Laakso]

John wrote:
>
> On Jun 29, 2010, at 11:30 AM, David Laakso wrote:
>
>> I'd use it at every given opportunity.
>> 
>> 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 , 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

[John]

On Jun 29, 2010, at 11:30 AM, David Laakso wrote:

> I'd use it at every given opportunity.
> 
> 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] Using CSS to not display submit input text

[Philippe Wittenbergh]

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] Layout help needed, almost right

[Eric Peterson]

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  and  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  link I have is above each associated header 
with a very thin space.  Clicking in Opera the paragraph  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  
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








http://www.w3.org/TR/html4/strict.dtd";>


  Technical Travails - homepage
  
  
  
  
  

  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;
  }

  table.footer {
border  : 0;
outline-style   : none;
border-spacing  : 0;
height  : 100%;
width   : 100%;
margin  : 0;
padding-bottom  : 0;
padding-top : 0.1em;
font-size   : 0.75em;
vertical-align  : middle;
  }

  td#f_left {
padding-left: 1em;
font-style  : italic;
text-align  : left;
colo

[css-d] Using CSS to not display submit input text

[Jack Blankenships]

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] learning html5

[David Laakso]

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.

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/

Re: [css-d] Help with IE8, all other browsers look pixel perfect, pls give a few pointers

[Chris F.A. Johnson]

On Tue, 29 Jun 2010, Donald Fruy wrote:

> On Tue, Jun 29, 2010 at 7:39 PM,   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
> 
> 
> 
> 
> 
> 
> 
> 
> 
>  
>  

   The closing tags for BODY and HTML (as well as HEAD and some
   others) are optional in HTML4.01.

-- 
   Chris F.A. Johnson, 
   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)]

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

[Donald Fruy]

On Tue, Jun 29, 2010 at 7:39 PM,   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





...


...
 
 

-- 
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

[Zoran Zorkic]

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] learning html5

[Bryce Fields]

On Tue, Jun 29, 2010 at 1:37 PM, Donald Fruy  wrote:

> On Tue, Jun 29, 2010 at 7:18 PM, Claude Needham  wrote:
> > On Tue, Jun 29, 2010 at 9:22 AM, John  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] learning html5

[Donald Fruy]

On Tue, Jun 29, 2010 at 7:18 PM, Claude Needham  wrote:
> On Tue, Jun 29, 2010 at 9:22 AM, John  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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers

[russ]

>> 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] Drop Shadow for a div with rounded corners

[Donald Fruy]

On Tue, Jun 29, 2010 at 1:22 PM, Tim Climis  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] learning html5

[Claude Needham]

On Tue, Jun 29, 2010 at 9:22 AM, John  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] Help with IE8, all other browsers look pixel perfect, pls give a few pointers

[David Laakso]

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:

http://www.w3.org/TR/html4/strict.dtd";>


Ekonomski fakultet u Rijeci - Skripte




@import"dream_files/efri.css";

[css-d] learning html5

[John]

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/

[css-d] Help with IE8, all other browsers look pixel perfect, pls give a few pointers

[Zoran Zorkic]

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/

Re: [css-d] Drop Shadow for a div with rounded corners

[Tim Climis]

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/