[css-d] IE problems regarding height of DIV

[Erland Flaten]

Hello I am in urgent need to fix a strange gap problem.

I dont understand why I get a big white gap on top of the picture. The  
gap is between the bottom of the header and on top the image. Looks OK  
in Firefox exept that there is a smaller gap between the header in the  
textarea. This problem is also on IE.

The page is to show as a pop up which can be found at:
  http://www.nuna.no/ahus/

The page is :
http://www.nuna.no/ahus/start.html

The CSS file is:
http://www.nuna.no/ahus/thrColFixHdr_korset_underhele.css

The DIV around the container is :
.thrColFixHdr #sidebar2 {
float: right;
width: 537px;
padding: 0px;
background-color: #CC9933;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

I have put on color so this DIV is visible, but mayebe the problem is  
elswhere.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 120DPI system fonts wreak havoc in certain browsers

[Felix Miata]

On 2008/02/18 13:15 (GMT-0500) Jeff Blaine apparently typed:

> How does one address IE7 (for one) when the user has
> configured his/her Windows system to use 120DPI fonts
> instead of the default 96DPI?

Please remember that CSS is officially designed to *suggest* presentation,
not *control* presentation. The user has ultimate control. He has the power
to limit, override, or totally disregard your CSS.

You can see that doz offers DPI adjustment as a means of changing object
sizes, including fonts. It describes 120 DPI as "large size" - as opposed to
96 DPI, which on older systems is called "small size", and newer systems
"normal size".

DPI adjustment is just one facet of personalization of personal computers,
but a good one to highlight the fact that they are just that, personal, and
subject to customization, which means expecting anything in particular about
their browsers' behavior is simply not warranted.

> It's my unconfirmed understanding that Opera does the
> same (arguably wrong) thing as IE7.

Whether wrong or not is immaterial, as it's a fact. Of course,
customizability of fonts in Opera is considerably more extensive in Opera
than in IE or even the Geckos and Webkits.

> 120DPI
> http://www.kickflop.net/temp/moopoint-ie7.jpg
> http://www.kickflop.net/temp/moopoint-firefox2.jpg

> 96DPI
> (No links -- both IE7 and Firefox render properly and look)
> (proper like the firefox2 image above )

> In the sites displayed above, all body text sizing is set to
> browser default (font-size: 100%;)

> Can anything be done from the CSS/XHTML end?

CSS has no way to know DPI. The only thing you can do exclusively with CSS is
the old-fashioned, user-unfriendly method of sizing everything in px, which
disregards user preferences, annoying users, and ignores that modern browsers
can enforce minimum font sizes, discombobulating much of or everything on a 
page.

So, what you can do is embrace the fact that much is unknowable, and size
*everything* in em. The relationship between text size and window size will
vary somewhat from user to user, but it really won't go beyond a certain
range, a range that will usually keep lines to a reasonable and comfortable
reading word count length. Images won't always look optimal, but if you
design reasonably and test extensively, the overall perspective and usability
should remain within a usable range across varying default font sizes and
window sizes, and most users of your designs should be happy users.

If your native display resolution is high, such that 120 DPI is closer to
right than the more traditional 96, keeping it at 120 actually provides you
extra ease in testing. By keeping the defaults in both IE and Gecko, and
Opera for that matter, you automatically see and test in two very common but
different user environments.

Don't forget, it's only you and other web developers who will see the
differences between IE and other browsers. Normal users don't open web pages
in more than one browser at a time, so few will discover any differences that
may exist, and those that manage to find them aren't likely to care as long
as it works OK in their favorite.

If you think the difference between FF and IE is bad now, and you run XP or
W2K or Linux, try this:

1-install the latest Firefox 3 beta
2-if you aren't already running at 120 DPI, make that switch
3-open your site in all browsers, noting the apparent differences and
similarities
4-switch from 120 DPI (125%) to 150% (144 DPI)
5-repeat #3 above

The difference in FF3 will be unmistakable! O_O What might happen using Vista
in high resolution environments I have no idea. :-p
-- 
"For God so loved the world that he gave his one
and only Son, that whoever believes in him shall
not perish but have eternal life." John 3:16 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://mrmazda.no-ip.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Request for Comments on this CSS Stylesheet Approach

[Rafael]

Rafael wrote:
> Chris Broadfoot wrote:
>> Rafael wrote:
>>> Having separate style sheets usually helps to keep everything 
>>> organized (depending on how you build them), but it also gives you 
>>> more connections to the server. So what you can do is to make use of 
>>> that server-side language you have, just make sure to send the 
>>> appropriate HTTP headers. I.e:
>>>   In the (x)HTML page:
>>> >> href="css.dynamic.xxx/common/web" />
>>>   In css.dynamic.xxx, something like
>>> - split path-info by '/'
>>> - check by matching against the available files
>>> - send headers and embed all the files into one
>>
>> I personally don't like this idea. You have no benefit from caching 
>> and might as well include all those styles in an inline 

Re: [css-d] Absolutely positioned div breaking out of parent in IE

[Richard Grevers]

On 2/20/08, Hayley Kinash <[EMAIL PROTECTED]> wrote:
> I've got an absolutely positioned div inside a relatively positioned div,
>  but in IE the child div is breaking out of the parent and uses the body as
>  its parent.  There's a width and a height on the parent div, and all divs
>  above the parent have position:relative and a width.  It behaves as expected
>  in FF and Safari.
>
>  I can't post the site URL right now, so I'll post code.  Thanks for any
>  help!
>
>  
>
>  
> (inside is Macromedia's mm_menu, which is what is jumping out of the
>  parent div, but is absolutely positioned)
>  
>
>  
>
>  #container {
> margin-left: auto;
> margin-right: auto;
> width: 761px;
> background-color:#ff;
> position:relative;
>  }
>
>  #wrapper {
> width:577px;
> float:right;
> text-align:left;
> position:relative;
>  }
>
>  #menu {
> position:relative;
> width:538px;
> height:30px;
> text-align:left;
> padding-left:10px;
> padding-right:29px;
> background-color:#318b4d;
> }
>
Is your doctype one that will trigger quirks mode rendering in IE?
>From memory, getting the parent wrong for absolute positioned elements
was an IE5 / 5.5 bug, and might have only been fixed for standards
mode in IE6.


-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problem with borders

[Holly Bergevin]

From: vwf <[EMAIL PROTECTED]>

>The page: http://www.opeform.nl/test/
>The CSS: http://www.opeform.nl/test/screen00.css

>My questions are: 
>How can I get rid of the white borders between the navigation images?
>Why do my background images no shift on hover?

The "borders" are white space between the LI elements. Eliminate the white 
space and you eliminate the appearance of borders.

As for the background images, I think you need to alter your hover selector 
slightly, try adding img at the end of it - 

#navbar ul li a:hover img {background-position: -52px 0px;}

That at least gives me some action. I don't know if it's what you desire, 
however.

~holly 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] extra pixel gap in containment div

[David Laakso]

[EMAIL PROTECTED] wrote:
> Quoting David Laakso <[EMAIL PROTECTED]>:
>   
>> Add
>> img {display: block;}
>> to your style sheet.
>>
>> Best,
>> ~dL
>>
>>
>> 
>
> Thanks David, that did the trick. Not sure why though. Is this a  
> browser rendering bug or does it have something to do with images  
> being treated as type and allowing for low hanging characters like 'g'  
> and 'y', etc.? If anyone on the css-d list knows, thanks. This  
> rendering characteristic doesn't seem to be true in IE6 or IE7.
>
> ~Ben
>
>
>   

I think it's that images in the source-code default to 'inline' and align to the
text-baseline-- even if there is no text, leaving a space for descenders. 
.

Best.

~dL


-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] graphics align right in table cells

[Gunlaug Sørtun]

bbxrider wrote:

> http://www.westernstatesglass.com/1navDoc_wsgIndustryLinks/document_view

> i'm missing something, am trying to get the logo pics to align right 
> so they are closer to the text of the link

You mean like...



...?

Add...


.logo_cell {
text-align:right;
height: 87px;
width: 250px;
}


...in the head of the page in the iframe.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] extra pixel gap in containment div

[listmem]

Quoting David Laakso <[EMAIL PROTECTED]>:
>
> Add
> img {display: block;}
> to your style sheet.
>
> Best,
> ~dL
>
>

Thanks David, that did the trick. Not sure why though. Is this a  
browser rendering bug or does it have something to do with images  
being treated as type and allowing for low hanging characters like 'g'  
and 'y', etc.? If anyone on the css-d list knows, thanks. This  
rendering characteristic doesn't seem to be true in IE6 or IE7.

~Ben

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] extra pixel gap in containment div

[David Laakso]

[EMAIL PROTECTED] wrote:
> I've got a problem where a containment div has a 1 or 2 pixel gap at  
> the bottom.
>
> The page is here-
>
> http://74.54.160.125/~primadon/thumbs.php?class=c
>
> ~Ben
>
>
>   




Add
img {display: block;}
to your style sheet.

Best,
~dL



-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] graphics align right in table cells

[bbxrider]

this is what i'm trying
.logo_cell {
   align="right";
   height="87";
   width="250";
}
for this page
http://www.westernstatesglass.com/1navDoc_wsgIndustryLinks/document_view

i'm missing something, am trying to get the logo pics to align right so they 
are closer to the text of the link
the right column seems to be working better but i think thats by chance




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Height %100 Problem

[Gunlaug Sørtun]

Gercek Karakus wrote:

> I am working on a website and have a problem with width property. I 
> want my left column background to extend to the footer. I tried 
> several methods... However, I could not achieve my goal. Does anyone
>  have an opinion?

What's the best method depends on the case at hand, but here are a few
options:






> http://anxiety.binghamton.edu/new/

Here's an example with the first option - "onetruelayout" - applied to
your page...


I deleted all references to 'height: 100%' - it's a flawed approach
anyway, and added the necessary styles - commented with 'added' in the
stylesheet...



Note: I added a fix for the dropping right column in IE6 while I were at it.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera display issue

[Nancy E. Sosna Bohm]

> > http://www.lfelem.lfc.edu/new_site/indexnew.html does not display the
> > top horizontal menu items in Opera. 
> 
> 
> 
> Basically: delete 'position: relative' on '#point li' and '#point li a',
> and Opera will cooperate.
> 
> regards
>   Georg

That was fast! Thank you!

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problem with borders

[Kepler Gelotte]

> My questions are: 
> How can I get rid of the white borders between the navigation images?
> Why do my background images no shift on hover?



Your background didn't change on hover because you were trying to change the
background position on the nchor element which is display: inline by
default. Try setting the background on the image as in:

#navbar {
  height: 30px;
  overflow: hidden;
}


#navbar ul {
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

#navbar ul li {  
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: inline;
}

#navbar ul li a:link img, #navbar ul li a:visited img {
  position: relative;
  left:-41px;
  top:-98px;
  border: 0;
  margin: 0;
  padding: 0;
  
  background-image:url(afbeeldingen/bgwig.png);
  background-repeat: no-repeat;
  background-position: -32px 37px;
  
}

/*
#navbar ul li a.first {
  background-image:url(afbeeldingen/bgwig.png);
  background-repeat: no-repeat;
  background-position: -52px 90px;
}
*/

#navbar ul li a:hover img {
  position: relative;
  left:-41px;
  top:-98px;
  border: 0;
  margin: 0;
  padding: 0;
  background-position: -52px 0px;
}

Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera display issue

[Gunlaug Sørtun]

Nancy E. Sosna Bohm wrote:

> I don't know how important it is to have a site work in Opera, but it
>  probably should.

I don't know how important it is either, but I can't see why not.

> http://www.lfelem.lfc.edu/new_site/indexnew.html does not display the
> top horizontal menu items in Opera. It's okay in FF2, IE6, IE7, IE6,
> and Safari.



Basically: delete 'position: relative' on '#point li' and '#point li a',
and Opera will cooperate.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problem with borders

[Karl Hardisty]

On 21/02/2008, at 8:42 AM, vwf wrote:

Hello,

I try to make new layout for my website. The first hurdle is a
horizontal navigation bar that does not behave like I want: I get
unwanted borders, and the background does not shift on hover.
Can someone help?

One sketch can be seen at http://www.opeform.nl/test/schets.png
The page as I made it so far (head only): http://www.opeform.nl/test/
The CSS: http://www.opeform.nl/test/screen00.css

The navigation bar is below the image/photo.
The idea is that the lines with round pads remain (later the texts will
change). The background of the navigation bar should  change color on
hover. The red bar will change color, the same as the round pads. The
black background can have different colors too (black/white). I made the
navigation bar temporarily grey to make things more recognisable.

Some will notice that the CSS is a little bit messy, but part of that is
the result of my attempts to get it right.

My questions are:
How can I get rid of the white borders between the navigation images?
Why do my background images no shift on hover?

Thank you
__

Unsure if it's just me, but I can't get to any of the links listed  
above - they all time out.

Regarding unwanted borders - if there are hrefed images involved,  
some browsers will add a coloured border.  Try adding the following  
to your css:

a img
{
border: 0;
}


Karl
http://mothership.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 display problem

[Tim Palac]

Hey Dan,

I did some work to debug the issues you have going on in IE6;

The first issue is the banner - it's too tall, which is being caused by this
bit of code:
#menu a span {
float : left;
padding : 34px 25px 0 25px;
height : 61px;
font-size : 12px;
border-left : 1px solid #fff;
}

IE doesn't like that you've defined padding AND height for whatever reason,
when you remove the height: 61px; it fixes the problem for me.  Also, I did
remove the height: 61px declaration from #menu, #menu li, and #header
without any problems, the image sufficiently gives you enough height without
having to redefine it.

The other problem is that your right sidebar is getting knocked down under
the navigation and content - when I reduced #content to a width of 627 and
removed the widths from #search, #searchleft, and #searchright, everything
worked great in IE6 although now it's not wide enough in Firefox.  Perhaps
conditional logic?  This seems like a bug i've seen somewhere, if anyone
else has tips on how to fix it other than conditional widths, please chime
in.

Hope this helps.
Tim
http://www.timpalac.com
AIM: TymArtist

On Wed, Feb 20, 2008 at 3:11 AM, Dan Craciun <[EMAIL PROTECTED]> wrote:

> Hello,
>
> The page here:
>
> http://qurl.com/5tyfb
>
> validates and displays as it should in Firefox, Opera and IE7, but
> breaks horribly in IE6. Can someone look and see what is the problem?
>
> TIA.
>
> Best regards,
> Dan Craciun
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Height %100 Problem

[Gercek Karakus]

Hi,

I am working on a website and have a problem with width property. I want my
left column background to extend to the footer. I tried several methods...
However, I could not achieve my goal. Does anyone have an opinion?

This is the address of the website I am working on:
http://anxiety.binghamton.edu/new/

PS: I searched forums and found that assigning 100% height for body would
solve the problem but it did not...
http://www.webmasterworld.com/forum83/200.htm

Thanks,

-- 
Gercek Karakus
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Still Having Problem with Menu Line Break

[Jeff Gates]

Page in question: http://inourpath.com/intro.html

I am still having problem with the bottom menu line breaking to a second
line in IE 6 and IE7. The "MAP" is breaking to a second line. The menu is
in the nav div which is centered within the bottom_menu div (the 
bottom_menu div is exactly the width of the content area (530px). To 
center the nav div I set the width and made the left and right margins 
auto.

I feel the problem might be with the size of the text in IE. I've got the 
menu items set at a font size of x-small. 

If the problem is because IE is making the size of the text a bit bigger 
(and therefore moving the last menu item to a second line) how can I get 
the menu to have some breathing room and expand width if it needs to, but 
still stay centered?

Thx. Jeff

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Absolutely positioned div breaking out of parent in IE

[Hayley Kinash]

I've got an absolutely positioned div inside a relatively positioned div,
but in IE the child div is breaking out of the parent and uses the body as
its parent.  There's a width and a height on the parent div, and all divs
above the parent have position:relative and a width.  It behaves as expected
in FF and Safari.

I can't post the site URL right now, so I'll post code.  Thanks for any
help!


   
 
(inside is Macromedia's mm_menu, which is what is jumping out of the
parent div, but is absolutely positioned)
 
   


#container {
margin-left: auto;
margin-right: auto;
width: 761px;
background-color:#ff;
position:relative;
}

#wrapper {
width:577px;
float:right;
text-align:left;
position:relative;
}

#menu {
position:relative;
width:538px;
height:30px;
text-align:left;
padding-left:10px;
padding-right:29px;
background-color:#318b4d;
}

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] dropdown menu issue with IE6

[Chris Kavinsky]

I've run into a real poser with using drop down menus and IE6 (real
surprise). Here's the scenario:

-I have two horizontal navigation areas using Son of Suckerfish dropdowns
-the 2nd area is also using background image replacement
-one page has a Flash file where the 2nd level dropdowns were getting
hidden even with a transparency setting on the Flash file (solved
using {position:relative;z-index: 999;} in the CSS)
-problem now is that the dropdown menu is pushed off to the far right
in IE6 (fixed if I remove the above additional CSS, but then back to
the original problem)

Personally, I would love to say "screw IE6 users" but I'm not in a
position to do that. Anyone have any suggestions on how to resolve the
above problem?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] 120DPI system fonts wreak havoc in certain browsers

[Jeff Blaine]

How does one address IE7 (for one) when the user has
configured his/her Windows system to use 120DPI fonts
instead of the default 96DPI?

It's my unconfirmed understanding that Opera does the
same (arguably wrong) thing as IE7.

120DPI
http://www.kickflop.net/temp/moopoint-ie7.jpg
http://www.kickflop.net/temp/moopoint-firefox2.jpg

96DPI
(No links -- both IE7 and Firefox render properly and look)
(proper like the firefox2 image above )

In the sites displayed above, all body text sizing is set to
browser default (font-size: 100%;)

Can anything be done from the CSS/XHTML end?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Request for Comments on this CSS Stylesheet Approach

[Niels Matthijs]

Hello,

This method is not something I would recommend. The possible problems I see:

* no full use of caching. A css file needs to be loaded by a browser only once, 
then it is stored in cache. By adding a separate stylesheet for each page you 
will lose that speed gain.
* what with elements that appear on more than one page, but not on enough pages 
to put them into the main.css. Do you plan on updating all css files when the 
style of this element changes?
* The fact that you have two css files to check won't make it any easier either.
* What about new templates. People will need to create new stylesheets for 
those, even when no new elements are introduced.

When using a tool like Firebug to find css rules, the problem of a big css is 
limited. Also, using a good editor will fix most of the issues. And of course, 
there's always the trusty ctrl+F

In the long run, I would advise against this method :)

Greets,
Niels Matthijs

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rick Faircloth
Sent: maandag 18 februari 2008 17:09
To: 'CSS Discussion'
Subject: [css-d] Request for Comments on this CSS Stylesheet Approach

Hi, all.

I'd like to know your thoughts on including separate
stylesheets for individual pages.

I've realized at the start of a pretty large site, including
Internet and Intranet sections, that my stylesheet could grow
very large and even finding sections of styles for particular
pages could be a cumbersome task.

What I'm considering is having one main stylesheet, then
having supplemental stylesheet for the various pages I will create.
E.g., for a particular page, I would have main.css, plus index.css.
For announcements, I would have main.css, plus announcements.css.

I would be avoiding loading a lot of irrelevant styles for a particular
page and make finding style references much easier, too.

It seems like the best way to go, but I want to make sure I'm not
creating a problem with the technique with which I'm unaware.

I can easily specify which particular page's stylesheet is called
by using coldfusion and the cgi.script_name variable.

Thoughts?

Thanks,

Rick
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

No virus found in this incoming message.
Checked by AVG Free Edition. 
Version: 7.5.516 / Virus Database: 269.20.7/1285 - Release Date: 18/02/2008 5:50
 

No virus found in this outgoing message.
Checked by AVG Free Edition. 
Version: 7.5.516 / Virus Database: 269.20.7/1285 - Release Date: 18/02/2008 5:50
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Opera display issue

[Nancy E. Sosna Bohm]

Hi CSSers,

I don't know how important it is to have a site work in Opera, but it
probably should.
This page:
http://www.lfelem.lfc.edu/new_site/indexnew.html
does not display the top horizontal menu items in Opera. It's okay in FF2,
IE6, IE7, IE6, and Safari.
Here's the css
http://www.lfelem.lfc.edu/new_site/css/newmaster.css

The relevant part of the html is:

  DISTRICT HOME
  SCHOOLS
  SCHOOL BOARD
  PARENTS
  STAFF
  STUDENTS


And the relevant part of the css is:
#point {display:table ; height:25px; width:733px; width:734px !ie;
padding:0px; margin:0;margin-bottom:-1px;;margin-top:5px; margin-left:5px;
margin-left:4px !ie; list-style:none;
white-space:nowrap;background:url(../imgs/horizontal.jpg) repeat-x center
top;text-align:center;z-index:11;position:absolute;top:
89px;left:197px;left:198px !ie;}

#point li {display:inline; margin:0px; padding:0px;
background-color:transparent;position:relative;top:0;left:0;z-index:12; }

#point li a {float:left; font-family:arial; font-size:14px;
letter-spacing:0.1mm; padding:5px 13px !important; padding:5px 15px !ie;
padding:5px 15px; text-decoration:none; color:#00; font-weight:bold;
background-color:transparent;margin-left:8px;position:relative;top:0;
left:0;z-index:13;vertical-align:bottom;height:25px;padding: 0.3em 0.8em
0.4em; }


Thanks in advance for any help.
Nancy Sosna

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layering of background images help

[Cory Shubert]

 
> You mentioned that my top nav is not working in IE.

>Make it...

>#wrapper2 #navigation ul {
>list-style: none;
>float: left;
>margin: -42px 0 0 0;
>padding: 0;
>position: relative;
>}

>regards
>Georg



Once again, thank you Georg.  Spot on and it rocks.

What a powerful learning tool this list is, and one that I am thankful for 
daily...

Cheers,

Cory
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] problem with borders

[vwf]

Hello,

I try to make new layout for my website. The first hurdle is a
horizontal navigation bar that does not behave like I want: I get
unwanted borders, and the background does not shift on hover.
Can someone help?

One sketch can be seen at http://www.opeform.nl/test/schets.png
The page as I made it so far (head only): http://www.opeform.nl/test/
The CSS: http://www.opeform.nl/test/screen00.css

The navigation bar is below the image/photo.
The idea is that the lines with round pads remain (later the texts will
change). The background of the navigation bar should  change color on
hover. The red bar will change color, the same as the round pads. The
black background can have different colors too (black/white). I made the
navigation bar temporarily grey to make things more recognisable.

Some will notice that the CSS is a little bit messy, but part of that is
the result of my attempts to get it right.

My questions are: 
How can I get rid of the white borders between the navigation images?
Why do my background images no shift on hover?

Thank you
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layering of background images help

[Gunlaug Sørtun]

Cory Shubert wrote:
>> Temp url: http://69.89.31.183/~pixelago/

> You mentioned that my top nav is not working in IE.

Make it...

#wrapper2 #navigation ul {
list-style: none;
float: left;
margin: -42px 0 0 0;
padding: 0;
position: relative;
}

...and IE6 will play along.

1: IE6 tends to hide (parts of) elements that are pulled over the edge
of their containers. That's a stacking bug that's usually fixed by
adding 'position: relative' to the elements. Fixes your "over the edge
of #navigation" case to.

2: Somewhere there's a style that disturbs IE6 only, introducing 'float:
right' on the #navigation ul. I didn't find the disturbing style, so I
added specificity to the selector to override the disturbance.

3: IE/win (all versions) has a default margin on lists, pushing it away
from the left edge even in IE7. I declared all margins to prevent that.

4: Simplified the 'list-style' to "catch all" variants.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] extra pixel gap in containment div

[listmem]

Quoting Rick Faircloth <[EMAIL PROTECTED]>:

> I'm not seeing a gap in FF2, however the first thing that comes
> to mind is to try adding "display:inline;" for your image css.
>
> Worth a try...
>
> hth,
>
> Rick

Hi Rick,

I actually tried that before, the only thing that seems to work is to  
either float the image or add align="left" or align="right" which is  
in essence floating the image. display: inline doesn't seem to work  
and I think img objects default to display: inline anyway.

Thanks,

Ben


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] extra pixel gap in containment div

[listmem]

I've got a problem where a containment div has a 1 or 2 pixel gap at  
the bottom.

The page is here-

http://74.54.160.125/~primadon/thumbs.php?class=c

CSS is here:

http://74.54.160.125/~primadon/common/thumbs.css
http://74.54.160.125/~primadon/common/master.css

The two white-bordered, grey backgrounded boxes have the same problem,  
mouseover either of them and you can see that the containment div  
which has the white border and grey background is about 1 pixel taller  
than the image inside it. The desired effect would for the div to  
"shrinkwrap" perfectly to fit around the image. Since I am pulling the  
images out of a database, I don't know what their size is before hand  
and so can't set size for either the containment div or the image  
itself. Thanks for any help.

~Ben

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Several problems with template

[Thijs Hakkenberg]

Dear List,

For my site I use the following template, but there are serveral things 
that go awry in IEX (including 7):

http://ebrius.nl/fileadmin/template/ebrius.nl/index.html

   1. The footer and header are placed too much to the left
   2. The footer overlays the content if the content exceeds 100%

Does anybody have a clue?

Regards,

Thijs
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layering of background images help

[Cory Shubert]

 Cory Shubert wrote:
> I have a site that is giving me grief.  I want to have an image on top

> of two different background images and I just can't seem to figure it 
> out.

> Temp url: http://69.89.31.183/~pixelago/

>Layering of images or any other elements can be done in many ways.
>Support for multiple backgrounds is still a bit weak, so you'll have to
add, or reuse, a separate element. This separate >element can be the
image itself (an ), or any element that can carry a background.


>Note: IE6 show no top-navigation on your page.

>regards
>Georg

Georg,
Thanks again.  Your code snips did get the job done.  Now I can look at
it and try to figure out just what is going on and learn from it.

You mentioned that my top nav is not working in IE.  I did check and
after validation it still won't show.  I am pretty sure it did before I
was messing with the floating image issue, so maybe I screwed something
up?  Works on Mac-Safari/Firefox and PC Firefox but IE6 is blank...

It lives inside both a id of navigation that might hold the key?

/* Navigation */

#navigation ul {
list-style-type: none;
list-style-image: none;
float: left;
margin-top: -42px;
padding: 0 0px 0 0;
}
#navigation li {
float: left;
}
#navigation li a:link,  #navigation li a:visited {
float: left;
color: #565656;
display: block;
padding: 5px 10px;
margin-right: 1px;
border: 1px dashed transparent;
height: 24px;
font-size: 14px;
margin-top: 4px;
}
#navigation li a:hover,  #navigation li a:active {
color: #6D9CC7;
background: #F5F5F5;
border: 1px solid #FF;
background-repeat: repeat-x;
font-size: 14px;
margin-top: 4px;
}
#navigation li.active a {
color: #55;
background-color: #ff;
}

Thanks,

Cory
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float a link inside a header

[Nick Mavros]

Thanks Matt,

the "position: relative; and position: absolute; " solution works fine.

thanx

Nikos

Matthew Taylor wrote:
> Hi Nikos,
>
> Try positioning the a tag to the absolute top right corner of the heading 
> block instead. Here's how that's done:
>
> h1 {
> position:relative;
> }
>
> h1 a {
> position:absolute;
> top:0;
> right:0;
> }
>
> Of course if your heading is long or your page is narrow then the two 
> headings may run into each other. If that's a problem then perhaps try 
> giving the a tag an em width then limit the width of the main heading with a 
> right padding like this:
>
> h1 {
> position:relative;
> margin-right:11em;
> }
>
> h1 a {
> position:absolute;
> top:0;
> right:0;
> width:10em;
> }
>
> You may have to fiddle with the widths to get it to look right. I hope that 
> helps.
>
>
> - Matt =)
>
>
> Matthew James Taylor
> http://matthewjamestaylor.com
>
>
>   
>> Hi,
>>
>> the html is this :
>>
>> Title subtitle
>>
>> I want the Title to be left aligned and the subtitle to right
>> aligned. But I want them to be in the same line.
>>
>> When I float: right the  it goes to the right but it falls below the
>> line. So I need to put a negative margin to get it to the same line with
>> the "Title".
>> This works in FF and IE
>>
>> In Opera and Safari doesn't work. If I remove the negative margin it
>> works fine with just the float: right;
>>
>> Can anybody help?
>>
>> Nikos Mavros
>> 
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float a link inside a header

[Nick Mavros]

Hi Georg,

your solution does the alignment but I don't like this wide link.
It works in FF,IE,Opera, Safari.

Anymore suggestions?

Nikos

Gunlaug Sørtun wrote:
> Nick Mavros wrote:
>
>> Title subtitle
>>
>> I want the Title to be left aligned and the subtitle to right 
>> aligned. But I want them to be in the same line.
>
> h1 a {
> display: block;
> width: 100%;
> text-align: right;
> margin-top: -1.3em /* make value equal to line-height */;
> }
>
> h1 {height: 1%;}
>
> ...will give you the line-up you want. It will however produce a wide
> link in most browsers, and IE6 may need some extra "help" to make the
> link work as intended.
>
> regards
> Georg
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Compact forms

[Rahul Gonsalves]

Hi Ben,

On 19-Feb-08, at 10:58 PM, Ben Fider wrote:

> I've been needing to use compact forms for a few projects.  In other  
> words:
> the form field's labels need to be INSIDE the input element.

How does this technique work for you?

http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/


> Thanks,
>
> Ben

Best,
  - Rahul.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float a link inside a header

[Matthew Taylor]

Sorry that sould be padding not margin:

h1 {
position:relative;
padding-right:11em;
}

h1 a {
position:absolute;
top:0;
right:0;
width:10em;
}

- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com



> Hi Nikos,
>
> Try positioning the a tag to the absolute top right corner of the heading
> block instead. Here's how that's done:
>
> h1 {
> position:relative;
> }
>
> h1 a {
> position:absolute;
> top:0;
> right:0;
> }
>
> Of course if your heading is long or your page is narrow then the two
> headings may run into each other. If that's a problem then perhaps try
> giving the a tag an em width then limit the width of the main heading with 
> a
> right padding like this:
>
> h1 {
> position:relative;
> margin-right:11em;
> }
>
> h1 a {
> position:absolute;
> top:0;
> right:0;
> width:10em;
> }
>
> You may have to fiddle with the widths to get it to look right. I hope 
> that
> helps.
>
>
> - Matt =)
>
>
> Matthew James Taylor
> http://matthewjamestaylor.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float a link inside a header

[Matthew Taylor]

Hi Nikos,

Try positioning the a tag to the absolute top right corner of the heading 
block instead. Here's how that's done:

h1 {
position:relative;
}

h1 a {
position:absolute;
top:0;
right:0;
}

Of course if your heading is long or your page is narrow then the two 
headings may run into each other. If that's a problem then perhaps try 
giving the a tag an em width then limit the width of the main heading with a 
right padding like this:

h1 {
position:relative;
margin-right:11em;
}

h1 a {
position:absolute;
top:0;
right:0;
width:10em;
}

You may have to fiddle with the widths to get it to look right. I hope that 
helps.


- Matt =)


Matthew James Taylor
http://matthewjamestaylor.com


> Hi,
>
> the html is this :
>
> Title subtitle
>
> I want the Title to be left aligned and the subtitle to right
> aligned. But I want them to be in the same line.
>
> When I float: right the  it goes to the right but it falls below the
> line. So I need to put a negative margin to get it to the same line with
> the "Title".
> This works in FF and IE
>
> In Opera and Safari doesn't work. If I remove the negative margin it
> works fine with just the float: right;
>
> Can anybody help?
>
> Nikos Mavros

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Float a link inside a header

[Gunlaug Sørtun]

Nick Mavros wrote:

> Title subtitle
> 
> I want the Title to be left aligned and the subtitle to right 
> aligned. But I want them to be in the same line.

h1 a {
display: block;
width: 100%;
text-align: right;
margin-top: -1.3em /* make value equal to line-height */;
}

h1 {height: 1%;}

...will give you the line-up you want. It will however produce a wide
link in most browsers, and IE6 may need some extra "help" to make the
link work as intended.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Float a link inside a header

[Nick Mavros]

Hi,

the html is this :

Title subtitle

I want the Title to be left aligned and the subtitle to right 
aligned. But I want them to be in the same line.

When I float: right the  it goes to the right but it falls below the 
line. So I need to put a negative margin to get it to the same line with 
the "Title".
This works in FF and IE

In Opera and Safari doesn't work. If I remove the negative margin it 
works fine with just the float: right;

Can anybody help?

Nikos Mavros
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] wrap text around an absolute image

[Gunlaug Sørtun]

Rob freeman wrote:
> How do I allow the text to wrap around the image. At the moment the 
> absolute image is taken out of the document flow, so Im not sure how
> I can get the text to wrap

> http://www.coloursense.net/testfolder/instructions.html

Float the image and correct margins/paddings to go with it...


This is the kind of problems 'float' was meant to solve initially, so
the line-up comes naturally.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] wrap text around an absolute image

[Richard Grevers]

On 2/20/08, Rob freeman <[EMAIL PROTECTED]> wrote:
> hello everyone..
>
> Could someone please help? I am working on quite a basic site which
> has an image positioned absolutely to the right of the page, hanging
> off slightly.
>
> Down the side of the image I have some text which at the moment is
> forced marginally to the left as a basic column.
>
> How do I allow the text to wrap around the image. At the moment the
> absolute image is taken out of the document flow, so Im not sure how I
> can get the text to wrap
>
> Here is the URL
> http://www.coloursense.net/testfolder/instructions.html
>
> any tips..please..
>
My first instinct was to drop the right margin on the content column
and wrap the image in a right-floated container with a negative left
margin, then give the image position relative until the backgrounds
align.  http://www.dramatic.co.nz/testing/coloursense.html It works in
Opera and firefox, but is probably a bit fragile, and IE6 (couldn't
check 7) is misaligned - that might be box-model or a limitation on
positioning within floats in IE.

Failing that (and an alternative which would involve making #wrapper
wider and putting faux columns inside it), a quick-and-very dirty fix
would be to leave the image absolutely positioned and float a
transparent image to push the text out of its way.
-- 
Richard Grevers, New Plymouth, New Zealand
Dramatic Design www.dramatic.co.nz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE6 display problem

[Dan Craciun]

Hello,

The page here:

http://qurl.com/5tyfb

validates and displays as it should in Firefox, Opera and IE7, but 
breaks horribly in IE6. Can someone look and see what is the problem?

TIA.

Best regards,
Dan Craciun
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/