Re: [css-d] help with ie.everything / at my wit's end!

[Tim Dawson]

On 11/02/2007 05:38, bill scheider wrote:
> Hi everyone,
> 
> I hope you can (will) help. On this site:
> http://first-encounter-design.dreamhosters.com/fed , all looks as I'd like
> it to on most browsers (screenshot here:
> http://first-encounter-design.dreamhosters.com/fed/ss/fedSS.jpg
> 
>  
> Besides test browsers on my win xp box, I've checked it in browsercam. In
> internet explorer on most setups (ie5.2 on mac seems ok), the four images in
> the bottom right column are one single line rather than a grid.(
> http://first-encounter-design.dreamhosters.com/fed/ss/fed_ie.jpg
>  )  
>   
> I've tried everything I know how to do for the past day-and-a-half
> (masochism,  me-thinks :)). I've stripped out and written and rewritten
> styles on the sidebar, the main content, the subnav, the #work div . just
> about everything! I've floated, aligned, padded, margined, cleared and
> deleted everything in sight at least a couple of times. :-|\  
>  
> 
> There is a solution, no doubt. I hope someone here can help. Oh, the
> stylesheet is at:
> http://first-encounter-design.dreamhosters.com/fed/css/main.css  I haven't
> been doing this especially long, but this is making me feel like a rank
> beginner again! Thanks for any help you can offer.

> 
> Totally baffled in Portland,
> 
> Bill Scheider

Have you tried making the side-bar wider than 18em ?

Tim

-- 
Tim Dawson,
Maolbhuidhe,
Creich,
Fionnphort,
Isle of Mull,
Argyll PA66 6BP

Tel: 01681 700718
__
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] Firefox clearing float problem?

[Andrew Leach]

I've put up the full page to show the effect of the change and the effect
that I'm trying to achieve as it wasn't especially clear on the simplified
web page, same place: www.leachy.co.uk

Thanks,
Andrew

> From what I can tell, it seems like a clearing float problem as if I
> > include a clear:left; further down in the html it solves the problem
> > but the whole layout drops and that's not what I want!!
>
> > http://www.leachy.co.uk
>
> Yes, IE6 is "saved" by its 'hasLayout'[1] bug - as usual.
>
> Isolating the header by adding...
>
> #header {overflow: hidden;}
>
> ...is _one_ way to solve that problem.
> An isolating-effect is what the bug causes in IE/win anyway, so you may
> as well achieve the same effect[2] in other browsers - using proper
> styling.
>
> regards
> Georg
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html
> [2]http://www.w3.org/TR/CSS21/visuren.html#q15
> --
> http://www.gunlaug.no
>
__
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] strics validate .NET code

[Stib AB]

Hi everyone.

I tried to validate my xhtml strict code but can't get it to validate complete.
http://validator.w3.org/check?uri=http://www2.tyresobk.se/default.aspx

The error I got is that the form gets a name, I tried to set it to nothing 
but it can't change.
There are some errors on hidden inputs that is added runtime in separate 
divs. i cant make this became  or anything else.
I guess this minor errors can be ignored for later CSS styling?

Then I have set style="" on my img tag, but I still get error that 
border="0" is no attribute. Wheredoes this come from? Is border in 
inline-style forbidden for image?

I know there are a link to validate my CSS too, but I cant find it, please 
help me ;)

Regards pelle

__
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] help with ie.everything / at my wit's end!

[bill scheider]

Hi Tim,  
>  
> Besides test browsers on my win xp box, I've checked it in browsercam. In
> internet explorer on most setups (ie5.2 on mac seems ok), the four images
in
> the bottom right column are one single line rather than a grid.(
> http://first-encounter-design.dreamhosters.com/fed/ss/fed_ie.jpg
>  )  
>   
> I've tried everything I know how to do for the past day-and-a-half
> (masochism,  me-thinks :)). I've stripped out and written and rewritten
> styles on the sidebar, the main content, the subnav, the #work div . just
> about everything! I've floated, aligned, padded, margined, cleared and
> deleted everything in sight at least a couple of times. :-|\  

Have you tried making the side-bar wider than 18em ?

Tim

Thanks for the fresh eyes! I thought I had played with that width but
evidently not; it's fixed now. The entire content had to max out at 58em or
introduce a horizontal scroll bar at 800x600, which I wanted to accommodate.


I had played with various widths in the #content and #sidebar but - I think
- had neglected the widths of the divs within the sidebar!

You know how you get so close to something that you sometimes can't see it
anymore? I guess that's what happened here. Anyway, thanks for taking a look
and offering a nudge. Now I can relax a bit before tackling the next issue
-- keeping that footer at the bottom!

Bill
 


__
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] Design repository less fancy than CSS Zen Garden

[martin f krafft]

also sprach francky <[EMAIL PROTECTED]> [2007.02.10.2231 +]:
> Maybe the designs / links in the css-discuss Wiki page about CSS layouts 
> 
> can give some inspiration?

Thank you. I feel I may not have made myself clear enough: I know
plenty sites with great layouts which serve as source of
inspiration. However, what I am looking for are sites like
csszengarden.com, which have different designs all for the same
XHTML file.

Thanks to everyone who has replied so far!

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^."<*>"|tr "<*> mailto:"; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
#include 


signature.asc
Description: Digital signature (GPG/PGP)
__
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] I give up! Why does this not center in FF at 800 x 600?

[Adam A George]

Can anyone put me out of my misery?

The following site is centered in IE, but at 800 x 600 in Firefox it jumps
about 120px to the right after it loads.

http://www.helenmottee.com/

The css isn't that tight, since I built on top of a previous theme, but I
cannot figure this out. Can you?

Thanks!
- Adam
__
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] Firefox clearing float problem?

[Gunlaug Sørtun]

Andrew Leach wrote:
> I've put up the full page to show the effect of the change and the 
> effect that I'm trying to achieve as it wasn't especially clear on 
> the simplified web page, same place: www.leachy.co.uk

Ah!  Much easier to debug the real thing :-)

The simplest solution is to get rid of all the #header-clearing hacks,
and leave the following as the _only_ #header styles...

#header {
width:100%;
height:74px;
background:#c6;
}

...that's right: no more #header styles/hacks here. The image comes next.

Then you _must_ correct how you position the image inside header - using
margins instead of 'top/left'...

#header img {
float:left;
position:relative;
margin: -78px 0 -80px -19px;
}

...and (almost) all browsers will handle the #header the same way -
without further help.
(IE/Mac won't play ball, but the entire layout is corrupted in that
browser anyway, so IE/Mac will need a lot of extra attention/help if you
want to support it.)


The reason you had problems with your original is that
relative-positioned elements still take up full space in their original
position, no matter how far off you position them. Thus, it overshot the
bottom of the #header, and the good browsers - quite correctly -
adjusted to it.
Hiding the overflow solved _that_ problem, but we have no property
that'll allow us to hide the overflow on just one side of an element, so
too much became hidden.


The little trick of 'repositioning a float with negative margins' does
not leave anything behind in the original position, and those margins
can also be "tailor-made" to "remove" parts of the space a float takes
up - without changing how it looks.
It's a real conflict-solver - or quite the opposite if one lose track of
what happens.
More on that 'removed float' technique here...


The only reason there's still a 'position: relative' on that floating
image is that IE6 will otherwise "chop off" the part that's outside the
edge of #header. That's a genuine IE/win bug, and is also why IE6 can
present the entire image even if the overflow is hidden.

I've got a perfect line-up in Opera, Safari, Firefox & IE6 - locally, so
you should get the same.

regards
Georg
-- 
http://www.gunlaug.no
__
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] I give up! Why does this not center in FF at 800 x 600?

[Peter Hyde-Smith]

> Can anyone put me out of my misery?
> The following site is centered in IE, but at 800 x 600 in Firefox it jumps
> about 120px to the right after it loads.
> http://www.helenmottee.com/
> The css isn't that tight, since I built on top of a previous theme, but I
> cannot figure this out. Can you?
> Thanks!
> - Adam

02.11.07

Hello, Adam:

You're centered at 800 x 600 in FF2.0/WIN XP for me, at least!

Validating gives an error here, did you mean to make "recents" a  and 
"menutitle" something else?

 
Recent Posts

  Helen
 
and other Christian artists perform at the Micah Network 
Consultation
  

Also, you're missing an alt attribute for your .jpg image. There are also 
some errors in your CSS. Fix these errors, and maybe that will resolve what 
you're seeing.

If you aren't using it, snag Chris Pederick's web developer toolbar for FF 
at, http://chrispederick.com/work/webdeveloper/

Cheers,

Peter
www.fatpawdesign.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] Site Check please

[Robin Fisher]

On 2/10/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
> #mainrightcol {margin: 0; overflow: hidden; padding-left: 20px; height: 1%;}
>
> * html #mainrightcol {overflow: visible;}
>
> #menu a {height: 1%;}
>
> - The first line simply isolates the #mainrightcol and adjust its
> spacing. This affects all browsers, but I've used different means
> (property: values) for the latest browsers and old IE6.
> You can, alternatively, float that element.
>
> - The second line makes sure older IE/win versions aren't broken by the
> 'overflow: hidden' in the first line.
>
> - The third line is a 'hasLayout' trigger for IE6 and older
> win-versions, which will kill their 'whitespace' bug.
>

Thanks Georg.  That's kicked the menu in to shape!

Do you know why there is a couple of extra pixels under the header
image?  Firefox is respecting a max-height declaration of 150px but IE
seems to be adding 3 pixels.

Thanks

Robin
__
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] IE7 Problems with Drop Down Menu

[tedd]

Hi gang:

The link:

http://sperling.com/examples/menuh/

The problem:

IE 5-6 required the csshover.htc to make this css technique work.

In IE7 the menu works w/o the csshover.htc file, but only when the 
user's cursor is over the text in a menu item and it should be 
whenever the cursor is over any part of a menu item instead.

I seem to remember a simple cure for such behavior in using a rule 
like "display: block;", but I don't have IE7 to test this.

Can anyone help?

Thanks in advance for any assistance.

Cheers,

tedd
-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.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] Space in IE6 caused by sidebar form

[Stuart Swan]

Hey folks,

Wondering if anyone can help me with an issue i'm seeing in IE6, all
fine in IE7 and FF. If you go to this page
http://www.csense.net/index.php with CSS here:
http://www.csense.net/css/styles.css On the index page in IE6 you will
see a large gap between the four bottom images and the body text. I
know that it is being caused by the form element on the right-hand
sidebar and through searching the list I have tried using the float:
right method which has not worked, any ideas?

Thanks, Stuart
__
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] strics validate .NET code

[Jay B. Harlow]

You need to ensure your web.config is set to strict conformance:




http://msdn2.microsoft.com/en-us/library/ms228268(VS.80).aspx

http://msdn2.microsoft.com/en-us/library/ms178159.aspx


Using the ASP.NET 2.0 CSS Friendly Control Adapters 1.0 you can produce CSS
friendly ASP.NET code:

http://www.asp.net/cssadapters/


I've used this CSS validator before, I'm sure there are others:

http://jigsaw.w3.org/css-validator/

Jay

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Stib AB
Sent: Sunday, February 11, 2007 3:39 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] strics validate .NET code

Hi everyone.

I tried to validate my xhtml strict code but can't get it to validate
complete.
http://validator.w3.org/check?uri=http://www2.tyresobk.se/default.aspx

The error I got is that the form gets a name, I tried to set it to nothing 
but it can't change.
There are some errors on hidden inputs that is added runtime in separate 
divs. i cant make this became  or anything else.
I guess this minor errors can be ignored for later CSS styling?

Then I have set style="" on my img tag, but I still get error that 
border="0" is no attribute. Wheredoes this come from? Is border in 
inline-style forbidden for image?

I know there are a link to validate my CSS too, but I cant find it, please 
help me ;)

Regards pelle

__
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] IE7 Problems with Drop Down Menu

[Tim Dawson]

On 11/02/2007 14:23, tedd wrote:
> Hi gang:
> 
> The link:
> 
> http://sperling.com/examples/menuh/
> 
> The problem:
> 
> IE 5-6 required the csshover.htc to make this css technique work.
> 
> In IE7 the menu works w/o the csshover.htc file, but only when the 
> user's cursor is over the text in a menu item and it should be 
> whenever the cursor is over any part of a menu item instead.
> 
> I seem to remember a simple cure for such behavior in using a rule 
> like "display: block;", but I don't have IE7 to test this.
> 
> Can anyone help?
> 
> Thanks in advance for any assistance.
> 
> Cheers,
> 
> tedd

Paraphrasing from 'More Eric Meyer on CSS', Project 6: div#nav li a {display: 
block;} is used to make the links fill the list items in any browser, but to 
make it work in IE/Win you need to set an explicit width for the li.  For other 
browsers you may need width: auto;, so set div#nav>ul a {width: auto;}, which 
IE6 (for sure) doesn't understand).  Eric was writing pre IE7, but it would 
appear from what you say that the problem persists.  I wonder why you didn't 
experience it in IE6.

Your div may have a different name, of course.

I hope that helps.

Tim

-- 
Tim Dawson,
Maolbhuidhe,
Creich,
Fionnphort,
Isle of Mull,
Argyll PA66 6BP

Tel: 01681 700718
__
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] IE7 Problems with Drop Down Menu

[Jehangir Larry]

tedd wrote:
> Hi gang:
> 
> The link:
> 
> http://sperling.com/examples/menuh/
> 
> The problem:
> 
> IE 5-6 required the csshover.htc to make this css technique work.
> 
> In IE7 the menu works w/o the csshover.htc file, but only when the
> user's cursor is over the text in a menu item and it should be
> whenever the cursor is over any part of a menu item instead.
> 
> I seem to remember a simple cure for such behavior in using a rule
> like "display: block;", but I don't have IE7 to test this.
> 
> Can anyone help?
> 
> Thanks in advance for any assistance.
> 
> Cheers,
> 
> tedd
The horizontal menu in the link you've given works fine in IE7. XP SP2
Best,
_
_j[_
__
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] help with ie.everything / at my wit's end!

[Holly Bergevin]

From: "bill scheider" <[EMAIL PROTECTED]>

>http://first-encounter-design.dreamhosters.com/fed 

>the four images in
>the bottom right column are one single line rather than a grid.

>I've tried everything I know how to do 

>http://first-encounter-design.dreamhosters.com/fed/css/main.css  

Bill,

I realize that you had another suggestion that fixed the problem of the four 
images not being in a grid, but I believe that was a mask that didn't really 
fix the problem.

Your sidebar is floated right, and has a right margin. This means for IE<7 you 
are encountering the doubled float-margin bug [1]. The solution to this is to 
simplay add {display: inline;} to your #sidebar selector.

The following seems to be what you attempted to use to solve the problem - 

#sidebar {
...
margin-right: 1em;
/margin-right: 0.5em;
...}

That second margin-right property can be removed if you add the display 
property. (plus that slash before the property name is very odd to see. Perhaps 
I'm behind the times with "new" IE hacks)

A further problem is in the initial body selector in the main.css file. You 
have - 

body {
font-size: 82%;
/font-size: 67%;
...}

Other browsers are ignoring that second font-size property declaration, but 
IE/win isn't and it seems to be causing further issues that make IE display 
differently. Remove it and you'll find that the display cross-browser comes 
more in line. 

You can also go back to your 18em width for #sidebar if you want, as the fixes 
here should eliminate the need for that cover-up fix.

~holly

[1] http://www.positioniseverything.net/explorer/doubled-margin.html

ps - you can probably get rid of this, too - 

#header-nav li {
...
/padding-right: 0.1em;
/padding-left: 0.1em;
...} 

and changing the following will also make some display corrections without 
necessitating hacks.

#subnav {
margin: 1em 0 1em 2.2em;
/margin-top: 2em;
...} 
change to 
#subnav {
margin: 0 0 1em 2.2em;
...}
and 

#sidebar {
...
/*padding-top: 1em; */ /* <<< remove */
margin-top: 1.5em; /* <<< add */
}

I think that's all. 
 
   
__
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] Site Check please

[Gunlaug Sørtun]

Robin Fisher wrote:
> Do you know why there is a couple of extra pixels under the header 
> image?  Firefox is respecting a max-height declaration of 150px but 
> IE seems to be adding 3 pixels.

Depending on font-size...

An image is 'inline' by default, and that is the space reserved for
text-descenders. So if you change font-size in IE/win, you'll also
change the size of that space.

The reason that space only show up in IE/win, is that a 'Transitional'
doctype triggers something called "almost standard" in most other
browsers - making them add some non-standard "trickery" to images.
IE/win doesn't have this 'almost standard' mode.

The safe solution is to add/restyle a bit so the choice of doctype
doesn't matter. Floating an image turns it into a block-element - no
descender-space, but a bit more styling is needed to contain those
floating images and align them correctly.

Placing the following at the bottom of your stylesheet will work...

@media screen {
#header {width: 100%; display: table;}
#header img {float: left; margin-right: 29px;}
#wrapper {clear: both;}
}

...and the added @media-wrapper around the header-styles is there to
prevent IE/Mac seeing these styles, as it doesn't understand enough of
it to react properly.

regards
Georg
-- 
http://www.gunlaug.no
__
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 - scrollbar missing

[hiptojive @hotmail.com]

Hi,

I've got some text overflow happening on one page, so i decided to add a 
scrollbar.  It works fine in IE, Firefox for PC, but I can't seem to get the 
scrollbar to appear for Safari.  Please explain what I'm doing wrong.


http://www.thestudioformovement.com/danceCentreSchedule.htm

My guess is it may have something to do with the width of the page.  Any 
insight on how to overcome this problem would be great.


Thanks in advance,

mary

_
Free Alerts : Be smart - let your information find you ! 
http://alerts.live.com/Alerts/Default.aspx


__
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] Horizontal Navigation with Images

[Matthew Stoneback]

Hello all:

 

I have been away from css coding for a few months and working at my "real
job."  I am posting to hopefully get some refresher on a problem I am
having.  (I am sure I am just missing something small.)

 

First off, here is a link to my HTML:
http://www.eddysound.com/epso/nav_test.htm

 

And to my CSS: http://www.eddysound.com/epso/nav_test.css

 

Now for my questions:

 

What I am looking to do is line the images up horizontally and use them as a
navigational "bar."  I would like the images to have a 1 pixel border on the
bottom and right; border color #847983.  If I have calculated right, it
would make the whole navigation 524px wide, including the 1px border between
each image.  Right now it is showing a border around the images on all
sides.  I can take the border off with, border: none;, but I don't want to
take away the entire border.  Any ideas?  Is my CSS wrong?

 

Second question, different subject:

 

When lining images up horizontally, is there a inherit amount of padding or
margin on the left and right sides?  Basically, why can I not line two
images up flush against one another?  If an example is needed, I can post a
link.

 

Thanks in advance for any help.

 

Matthew Stoneback

__
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] Horizontal Navigation with Images

[Steve Clason]

Matthew Stoneback wrote:

> First off, here is a link to my HTML:
> http://www.eddysound.com/epso/nav_test.htm

> And to my CSS: http://www.eddysound.com/epso/nav_test.css

> What I am looking to do is line the images up horizontally and use them as a
> navigational "bar."  I would like the images to have a 1 pixel border on the
> bottom and right; border color #847983.  If I have calculated right, it
> would make the whole navigation 524px wide, including the 1px border between
> each image.  Right now it is showing a border around the images on all
> sides.  I can take the border off with, border: none;, but I don't want to
> take away the entire border.  Any ideas?  Is my CSS wrong?
>
This worked for me:
#mainNav li a img{
 border: 0; /*changed */
 border-right: 1px solid; /*new*/
 border-bottom: 1px solid; /*new*/
border-color: #847983;

Something to do with specificity, but I'm totally unmotivated to figure 
it out, sorry.
}

> When lining images up horizontally, is there a inherit amount of padding or
> margin on the left and right sides?  Basically, why can I not line two
> images up flush against one another?  If an example is needed, I can post a
> link.

I just always assume that evil padding and margins lurk to thwart my 
desires everywhere, and explicitly set them all to 0.


-- 
Steve Clason
Boulder, Colorado, USA
(303) 818-8590
__
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 - scrollbar missing

[Bradley Wright]

hiptojive @hotmail.com wrote:
> I've got some text overflow happening on one page, so i decided to add a 
> scrollbar.  It works fine in IE, Firefox for PC, but I can't seem to get 
> the scrollbar to appear for Safari.  Please explain what I'm doing wrong.

First of all, your page is invalid, so I suggest fixing that.

Secondly, I've not got Safari with me here but I'm guessing it's this:
 > Property overflow-x doesn't exist : hidden
 > Property overflow-y doesn't exist : auto

Just use:
overflow: auto;

And it should behave as expected. overflow-x and overflow-y are invalid 
CSS and are probably dropped by Safari.
__
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] Site Check - amplify.com.au

[Scott Swabey]

Hi all

We have just completed a redesign/redevelopment of the
www.amplify.com.auwebsite, and would appreciate any feedback,
especially from Mac users.

Many thanks

-- 
Scott Swabey
www.lafinboy.com
www.thought-after.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] Safari - scrollbar missing

[hiptojive @hotmail.com]

Thanks.  I checked the page on the W3C Markup Validation Service site and I 
will work on getting the errors corrected.

In regards to my scrollbar issue. I do not want a horizontal bar to appear 
on the bottom, so in trying to figure out a way of eliminating it from the 
bottom, I discovered this solution:

overflow-x: hidden;
overflow-y: auto;

Is there a CSS compliant way of handling this?  and one that is compatible 
with Safari?

- mary




>From: Bradley Wright <[EMAIL PROTECTED]>
>To: CSS-D 
>Subject: Re: [css-d] Safari - scrollbar missing
>Date: Sun, 11 Feb 2007 22:17:36 +
>
>hiptojive @hotmail.com wrote:
> > I've got some text overflow happening on one page, so i decided to add a
> > scrollbar.  It works fine in IE, Firefox for PC, but I can't seem to get
> > the scrollbar to appear for Safari.  Please explain what I'm doing 
>wrong.
>
>First of all, your page is invalid, so I suggest fixing that.
>
>Secondly, I've not got Safari with me here but I'm guessing it's this:
>  > Property overflow-x doesn't exist : hidden
>  > Property overflow-y doesn't exist : auto
>
>Just use:
>overflow: auto;
>
>And it should behave as expected. overflow-x and overflow-y are invalid
>CSS and are probably dropped by Safari.
>__
>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/

_
Find out the restaurants participating in Winterlicious 
http://local.live.com/default.aspx?v=2&cp=43.658648~-79.383962&style=r&lvl=15&tilt=-90&dir=0&alt=-1000&scene=3702663&cid=7ABE80D1746919B4!1329
 
>From January 26 to February 8, 2007

__
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] Horizontal Navigation with Images

[David Sharp]

Matthew Stoneback wrote:
> I would like the images to have a 1 pixel border on the
> bottom and right; border color #847983...

>  Right now it is showing a border around the images on all
> sides.  I can take the border off with, border: none;, but I don't want to
> take away the entire border.  Any ideas?  Is my CSS wrong?
>
>  
>
>   
"border" is a shorthand property that takes only three values - width, 
colour and style and is only therefore useful for setting uniform 
borders around elements.
Changing
border : 0 1px 1px 0;
to
border-width : 0 1px 1px 0;
will give you the intended result.

regards
__
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] Site Check - amplify.com.au

[Gunlaug Sørtun]

Scott Swabey wrote:

> We have just completed a redesign/redevelopment of the 
> www.amplify.com.auwebsite, and would appreciate any feedback, 
> especially from Mac users.

IE5/Mac = totally broken - unusable.
IE6 = not lining up correctly in the top part, and dropping main parts
on narrow windows - still usable.

Horizontal nav wrapping on narrowed window in all my browsers, but
otherwise...
Safari(2.x) = doing fine.
Fx win(2.x)/Mac(1.5.0.8) = doing fine.
Opera(9.x) win/Mac = doing fine.

regards
Georg
-- 
http://www.gunlaug.no
__
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 not wrapping around a float?

[Jon Hughes]

http://goonsquad.org/hosting

In FF, it looks like I want and expect it to.  The text to the left
stays on the left of the image.

However, in IE, the text jumps down below the image.

Anyone know how to fix that?

Thanks,

 - Jon

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

[Philippe Wittenbergh]

On Feb 12, 2007, at 8:47 AM, hiptojive @hotmail.com wrote:

> In regards to my scrollbar issue. I do not want a horizontal bar to  
> appear
> on the bottom, so in trying to figure out a way of eliminating it  
> from the
> bottom, I discovered this solution:
>
> overflow-x: hidden;
> overflow-y: auto;
>
> Is there a CSS compliant way of handling this?  and one that is  
> compatible
> with Safari?

overflow-x:hidden;
overflow-y:auto;
is **perfectly valid CSS 3**.

But it is not supported by Safari 2.0 and older, and Opera 9.1 and  
older.
Firefox supports it since version 1.5

The way to solve your this:
1/ if CSS2.1 validation is important or required, use  
'overflow:auto'. A horizontal scrollbar will only be triggered if  
there is very long content that doesn't fit in the content. Except in  
iExploder, that is [1].

2/ else: write it out this way:
overflow:auto;
overflow-x:hidden;
overflow-y:auto;

Browsers that do not understand the 'overflow-x:hidden;overflow- 
y:auto;' will still have the first declaration to work with. And  
you'll still have a perfectly valid CSS 3 style sheet.

[1] iExploder will show a ghost horizontal scrollbar anyway. If CSS  
2.1 validation is important, use a Conditional Comment to serve the  
'overflow-x:hidden;overflow-y:auto;' to that browser.

BTW if CSS 2.1 validation is important, please remove that ugly  
scrollbar-base-color, etc.

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] Safari - scrollbar missing

[hiptojive @hotmail.com]

thanks!  and point taken:

BTW if CSS 2.1 validation is important, please remove that ugly  
scrollbar-base-color, etc.>


:)

-mary


From: Philippe Wittenbergh <[EMAIL PROTECTED]>
To: CSS-D 
Subject: Re: [css-d] Safari - scrollbar missing
Date: Mon, 12 Feb 2007 10:15:23 +0900


On Feb 12, 2007, at 8:47 AM, hiptojive @hotmail.com wrote:

In regards to my scrollbar issue. I do not want a horizontal bar to  
appear
on the bottom, so in trying to figure out a way of eliminating it  from 
the

bottom, I discovered this solution:

overflow-x: hidden;
overflow-y: auto;

Is there a CSS compliant way of handling this?  and one that is  
compatible

with Safari?


overflow-x:hidden;
overflow-y:auto;
is **perfectly valid CSS 3**.

But it is not supported by Safari 2.0 and older, and Opera 9.1 and  older.
Firefox supports it since version 1.5

The way to solve your this:
1/ if CSS2.1 validation is important or required, use  'overflow:auto'. A 
horizontal scrollbar will only be triggered if  there is very long content 
that doesn't fit in the content. Except in  iExploder, that is [1].


2/ else: write it out this way:
overflow:auto;
overflow-x:hidden;
overflow-y:auto;

Browsers that do not understand the 'overflow-x:hidden;overflow- y:auto;' 
will still have the first declaration to work with. And  you'll still have 
a perfectly valid CSS 3 style sheet.


[1] iExploder will show a ghost horizontal scrollbar anyway. If CSS  2.1 
validation is important, use a Conditional Comment to serve the  
'overflow-x:hidden;overflow-y:auto;' to that browser.


BTW if CSS 2.1 validation is important, please remove that ugly  
scrollbar-base-color, etc.


Philippe
---
Philippe Wittenbergh







_
Free Alerts : Be smart - let your information find you ! 
http://alerts.live.com/Alerts/Default.aspx


__
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] help with ie.everything / at my wit's end!

[bill scheider]

>http://first-encounter-design.dreamhosters.com/fed 

>the four images in
>the bottom right column are one single line rather than a grid.

>I've tried everything I know how to do 

>http://first-encounter-design.dreamhosters.com/fed/css/main.css  

:Bill,

:I realize that you had another suggestion that fixed the problem of the
:four images not being in a grid, but I believe that was a mask that didn't
:really fix the problem.

:Your sidebar is floated right, and has a right margin. This means for IE<7
:you are encountering the doubled float-margin bug [1]. The solution to this
:is to simplay add {display: inline;} to your #sidebar selector.

:The following seems to be what you attempted to use to solve the problem - 

:#sidebar {
:...
:   margin-right: 1em;
:   /margin-right: 0.5em;
:...}

:That second margin-right property can be removed if you add the display
:property. (plus that slash before the property name is very odd to see.
:Perhaps I'm behind the times with "new" IE hacks)

Holly,
Thanks so much for your response. And the link: that info will serve me a
lot better than the 'fix' I stumbled upon!

Those /xxx-xxx: whatever declarations have been something I use temporarily
for IE. I then remove them, correct them to an ie.css which I call with a
CC. However, in this case, at least, I was able to do away with all of them
after applying the info you supplied -- and return that sidebar back to the
18em I wanted. Some minor tweaking with the image div and - voila! Fixed. 

Again thanks.
Bill
  


__
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] Centering block containing floats within an absolute block

[Yasir Assam]

Hello,

I'm trying to create a horizontal menu where each menu item is an image 
with a centred caption below it. I'd like the whole menu to be centred 
within its containing element (which itself is an absolutely position 
element).

Here's the test page:
http://endlessvoid.com/test_css/test2.html

I can't seem to centre the menu without explicitly setting a width 
(which I'd rather not do).

Here's what it looks like when it's centred:
http://endlessvoid.com/test_css/test1.html

I've drawn borders around some of the divs to help me see what I'm doing.

If anyone can help me do this without explicitly setting the menu width 
I'd be very grateful. I have total control over the generated HTML so I 
can change it if needs be.

This needs to work across all the major browsers.

Thanks in advance,
Yasir
__
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] IE not wrapping around a float?

[Gunlaug Sørtun]

Jon Hughes wrote:
> http://goonsquad.org/hosting
> 
> In FF, it looks like I want and expect it to.  The text to the left 
> stays on the left of the image.
> 
> However, in IE, the text jumps down below the image.
> 
> Anyone know how to fix that?

Delete the 'width: 450px' on '#content p', and IE will correct its
behavior.

That width acts as a 'hasLayout'[1] trigger in IE/win, and turns the
paragraph into a full-width isolated block that can't interact with the
float but instead drops below it.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
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] Placing images in corners

[Dave M G]

CSS-d,

If one looks up how to put images in the corners of a DIV on Google, one 
gets a lot of articles about creating rounded corners. These generally 
fall into two types, one using images, and other Javascript based 
methods without images.

What I want to do is place images into the corners of my DIV, so I 
thought I could use the same techniques that get used for rounded 
corners with images.

However, I can't help but wonder if the rounded corner images are 
slightly overkill for my intentions. My goal is to place little angular 
bracket images, each of which is 25x25 pixels square, and there is no 
need for any connectivity along the edges of the DIV to go between the 
corners.

The "List Apart" approach to rounded corners, found here:

http://alistapart.com/articles/customcorners/

... uses rather large images, constructed to allow for the corners to be 
used fluidly, because of the background behind the DIV, and the nice 
drop shadow that goes all along the edge:

http://alistapart.com/d/customcorners/step1.1.html

Since I don't need drop shadows or anything along the edges, is there a 
way I can just stuff for images into the four corners of a DIV?

I have a feeling this kind of information is out there, but it's hard to 
find because of the overwhelming popularity of solutions to rounded corners.

Is there a simple tutorial for corner images that would be more suited 
to my purpose?

Thank you for any advice.

--
Dave M G
Ubuntu 6.10 Edgy Eft
Kernel 2.6.17.7
Pentium D Dual Core Processor
PHP 5, MySQL 5, Apache 2
__
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] Placing images in corners

[Micky Hulse]

Dave M G wrote:
> Is there a simple tutorial for corner images that would be more suited 
> to my purpose?

I sometimes like this approach:



Or I would use the multi-div/background image approach...

Or, easy to just used fixed-width bkgrnd images if fixed-width container

Also, have you checked-out this page:



Good luck,
Cheers,
M


-- 
  Wishlist: 
Switch: 
  BCC?: 
My: 
__
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/