Re: [css-d] IE6 Footer issues

[Gunlaug Sørtun]

Keith Cox wrote:
> IE6 does not display footer background, looks good in my other 
> browsers? Any suggestions?
> 
> http://www.jr.keithcoxdesign.com

I didn't find any footer styles, only some styles without selectors
which may or may not have been applied as universal by some browsers. I
may have picked up your stylesheet while you were making changes though.

Adding something like...
#footer {background: #8b3629; clear: both;}
...works fine across browser-land.

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] 3 Columns - Adjusting Centercontent

[Kevin J Pledger]

Hi Mike,

Thanks for the reply.

I had a thought it would be simple and steering me in the face. I had tried
using top, but didn't use it with margin-top.

Some times you cant see the forest for the trees.

Kind Regards,

Kevin 


-Original Message-
From: Matt Ryan [mailto:[EMAIL PROTECTED] 
Sent: Saturday, January 06, 2007 05:47 AM
To: Kevin J Pledger
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] 3 Columns - Adjusting Centercontent

On 1/5/07, Kevin J Pledger <[EMAIL PROTECTED]> wrote:
> Question:
> How can I adjust the centercontent column down from the top of the page.

Presuming you want to move the center column down without moving the others,
it looks like you should be able to add this to the #centercontent selector:

margin-top:10px; (or whatever value you want)

Matt Ryan


__
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] div to display on one page only

[Matt Ryan]

> I have a div that is only to display on one page. I have made it invisible on 
> all pages with display:none and added the declaration under it but it doesn't 
> appear.
>
> Is there a way to do it without adding style tags to the individual page?

Do you have a web-available example?

As long as the page you are targeting has a body tag or wrapper
element with the id "home" this should work:

#home #mybox {
display:block;
}

(Note using display:block to override the display:none.) If it is not
working the selector you are trying to override is probably more
specific (e.g. body#home div#mybox) and you will need to make your
selector at least that specific.

On the other hand, I would think that you should be able to place
single element on a particular page, thus obviating the need to hide
it on all other pages. The way you are tackling the problem -- putting
it on all pages and then trying to hide on all but one -- sounds
pretty roundabout and backwards on its surface.

Matt Ryan
__
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] div to display on one page only

[Ross Hulford]

I have a div that is only to display on one page. I have made it invisible on 
all pages with display:none and added the declaration under it but it doesn't 
appear.

Is there a way to do it without adding style tags to the individual page?


I thought because the declaration

#home #mybox {


}

is under display none it should work. any ideas?


R.
__
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] IE6 Footer issues

[Keith Cox]

IE6 does not display footer background, looks good in my other browsers?
Any suggestions?

http://www.jr.keithcoxdesign.com


Thanks, Keith


Keith Cox Design
http://www.keithcoxdesign.com
Phone  (918) 520-0836
FAX  (918) 622-2830
[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] ie problem with text going over graphic

[Gunlaug Sørtun]

Melinda Odom wrote:

> How do I fix this ie problem with the text being spread out over the 
> flower? http://www.designhosting.biz/newsite/intro.html

The 'hasLyout'[1] bug (yes, it is a bug) is taking over, triggered by
the width on #mainContent. The result is that the entire #mainContent is
lining up alongside #introLinks, thus is shifted 230px over to the
right side - in IE/win. So, #blank also ends up 230px too far to the
right, and the paragraphs are 230px too wide.

There's no easy way to avoid that IE bug without adding more elements,
so you may as well play along with it.

Changing styles on #mainContent to...

#mainContent {
font-size: 11px;
line-height: 1.5;
color: #FF;
margin-top: 40px;
width: 470px;
float: left;
}

...will correct the width to a more suitable one, and make other
browsers line up that element like IE6 does, but in accordance with
standards and not depending on bugs.

BTW: no need to have a background-image on #blank - not even a
transparent one. It'll stay transparent anyway.

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/

Re: [css-d] IE6 image margin/padding ?

[Gunlaug Sørtun]

Mark Baber wrote:
> [...]

> So ... I included an  explicitly in my HTML instead, and it 
> looks just fine in FF, but IE6 now inserts a 3-pixel margin or border
>  on the left side. For the life of me, I can't get rid of it.

> http://spip.novado.ch/spip.php?article84

Give IE6 something it understands, by adding...
* html #rubriques img {float: left;}



Comment:
I think it would be a good idea to fix those errors...

...or at least use a HTML (4.01) doctype since that's what your
source-code is written as.

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 problem with text going over graphic

[Melinda Odom]

Hi,

How do I fix this ie problem with the text being spread out over the flower?
http://www.designhosting.biz/newsite/intro.html

I have a style with a blank.gif in it which works with mozilla and netscape
but not ie. If I take the gif off the div and put it directly on the page
with a right alignment I get the same problem with ie with the text going
over the flower.  I would prefer to use the gif in the div rather than put
it on the page.

The styles are:
body {
background-image: url(assets/bg_intro.jpg);
background-repeat: repeat-x;
background-color: #163647;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
background-image: url(assets/bg_flower.jpg);
background-repeat: no-repeat;
height: 500px;
}
#introHead {
background-image: url(assets/intro_logo.jpg);
background-repeat: no-repeat;
background-position: left bottom;
height: 120px;
width: 200px;
}
#bgLine {
background-image: url(assets/bg_line.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 20px;
width: 460px;
}
#introLinks {
float: left;
width: 200px;
background-image: url(assets/bg_intro_links.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 100%;
margin-left: 20px;
margin-top: 40px;
clear: both;
margin-right: 10px;
}
#mainContent {
font-size: 11px;
line-height: 1.5;
color: #FF;
margin-top: 40px;
width: 700px;
}
#blank {
background-image: url(assets/bg_intro_blank.gif);
background-repeat: no-repeat;
height: 310px;
width: 270px;
float: right;
}


Thanks!

Sincerely,
Melinda Odom
Design Hosting, Inc.
www.designhosting.biz
479-471-0891



-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.432 / Virus Database: 268.16.5/616 - Release Date: 1/4/2007
1:34 PM
 
__
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] Curious LI Background Issue - IE6 Only

[Gunlaug Sørtun]

L. Robinson wrote:
> I have a tree menu in place which is suddenly behaving very oddly in
> IE6 only. The li background icons refuse to show up until hover, then
> seem to appear and disappear at will.

> http://beta.consupro.net/products/default.asp?Content=Products

IE6 needs the usual 'hasLayout'[1] trigger on those list-items.

Add...
#nav ul li {height: 1%;}
...and the background will stabilize.

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] Curious LI Background Issue - IE6 Only

[L. Robinson]

New Years Greetings to All.

I have a tree menu in place which is suddenly behaving very oddly in IE6 
only. The li background icons refuse to show up until hover, then seem 
to appear and disappear at will.

I've trouble-shot(?) this by first removing all javascript calls 
(cookies hold the menu state), then stylesheets in succession, then any 
list declarations in the main and IE6 stylesheet that might be 
interfering. The behavior continues.

At a total loss, I'm hoping someone more advanced can tell at a glance 
what might be causing this.

http://beta.consupro.net/products/default.asp?Content=Products
http://beta.consupro.net/site-styles/global.css
http://beta.consupro.net/site-styles/ie6.css

Many thanks in advance,

L. Robinson
__
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] 3 Columns - Adjusting Centercontent

[Matt Ryan]

On 1/5/07, Kevin J Pledger <[EMAIL PROTECTED]> wrote:
> Question:
> How can I adjust the centercontent column down from the top of the page.

Presuming you want to move the center column down without moving the
others, it looks like you should be able to add this to the
#centercontent selector:

margin-top:10px; (or whatever value you want)

Matt Ryan
__
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, fist-letter line-height

[Gunlaug Sørtun]

Nic Pulford wrote:
> The issue is that FF seems to ignore line-height when in a 
> first-letter.

> Is there a solution?

I think so, but I've forgotten exactly _how_ I made it work :-)

Seem to remember that I had to manipulate the relationship between
font-size, line-height, paddings and margins in order to make all
browsers (and me) happy.

Anyway, here's a page where I tested :first-letter, and made it work
somewhat consistent across browser-land - despite Firefox' protests...

Seems to still line up quite well in IE6, Firefox 2.x, Opera 9.x and
Safari 2.x.

The page-specific :first-letter CSS is in the page-head, found under...
/* --- testing first-letter  */

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] template has strange whitespace in IE6

[Thijs Hakkenberg]

~davidLaakso schreef:

Thijs Hakkenberg wrote:
  

Dear List,

This template has a strange whitespace in IE6, which is absent in FF.
Anyone got a clue?


Maybe it does not have a doctype and is not valid html?
  
http://www.openwebdesign.org/viewdesign.phtml?id=3487&referer=%2Fsearch.php%3Fsearchstring%3Dcorporatelike%26tab%3Dkeyword 



Regards,



Best,
~dL

  

Nope, all templates on this site are validated xhtml strict:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.openwebdesign.org%2Fdesign%2F3487%2Fcorporatelike%2F 



however, it yields a:

Character Encoding mismatch!

  The character encoding specified in the HTTP header (|utf-8|) is
  different from the value in the || element (|iso-8859-1|). I
  will use the value from the HTTP header (|utf-8|) for this validation.

But I don't think this causes the error...
(sorry, i've replied to your mailbox only first)
__
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] template has strange whitespace in IE6

[Matt Ryan]

> Maybe it does not have a doctype and is not valid html?

It looks like it's the silly frame around the template that is invalid.

The template itself ( at
http://www.openwebdesign.org/design/3487/corporatelike/ ) looks to be
ok:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.openwebdesign.org%2Fdesign%2F3487%2Fcorporatelike%2F

Matt Ryan
__
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] template has strange whitespace in IE6

[~davidLaakso]

Thijs Hakkenberg wrote:
> Dear List,
>
> This template has a strange whitespace in IE6, which is absent in FF.
> Anyone got a clue?
Maybe it does not have a doctype and is not valid html?
>
> http://www.openwebdesign.org/viewdesign.phtml?id=3487&referer=%2Fsearch.php%3Fsearchstring%3Dcorporatelike%26tab%3Dkeyword
>  
>
>
> Regards,
> 
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] template has strange whitespace in IE6

[Thijs Hakkenberg]

Dear List,

This template has a strange whitespace in IE6, which is absent in FF.
Anyone got a clue?

http://www.openwebdesign.org/viewdesign.phtml?id=3487&referer=%2Fsearch.php%3Fsearchstring%3Dcorporatelike%26tab%3Dkeyword

Regards,
--

Thijs Hakkenberg,


Voorzitter Stichting Ebriositas [kvk: 34210081]
www.ebriositas.nl 
Student Natuurkunde UvA
www.uva.nl 
Systeembeheerder Stichting Varkens in Nood
www.varkensinnood.nl 

Contact:
Tel: 06-48761131
www.hakkenberg.com 
[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] grouping pages

[Barney Carroll]

Mike Davies wrote:
> You might try adding a class to the  tag as well to indicate the
> group. Not sure if this will work as I've not tried it. perhaps others
> can comment.
> 
> Regards,
> Mike
> 
> I have a website and each page has a div body id. 
> 
> This give me control over the individual pages but is there a way to
> group divs? For example I have a section called about us and it has 4
> pages associated with it that follow the same layout. I also have a
> section called contact us that has 3 pages (map, contact details etc.)
> associated with it. Is there a way to apply grouping to pages so I can
> style accoring to body id and what group it is in?

You would need some kind of templating system... But that kind of stuff 
is pretty standard with most CMSs. I've used body ids and classes many 
times.

body classes are an ideal way of defining site section identities, ie 
different layout or colours for different major sections of the site.

Regards,
Barney
__
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] grouping pages

[Mike Davies]

You might try adding a class to the  tag as well to indicate the
group. Not sure if this will work as I've not tried it. perhaps others
can comment.

Regards,
Mike

I have a website and each page has a div body id. 

This give me control over the individual pages but is there a way to
group divs? For example I have a section called about us and it has 4
pages associated with it that follow the same layout. I also have a
section called contact us that has 3 pages (map, contact details etc.)
associated with it. Is there a way to apply grouping to pages so I can
style accoring to body id and what group it is in?
-- 
Mike Davies
Integra Web Design, Huntly, AB54 4XP
01466 700213www.integrawebdesign.co.uk

__
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] s in s

[Jorge Rumoroso]

Hi James.

>On 1/5/07, james shannon <[EMAIL PROTECTED]> wrote:
>
> >Hi all --
> >After following this list for the past several weeks, I've been
> >redesigning my current project with a few Good Ideas. One of which is
> >making everything more semantic.
> >I had previously been doing this:
> >
> >
> >   Welcome to my site
> >
> > Lorem ipsum dolorem.
> >
> >
> >div.title would be styled with a different color, a border-bottom,
> >larger text, etc. In the name of semantics, I replaced  >class="title"> with  and styled h1 appropriately. It looked
> >great, and I felt good, but ran into problems with:
> >
> >
> >  
> > Welcome to my site
> >Click here to expand
> >  
> >
> > Lorem ipsum...
> >
> >
> >It worked fine, but didn't validate. Turns out the spec doesn't like
> >s in s.
> >
> >Is there a way around this, or should I just go back to div.title? I
> >thought about
> >
> >textlink
> >
> >but there are some problems with that and getting everything to line up.
> >
> >thanks in advance,
> >james
>

You can not put block elements in h1. There is a simple solution to your
problem. Your code:
 Welcome to my site Click here to
expandtext
and your css:
  h1 span { float: right}
I think that your second text ("Click here to expandtext") would have to be
out of the head level 1. Are you sure that, in a semantic way, it is part of
the h1?

www.niquelao.net  - Niquelando la web
__
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] "Floating Absolute" Positioning

[Scott Povlot]

Cody,

Basically, absolute positioning and variable font sizes don't mix.  I would 
suggest that you try the layout without absolute positioning.  You can easily 
do this by removing the "position: absolute" and "top" attributes and changing 
"left" to "margin-left".  Then you can set a min-height (and height on IE) to 
the appropriate size that you choose.  Then everything will be in the normal 
document flow. (Oh, you might need to move your image on the left to a float or 
a background.)  And the thumbnails will only move down if the text gets larger 
than the min-height.

Regards,

Scott

- Original Message 
From: Cody Thornton <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Friday, January 5, 2007 12:27:16 PM
Subject: [css-d] "Floating Absolute" Positioning

At this site http://www.matthew-cunningham.com/frontridge/project.html there is 
a row of thumbnail images that risk overtaking the text if the viewer has the 
font size set larger than normal (the text wraps under the thumbnails).

I want the absolute position of the row of thumbnails to hold among all of the 
projects EXCEPT in the rare case that the text is too large to fit in that 
space.  You can see what I mean by clicking on the project arrows to go from 
project to project.

Is there a way to give those thumbnails an "absolute" position except when it 
needs to be pushed down?

Thanks in advance!  I'm very new to CSS.

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






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.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/

Re: [css-d] A problem in Foxfire

[Andy Harrison]

Try fixing the CSS error in #wrap - you need a semicolon after the width
property.

Andy :-)

On 1/1/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
> Hello,
>
> I'm very new at css, trying to understand and apply the concepts little by
> little but far from mastering it!
>
> I have a problem with the below site. It's in the very beginning stages,
> just trying to get the basic format in place and having some struggles.
>
> It looks okay in IE 6 as far as I can tell, but it is a huge mess in
> Foxfire. I would appreciate any assistance you can provide to get me on
> the
> right track with this.
>
> The client wants the white area to be flush with the right side of the
> screen and her illustrations, she prefers to be on the flush left.
>
> http://www.tladevelopment.com/csshelp/index.htm
> http://www.tladevelopment.com/csshelp/style.css
>
> Thank you very much,
> Jill
>
> 
> mail2web - Check your email from the web at
> http://mail2web.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-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] Problem overlap in IE7 (PLEASE)

[Scott Povlot]

I think that my email may have been lost in the shuffle when the list was down. 
 Can someone please help me with this problem on IE7?

Thanks!
Scott

- Original Message 
From: Scott Povlot <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Wednesday, January 3, 2007 2:15:55 PM
Subject: [css-d] Problem overlap in IE7

I need some help on IE7.  I have a website that works well on IE6, FF and 
Opera.  But on IE7, the content text overlaps the sidebar on the right.  The 
content area has a 13em right margin.  And the sidebar ("Upcoming Events") is 
positioned absolutely at the right on 0.


Website: http://www.piedmont-div.org/
CSS: http://www.piedmont-div.org/css/styles.css


Any suggestions on fixing this problem in IE7 would be helpful.

Thanks,

Scott 






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.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/






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.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/

Re: [css-d] "Floating Absolute" Positioning

[Chris Ovenden]

Instead of using position:absolute on the .thumbs DIV, coul not not leave it
in the flow, beneath the .projecttext DIV (that contains the text), and put
a min-height (of about 572px) on .projecttext to keep it in place? (Of
course you'd need * html .projecttext { height:572px } for IE6 -)

Chris

On 1/5/07, Cody Thornton <[EMAIL PROTECTED]> wrote:
>
> At this site http://www.matthew-cunningham.com/frontridge/project.htmlthere 
> is a row of thumbnail images that risk overtaking the text if the
> viewer has the font size set larger than normal (the text wraps under the
> thumbnails).
>
> I want the absolute position of the row of thumbnails to hold among all of
> the projects EXCEPT in the rare case that the text is too large to fit in
> that space.  You can see what I mean by clicking on the project arrows to go
> from project to project.
>
> Is there a way to give those thumbnails an "absolute" position except when
> it needs to be pushed down?
>
> Thanks in advance!  I'm very new to CSS.
>
> Cody
> __
> 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/
>



-- 
Chris Ovenden

http://thepeer.blogspot.com
"Imagine all the people / Sharing all the world"
__
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] "Floating Absolute" Positioning

[Cody Thornton]

At this site http://www.matthew-cunningham.com/frontridge/project.html there is 
a row of thumbnail images that risk overtaking the text if the viewer has the 
font size set larger than normal (the text wraps under the thumbnails).

I want the absolute position of the row of thumbnails to hold among all of the 
projects EXCEPT in the rare case that the text is too large to fit in that 
space.  You can see what I mean by clicking on the project arrows to go from 
project to project.

Is there a way to give those thumbnails an "absolute" position except when it 
needs to be pushed down?

Thanks in advance!  I'm very new to CSS.

Cody
__
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] Dotted Box

[Scott Povlot]

The dotted box is the focus that appears on the current link.  If you tab 
around the browser, you will notice that this moves to each link.  There is not 
a simple way to remove this.  And if you do, you may have a 
usability/accessibility problem.

There is a solution available on CSSPlay at Removing active/focus state borders 
(http://www.cssplay.co.uk/menu/nodots.html).  But this seems more complicated 
than what it's worth, IMHO.

Scott

- Original Message 
From: Steve LaBadie <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Friday, January 5, 2007 9:12:02 AM
Subject: [css-d] Dotted Box

Is there away to prevent the dotted box that appears around a link after
you click on it?  If I refresh the page it goes away.

 

Steve LaBadie, Web Manager
East Stroudsburg University
200 Prospect St.
East Stroudsburg, Pa 18301
570-422-3999
[EMAIL PROTECTED]  
http://www.esu.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/






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.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/

Re: [css-d] IE6 Issues, Site Check Please

[~davidLaakso]

ibn Ezra wrote:
> IE 6 causes the  
> right div to float down past the left hand sidebar as I discovered at  
> the library last night.
> http://www.vschess.org/2007-championships/index.aspx
> http://www.vschess.org/_stylesheets/base.css
>
> -iE
>
>   
I guess it is a box-model problem. Compliant browsers (and even ie/7.0) 
include the horizontal padding (30px left and right=60px) in the overall 
width of 535px.
Try subtracting that 60px padding from the width (535px less 60px= 
475px) and feed it to ie/6 (the star selector will not be seen by 
ie7.0). Put it at the very bottom of your style sheet; or, feed it to 
within a conditional comment [1]:
* html #content-wrapper #text {
width: 475px;
background-color: fuchsia /*test color*/;
}
[1] 
Regards,
~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] IE6 image margin/padding ?

[Mark Baber]

Hello,

I wanted to use CSS to put a pseudo-class :after image at the end of a 
navigation list, but IE6 doesn't support those. Even if IE7 might work, there's 
still too many folk with IE6 for me to ignore them.

So ... I included an  explicitly in my HTML instead, and it looks just 
fine in FF, but IE6 now inserts a 3-pixel margin or border on the left side. 
For the life of me, I can't get rid of it.

I've tried the IE developer DEVTOOLBAR DOM editor, and the Firefox Firebug 
tool, but I just can't work out how to eliminate the little red 
line/space/margin/padding that appears between the UL and the IMG after the 
"Current Vacancies" menu item on this page:

http://spip.novado.ch/spip.php?article84

The difference can most easily seen if you toggle between IE6 and FF2 versions 
of the same page.

The menu has been constructed using an internal SPAN so that the left and right 
graphics for each option can both change during a HOVER. Rather like sliding 
doors, sort of.

The menu bar may look peculiar, but I am constrained from changing too much of 
the "look and feel". If anyone has an idea how I can eliminate this IE6 vagary, 
I would be most grateful.

Thanks in advance,

Mark
__
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] Screen readers and display:none

[Matt Ryan]

On 1/4/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> I admit it's been a while since I used the FIR technique, mostly because I 
> was leery about how screen readers handle display:none. According to Joe 
> Clarke in a 2003 article in A List Apart, different screen readers handle an 
> non-displayed element differently, with some speaking it out loud, and others 
> not at all.
...
> I have now started developing in ASP.NET, and I have noticed that much of the 
> interactivity of the framework is derived from having certain elements turned 
> off with display:none, and then using javascript to turn them back on.



In my understanding, elements with display:none; are not read by
screen readers. A more accessible way to do visual replacement of text
with images (or, I assume, in today's sIFR, with flash) involves using
the combination of position:relative; and left:-px; (or similarly
huge value) to shift the element off the page but keeping it in the
flow. This approach allows the text to be read by screen readers.

So users using screen readers would not be surprised by the error
message... if  they have css turned on. The big red flag that goes up
for me with the .net approach is that it assumes that the user has css
turned on, which is a big assumption. Presumably a fully-non-sighted
user doesn't care if css is on or off, but since in the real world
there is a wide continuum of disability, many users may turn css of to
get a linearized layout that they can scale, invert, etc. in order to
access with limited sight, mobility, etc. In any case, css is
disableable in most every browser, so assuming it's on isn't very
realistic.

Another possible accessibility concern with the approach you describe
is the fact that screen readers are not automatically alerted when an
element on the page changes. So if your user with a screen reader has
an error on their form, how do they know?  The element has been
visually revealed, and is now available to be read, but unless the
browser is directed to jump focus to the error, the user will not be
alerted to that fact. This may be handled by .net, but you probably
want to check to make sure. (I have a coworker who is an acessiblity
expert, so if you provide a URL I could ask if he has a moment to try
it out in Jaws.)

Matt Ryan
__
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] absolute positioning problem in IE5

[info]

Hello .. my first post here, thanks for this resource.

I created a slideshow control-
http://www.yasweb.com/slideshow/demo.html

Source code download from here-
http://www.yasweb.com/slideshow/

I'm using an extra DIV (class is "slideshowwrap") to wrap the entire
control.  The child DIV (class is "slideshow") is floated left in order
for it to shrink to fit, otherwise it expands the entire length.  Is
there a simpler, or more direct way in CSS to specify shrink to fit
width?

I could have calculated the width by accounting for extra padding,
border ... but I'd prefer not to do this, makes the CSS a bit messy.

Thank you






__
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] IE6 Issues, Site Check Please

[ibn Ezra]

I've tested the page in Firefox 2 (Win/Mac), Opera 9.10 (Win/Mac),  
Safari 2 and IE 7 and the pages render as expected. IE 6 causes the  
right div to float down past the left hand sidebar as I discovered at  
the library last night. Updating to IE7 seems to preclude running IE6  
for testing purposes -- so tinkering with IE6 in mind is not a simple  
task.

Is there a simple fix for the page rendering issue?

http://www.vschess.org/2007-championships/index.aspx
http://www.vschess.org/_stylesheets/base.css

Thanks in advance,
-iE

.

ibn Ezra
mailto: [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] Changing cursor for image maps

[jdreid]

Can you not make the image a background and layer your navigation on top?  Then 
you could specify different classes for the links and different mouse pointers 
for the classes as well.  Or am I missing something?

--
Thanks!

Jeff



 Don Miller <[EMAIL PROTECTED]> wrote: 
> I don't have that option because the images are screen captures with menu 
> items so short of rebuilding the software I'm trying to describe to people, I 
> cannot get away from the image map idea.
> 
> Don
> 

__
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

[~davidLaakso]

Richard Brown wrote:
> Could you please do a site check on this site please:
> 
>
> The issues relating to the css are the space above the first nav box
> should not be there.
I guess you mean in ie?
Add this ruleset to kill the ie margin:
form {  margin: 0; }<<< add to close gap
The search thing is dropping at text-size 'largest' in ie/6.0 .
This is one way that /may/ correct it (local file-- standalone on xp)
 <<< change the width to px and add float:right;
#extranavcontainer { clear: both; } <<< add to clear the float above
Would the text in the left column read easier if set left?
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] Best way to have checkbox/indented paragraph line up

[Tom Dell'Aringa]

Hello, I have a simple common layout issue that I traditionally use a simple
table to set up, but I am wondering if there is a way to avoid it. I've
tried various floats and combos of styles but I can't seem to get something
that isn't actually more markup and trouble than just using the table. I'm
okay with using the table if it's the best way, but I want to see if anyone
has any better ways.

What I have is the typical acknowledgment of some term or condition before
the user continues on, so you have a checkbox on the left with a paragraph
on the right, and they are vertically aligned at the top, on the same row.
Like so:

__
|   |   A paragraph here that may go multiple
lines, but is indented like
so and so forth.

Really, if I could replace a bullet with a checkbox in an UL that would be
perfect. Does anyone have a good way to style this, or should I stick with
the simple one row table. Please CC me on any comments.

Thanks!

Tom

-- 
--
Pure Geek
43 % Nerd, 60% Geek, 17% Dork
__
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] Odd text problem

[Christian Kavanagh]

Dear helpful ones,

For some weird reason, the first few words of text in my "content"  
DIV jump right out of the paragraph *depending on what the text is*.

Problem child:
http://www.polarissc.com/csstest/about2.html

With an extra letter added to the first paragraph, it displays fine:
http://www.polarissc.com/csstest/about2.html

Any insight will be gratefully appreciated!

Kind regards,
Chris.
__
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 Container Background Image Problems.

[Ian Vaughan]

I am having a problem with the #localnav div's background as it does not
fill the full height of the page, it stops just after the links
contained in the unordered list, I need the background image/colour to
display the full length of the page, the same height as whatever the
#content div will be from page to page.

I have tried adding height 100% to the localnav div but it doesnt work ?

Any ideas ??

Code is below

-

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






Untitled Document 

#wrapper{

position: relative;

background-color: #FF;

border: 1px solid #00;

width: 780px;

margin: 0 auto;

text-align: left;

}

.navblock{

display: block;

background-color: #193C65;

padding-top: 2px;

padding-bottom: 3px;

border-top: 1px solid #FF;

} 

#header{

background-color: #193C65;

height: 64px;

border-bottom: 1px solid #DEDEDE;

width: 780px;

overflow: hidden;

background: url(header-m.jpg) repeat-x 0 0; } .menu {

background-color: #313131;

border-top: 1px solid #B5B5B5;

height: 20px;

font-weight: bold;

font-family: tahoma,verdana, arial, sans-serif;

font-size: 11px;

padding: 0 0px 0 0px;

position:relative;

z-index:100;

}

#localnav{

float: left;

width: 154px; 

min-height: 100%;

height: 100%;

background-image:url(bg2.gif);

background-repeat: repeat;

text-align: center;

font-family: tahoma,verdana, arial, sans-serif;

font-size: 10px;

font-weight: bold;

color:#FF;

}

#localnav ul{

list-style: none;

margin-left: 7px;

margin-top: 5px;

padding: 0;

background-color: #255082;

}

#localnav li{

text-align: left;

border-top: 1px solid #193C65;

border-left: 1px solid white;

font-size: 10px; 

background-image: url(navarrow.gif);

padding: 0 0 0 20px;

background-repeat: no-repeat;

line-height: 20px;

}

#localnav a{

text-decoration: none;

font-weight: bold;

color: #ff;

}

#localnav a:hover{

font-weight: bold;

color: red;

}

.navpics{

position: relative;

display: block;

margin-top: -20px;

}

#content{

float: right;

width: 585px;

background-color: #ff;

background-image: url(shading.gif);

background-repeat: repeat-x;

background-position: 0% 0%;

padding: 20px;

}

#footer {

clear: both;

background-color: #404040;

padding: 3px;

height: 10px;

}

 









 









Search

Feedback





 



 

 

 



Menu here



 



Navigation





Link1 

Link2 

Link3 







text

text

text

text

text





Footer text



 







__
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] s in s

[james shannon]

Hi all --
After following this list for the past several weeks, I've been  
redesigning my current project with a few Good Ideas. One of which is  
making everything more semantic.
I had previously been doing this:


   Welcome to my site

 Lorem ipsum dolorem.


div.title would be styled with a different color, a border-bottom,  
larger text, etc. In the name of semantics, I replaced  with  and styled h1 appropriately. It looked  
great, and I felt good, but ran into problems with:


   
   Welcome to my site
   Click here to expand
   

 Lorem ipsum...


It worked fine, but didn't validate. Turns out the spec doesn't like  
s in s.

Is there a way around this, or should I just go back to div.title? I  
thought about

textlink

but there are some problems with that and getting everything to line up.

thanks in advance,
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/

[css-d] 3 Columns - Adjusting Centercontent

[Kevin J Pledger]

Hi Guys,

I am trying to redesign a webpage, plus very new to CSS and want to use the
3 Columns - Holy Grail - http://glish.com/css/7.asp Below is the code I am
using, based on the CSS code from the link with my own additions.

I want to add an image in the #banner, which can be done easily. I know how
to adjust the leftcontent / rightcontent columns from the top of the page. 

Question:
How can I adjust the centercontent column down from the top of the page.

Thanks in advance.

Kevin


body {
margin:10px 10px 0px 10px;
padding:0px;
}

#leftcontent {
position: absolute;
left:10px;
top:150px;
width:200px;
background:#fff;
border:1px solid #000;
}

#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

#rightcontent {
position: absolute;
right:10px;
top:150px;
width:200px;
background:#fff;
border:1px solid #000;
}

#banner {
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
html>body #banner {
height:39px;
}

h1 {
margin:5px 5px 5px 5px;
padding:0px;
font-size:14px;
font-weight:900;
color:#ccc;
}

h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:5px 5px 5px 5px;
padding:0px;
}

p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:5px 5px 5px 5px;
padding:0px;
}

a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}


Kind Regards,

Kevin J. Pledger
Technical Manager
Mainstream Technologies Pte Ltd.
Tel: 65 6764-3022
Fax: 65 6764-6064
Mob: 65 9777-6202

_
CONFIDENTIAL CAUTION: The information transmitted is intended only for the
addressee and may contain privileged and/or  confidential material. Any
disclosure,
distribution or copying of this message is strictly prohibited. If you are
not the
intended recipient, kindly contact the sender and delete the message. Thank
you.
_


-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of James Leslie
Sent: Friday, January 05, 2007 19:48 PM
To: Phil Turner
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] icons in the address bar


http://en.wikipedia.org/wiki/Favicon should have all the info and links you
need.

James 



Can someone point me in the right direction I would like to put my own icon
in the address bar but dont know what size to create the graphic or what the
code is, thanks in advance



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

[css-d] Dotted Box

[Steve LaBadie]

Is there away to prevent the dotted box that appears around a link after
you click on it?  If I refresh the page it goes away.

 

Steve LaBadie, Web Manager
East Stroudsburg University
200 Prospect St.
East Stroudsburg, Pa 18301
570-422-3999
[EMAIL PROTECTED]  
http://www.esu.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/

Re: [css-d] Odd text problem

[Jens Brueckmann]

Hi Chris,

> For some weird reason, the first few words of text in my "content"
> DIV jump right out of the paragraph *depending on what the text is*.
>
> Problem child:
> http://www.polarissc.com/csstest/about2.html
>
> With an extra letter added to the first paragraph, it displays fine:
> http://www.polarissc.com/csstest/about2.html

URI of the problem page seems to be http://www.polarissc.com/csstest/about.html

I could reproduce your problem in Firefox, but not in Opera or IE,
which display the paragraph just fine.

The problem is caused by the right float of your menu span:



If you substitute float: right by text-align: right and change the
SPAN element to DIV, everything is fine again.
May I even suggest you using unordered lists for menus instead of your
current approach.
And please be aware that your comment syntax in the markup is wrong
and may cause problems:

  

Please use the following instead:

 

Cheers,

jens
-- 
Jens Brueckmann
http://www.yalf.de
__
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] Odd text problem

[Christian Kavanagh]

Dear helpful ones,

For some weird reason, the first few words of text in my "content"  
DIV jump right out of the paragraph *depending on what the text is*.

Problem child:
http://www.polarissc.com/csstest/about2.html

With an extra letter added to the first paragraph, it displays fine:
http://www.polarissc.com/csstest/about2.html

Any insight will be gratefully appreciated!

Kind regards,
Chris.

__
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] rollovers aren't fluid

[Bob Meetin]

If you want to do any resizing of images you might also play with 'em's 
rather than pixels.  See a simple example with inline CSS at: 
http://www.dottedi.biz/codesamples/resizing_images.html

In addition to ditching the flash I'd also send the frames (off-topic) 
packing for multiple reasons -  http://dottedi.biz/blog.php?blog_id=291

-Bob

 Ian Young wrote:
>> Generator Microsoft Word 11 (filtered medium) I' m starting to
>> create a new site using CSS. I' ve managed to create a fluid 3
>> column page and the 3 columns work OK when the page is resized
>> but the two rollovers in the right column: Comics.com and
>> Viz.co.uk (which should be in the right column!) don' t move with
>> the column. They are inside the Div of the right column but they
>> seem to remain static. Any ideas would be great! Thanks
>>
>> Page is at: www.chundercomics.co.uk -  straight after initial Flash page
>>
>> 
>
> Both links are outside of the right hand col on any browser on my machine.
> This because  layer 1 and layer 3 have position:absolute. This means that
> they are not actuallu within the right hand col.
>
> Remove the position:absolute and use margin to place them in the div.
>
> Also - ditch the Flash intro - search engines cannot see Flash and users do
> not like a whole page of Flash.
>
> Cheers
>
> Ian
>
>   


__
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] icons in the address bar

[Ian Young]

> Subject: [css-d] icons in the address bar
>
>
> Can someone point me in the right direction
> I would like to put my own icon in the address bar but dont know what
> size to create the graphic
> or what the code is, thanks in advance
>

This not a CSS issue but go to:
http://www.chami.com/html-kit/services/favicon/

And learn all you need to know.

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.432 / Virus Database: 268.16.5/616 - Release Date: 04/01/2007
13:34

__
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

[Arthur Maloney]

Hello Richard,

Friday, January 5, 2007, 10:32:12 AM, you wrote:

> Hi All

> Could you please do a site check on this site please:
> 

> Css is contained in the header. Sources are:
> 
> for the layout.
> 
> for the menus.

> I have validated html and css. There are two errors in the html that I
> don't understand relating to the search box. That however, is
> off-topic and I am looking into this separately.

> The issues relating to the css are the space above the first nav box
> should not be there. Any idea how I can get rid of them please? And I
> would just like to know any issues regarding browsers please?

> Thanks.

using:
Laptop 1680x1050 132% normal Size (127 dp1)Windows XP SP2
Firefox 2.0.0.1

It works for me - Like the green base colour
No infelicities of style spotted.

-- 
Best regards,
 Arthurmailto:[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] Vertical spacing problem in IE

[schiopu gabriel]

Hi all,

on my just started website, www.freshwebjobs.com, i have a wierd behaviour 
on IE. The vertical space between "featured jobs" box and first header gets 
bigger. Any suggestion on how to get rid of this vertical space gap on IE 
would be much appreciatted.

Thanks,
gabs

_
Don't just search. Find. Check out the new MSN Search! 
http://search.msn.click-url.com/go/onm00200636ave/direct/01/

__
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] Firefox, fist-letter line-height

[Nic Pulford]

I am trying to do a FF drop capital. Containing the first letter in a span
works but I would prefer a p:first-letter approach. I have seen some
discussion on this before but I did not find a solution. 

 

The issue is that FF seems to ignore line-height when in a first-letter.

 

Is there a solution?

 

For those interested this is the IE solution

 

p.storyIE{

 border-top: 1px solid #C0C0C0;

 margin-top: 0px;

 padding-left: 200px;

}

p.storyIE:first-letter {

float: left;

font-size: 2.73em;

height:.6em;

line-height:.88em; 

margin-top:4px; 

margin-right:1px;

}

 

 

__
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 6-7 wrapper problems

[Gunlaug Sørtun]

Julian Merrow-Smith wrote:
> The div is outlined by a background shadow which fits fine in firefox
>  etc. and IE 5, & 5.5 but is 1px adrift in IE 7 and the div has 
> expanded in IE6 to cover the background image.

> http://laserenissima.co.uk

IE6 will do better with these additions...

#Content {overflow-x: hidden;}
#SubNav {display: inline;}

...that'll take care of IE's 'auto-expansion' bug (triggered (in part)
by the 'italic' bug) and the 'margin-doubling on floats' bug.

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] CSS Container Background Image Problems.

[Ian Vaughan]

I am having a problem with the #localnav div's background as it does not
fill the full height of the page, it stops just after the links
contained in the unordered list, I need the background image/colour to
display the full length of the page, the same height as whatever the
#content div will be from page to page.

I have tried adding height 100% to the localnav div but it doesnt work ?


If you paste the code below into your browser you will see what the
problem is 

Any ideas ??

Code is below

- 

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









Untitled Document 



#wrapper
{
position: relative;
background-color: #FF;
border: 1px solid #00;
width: 780px;
margin: 0 auto;
text-align: left;
}

.navblock
{
display: block;
background-color: #193C65;
padding-top: 2px;
padding-bottom: 3px;
border-top: 1px solid #FF;
} 

#header
{
background-color: #193C65;
height: 64px;
border-bottom: 1px solid #DEDEDE;
width: 780px;
overflow: hidden;
background: url(header-m.jpg) repeat-x 0 0; } .menu {
background-color: #313131;
border-top: 1px solid #B5B5B5;
height: 20px;
font-weight: bold;
font-family: tahoma,verdana, arial, sans-serif;
font-size: 11px;
padding: 0 0px 0 0px;
position:relative;
z-index:100;
}

#localnav
{
float: left;
width: 154px; 
height: 100%;
background-image:url(bg2.gif);
background-repeat: repeat;
text-align: center;
font-family: tahoma,verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color:#FF;
}

#localnav ul
{
list-style: none;
margin-left: 7px;
margin-top: 5px;
padding: 0;
background-color: #255082;
}

#localnav li
{
text-align: left;
border-top: 1px solid #193C65;
border-left: 1px solid white;
font-size: 10px; 
background-image: url(navarrow.gif);
padding: 0 0 0 20px;
background-repeat: no-repeat;
line-height: 20px;
}

#localnav a
{
text-decoration: none;
font-weight: bold;
color: #ff;
}

#localnav a:hover
{
font-weight: bold;
color: red;
}

.navpics
{
position: relative;
display: block;
margin-top: -20px;
}

#content
{
float: right;
width: 585px;
background-color: #ff;
background-image: url(shading.gif);
background-repeat: repeat-x;
background-position: 0% 0%;
padding: 20px;
}

#footer 
{
clear: both;
background-color: #404040;
padding: 3px;
height: 1%;
}













Search
Feedback






Menu here



Navigation


Link1 
Link2 
Link3 




text



Footer text








 

__
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] icons in the address bar

[James Leslie]

http://en.wikipedia.org/wiki/Favicon should have all the info and links
you need.

James 



Can someone point me in the right direction I would like to put my own
icon in the address bar but dont know what size to create the graphic or
what the code is, thanks in advance



__
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] rollovers aren't fluid

[Ian Young]

>
>
> Generator Microsoft Word 11 (filtered medium) I' m starting to
> create a new site using CSS. I' ve managed to create a fluid 3
> column page and the 3 columns work OK when the page is resized
> but the two rollovers in the right column: Comics.com and
> Viz.co.uk (which should be in the right column!) don' t move with
> the column. They are inside the Div of the right column but they
> seem to remain static. Any ideas would be great! Thanks
>
> Page is at: www.chundercomics.co.uk -  straight after initial Flash page
>

Both links are outside of the right hand col on any browser on my machine.
This because  layer 1 and layer 3 have position:absolute. This means that
they are not actuallu within the right hand col.

Remove the position:absolute and use margin to place them in the div.

Also - ditch the Flash intro - search engines cannot see Flash and users do
not like a whole page of Flash.

Cheers

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.432 / Virus Database: 268.16.5/616 - Release Date: 04/01/2007
13:34

__
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] icons in the address bar

[Phil Turner]

Can someone point me in the right direction
I would like to put my own icon in the address bar but dont know what  
size to create the graphic
or what the code is, thanks in advance


Kind Regards

Phil Turner
FREELANCE CREATIVE
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
V I S I T  M Y  D E S I G N  B L O G
http://www.philturnerdesigner.blogspot.com/

DESIGN TO HELP SAVE THE PLANET
http://www.yourplanetneedsyou.org


__
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

[Ian Young]

Hi Rich
>
> Could you please do a site check on this site please:
> 
>
> Css is contained in the header. Sources are:
> 
> for the layout.
> 
> for the menus.
>
>
> The issues relating to the css are the space above the first nav box
> should not be there. Any idea how I can get rid of them please? And I
> would just like to know any issues regarding browsers please?
>


First things first,

make following amendment to #navcontainer ul

margin:0;

That should sort out the space issue in FF.

On to design matters. Large logo should have transparent background. The
white background doesn't look professional IMHO.

The vertical menu isn't working as sub menus aren't hidden.

Not sure about colours but that is subjective. Blue menu on green
background? Again subjective - but not that easy on the eye.

Good luck and keep at it.

Cheers

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.432 / Virus Database: 268.16.5/616 - Release Date: 04/01/2007
13:34

__
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] rollovers aren't fluid

[Gary Williamson]

Generator Microsoft Word 11 (filtered medium) I' m starting to create a new 
site using CSS. I' ve managed to create a fluid 3 column page and the 3 columns 
work OK when the page is resized but the two rollovers in the right column: 
Comics.com and Viz.co.uk (which should be in the right column!) don' t move 
with the column. They are inside the Div of the right column but they seem to 
remain static. Any ideas would be great! Thanks

Page is at: www.chundercomics.co.uk -  straight after initial Flash page

Regards

Gary Williamson
__
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 spacing on list

[Liz]

On 1/5/07 2:04 AM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:

> Liz wrote:
> 
>> http://www.liztestsitem.com/nav/index.html
> 
>> It's not lining up correctly. Did I put something in the wrong order?
>>  I'm still fairly new to css layout.
> 
> CSS is correct, but the background-images you use are not. They should
> be cropped (in a photo-program) so the blank areas on top and left side
> are no longer there. Otherwise it'll become visually "skewed".
> 
>> I'm wondering if the background image approach will work though.
>> Roger Roelofs gave me a solution that centered the arrow but on a 2
>> line list the arrow goes between the lines.  I would like it to look
>> work like a real bullet and center to the first line.  Is this
>> possible with a background image?
> 
> Yes, but not with any image size.
> 
> You want it somewhat like this...
> 
> 
> Give that page a 300% font resizing in Firefox, and the arrows will
> still line up as you want. It centers quite well with the first line,
> regardless of font size, number of lines and other variables.
> 
> Positioning with 'em' from the top makes position adjust with font size,
> and the line-up will be quite good and stable with a small background image.
> 
> I have cropped the two "arrow" images to make them as small as they can
> be (and turned them into 8 bits png for my convenience). That's how I
> described it in my previous response.
> 
> Hope that makes it all a bit clearer.
> 
> regards

> Georg
Thank you so much, your sample works perfectly. The reson it did not work
when I tried it before was not for lack of cropping the images which I had
done, the problem was I was linking to the root image directory which had
the uncropped ones by having a slash before images. I forgot I was not
linking to the images direcory in my same folder.

thanks you so much for your help and patience.

Regards,

Liz


__
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] grouping pages

[Ross Hulford]

I have a website and each page has a div body id. 

This give me control over the individual pages but is there a way to group 
divs? For example I have a section called about us and it has 4 pages 
associated with it that follow the same layout. I also have a section called 
contact us that has 3 pages (map, contact details etc.) associated with it. Is 
there a way to apply grouping to pages so I can style accoring to body id and 
what group it is in?


R.
__
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] Text shifting (float right div effected by headers in containing div) - Please help.

[Gunlaug Sørtun]

Christopher Blake wrote:
> I am confused as to why the headers in the container div are 
> effecting the text in the float right div.

> http://www.neilparishmep.org.uk/new/index.html

Not sure which problem you're referring to, but IE6 need some "debugging".

The addition of...
#browser, #wc3 {display: inline;}
...will "kill" IE6' 'margin-doubling on floats' bug.

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] Site Check Please

[Richard Brown]

Hi All

Could you please do a site check on this site please:


Css is contained in the header. Sources are:

for the layout.

for the menus.

I have validated html and css. There are two errors in the html that I
don't understand relating to the search box. That however, is
off-topic and I am looking into this separately.

The issues relating to the css are the space above the first nav box
should not be there. Any idea how I can get rid of them please? And I
would just like to know any issues regarding browsers please?

Thanks.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 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] ie spacing on list

[Gunlaug Sørtun]

Liz wrote:

> http://www.liztestsitem.com/nav/index.html

> It's not lining up correctly. Did I put something in the wrong order?
>  I'm still fairly new to css layout.

CSS is correct, but the background-images you use are not. They should
be cropped (in a photo-program) so the blank areas on top and left side
are no longer there. Otherwise it'll become visually "skewed".

> I'm wondering if the background image approach will work though. 
> Roger Roelofs gave me a solution that centered the arrow but on a 2 
> line list the arrow goes between the lines.  I would like it to look 
> work like a real bullet and center to the first line.  Is this 
> possible with a background image?

Yes, but not with any image size.

You want it somewhat like this...


Give that page a 300% font resizing in Firefox, and the arrows will
still line up as you want. It centers quite well with the first line,
regardless of font size, number of lines and other variables.

Positioning with 'em' from the top makes position adjust with font size,
and the line-up will be quite good and stable with a small background image.

I have cropped the two "arrow" images to make them as small as they can
be (and turned them into 8 bits png for my convenience). That's how I
described it in my previous response.

Hope that makes it all a bit clearer.

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] solved dotted bottom border hovering gap Safari but not IE7

[Beate De Nijs]

Hello list,

some dear member of this list mailed me, helped me. The problem for  
Safari was a doctype one! (I needed to apply a strict doctype to my  
pages)

nevertheless some other offset appeared at other positions in my ul  
li navigation. I solved this by setting some assumed px fontsize and  
lineheight for my non-displaying text ... (same fontsize as the bg  
height of my images shown for my li ids are.)

IE 7 Problem still there:
the bottom border (2px dotted) at hovering does not appear at the  
thumbnails (bottom of the page)

Same sample page for my problem is below:
(the mailserver somehow breaks the URL in two lines though I put it  
into tags which results
in an 'object not found', in case it happens again, please delete the  
%20 within the URL)



stylesheets:
http://www.fabian-helmich.de/css/fabian_base.css
http://www.fabian-helmich.de/css/fabian_p1.css


bye,
beate

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