Re: [css-d] Safari acting up with horizontal menus
Ok, I've got the menu working correctly now in Safari, FF and Opera (all on a Mac). I'm using conditional CSS (if that's what it's called) to reveal the relevant sub menus and to highlight the active menus. Can anyone tell me whether this works in any PC browsers? I'm currently trying to get it working in IE Mac. Thanks Richard HTML: http://www.richardnicholson.com/testing/menu2/editorial.html CSS: http://www.richardnicholson.com/testing/menu2/menu.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Table vs. CSS when decorative graphic required?
Anne E. Shroeder wrote: I'm scratching my head over this one. I've got two different versions, one using a table and one using CSS to layout the bars, but in neither case can I achieve a consistent underline across the screen as required. See http://www.language-works.com/swimdesign/no-tables.htm for the two versions, plus the graphic mockup which I'm trying to imitate! I greatly appreciate any insights. Can this even be done? Anne Hi Anne, This one did throw me back to yesterday, when semebody had a request for a cigar: this one http://archivist.incutio.com/viewlist/css-discuss/79241. An hour later followed by the offering of a burning cigar: this one http://archivist.incutio.com/viewlist/css-discuss/79250. Is see some resemblance with the actual question! ;-) Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
On 9/13/06, richard n [EMAIL PROTECTED] wrote: Ok, I've got the menu working correctly now in Safari, FF and Opera (all on a Mac). I'm using conditional CSS (if that's what it's called) to reveal the relevant sub menus and to highlight the active menus. Can anyone tell me whether this works in any PC browsers? I'm currently trying to get it working in IE Mac. Thanks Richard HTML: http://www.richardnicholson.com/testing/menu2/editorial.html CSS: http://www.richardnicholson.com/testing/menu2/menu.css __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/ Richard, It seems to be working OK in IE6 for PC although the positioning of the sub-menus is a little off. At the moment they are positioned to high up the page and therefore intersect with the main menu. The CSS is working though (if the following is what you intended!). On the main menu, the current page is underlined and an underline appears when you hover on a main menu link. For the sub-menu, the current page is underlined and no underline occurs when you hove on a sub-menu link. Regards Robin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
richard n wrote:
Can anyone tell me whether this works in any PC browsers?
http://www.richardnicholson.com/testing/menu2/editorial.html
Highlighting working alright across browser-land on windows.
IE/win needs an additional...
#nav a {display: block;}
...to get the dimensions, and thereby the positions, right.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] changing backgrounds in list items
Hello,
I have a list with a backgound that appears when I hover over it:
#navlist ul li a:hover {
background: url(image1.png);
background-repeat: no-repeat;
}
I have a list of 6 items, and I want to associate a different image with
each of the 6 items. Is there a smart/correct way to do this? Does
someone know an example that has this implemented?
Thank you.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 backgrounds in list items
To be honest you could try and place ID's on each LI item and put
backgrounds on them
your trying to create a roll over menu correct?
Regards
PWP
- Original Message -
From: vwf [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Wednesday, September 13, 2006 7:58 PM
Subject: [css-d] changing backgrounds in list items
Hello,
I have a list with a backgound that appears when I hover over it:
#navlist ul li a:hover {
background: url(image1.png);
background-repeat: no-repeat;
}
I have a list of 6 items, and I want to associate a different image with
each of the 6 items. Is there a smart/correct way to do this? Does
someone know an example that has this implemented?
Thank you.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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
IE7b2 testing hub -- 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 backgrounds in list items
On 13/09/2006 10:58, vwf wrote:
I have a list of 6 items, and I want to associate a different image with
each of the 6 items. Is there a smart/correct way to do this? Does
someone know an example that has this implemented?
I'd just add an ID or class (but more probably ID) to each of the list
items or anchor elements.
So something like:
.nav li a {
background-repeat: no-repeat;
background-align: 0 0;
... other common styles...
}
.nav li a#home {
background-image: url(images/home.png);
}
etc.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 backgrounds in list items
Sorry, need to fix my code sample:
.nav li a:hover {
background-repeat: no-repeat;
background-align: 0 0;
... other common styles...
}
.nav li a#home:hover {
background-image: url(images/home.png);
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] changing backgrounds in list items
On 13/09/2006 10:58, vwf wrote: I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 backgrounds in list items
Depends if 2 items in your list will have the same background then you would use a class (think of a class as a group) if every item in your list each has seperate then you would use ID (think of an ID and an individual name) use ID if its 1 use CLASS if its greater then 1 to be considered on the one page (used more then once on the one page) Regards PWP - Original Message - From: vwf [EMAIL PROTECTED] To: Sent: Wednesday, September 13, 2006 9:08 PM Subject: [css-d] changing backgrounds in list items On 13/09/2006 10:58, vwf wrote: I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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 backgrounds in list items
Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? ID's should be used to uniquely identify elements in your page, classes are for groups of elements that share similar properties. If your list is only used once on the page then ID's would be the best thing to use. Use classes if your list is replicated within each page. Hope this helps. Alex. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 backgrounds in list items
If I remember correctly CSS3 has a spec for identifying different items in a list in various ways but seeing as noone really implements 3 yet you probably don't have a heuristically clean way of doing this. Matt Ludbrook EMIC associates Engineering, Maintenance, and Inventory Consultancy +44 7940 854119 (Mobile) +44 23 92 610437 (Direct) www.emicassociates.co.uk -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alex Bienz Sent: 13 September 2006 12:15 To: vwf; css-d@lists.css-discuss.org Subject: Re: [css-d] changing backgrounds in list items Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? ID's should be used to uniquely identify elements in your page, classes are for groups of elements that share similar properties. If your list is only used once on the page then ID's would be the best thing to use. Use classes if your list is replicated within each page. Hope this helps. Alex. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/ -- No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.3/446 - Release Date: 12/09/2006 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.3/446 - Release Date: 12/09/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Blue bars going across menu images
Thanks for the help yesterday, about to put some fixes into action so i
thought id pass along another bug thats bugging me :)
Anyway, im using a unordered list for a nav bar, which uses images. It
works in all browsers, but in Netscape7, and i believe IE7 it shows a
blue bar occassionally across the side of the page. Heres the link and code:
URL: http://www.boldmouth.com/clients/iinstore/5/iinstore.html
ul.nav_t2 { margin: 0; padding: 0; bottom: 0; right: 0; height: 71px; }
ul.nav_t2 li { text-indent: -999em; float: left; }
ul.nav_t2 li a { display: block;} /*--bad line?--*/
ul.nav_t2 li.tmenu1 a { margin-left: 38px;
background:url(../images/nav_tbooks.jpg) no-repeat; width: 120px;
height: 71px; }
ul.nav_t2 li.tmenu2 a { background:url(../images/nav_tcollection.jpg)
no-repeat; width: 114px; height: 71px; }
ul.nav_t2 li.tmenu3 a { background:url(../images/nav_tsupplements.jpg)
no-repeat; width: 116px; height: 71px; }
ul.nav_t2 li.tmenu4 a { background:url(../images/nav_tsalesspecials.jpg)
no-repeat; width: 125px; height: 71px; }
I have a feeling it has something do with the display: block line, but
when i remove that the images vanish. I was giving this code snippnet
from another source, so maybe i missed something. Im pretty sure i know
how it works, just not sure why its giving me the blue bar. Does it have
something to do with the text links blurring/streaking across?
Thanks again,
Christopher
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Blue bars going across menu images
Have you tried removing underlines from the links with:
ul.nav_t2 li a {
display: block;
text-decoration: none; /* --- add this line */
}
? In my experience, a lot of image replacement techniques do the same thing.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
It seems to be working OK in IE6 for PC although the positioning of the sub-menus is a little off. At the moment they are positioned to high up the page and therefore intersect with the main menu. The CSS is working though (if the following is what you intended!). On the main menu, the current page is underlined and an underline appears when you hover on a main menu link. For the sub-menu, the current page is underlined and no underline occurs when you hove on a sub-menu link. Regards Robin Thanks Robin You point to two problems in IE6: - The overlapping menus. Hopefully that might be fixed here: http://www.richardnicholson.com/testing/menu5/editorial.html - Lack of hover on the submenu - that had been a problem, previously, but I thought I had fixed it. Top and bottom menus should behave exactly the same - i.e. underline on hover, and underline to indicate the active menu. Thanks Richard __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
Highlighting working alright across browser-land on windows.
IE/win needs an additional...
#nav a {display: block;}
...to get the dimensions, and thereby the positions, right.
regards
Georg
Thanks Georg
I added in: #nav a {display: block;}
In IE 5.2.3 Mac this has caused the menus to run vertically (previously
they were running horizontally - as they are supposed to - but
overlapping).
How is it on IE6?
Here it is:
http://www.richardnicholson.com/testing/menu5/editorial.html
And the CSS:
http://www.richardnicholson.com/testing/menu5/menu.css
Thanks
Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
richard n wrote:
I added in: #nav a {display: block;}
In IE 5.2.3 Mac this has caused the menus to run vertically
(previously they were running horizontally - as they are supposed to
- but overlapping).
You can hide it from, or redeclare it to, IE/Mac. Only IE/win needs it
anyway, and IE/Mac may need it's own workarounds (that I can't check at
the moment).
How is it on IE6?
http://www.richardnicholson.com/testing/menu5/editorial.html
Lining up just fine now :-)
Another observation:
This page also triggers the 'em font-resizing bug' in IE/win...
http://www.gunlaug.no/contents/wd_additions_13.html
...but the bug is only acting on the #nav since that's the only element
that has font-size declared in 'em'.
Font-size keywords on body as a starting-point does not prevent this bug
- it enforces it. In fact: the use of font-size keywords on any
container will introduce or re-introduce the 'em font-resizing bug' to
nested elements that have font-size defined in 'em'.
This bug may be used to enhance font-resizing in IE/win, but since it's
usually an unwelcome effect, and also one that many web designers
don't notice because they don't test with font-resizing in IE/win, I
thought I'd mention it.
The cure is to either avoid using 'em' as font-size unit, *or* to base
'em' sized fonts on a font-size that has '%' as unit (usually on body)
and to avoid keywords anywhere in the mix. There are a few other
options, but they usually only complicates the matter.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
Another observation:
This page also triggers the 'em font-resizing bug' in IE/win...
http://www.gunlaug.no/contents/wd_additions_13.html
...but the bug is only acting on the #nav since that's the only element
that has font-size declared in 'em'.
Font-size keywords on body as a starting-point does not prevent this bug
- it enforces it. In fact: the use of font-size keywords on any
container will introduce or re-introduce the 'em font-resizing bug' to
nested elements that have font-size defined in 'em'.
This bug may be used to enhance font-resizing in IE/win, but since it's
usually an unwelcome effect, and also one that many web designers
don't notice because they don't test with font-resizing in IE/win, I
thought I'd mention it.
The cure is to either avoid using 'em' as font-size unit, *or* to base
'em' sized fonts on a font-size that has '%' as unit (usually on body)
and to avoid keywords anywhere in the mix. There are a few other
options, but they usually only complicates the matter.
Thanks Georg
I just read your article (and the accompanying one about Minimum Font
Size)
Very interesting, but quite complicated for a beginner such as myself.
Going forward, I want to make sure that I'm following best (or at least
'good'!) practice.
So...
- I should replace the 'small' in my body tag with a percentage? 100%
or 62.5% or
- I should then use percentages for sizing all other text elements
('p', 'h1', 'h2', 'ul', 'li' etc).?
- Ems - Ems are new to me. I started using them in the navigation menu
to give a 'margin right' to the horizontal list elements (i.e. to space
out the elements). I was keen that when the text was enlarged, that the
spacing between the menu items would enlarge proportionally. Is this a
good use for ems? Or is there a better unit to use? Maybe pixels will
enlarge in the same way?
Sorry - very basic beginner's questions.
Thanks
Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Faking display:block
Hi, I have a layout where I am using display:block on some elements. Unfortuatly ASP.NET generates HTML and has applied an inline with display:none to dynamically show/hide portions of the page. This display property is overriding the value in my stylesheet. I don't want to use !important to force an override because there are times when it is appropriate to have the element hidden. Any ideas on how to get have a span display as a block without using display? I have tried playing around using float but have not had any success with getting it to appear the same as display:block in my layout. I have a sample at http://www.usip.edu/webtest/cssproblem.aspx . The top portion shows how the layout should look. The bottom portion shows what happens when it is dynamically generated. The problem element is the span class=error element, which has gets the the inline display applied to it. Any ideas? Thanks, Mark Dane Web Database Programmer / University of the Sciences in Philadelphia (215) 596-7602 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] photo-caption pairs layout problem
Hi Betsy, It looks like your captions are getting in the way. A 'clear: left' before each row should help. Best wishes, Melinda -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Betsy Garfield Sent: Tuesday, September 12, 2006 5:38 PM Cc: 'CSS List' Subject: Re: [css-d] photo-caption pairs layout problem Oops. It's taken me this long to realize I forgot to add the URLs. I really wanted to look smart here :-) I wanted a fluid layout for photo-caption pairs. Except for the trouble of putting every pair into its own div, it's a simple layout. But I'm getting some gaps in the layout and I can't figure out why. All the photos are the same size and orientation. Would appreciate comments. Thanks! html: http://wrjsoutheast.org/savannah.html css: http://wrjsoutheast.org/inside3.css -- Betsy webdesign: http://flamingofactory.com photojournal: http://garfieldz.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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] Why does border change positioning?
On Tue, Sep 12, 2006 at 10:44:40PM +0200, francky wrote:
Bill Moseley wrote:
On this page: http://infopeople.org/search/tools.html
In firefox, when I change the ID to not match then the logo div gets
bigger and then the h1 text moves relative to the image.
Hi Bill,
Collapsing margins! :-)
Maybe that's the answer, but I think I'm asking a different question:
What I was wondering about was why the img and the h1 were moving
relative to each other when applying the border (disabling border
collapse). I think it has to do with the float.
I'll use pixels for margins so things line up better:
With this, both the img and h1 top borders are at the same level --
10px down from the top.
Again, the markup:
div class=logo clearfix
a href=/img src=/images/ifp_logo_drkblue_orange_arr.gif
alt=Infopeople.org //a
h1Best Search Tools/h1
/div
#searchtools .logo {
border: 1px solid transparent;
}
#searchtools .logo h1 {
border: 1px solid green;
margin: 10px;
padding:0;
}
#searchtools .logo img {
border: 1px solid red;
margin: 10px;
padding: 0;
float: left;
}
(and remove they bad styles on the a)
But if you remove the first rule (the .logo border) the img
drops down lower, but the h1 doesn't move much. Maybe that's the
border collapse, but that's the part I don't understand.
Is it related to the float? Maybe so, because if I apply float: left
to the h1 then things don't move. I need to remember to apply
floats to all elements if I float any.
--
Bill Moseley
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari acting up with horizontal menus
richard n wrote:
I just read your article (and the accompanying one about Minimum Font
Size)
Very interesting, but quite complicated for a beginner such as
myself.
Not just beginners... :-)
Going forward, I want to make sure that I'm following best (or at
least 'good'!) practice.
Fine.
What's best practice is always debatable, but a 'good' practice is one
that tends to work no matter what - even under some stress. That's a
good starting-point.
Visit the css-d Wiki, as a lot is written about font-size there...
http://css-discuss.incutio.com/?page=UsingEms
http://css-discuss.incutio.com/?page=UsingPercentages
...and many more pages on that and related subjects.
I've added some below.
So...
- I should replace the 'small' in my body tag with a percentage? 100%
or 62.5% or
I would start with 'font-size: 100%' on body as base, since that equals
default in all browsers - regardless of what that default is.
(Sometimes body isn't the best element to declare font-size base on, but
it'll only be a problem in obscure cases.)
The often used 'font-size: 62.5%' is the one I'm warning against in...
http://www.gunlaug.no/contents/wd_1_03_04.html
...because of the way some browsers apply 'minimum font size'.
I certainly don't mind the very large text I get in my browsers when
designers use such a small value as base, but a lot of layouts tend to
break needlessly so it's an efficient way to prevent me from ever
wanting to revisit such weak and badly prepared sites.
While you're at it: declare a 'line-height: 1.3' (or something near that
value in most cases) on body too. That's a unit-less value for
line-height, that will be inherited by all text elements. You can of
course change that value on any element further in.
More: http://css-discuss.incutio.com/?page=LineHeight
If you need/want smaller font-size anywhere further in, then a font-size
smaller than 100% or, if using 'em', smaller than 1.0em, will give you
the font-size you want. The exact value is best found through trial and
error across browser-land because of slight differences between
browsers. Remember - make notes about - the values you find, so you can
reuse them later.
This approach will assure good predictability across browser-land,
without putting limits on what users can do at their end.
- I should then use percentages for sizing all other text elements
('p', 'h1', 'h2', 'ul', 'li' etc).?
Basically: yes.
Percentages or ems are pretty equivalent when used for font-sizing - as
long as the starting-point (on body) is a percentage.
'font-size:1.0em' = 'font-size: 100%' = no change = inherited font-size.
Note that any change in font-size is calculated from whatever font-size
you have further out (inherited font-size), so there's no need to
declare font-size more than once if you don't need a change.
- Ems - Ems are new to me. I started using them in the navigation
menu to give a 'margin right' to the horizontal list elements (i.e.
to space out the elements). I was keen that when the text was
enlarged, that the spacing between the menu items would enlarge
proportionally. Is this a good use for ems? Or is there a better unit
to use? Maybe pixels will enlarge in the same way?
The 'em' is the only unit that'll scale dimensions relative to
font-size, so that's the right choice for the effect you're after.
Doesn't matter what unit you use for 'font-size', as 'margins',
'paddings' and 'width' will scale with font-size when declared in 'em'.
Test well and make sure it all adds up in a complete layout.
Pixels - 'px' - give you fixed dimensions (no scaling), so that's what
you use them for. Good practice says don't use 'px' for 'font-size'
and/or 'line-height', but 'px' for anything else is just depending on
what kind of layout you want.
Note that mixing units for dimensions ('paddings' in 'em', 'margins' in
'%' and 'width' in 'px' - or any such combination) may give you a
headache. Nothing wrong with doing that, but it is difficult - and
sometimes impossible - to calculate the end-result. I mix units all the
time, but I'm used to that sort of headaches :-)
Sorry - very basic beginner's questions.
Always good to get the basics working - and understood, before one
starts complicating things. Create simple test-pages and test out the
basics across browser-land.
As mentioned: there are some differences between browsers, and also
quite a few bugs around (mostly in IE), or else we could all settle for
what's written in the standards...
http://www.w3.org/TR/CSS21/fonts.html#font-size-props
...and so on. Would be nice :-)
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I'm lost on this IE glitch, help appreciated
Hi Stuart I see your problem hasn't been resolved yet. This should help you out: http://www.positioniseverything.net/explorer/threepxtest.html You have a (left) float on your leftsidebar and a margin on your content div to position it adjacent to the sidebar. This is what triggers the bug. If you add more text to your content div you'll see the text jog in action (or rather, the jog will disappear) once it goes down below the left navigation. The above link has a solution that should implement fine on your current page, but if you have trouble write back and I (or another list member) will help you out. I'm at work right now so I don't have much time to spare I'm afraid. HTH Mark Thanks for your help Mark, i've had a read of that article and have applied the 1% height but it doesn't seem to have worked, i've added text to the content div and I can see just below where the floated left menu ends, the 3px is not there, as described in the link you gave me, I can see I possibly have the same problem on the right float aswell? Cheers. Stuart __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Faking display:block
The relationship between 'display', 'position', and 'float' [1] determines the generated box. If you can't solve it with float (+clear), then position:absolute/fixed would be another alternative, meaning that I think you should better revisit your hide/show method instead. Ingo [1] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo (sorry for the double-post, Mark) -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Background images covered by floated element - fix?
In a prototype I'm working on I have placed a floated div containing
a vertical navigation bar inside a primary content area of our page.
In that content area are a number of h2 elements which have a
background image applied to them via CSS that acts as a custom bullet
point. I assumed the contents of the h2 would flow around the
floated element, inlcuding the bg-image. Instead the bg-image remains
pinned to the left margin, invisible beneath the floated element.
I'm wondering if there is a way to keep the bg-image pinned to the h2 text?
Here is a link to the prototype I'm working on, along with the bit of
CSS I think applies. The h2 should all have a small arrow next to
them. The ones on the right do, while the Be Part of the Tradition
and Upcoming Events do not.
http://tinyurl.com/h3n9j
/* h2 in question */
h2 {
margin: 0px 0px 8px;
padding: 0px 0px 0px 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-weight: bold;
color: #33;
letter-spacing: 1px;
background-image: url(/images/shared/h2_bullet.gif);
background-repeat: no-repeat;
background-position: top left;
font-variant: small-caps;
}
/* floated vertical navigation div */
#navcontainer {float: left; margin:0 10px 0 0 !important; padding:0
!important; }
Thanks in advance for any advice.
Todd
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Forms in IE and FF, distances between elements when using float
Hello!
I am a bit new to CSS and right now I am having some trouble getting a
really simple form to render the same in both IE6 and FF. This is my code:
html
head
style type=text/css
div.row
{
clear: both;
}
div.row input
{
display: block;
float: left;
margin-bottom: 0.3em;
}
/style
/head
body
form
div class=row
input type=text/
/div
div class=row
input type=text/
/div
/form
/body
/html
This gives me the a small vertical space between the elements in FF and
a big one (perhaps 3 times larger) in IE. What I want is the FF version.
Is there some trick to get this to show the same way in IE?
The code above is a fragment of a larger piece of code, that is way
there is a float in there that might seem unnecessary. If I remove the
float then this code render pretty much the same in IE and FF. However,
I need the float to position a label in front of each text field.
Regards,
Mattias
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Background images covered by floated element - fix?
Todd Sweet wrote:
In a prototype I'm working on I have placed a floated div containing
a vertical navigation bar inside a primary content area of our page.
In that content area are a number of h2 elements which have a
background image applied to them via CSS that acts as a custom bullet
point. I assumed the contents of the h2 would flow around the
floated element, inlcuding the bg-image. Instead the bg-image remains
pinned to the left margin, invisible beneath the floated element.
Nope. Better read up on how floats work -- they layer over other boxes,
but displace those boxes' inline content only. Suggested articles:
http://www.communitymx.com/abstract.cfm?cid=AC008
http://css.maxdesign.com.au/floatutorial/
http://www.brainjar.com/css/positioning/
http://www.complexspiral.com/publications/containing-floats/
I'm wondering if there is a way to keep the bg-image pinned to the h2 text?
No, but there are ways you can get the h2 out from underneath the float,
which will accomplish the same thing.
Here is a link to the prototype I'm working on, along with the bit of
CSS I think applies. The h2 should all have a small arrow next to
them. The ones on the right do, while the Be Part of the Tradition
and Upcoming Events do not.
http://tinyurl.com/h3n9j
/* h2 in question */
h2 {
margin: 0px 0px 8px;
padding: 0px 0px 0px 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-weight: bold;
color: #33;
letter-spacing: 1px;
background-image: url(/images/shared/h2_bullet.gif);
background-repeat: no-repeat;
background-position: top left;
font-variant: small-caps;
}
/* floated vertical navigation div */
#navcontainer {float: left; margin:0 10px 0 0 !important; padding:0
!important; }
The easiest way to do this is just to assign the heading a left margin
equal to the width of #navcontainer so that it moves out from underneath
the float. This doesn't appear to be a problem for your page since your
#navcontainer is a fixed and known width.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 doubling left edge
Back again, this time i got my footer (and actually the content div)
above it doubling in IE. Ive tried the display: inline workaround but it
hasnt had any effect. Been doing some searching on google and nothings
working (or im doing something wrong). Any thoughts?
URL:
http://www.boldmouth.com/clients/iinstore/6/iinstore.html
Page layout CODE:
/* -- general page structure -- */
#container { width: 780px; margin: 0 auto; text-align: left; }
#header { width: 768px; position: relative; margin: 7px 7px 9px 12px; }
/* NOTE: right margin is built into the image files width -- */
#sidebar { width: 212px; float: left; display: inline; margin: 0 17px
12px 12px; }
#content { width: 532px; float: left; display: inline; }
#footer { width: 746px; clear: both; color: #66; margin: 0 12px 0
12px; text-align: center; padding: 0 5px; }
Thanks again,
Christopher
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] I want to direct link
so, call me crazy but I want to do a direct image link (sending out a newsletter) and the CSS seems to not accept anything other than relative links. Is there a work around that I couldn't find on Google? Thanks! ~Mindy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I want to direct link
On 9/13/06, mindy [EMAIL PROTECTED] wrote: so, call me crazy but I want to do a direct image link (sending out a newsletter) and the CSS seems to not accept anything other than relative links. Is there a work around that I couldn't find on Google? background: url(http://www.w3schools.com/images/w3default80.jpg) no-repeat; ? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 Block Element Links
Hey all,
I'm trying to make an entire 'block' of elements into a link (like a
table, but using spans and divs).
I laid out the a href=# class=contentPics, spans, text,
etc../a then positioned the elements accordingly.
I have everything working perfectly in Firefox, but only
'sort-of' in IE.
In IE, It seems as if the Z-order of the elements on top of the
content class a override the Link functionality.
Other browsers behave, but not IE. The text in the link is hovering
with the 'text' cursor, but I can still click the link, but the IMG wont
click at all. It's just weird.
Also, I tried using:
*a {position:relative;}
but it doesn't work in this case.
What is the hack to get this to work?
The example in question (Fine in FF, Broke in IE):
http://www.redforty.com/index2.php
Thanks!
-Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] 4 Column Layout with a Twist
Hi all, I'm looking for a 4 column CSS template, but I haven't been able to find quite what I'm after. Here is a crude rendition of what I'd like: +---+++ | 1 || 2 | | |++ | ||| | ||| +---+| 3 | || || || || +-+ | 4 | +-+ Column 1 - Menu (fixed to top left) Column 2 - Header (fixed to top) Column 3 - Body (scrollable vertically) Column 4 - Footer (fixed to bottom) 1] Columns 1, 2, and 4 will be absolute and stationary, and column 3 will be scrollable. 2] Columns 2 and 4 should always be visible and ride above column 3, no matter the window size. 3] Column 1 should ride above column 4 (if it's tall enough) 4] Columns 2, 3, and 4 should be expandable to the right (fluid?) to fill the browser window, but always hug column 1, which will be a fixed width. 5] Columns 1 and 2 should be able to 'expand' vertically, depending on their content. 6] There should be no gaps between columns I've tried to be as concise as possible, so let me know if you need more information than what I've given here. Thank you, Ted __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 6 problems? Assistance please?
Hi I am working on the following pages that are indicated by the links and information given. I am not seeing these problems, however others are apparently seeing them. If any of you could be of any assistance I would greatly appreciate it. Following are the comments from the pages that were viewed: Using a PC -- Internet Explorer 6. See below. Can you do me a favor? Please open up these links and tell me if the art shows up on the 1st screen or does it appear only after you page down. Also tell me if you use a PC or a Mac an what your browser is (Explorer, Safari, Firefox). http://www.debsplace.org/artist/aboutsimonbull.html [Jeffrey B. Anderson] -- Shows nothing when the new window loads, shows the photograph when the window is maximized or when you scroll down. http://www.debsplace.org/artist/birdofparadise.html [Jeffrey B. Anderson] -- Shows the top quarter of the art when the new window loads, shows the entire piece when the window is maximized or when you scroll down. http://www.debsplace.org/artist/christiannesvadba.html [Jeffrey B. Anderson] -- Shows the top third of the pieces when the new window loads, shows the entire first row when the window is maximized or when you scroll down. http://www.debsplace.org/artist/coleman.html [Jeffrey B. Anderson] -- Shows nothing when the new window loads, shows the top third of the pieces when the window is maximized. http://www.debsplace.org/artist/demo3b.html [Jeffrey B. Anderson] -- Shows the top half of the art when the new window loads, shows the entire piece when the window is maximized or when you scroll down. http://www.debsplace.org/artist/demo3b_artist.html [Jeffrey B. Anderson] Shows nothing when the new window loads, shows the entire first row when the window is maximized or when you scroll down. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I'm lost on this IE glitch, help appreciated
http://www.stuartswan.com/v6/index.php
I see your problem hasn't been resolved yet. This should help you
out: http://www.positioniseverything.net/explorer/threepxtest.html
[...] i've had a read of that article and have applied the 1%
height but it doesn't seem to have worked, [...]
Not on its own, as the 3px jog will be moved on to the entire
content-container - moving it to the right.
You also have to adjust left margin on content, and the _calculated_
width of the floating sidebar. The latter isn't all that apparent.
Add the following IE/win hack to your stylesheet, below everything else,
complete with @media wrapper...
@media screen {
* html #leftsidebar {margin-right: -3px;}
* html #content {height: 1%; margin-left: 159px;}
}
...and the 3px jog bug will disappear behind leftsidebar. This hack will
only be seen/applied by IE6 and IE5+ on win, which are the versions that
have this bug.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] BuufDesigns.com CSS Assistance // IE/FF Browser Compatibility Issues
Hello! I am currently fixing some issues with the BuufDesigns.com layout. But I am in need of assistance of some serious bugs I cannot fix in Internet Explorer and Firefox. Ironically, this website is compatible with Safari and Opera. This is a voluntary job, but you will be credited on the credit page. Not only that, but if anyone else knows how to intergrate ZenPhoto to my gallery, please PM me. Mind you, the Buufgallery and the ZenPhoto gallery default theme have very similar structure and attributes. Pretty much copying and pasting the php codes. But I can't seem to get that to function properly, hence needing a volunteer to help me on that. If you want this website released as soon as possible, someone please help me. I know there are some talented CSS designers here. But I can't seem to find a volunteer. Here are some teaser screenshots, if you want to help me with this little bug squashing project, you can see the whole development. http://www.buufdesigns.com/RC1 Need the following fixed: IE6, FF, that's all! Thanks! -- » GANTdesigns is not managed by Mattahan. If you would like to contact him personally, please via e-mail to [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I'm lost on this IE glitch, help appreciated
@media screen {
* html #leftsidebar {margin-right: -3px;}
* html #content {height: 1%; margin-left: 159px;}
}
...and the 3px jog bug will disappear behind leftsidebar. This hack will
only be seen/applied by IE6 and IE5+ on win, which are the versions that
have this bug.
regards
Georg
Thanks Georg, working perfect now, and thanks again Mark for pointing
me in the right direction. Cheers.
Stuart
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] postion:absolute not following a position:relative
Hi all, I'm trying to add an overlay badge to some photos in a site I'm developing, so I thought that adding positon:relative and position:absolute for them should do the trick, but I don't know what is the problem, but this ain't working. you can checkout the page at http://work.grillo.tk/gaiolla/index.cfm?storeOwner=paula the .css file is at http://work.grillo.tk/gaiolla/webstore.css I've added a /* css-d look here */ comment to help you find the rules that make that part of the layout :) I suspect that since the relative element is a float that's is causing the problem. is it ? TIA for any advice Grillo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] page review :: ~dL
A quick check of this simple page http://www.chelseacreekstudio.com/ca/frost/ with what you are running is appreciated. Just trying to pull out any problems or issues that I may have overlooked, or that I am not aware of. Thanks. ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] postion:absolute not following a position:relative
Marcelo Wolfgang wrote: Hi all, I'm trying to add an overlay badge to some photos in a site I'm developing, so I thought that adding positon:relative and position:absolute for them should do the trick, but I don't know what is the problem, but this ain't working. you can checkout the page at http://work.grillo.tk/gaiolla/index.cfm?storeOwner=paula the .css file is at http://work.grillo.tk/gaiolla/webstore.css I've added a /* css-d look here */ comment to help you find the rules that make that part of the layout :) I suspect that since the relative element is a float that's is causing the problem. is it ? Hmm, is the light grey background in the middle supposed to extend all the way down the page? If so, it doesn't do it here in FF 1.5.0.4 for Linux with Javascript turned off. Your XHTML 1.0 Transitional page needs some validation problems fixed? Most of the errors seem to be related to how things are encoded in links for the shopping cart, but there is one point where it finds a select ending before it should. http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwork.grillo.tk%2Fgaiolla%2Findex.cfm%3FstoreOwner%3Dpaula -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] page review :: ~dL
david wrote: ~davidLaakso wrote: A quick check of this simple page http://www.chelseacreekstudio.com/ca/frost/ with what you are running is appreciated. Just trying to pull out any problems or issues that I may have overlooked, or that I am not aware of. The column for the second poem is too narrow for the lines to run all the way across, and when the lines wrap, it's hard to follow the poem. I wonder if you could do a hanging indent somehow for poem lines? I know what you mean. I was not able to make it work at all resolutions, zoom settings using any method. I think I'd need a different layout with a wider measure for that particular poem ( or, I'll have to wake Frost up from the dead and have him revise his poem to fit my need :-D ). Also,there's a missing line break after the first line of that poem - at least going by how you seem to be breaking the poem lines in the HTML. Thanks. Corrected (I think). Four font enlarges were enough to make the birth--death years come out of the right column. I think if you changed it to be birth - death (spaces before and after dash) it would break instead of come out. But that's not something I'd worry about much. Yes, fixable. I think I'd like more contrast between the bio text in the left column and the background. Thanks. Done. Bumped it, but will need to check it in daylight as artificial light blows away color (for me). Using Firefox 1.5.0.4 on Linux, 15.4 1280x800 display, in a 932x775 viewport. Nice page. You always do great designs when it comes to color and layout selections. Now, if I could just get the stuff I put in layouts, to work with those layouts, things will be better... Your time and thoughts are appreciated. Best, ~davidLaakso -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] page review :: ~dL
~davidLaakso wrote: david wrote: ~davidLaakso wrote: A quick check of this simple page http://www.chelseacreekstudio.com/ca/frost/ with what you are running is appreciated. Just trying to pull out any problems or issues that I may have overlooked, or that I am not aware of. The column for the second poem is too narrow for the lines to run all the way across, and when the lines wrap, it's hard to follow the poem. I wonder if you could do a hanging indent somehow for poem lines? I know what you mean. I was not able to make it work at all resolutions, zoom settings using any method. I think I'd need a different layout with a wider measure for that particular poem ( or, I'll have to wake Frost up from the dead and have him revise his poem to fit my need :-D ). Well, one thought that occurred to me was to put one poem first, followed by the other, in a single column. Also,there's a missing line break after the first line of that poem - at least going by how you seem to be breaking the poem lines in the HTML. Thanks. Corrected (I think). Hmmm, I still see: My long two–pointed ladder's sticking through a tree Toward heaven still, See where Toward is? I think you need a break right after tree. Four font enlarges were enough to make the birth--death years come out of the right column. I think if you changed it to be birth - death (spaces before and after dash) it would break instead of come out. But that's not something I'd worry about much. Yes, fixable. Figured it would be. I think I'd like more contrast between the bio text in the left column and the background. Thanks. Done. Bumped it, but will need to check it in daylight as artificial light blows away color (for me). Yes, that does it fine. It makes the bio text look sharper than it did before. BTW, I've got daylight coming from both sides of me, and a daylight-spectrum flourescent lamp on the desk. Using Firefox 1.5.0.4 on Linux, 15.4 1280x800 display, in a 932x775 viewport. Nice page. You always do great designs when it comes to color and layout selections. Now, if I could just get the stuff I put in layouts, to work with those layouts, things will be better... That's the way all layout (web or other!) is best done: with the actual content in it! -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] page review :: ~dL
david wrote: ~davidLaakso wrote: david wrote: ~davidLaakso wrote: A quick check of this simple page http://www.chelseacreekstudio.com/ca/frost/ with what you are running is appreciated. Just trying to pull out any problems or issues that I may have overlooked, or that I am not aware of. Also,there's a missing line break after the first line of that poem - at least going by how you seem to be breaking the poem lines in the HTML. Thanks. Corrected (I think). Hmmm, I still see: My long two–pointed ladder's sticking through a tree Toward heaven still, See where Toward is? I think you need a break right after tree. Yes, you are right. Bingo! Done. Thanks. ~davidLaakso -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Need some testing and fixes for a blog skin
Sorry for the delay in my responding to your questions and answers regarding my blog skin. I'm on a new medicine that is making things interesting at the moment. A refresher first... I designed/coded a b2evo blog skin for my friend. It's up, and there are a few relatively minor issues. Site here: http://www.anonymousopinion.com/index.php?blog=1 CSS: http://anonymousopinion.com/skins/AO/AO.css There are also a few imports to default css stylesheets that come part and parcel with b2evo, but I don't think those are in play for this. So let me address the feedback I received... A few people asked what I was talking about when I referenced wanting to center elements with margin: auto. What I mainly thought this would be good for would be to center images used in a blog post. Shouldn't this work, since the images are themselves contained within a larger defined element? It *isn't* working regardless. If this isn't the answer, what *is* the answer for centering an image without using the center tag? I also got a response saying that IE for Mac is broken, maybe due to floats. Well, this isn't a float layout. It's pretty much all absolute. Can I get a screenshot of the problem, or a description of which elements need to have defined widths or whatever would solve it? That shouldn't be a difficult thing to resolve if a defined width is the answer. I also was told that the reason that the calendar header text enlarges weirdly in Firefox has to do with something in javascript. Seems like this is correct, but it must be somewhere deep in the blog software. Any creative solutions? I haven't applied the solutions to the overflow issues or the multi-line link display issues for IE, but I appreciate the answers and will get that done shortly. I also plan to serve up some alternative blockquote and image border options for IE to avoid the weirdness of dotted/dashed borders in that browser. I'm also using the dynamic text replacement scripts talked about and listed here: http://www.alistapart.com/articles/dynatext/ Apparently there are some errors with these displaying at all in the newest version of Opera. I had some layout issues with Opera earlier, but tracked those down and fixed them. I also activated the flicker-free element of the script. The whole thing can be viewed here: http://www.anonymousopinion.com/skins/AO/dynamictext/replacement.js ... and the mini-css file is here: http://www.anonymousopinion.com/skins/AO/dynamictext/replacement-screen. css It won't let me print the php of course. This script seems to work ok in IE and Firefox, but in my version of Opera the original text prints in little boxes, sort of like images that don't load properly, and then finally loads the correct images. It's ignoring or twisting the hiding part of the script. Alright. I thank those of you who had the patience to read through all of this and the memory to link it to my previous questions. Thanks all for your help as always. Andy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] page review :: ~dL
Don Miller wrote: Would it look better if the GIF white area were transparent? The white box doesn't really look right with the rest of the page. Otherwise, a good elastic design. Don | A quick check of this simple page | http://www.chelseacreekstudio.com/ca/frost/ with what you are running | is appreciated. Just trying to pull out any problems or issues that I | may have overlooked, or that I am not aware of. | Thanks. | ~dL Good call, Don. Corrected. Thanks. ~davidLaakso -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] page review :: ~dL
~davidLaakso wrote: A quick check of this simple page http://www.chelseacreekstudio.com/ca/frost/ with what you are running... The page is verry long in IE 5 Mac - I suspect the one True Layout for equal height columns is to blame; I didn't look in depth though. Whether that bothers you or not is up to your site's stats...if there are any yet? I'm not sure off the top of my head how you'd go about fixing that...or if there is a fix for IE Mac...can't remember. Anyhow, that's all I saw in my extremely quick check. Other than the previous comments, everything looks good in the latest Firefox, Safari, and Opera over in Mac land. -- Jono Young ../Designer ../Developer ../Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry www.charlestonwebsolutions.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
