[css-d] Locked on hover effect with CSS horizontal drop down

[Jason Chan]

I am trying to create a navigation such as this one:

http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm

(NOT the tutorial but the main navigation itself. ie 
Home/Products/Tutorials/Extensions/Support)


For example, the horizontal list items appear when the user hovers over and 
highlights the main nav item while also allowing the subnav items to be 
clicked on.


I tried to replicate this but i can only manage to have the sub nav list 
items to be displayed when the main nav items are clicked. What is the trick 
to obtaining this effect?


_
Picture this – share your photos and you could win big!  
http://www.GETREALPhotoContest.com?ocid=TXT_TAGHM&loc=us


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari for Windows

[Philippe Wittenbergh]

On Jun 12, 2007, at 11:10 AM, Joanne wrote:

> Does this mean I don't need a Mac to test on Safari anymore? Is the
> rendering reliable enough to toss out my old & dodgy G3 iMac?

Safari for Windows is, as far as I can see, based on the most recent  
builds of WebKit. That is very different from the release version of  
Safari, as installed by OS X 10.4/10.3 - that is a nearly 2 years old  
code base.

But in the future, Safari Mac and Safari Win would be the same -  
minus OS specific GUI look and feel (like form controls).

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE/FF bug with background image

[Portman]

Hi,

I am pulling my hair out trying to fix this problem and cannot figure it 
out.

In one of my websites, the header graphic is in a blue box with a 1px 
white border. Just underneath and a little left of that blue box is a 
light blue box with a 1px white border (almost like a drop shadow.) The 
problem is with the navigation. I thought it would be cool to make a 
small graphic of the light blue box and place it just behind the 
navigation to mimic the header graphic. It looked fine in IE, but 
disappeared in FF and when it looked good in FF, it was too low in IE.

I searched and searched and eventually made a floating div 15px high, 
with the light blue color and the 1px white border and got it positioned 
behind the navigation, but I am still getting the same problem. I tried 
every conceivable hack I could find but nothing helped. If anyone could 
help me figure this out I would be very grateful. Below is the code.

TIA,
Riva

#backer {
width: 110px;
background-color: #9aa5cc;
border-bottom: 1px solid white;
border-left: 1px solid white;
position: relative;
float: right;
top: 300px;
top: 280px;
height: 20px;
}
#navcontainer {
color: white;
width: 130px;
display: inline;
border: 0px solid white;
margin: 0;
height: 180px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
text-transform: uppercase;
position: relative;
float: right;
right: -1px;
}
ul#navlist {
padding: 0;
margin-left: 0;
width: 130px;
text-align: left;
border: 0px solid white;
background-color: #2f4d9a;
}
ul#navlist li {
list-style: none;
color: white;
line-height: 1em;
display: block;
margin: 0;
padding: 0;
border-top:1px solid white;
border-left: 1px solid white;
}

and






Home
Firm Profile
Practice Areas
Lawyers
Contact Us
Articles
 
  


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari for Windows

[Joanne]

Does this mean I don't need a Mac to test on Safari anymore? Is the
rendering reliable enough to toss out my old & dodgy G3 iMac?

Joanne
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Trouble with image in IE

[Audra Coldiron]

TCrabtree wrote:
> I need help dealing with an image in IE. The link to the page is:
> http://www.tusculum.edu/about
> 
> In Firefox, the picture of the smiling student renders without a space
> between it and the page title ('About Tusculum College'); however, in IE,
> there's about a 2px space between the title and picture. 
> 
> Here is the relevant CSS for the picture:
> img.rightside {
> float:right;
> margin: 0px 0px 5px 5px;
> padding:0;
> clear:right;
> }
> 
> The title image is unstyled. Is that the problem? Or is there a hack I need
> to employ for IE to render the same as Firefox, etc? Thanks greatly!

Hi Travis.  Try adding display: block to your "About Tusculum College" 
image.

AC
-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS. 
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Having problems getting proper alignment in IE

[Audra Coldiron]

Jeralyn Merideth wrote:
> Maybe I have looked at it too long and I'm overlooking the obvious. I
> have tried everything I know to get the masthead and main nav
> properly lined up with the bg image in IE. Firefox looks fine. Also,
> the image I created for "current" shows up in IE on the home link but
> not in Firefox. Anyone have suggestions on how to fix this as well?
> 
> http://www.mclumber.com/new/index.htm#

I didn't have time to test, but it probably has to do with your empty 
#header div.  IE will put a space there unless you place an empty 
comment inside the div.  Try that and see:



AC
-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Feedback Requested

[David Laakso]

John Gribben wrote:
> Hello,
>
>  
>
> I really appreciate the help I've received from this list.  Can anybody give
> me feedback on this site:
>
>  
>
> http://windows.pedrera.com/clients/dss/
>
>  
>
> I don't have any specific questions.  I was just wondering if anybody can
> catch anything radically off.  We're targeting MSIE 6/7 and Win/Mac Firefox
> + Netscape.
>
>  
>
> Thanks,
>
> John
>
>  
>   

RE:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.4) 
Gecko/20070515 Firefox/2.0.0.4

Nice job. All pages functioning well, holding a decent font-scaling, and 
easy to read and navigate.
If I were to nit-pick, my personal preference would be to have the 
primary content text first in the document source order; and, some 
provision for those who might, for whatever reason, need or want to view 
the site with images disabled.

Best,
~dL

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari for Windows

[Lori Lay]

Apparently Apple has recently released a public beta of Safari for Windows.

Hopefully this gives Windows users an opportunity to test their sites on 
Safari...

It will be interesting to see how it differs from the Mac version.

http://www.apple.com/safari/

Lori
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Having problems getting proper alignment in IE

[Jeralyn Merideth]

Maybe I have looked at it too long and I'm overlooking the obvious. I have 
tried everything I know to get the masthead and main nav properly lined up with 
the bg image in IE. Firefox looks fine. Also, the image I created for "current" 
shows up in IE on the home link but not in Firefox. Anyone have suggestions on 
how to fix this as well?

http://www.mclumber.com/new/index.htm#

TIA!

Jeralyn




   

Moody friends. Drama queens. Your life? Nope! - their life, your story. Play 
Sims Stories at Yahoo! Games.
http://sims.yahoo.com/  
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Properly aligning div background for IE 6, IE 7, and FF

[Rick Faircloth]

Hi, all...

I'm wondering if anyone knows why and what to do about aligning
a div background to the right top corner of a div.

IE 7 and FF display it as expected...IE 6 just leaves it in the left upper
corner.

Here's the code:




The class, "section", just defines the class as "margin:10px 0px 0px 16px;
text-align:justify;"

If I can just get that blasted bird in the upper-right corner of my div,
I'll be a happy coder!
(For the moment...)

Ideas, anyone?  Work-arounds?

Thanks,

Rick


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Trouble with image in IE

[TCrabtree]

I need help dealing with an image in IE. The link to the page is:
http://www.tusculum.edu/about

In Firefox, the picture of the smiling student renders without a space
between it and the page title ('About Tusculum College'); however, in IE,
there's about a 2px space between the title and picture. 

Here is the relevant CSS for the picture:
img.rightside {
float:right;
margin: 0px 0px 5px 5px;
padding:0;
clear:right;
}

The title image is unstyled. Is that the problem? Or is there a hack I need
to employ for IE to render the same as Firefox, etc? Thanks greatly!

--
Travis Crabtree
Webmaster
Tusculum College
phone: 423.636.7300 ext. 5132
fax: 423.636.7492
email: [EMAIL PROTECTED]


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Controllling Right ans/or Left edges of a div

[Del Wegener]

> The content div (brown) misbehaves in both.  I want the left edge of that 
> div to line
> up with the right edge of the div containing the left side menu. How do I 
> do that so
> that it works in IE6, IE7, and Firefox ?
>
You have some weird stuff going on in that page, Del,

I suggest you re-think the layout for this page, before you lose
all your hair. Check the Wiki for layouts. (Linked to at the bottom of
every post.)

Cordially,
David
--

Don't waste time on the above reference.  I am taking David's advice and 
starting over.
Del


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem with a images in FF, Mozilla, NN7 & IE6

[Juanita]

Hi -

I've been working diligently to correct the problems (IE6) that were
pointed out last time. I also fixed the site so when the text size is
increased, everything should increase respectively (as suggested by
Felix.) However, the header background image, wrapper bkground image &
foot bg img are remaining at a fixed width.

Can anyone tell me what I'm doing wrong? And while you're there, how's it
looking on other monitors?

Here's the page:

http://www.kcsm.tv/jazz91/announcer_berzon.php

(this page shows the error alittle better)
http://www.kcsm.tv/   


Here's the stylesheets:

http://www.kcsm.tv/styles/global.css
http://www.kcsm.tv/styles/jazz91.css

Thanks in advance...

Juanita

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Should setting overflow on an element cause that box to render different heights/widths?

[Meitar Moscovitz]

Hello all,

I have run into a funny issue with Safari wherein a containing box that has
overflow:hidden; set on it is clipping the contents of the box way, way
inward of where other browsers (such as Firefox) state its content edges
are. If I understand the CSS 2.1 spec properly (and maybe I don't), setting
overflow is only supposed to affect whether or not content outside of the
content edges are visible, but it's not supposed to change those content
edges at all. Is this understanding correct?

Here's an example page where this effect is occurring:
http://nixon.digitalpulp.com/~meitar/tests/redken/product-consumer.html

Thanks in advance for any insight you can provide,
-Meitar Moscovitz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Controllling Right ans/or Left edges of a div

[David Hucklesby]

On Mon, 11 Jun 2007 12:34:25 -0500, Del Wegener wrote:
> Good Day;
>
> The page is
> http://www.drdelmath.com/essays/reading_mathematics/css_reading_mathematics_tip1.htm
> the stylesheet is at 
> http://www.drdelmath.com/essays/style_sheet_essays_normal.css
> In IE6 the header div (purple) appears to be okay.  In Firefox it extends off 
> screen to
> the left causeing a horizontal scroll bar.
> How do I make the right edge of that div correspond with the right edge of 
> the window ?
>
> The content div (brown) misbehaves in both.  I want the left edge of that div 
> to line
> up with the right edge of the div containing the left side menu. How do I do 
> that so
> that it works in IE6, IE7, and Firefox ?
>
You have some weird stuff going on in that page, Del,

The appearance changes when you reload the page. I suspect some
of your scripting is messing things up, because the #content DIV moves
when I disable it. From the 1997-style SCRIPT attributes, I suspect the
script is not the most modern. I suggest removing the scripts, at 
least until you have a working page.

While two heads may be better than one in some circumstances, a web
page is not one of them. Some validation is in order.

Your use of relative positioning is screwing things up. Because you use
EMs the layout changes dramatically with user-selected font size.

I suggest you re-think the layout for this page, before you lose
all your hair. Check the Wiki for layouts. (Linked to at the bottom of
every post.)

Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Feedback Requested

[John Gribben]

Hello,

 

I really appreciate the help I've received from this list.  Can anybody give
me feedback on this site:

 

http://windows.pedrera.com/clients/dss/

 

I don't have any specific questions.  I was just wondering if anybody can
catch anything radically off.  We're targeting MSIE 6/7 and Win/Mac Firefox
+ Netscape.

 

Thanks,

John

 

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS sprites / Tabs

[David Hucklesby]

On Mon, 11 Jun 2007 16:19:12 +0200, cssd wrote:
>
> What's the most efficient way of doing image based tabs?
>
> First thing that comes to my mind are CSS sprites:
>
> http://alistapart.com/articles/sprites
>
> However, there are two approaches and I am not sure which one is best:
>
> 1. using one image for all the tab states
> 2. using one image per tab that contains all states for particular tab
>
> In either case it work but I am afraid that in case #1 the image will slow 
> down the
> page load  - on the other hand loading 9 images for each of the tab is not 
> fast
> either...
>
A student in the web class I attend tried several approaches. Working
together, we found that the single image approach certainly seemed to
load faster. And the one image was actually fewer kBytes, though not
a lot.

The single image did give a better user experience, in our opinion.
Our Internet connection in class is not the speediest in the world,
and seeing the tabs appear one-by-one, as with the individual images,
is rather disconcerting. With a single image, all the tabs appear at
the same time.

Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Image overlapping

[David Hucklesby]

On Mon, 11 Jun 2007 14:19:10 +0100, Phil Turner wrote:
> Help please I cant seem to correct this the fourth image down on the left 
> hand side is
> overlapping the image above it.
>
> http://www.kruger.co.uk/davinci.html
>
>
Hi Phil,

The overlapping is due to the heights specified on the DIVs.

It seems to me that you are over-specifying for that column.
Getting rid of most of the styling for the individual DIVs that
hole the images had little or no effect this end.

If you want to control the vertical spacing between the images,
I think you'd be better off removing the Ps surrounding them
and use padding-top or -bottom to add space.

FWIW - DIVs are already block elements; will display one above
the other without floating them; will expand horizontally to 100%
of the containing DIV, and vertically to contain the IMG.

Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari problem?

[David Hucklesby]

On Mon, 11 Jun 2007 08:55:39 -0400, Suzanne Goodwin wrote:
> Hmmm, OK, I removed the  BackgroundImageCache script... does that stop the 
> crazy
> background flashing? 
>
>> On Fri, 8 Jun 2007 08:56:32 -0400, Suzanne Goodwin wrote:
>>
>>> I'm working on a site at http://208.76.80.155/~czcejymt, and it looks fine 
>>> in all
>>> the browsers I have installed (IE7 and Firefox Win, Firefox and Camino OS 
>>> X) except
>>> for Safari. [...]

As Roger already informed you - still flashing in IE6. 
Okay in IE 5.01, IE 5.5, and IE 7 though. Curious!

Cordially,
David
--
www.hucklesby.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Complex image and text placement with CSS questions?

[Keith Kaiser]

I would like to place text within a border made up of individual images,
notice how the text surrounds the images, as this one done with tables;



Here is what I have so far;



But I want it to be;
  1) Fluid with a minimum width equal to 5 or 6 of the images
  2) I want the enlarged image to always be on the screen, right now the
right most images display too far to the right to be seen on small monitors.


Does anyone have an example of how to do this?

Thanks.

-- 
YIS/YIV/73's!
Keith D Kaiser
nearspaceventures.com
bsaroundtable.com
kaiserklan.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Controllling Right ans/or Left edges of a div

[Del Wegener]

Good Day;

The page is
http://www.drdelmath.com/essays/reading_mathematics/css_reading_mathematics_tip1.htm
the stylesheet is at
http://www.drdelmath.com/essays/style_sheet_essays_normal.css
In IE6 the header div (purple) appears to be okay.  In Firefox it extends 
off screen to the left causeing a horizontal scroll bar.
How do I make the right edge of that div correspond with the right edge of 
the window ?

The content div (brown) misbehaves in both.  I want the left edge of that 
div to line up with the right edge of the div containing the left side menu. 
How do I do that so that it works in IE6, IE7, and Firefox ?

The wierd colors will disappear when I get my divs where I want them.

Thanks for any pointers
Del
[EMAIL PROTECTED] 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] QUESTION: layout falls apart in Netscape 7.x (not worrying about Netscape4)

[Dova Wilson]

This site is still under development. Both the HTML and CSS are passing
validation using the W3C validation service. It seems to display OK in
multiple versions of IE and Mozilla, but in Netscape 7.0 and 7.2 the
layout completely falls apart. 
 
I did a web search looking for likely reasons and found a number of
outdated things and other Netscape problems that didn't seem to match
what is happening here. Can you give me an idea of what might be going
one so I can search for solutions to a more specific problem? I'm on the
digest.


HTML:
http://www.gwvirignia.gwu.edu/newsite/
 
CSS:
http://www.gwvirignia.gwu.edu/newsite/styles/global.css
http://www.gwvirignia.gwu.edu/newsite/styles/home.css
 
Thanks so much for pointing me in the right direction.
 
Dova H. Wilson
Marketing Communications Specialist
George Washington University Virginia Campus
20101 Academic Way, Suite 134
Ashburn, Virginia 20147
Phone: 703-726-3652
Fax: 703-726-3655
www.gwvirginia.gwu.edu
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] strange mosueOver effects in IE 6

[Christian Kirchhoff]

Hallo,

Please take a look at the following page: http://testwww.zeno.org/Bibliothek

Under Windows XP, with Firefox 2.x or IE 7 the page looks ok. Basically the
page has a header area and a main area, and both areas consist of fixed
width right and left columns and a center column with dynamic width.

There are a couple of problems under IE 6, maybe older versions, too. Mostly
in the main area.

In a previous version of the CSS I applied {float: left} to the left column
(div#zenoMFLeft). The middle column (div#zenoMFMiddle) had a min-width, and
in Internet Explorer (even v7) whenever the min-width was reached, the
middle column DIV broke down under the left column. Left and right margins
were applied to the middle column.

Later I decided to give the middle column a fixed position. I removed the
left and right margins, and instead I set the {left: 13.5em; right: 13.5em;}

This seemed to cause problems in IE 6, cause IE 6 computed the left
coordinate of the middle column not as 13.5 em from the surrounding DIV, but
13.5em from the right border of the left column DIV. After I commented out
the {float: left} for that DIV, it worked.

Anyway the two problems I like to correct are:
- The height of the menu items in the left column is wrong. This could be
corrected by defining a border for the  elements, but I don't want that.
Is there any other option?
- If the mouse rolls over the headers of the menu boxes ("Bibliothek",
"Community"), there are some strange background changes. Something similar
happens if the mouse rolls over the links in the main column.Their
background color changes to some light blue. But not only the links, but the
whole surrounding area. If I then roll over the area where it is written
"Blumen erfreuen immer" in the left column, all those background errors
vanish. I am pretty sure this is related to some known bugs and an be
corrected. 
- Sometimes when I reload the page, I get strange areas with that light blue
background color from the beginning.

If anyone could point me into the right direction I would be very glad.

Regards,

Christian Kirchhoff

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS sprites / Tabs

[James Leslie]

 
> What's the most efficient way of doing image based tabs?
> 
> First thing that comes to my mind are CSS sprites:
> 
> http://alistapart.com/articles/sprites
> 
> However, there are two approaches and I am not sure which one is best:
> 
> 1. using one image for all the tab states 2. using one image per tab 
> that contains all states for particular tab
> 
> In either case it work but I am afraid that in case #1 the image will 
> slow down the page load  - on the other hand loading 9 images for each

> of the tab is not fast either...
> 
> Any ideas?
> 
 
 
 At this year's @media Europe, Nate Koechley from Yahoo gave a talk on 
 speeding up web pages and seemed to be of the opinion (and yahoo have 
 done a lot of testing on this) that the fastest method is to include 
 all tabs on one image and then use CSS for displaying/positioning them 
 properly. You reduce http requests and one image containing all 
 *should* be a smaller file size than 9 individual ones.
 
 http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html
 
 Close to being OT I think, but it is about using CSS to get them all 
 set up properly.
 
 HTH,
 James

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Navigation

[James Gadrow]

trevor bayliss wrote:
> Hello everyone I am new!
>I am having problems with the last tab on a navigation bar. For some 
> reason I can´t make it fit with the light blue line above it and I am stuck 
> as to how to do it. Also the navigation bar doesn´t show up in Netscape 4.78 
> (no Flash) with Windows 2000 Professional and the thing just goes crazy with 
> Explorer 4.0 (no Flash) Windows 98. I imagine that the problem is that they 
> are too old so I won´t worry that much about them. What can I do to make the 
> navigation line up? Thanks 
>  
>  "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>
> 
> 
> 
> UL {
>  LIST-STYLE-TYPE: none
> }
> LI {
>  LIST-STYLE-TYPE: none
> }
> A {
>  COLOR: #7f99ae; TEXT-DECORATION: none
> }
> #topnav {
>  BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0px 0px
> }
> #topnav LI.l {
>  WIDTH: 20px
> }
> #topnav LI {
>  DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
> 85px; HEIGHT: auto
> }
> #topnav LI SPAN.last-tab {
>  DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
> 80px; HEIGHT: auto
>  }
> #topnav A {
>  BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left 
> top; FONT: 11px/20px tahoma, arial; WIDTH: 85px; COLOR: #fff; TEXT-ALIGN: 
> center
> }
> #topnav A:hover {
>  BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
> }
> #topnav A.selected {
>  BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
> }
> #width {
>  MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
> }
> 
> 
> 
> 
> 
>   Home 
>   About 
>   Shops 
>   Entertainment 
>   Malls 
>   Environment 
>   Local 
>   Information
>   Contact Us 
>   Login
> 
>
>
>
> You
>  snooze, you lose. Get messages ASAP with AutoCheck
> in the all-new Yahoo! Mail Beta.
> http://advision.webevents.yahoo.com/mailbeta/newmail_html.html
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
Ok... I worked this out and I'm not sure it's what you want. But the 
reason you can't get things lining up is you didn't take off the default 
padding/margin on your list. This design could benefit from a rewrite 
but I have no idea what your project specs are so I left most of your 
code alone. Below is the code to duplicate the effect I created. I only 
tested in FF and IE7 but I figured this'll give you a good baseline to 
work from.

http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>



UL {
 LIST-STYLE-TYPE: none;
 padding: 0;
 margin: 0;
}
LI {
 LIST-STYLE-TYPE: none;
}
A {
 COLOR: #7f99ae; TEXT-DECORATION: none;
}
#topnav {
 BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0 0 0;
}
#topnav LI.l {
 width: 89px;
}
#topnav LI {
 DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; 
WIDTH: 88px; HEIGHT: auto;
}
#topnav A {
 BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat 
left top; FONT: 11px/20px tahoma, arial; WIDTH: 100%; COLOR: #fff; 
TEXT-ALIGN: center;
}
#topnav A:hover {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none;
}
#topnav A.selected {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none;
}
#width {
 MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left;
}





  Home 
  About 
  Shops 
  Entertainment 
  Malls 
  Environment 
  Local 
  Information
  Contact Us 
  Login


-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS sprites / Tabs

[jeffrey morin]

On 6/11/07, cssd <[EMAIL PROTECTED]> wrote:
>
>
> What's the most efficient way of doing image based tabs?
>
> First thing that comes to my mind are CSS sprites:
>
> http://alistapart.com/articles/sprites
>
> However, there are two approaches and I am not sure which one is best:
>
> 1. using one image for all the tab states
> 2. using one image per tab that contains all states for particular tab
>
> In either case it work but I am afraid that in case #1 the image will slow
> down the page load  - on the other hand loading 9 images for each of the tab
> is not fast either...
>
> Any ideas?
>
> Thanks



the way i usually to do it is to use one background image with multiple
states that you can just have shift around depending on the users actions.
in my experience background images don't take long to load so you won't see
that little flicker you see if you're swapping out an image

hope that helps

Jeff
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Mac site check please

[jeffrey morin]

On 6/11/07, Brian Cummiskey <[EMAIL PROTECTED]> wrote:
>
> Richard Grevers wrote:
> > um, your image replacement appears to be broken in Opera (checked in
> > 9.21 on Windows) - I see both the logo and the H1 text overlapping.
> >
>
> Richard, I have changed the technique.   Can you visit again and let me
> know if it is resolved now?
>
> http://tinyurl.com/2bnwgu
>
>
>
> Felix Miata wrote:
> > Looks exactly the same live in Safari 1.3 as when submitted to
> http://www.browsrcamp.com/. Pretty magazine page. Nice to look at.
> >
> > Can't read most of it though, at least not without 2 zoom steps.
> >
> Felix,
>
> I agree the fonts are a little small.   Unfortunately, they paid big
> bucks to some designer and my role is to code it to specs from the
> "designer's" html (aka dreamweaver table code).  I have mentioned this
> to them already, but they seem pretty set on the fonts.   I upped it
> from 76.1% to 80.1%.  Just a hair bigger and hardly noticeable, but may
> be the middle ground between making the client happy and having a usable
> site.  Plus, this also gives one additional -1 in font control now (-2
> now, before only -1 in font control in FF)
> > You might visit http://juicystudio.com/services/colourcontrast.php and
> paste in #808285.
> >
> Again, same deal.  That's the color the designer chose and the client
> approved upon.   I myself am colorblind and I do find it hard to read.
> With the help of that link, however, I have some backing to send back to
> them to let them know that it doesn't work.  Thanks.
>
>
>
> David Laakso wrote:
> > Nice visual, Brian.
> Thanks.  :)  Unfortunately, I can't take credit for it.
> >
> > In Safari, Camino , and WebKit she holds at +2 without a problem.
> Can you try this again now that i bumped the base font a couple
> percent?   It holds +2 in FF for me still, so i'm hoping it holds across
> to Safari as well.
> >
> > In general, bumping the contrast could be welcome by some users, and
> > the image-text at the bottom of the left column is tough to read (I'm
> > at 1680).
> >
> Agreed on the image text.   I'm most likely going to re-do that section
> and make the text of the image actually text.
>
>
>
>
> Thanks all for the help and suggestions!
>
> -Brian
>
>
>
> it's breaking in ff and safari for me also. plus 2 for ff and plus 3 for
safari drops top menu items down. i changed the wrapper size to em instead
of px and it scaled much nicer
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need some help - single column, 3 rows (divs), last row forced to bottom of page

[James Gadrow]

William Gaffga wrote:
> Hi All,
>
> Don't think this is my first post but don't recall my last.
>
> I need some help. I'm working on a site that is deceptively simple, a
> single centered column, 700px wide, with three divs, acting like rows.
> The first two "rows" should each be 300px high, their bottom and top
> should touch. The third row, a nav bar, should be flush to the bottom
> of the page.
>
> I have this working in Firefox & now Safari but IE chokes on it, the
> second & third rows being pushed off to the side despite using a
> container div. If this is not an adequate description you can see an
> example here: 
>
> After doing some research it must have to do with "having layout" or
> one of the other IE issues. Unfortunately, my brain just isn't
> absorbing the data for how to fix this.
>
> Can someone provide a fix, advice on how to proceed (without tables)
> or at least point to an example that works - cleanly!
>
> Thanks very much.
>
> Will.
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
Actually, your issue has nothing to do with hasLayout. The issue here is 
two-fold. When you use position: absolute in IE it thinks you want left: 
50% instead of left: 0 like firefox defaults to. So, for .middle add the 
line left: 0;

Now, since your .bottom container is utilizing fixed positioning, you 
need to do a little extra work since using left: 0 on this element will 
actually left align it with the browser window and you want it centered 
you need to use negative margins. Set these two lines and it will center 
your .bottom container left: 50%; margin-left: -351px;

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS sprites / Tabs

[cssd]

What's the most efficient way of doing image based tabs?

First thing that comes to my mind are CSS sprites:

http://alistapart.com/articles/sprites

However, there are two approaches and I am not sure which one is best:

1. using one image for all the tab states
2. using one image per tab that contains all states for particular tab

In either case it work but I am afraid that in case #1 the image will slow down 
the page load  - on the other hand loading 9 images for each of the tab is not 
fast either...

Any ideas?

Thanks

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari problem?

[Roger Gordon]

**I'm sorry all, I forgot to include the original message in my last post.**

I'm sorry to be the bearer of bad news, but now all I get is  a grey
screen. Nothing else loads in IE6. I'm not sure if you've checked it
in IE7, but on your 'work' page, the flashing is still going on...

I'm now pretty sure that your problem is really caused by this:
http://208.76.80.155/~czcejymt/js/equalcolumns.js";>

It makes sense that if this is dynamically resizing a div, it might
cause flashing and strange scrolling as the page is constantly
refreshed by IE.

If you want to make 2 colums equal length, how about trying the
technique mentioned in this article?

http://www.alistapart.com/articles/fauxcolumns/

I hope that this time I'll be more helpful.

On 6/11/07, Suzanne Goodwin <[EMAIL PROTECTED]> wrote:
>
> Hmmm, OK, I removed the  BackgroundImageCache script... does that stop the
> crazy background flashing?
>
> On Jun 9, 2007, at 4:30 PM, David Hucklesby wrote:
>
> On Fri, 8 Jun 2007 08:56:32 -0400, Suzanne Goodwin wrote:
> I'm working on a site at http://208.76.80.155/~czcejymt, and it looks fine
> in all the
> browsers I have installed (IE7 and Firefox Win, Firefox and Camino OS X)
> except for
> Safari. On the two longer pages (Work and Customers) Safari seems to be
> dropping
> div#bottom way, way down on the page. It seems fine on the shorter pages
> however. I am
> using a script to force equal column lengths (http://208.76.80.155/
> ~czcejymt/js/equalcolumns.js), but I don't know whether that's the culprit
> or not.
>
> Could someone also let me how the site looks in IE6 Win? Thanks so much.
>
>
>
> Hi Suzanne,
> Here on Win xp Pro it looks good on IE7 - same as on FF 2 and Opera 9.
> But I'm getting a distrubing flashing of all background images in IE6.
>
> Hopefully, that is due to my IE6 install being Tredosoft's "multi-IE"
> version, rather than a bona fide install. So seek a second opinion.
>
> Cordially,
> David
> --
>
>
>
>
>
> ---
> Suzanne Goodwin
> Sky Dog Technologies
> 1072B Massachusetts Avenue
> Arlington, MA  02476
>
>
>
>


-- 
>Roger Gordon
---
www.rogergordon.net
+27 (0)76 306 4578
---
One mouse click donates 1.5 cups of food to poor people worldwide
(free of charge).
Click below.
http://www.thehungersite.com/clickToGive/home.faces?siteId=1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Position-fixed design looks bad under high resolution monitors

[ron zisman]

On Jun 8, 2007, at 8:35 PM, mixty wrote:

> http://www.bchclmc.edu.hk/motherland/index.html
>
> I wonder if there's any way to limit the position fixed to only  
> within a certain width? Maybe not through "position:fixed" but  
> "absolute" or any other way that works.

Yes, there are ways to solve the problem - visually, by controlling  
max-width (and min-width).
Last time I tested - more than a year ago - some browsers weren't  
cooperating unless I added extra containers and some somewhat complex  
styling, but that may have changed - browsers have improved - now.

Anyway, my old solution, with comments, is here...



... based on a "frame-like" construction of mine...



... and I use it in the regular 'table of contents' page(s) on site...




I use expressions as workarounds for old IE6' lack of CSS support...




... while other browsers do fine when served standard CSS.

regards
Georg




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Image overlapping

[Phil Turner]

Help please I cant seem to correct this the fourth image down on the  
left hand side is overlapping the image above it.

http://www.kruger.co.uk/davinci.html


Phil Turner
FREELANCE DESIGNER
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com

NEW BOOK - YOUR PLANET NEEDS YOU
http://www.yourplanetneedsyou.org

P Please consider the environment before printing this email.



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari problem?

[Roger Gordon]

I'm sorry to be the bearer of bad news, but now all I get is  a grey
screen. Nothing else loads in IE6. I'm not sure if you've checked it
in IE7, but on your 'work' page, the flashing is still going on...

I'm now pretty sure that your problem is really caused by this:
http://208.76.80.155/~czcejymt/js/equalcolumns.js";>

It makes sense that if this is dynamically resizing a div, it might
cause flashing and strange scrolling as the page is constantly
refreshed by IE.

If you want to make 2 colums equal length, how about trying the
technique mentioned in this article?

http://www.alistapart.com/articles/fauxcolumns/

I hope that this time I'll be more helpful.

On 6/11/07, Suzanne Goodwin <[EMAIL PROTECTED]> wrote:
>
> Hmmm, OK, I removed the  BackgroundImageCache script... does that stop the
> crazy background flashing?
>
> On Jun 9, 2007, at 4:30 PM, David Hucklesby wrote:
>
> On Fri, 8 Jun 2007 08:56:32 -0400, Suzanne Goodwin wrote:
> I'm working on a site at http://208.76.80.155/~czcejymt, and it looks fine
> in all the
> browsers I have installed (IE7 and Firefox Win, Firefox and Camino OS X)
> except for
> Safari. On the two longer pages (Work and Customers) Safari seems to be
> dropping
> div#bottom way, way down on the page. It seems fine on the shorter pages
> however. I am
> using a script to force equal column lengths (http://208.76.80.155/
> ~czcejymt/js/equalcolumns.js), but I don't know whether that's the culprit
> or not.
>
> Could someone also let me how the site looks in IE6 Win? Thanks so much.
>
>
>
> Hi Suzanne,
> Here on Win xp Pro it looks good on IE7 - same as on FF 2 and Opera 9.
> But I'm getting a distrubing flashing of all background images in IE6.
>
> Hopefully, that is due to my IE6 install being Tredosoft's "multi-IE"
> version, rather than a bona fide install. So seek a second opinion.
>
> Cordially,
> David
> --
>
>
>
>
>
> ---
> Suzanne Goodwin
> Sky Dog Technologies
> 1072B Massachusetts Avenue
> Arlington, MA  02476
>
>
>
>


-- 
>Roger Gordon
---
www.rogergordon.net
+27 (0)76 306 4578
---
One mouse click donates 1.5 cups of food to poor people worldwide
(free of charge).
Click below.
http://www.thehungersite.com/clickToGive/home.faces?siteId=1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Rookie question

[Joanne]

It's also a good idea to give your main table either a class or id name.

Put the following inside the opening table tag:
id="maintable"

Then the css will be

#maintable{
margin-top: 30px;}

Joanne
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] list attributes not working on IE

[Philippe Wittenbergh]

On Jun 11, 2007, at 2:13 AM, George wrote:

> In an attempt to help I tried a list like that using all the standard
> list-style-type entries and also switching between ol and ul lists and
> in all cases FF did as expected and IE7 failed to show any kind of li
> symbol.  It has something to do with the horizontal layout, but I  
> can't
> figure it out.

Your  are floated. In that case, IE 6 and 7 will _never_ show the  
list-style (whatever value/type you use).

Short story: by floating the , you change the display-value of  
the  from display:list-item to display: block _in IE_. In that  
case no list marker is generated. Other browsers do not change the  
display value in the case of a floated http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo>..

If you absolutely want those numbers to appear in IE, you'll have to  
insert them in the html.


Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Rookie question

[Audra Coldiron]

DAVID COSCIO wrote:
> I'm very new to CSS. I understand the concept at least. The best way
> for me to learn things is in real world situations and here I am in a
> real world situation! I need to have a table sit 30px down from the
> top of a page. Simple as that. I tried setting the margin and that
> didn't work as far as all browsers were concerned especially after I
> added a doctype. At any rate I went out looking for some CSS examples
> at the suggestion of someone and found a few different ones. I tried
> this one: BODY { margin-top: 30 }.

You need a unit of measure here otherwise it won't work reliably.  Try
body { margin-top: 30px; }.  I've always had better luck with body { 
padding-top: 30px; } for cross browser stability.

AC
-- 
Audra Coldiron

Rock-n-Roll Design & Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS.
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Rookie question

[Scott Wilcox]

switch your  tag to:



and it should be fine.

DAVID COSCIO wrote:
> I'm very new to CSS. I understand the concept at least. The best way for me 
> to learn things is in real world situations and here I am in a real world 
> situation! I need to have a table sit 30px down from the top of a page. 
> Simple as that. I tried setting the margin and that didn't work as far as all 
> browsers were concerned especially after I added a doctype. At any rate I 
> went out looking for some CSS examples at the suggestion of someone and found 
> a few different ones. I tried this one: BODY { margin-top: 30 }. it seemed to 
> work until I tried it live. Nothing. I tried a few others that did nothing at 
> all. I tried them as embedded and external. It's a simple, no frills page 
> with a simple 2-cell table.
> URL:
> http://www.automatwebdesign.com/gasblowing
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] DIVs still on different lines -- No 's

[K DiSarno]

Hello! I am very new to the list, and am just starting to feel my way
around. (My website, awaiting much work and a domain name transfer:
http://65.98.16.218/~thedisar/index.php
)

My question, Bob, is why you are not using CSS?  I have just quickly thrown
something together here:
http://65.98.16.218/~thedisar/css-d_test_folder/rollover_test.html


No div's, no complex linking, and ABSOLUTELY NO JS (the stupid %^&* %^&*!
$*&^% thing JS is).

You can make the images whatever you want, call them whatever you want, etc.
If you just want a solid background, I would just use a hex to specify,
instead of loading an image.

Keith D.

On 6/10/07, Robert Tilley <[EMAIL PROTECTED]> wrote:
>
> Before, the code block came from the button builder at grsites.com.  I was
> using it to build the graphics for custom buttons.  The code it generated
> can
> be improved it seems.  The new code uses an onClick event.
>
> I thought the only reason the DIV was inside the A block was if a browser
> didn't understand CSS, the div inside a hyperlink  block would still
> work.
> This was weird.  If browser is smart enough to respond to mouse events,
> why
> can't an onClick event be used instead of ?
>
> With trust, I used the automagically generated code from the site without
> thought.  Here is the re-written code with the same error; the divs are
> stacked vertically instead of in one line.
>
> 
> 
>
> 
>   style='height: 30; width: 150;
> background: url(images/button-home.jpg);
> background-position: 0px 0px; position: inline;'
>  onmouseover
> = 'document.getElementById("button-home").style.backgroundPosition =
> "-150px
> 0px"; '
>  onmouseout
> =  'document.getElementById("button-home").style.backgroundPosition = "0px
> 0px"; '
>  onClick="parent.location='http://www.tropicwaveradio.net/'">
> 
> 
> 
>   style='height: 30; width: 150;
> background: url(images/button-home.jpg);
> background-position: 0px 0px; position: inline;'
>  onmouseover
> = 'document.getElementById
> ("button-instant-replay").style.backgroundPosition
> = "-150px 0px"; '
>  onmouseout
> =  'document.getElementById
> ("button-instant-replay").style.backgroundPosition
> = "0px 0px"; '
>
> onClick="parent.location='http://www.tropicwaveradio.net/listenlive.htm'">
> 
> 
>
> 
> 
>
> Thoughts anyone?  Please?
>
> Thanks, Bob
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] list attributes not working on IE

[George]

In an attempt to help I tried a list like that using all the standard 
list-style-type entries and also switching between ol and ul lists and 
in all cases FF did as expected and IE7 failed to show any kind of li 
symbol.  It has something to do with the horizontal layout, but I can't 
figure it out.

Jukka K. Korpela wrote:
> On Sun, 10 Jun 2007, Powerpuff Kuma wrote:
>
>   
>> I'm working in this website:
>> http://www.tiaftcolombia.com
>> the site look great in firefox, but IE won't apply some attributes of
>> the menu list, like the decimal-leading-zero attribute or the
>> padding/margin.
>> 
>
> IE (even IE 7) has a somewhat limited support to list-style-type, so that 
> e.g. decimal-leading-zero is not recognized.
>
> If you have problems with padding and margin in lists, then the reason is 
> probably that different browsers have different default values for them. 
> Browsers indent list items by default, but they do this in different ways. 
> Thus, set both left margin and left padding for both li elements and lists 
> (ul or ol elements), if you set one of them.
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Position-fixed design looks bad under high resolution monitors

[mixty]

Hi all,

On a page I have 2 divs position-fixed at the top left and top right. Under 
1024 x 768 or below it looks perfectly as I want it, but as the resolution 
go higher, e.g. 1280x1024, the two position-fixed divs would be too far 
apart to be the original design.


Please take a look: http://www.bchclmc.edu.hk/motherland/index.html

I wonder if there's any way to limit the position fixed to only within a 
certain width? Maybe not through "position:fixed" but "absolute" or any 
other way that works. (If that is possible, then I might also resize the 
background and set it to no-repeat because it currently breaks under high 
resolution too.)


Any replies would be appreciated.

Thanks!

Mixty

--
you don't need that much knowledge to begin, all you need is the 
perseverance to end 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Rookie question

[DAVID COSCIO]

I'm very new to CSS. I understand the concept at least. The best way for me to 
learn things is in real world situations and here I am in a real world 
situation! I need to have a table sit 30px down from the top of a page. Simple 
as that. I tried setting the margin and that didn't work as far as all browsers 
were concerned especially after I added a doctype. At any rate I went out 
looking for some CSS examples at the suggestion of someone and found a few 
different ones. I tried this one: BODY { margin-top: 30 }. it seemed to work 
until I tried it live. Nothing. I tried a few others that did nothing at all. I 
tried them as embedded and external. It's a simple, no frills page with a 
simple 2-cell table.
URL:
http://www.automatwebdesign.com/gasblowing
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Mac site check please

[David Laakso]

Brian Cummiskey wrote:
> Richard Grevers wrote:
>   
>
>
> http://tinyurl.com/2bnwgu
>
>
>
>
>   
> David Laakso wrote:
>   
>> Nice visual, Brian.
>> 
> Thanks.  :)  Unfortunately, I can't take credit for it. 
>   
>> In Safari, Camino , and WebKit she holds at +2 without a problem.
>> 
> Can you try this again now that i bumped the base font a couple 
> percent?   It holds +2 in FF for me still, so i'm hoping it holds across 
> to Safari as well.
>   
>
>
> -Brian
>
>
>
>   


The text is scaling at +2 just fine, just as it did before. The top nav 
breaks a little at +2.  The way it breaks (one or more link sets drop 
beneath  the grey bar) depends on whether I am using  Mac FF,  Safari, 
or Camino.
The problem, in my mind, had to do with the /content text-size and 
contrast/-- not the font-size of the top navigation.

~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera 9 display bug?

[ron zisman]

> http://www.kdwebstudio.com/contact.html
>

You have 'style="overflow:hidden"' in the source-code (html), and no
stylesheet has any effect on that inline style.

Delete that inline style, and Opera will present those borders. At  
least it
did at my end.

regards
Georg

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera 9 display bug?

[Eystein Alnaes]

> I have a page which displays fine in FF and IE, but in Opera 9 the
> border around
> the comment field is missing (see lower right of page):
>
> http://www.kdwebstudio.com/contact.html
>
> style sheet: http://www.kdwebstudio.com/styles2.css


In my Opera 9.2 (Mac) i see the border, albeit it's a less visible one then
the other text inputs.

You have left out the opening form tag. Could have something to do with the
problem. Also the closing form tag has a lot of open space/tabs in it. I
would clean up the markup a bit. On a sidenote, I don't see why you need
 between your s.

-Eystein

-- 
http://thatnorwegianguy.wordpress.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] DIVs still on different lines -- No 's

[David Dorward]

On 10/06/07, Robert Tilley <[EMAIL PROTECTED]> wrote:
> Before, the code block came from the button builder at grsites.com.  I was
> using it to build the graphics for custom buttons.  The code it generated can
> be improved it seems.  The new code uses an onClick event.

Lots of room for improvement...

> I thought the only reason the DIV was inside the A block was if a browser
> didn't understand CSS, the div inside a hyperlink  block would still work.

A browser could quite happily error correct it away as "Div not
allowed inside A, terminate A now" too.

> With trust, I used the automagically generated code from the site without
> thought.  Here is the re-written code with the same error; the divs are
> stacked vertically instead of in one line.

> 
>
> 
>   style='height: 30; width: 150;

Invalid. Lengths (other than 0) require units. 30 what? 150 what?

> background: url(images/button-home.jpg);
> background-position: 0px 0px; position: inline;'

Invalid. 'inline' is not a value accepted by the position property.

I'm guessing you mean display: inline in an attempt to stop the div
elements generating line breaks - but that prevents them from
accepting height and width, so they'll collapse away to nothing.

>  onmouseover
> = 'document.getElementById("button-home").style.backgroundPosition = "-150px
> 0px"; '

Ugly and slow. Use 'this' instead of 'document.getElementById("button-home")'.

>  onmouseout
> =  'document.getElementById("button-home").style.backgroundPosition = "0px
> 0px"; '

Ditto, with a splash of irony since you have units on these lengths,
but here they are optional

>  onClick="parent.location='http://www.tropicwaveradio.net/'">

parent? You're using frames? Oh dear.

Also, the div has no content whatsoever. How are people supposed to
know where the link is going? Perhaps they are supposed to read the
text on the background image... which isn't going to work well if they
have a browser which doesn't support, or has turned off, images, or
CSS, or backgrounds (and they might be using a screen reader or
braille output device as well).

Take a look at http://css.maxdesign.com.au/listamatic/ for some nice
approaches to horizontal navbars, with rollover effects.

If you really want to use pictures of text (and I suggest you don't as
they are harder to read in general), then you'll probably be better
off with  elements inside the anchors that are equipped with alt
text and some JavaScript to toggle the src in response to mouse
events.

-- 
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/