Re: [css-d] Dinamic css change
Kike Estellés wrote: Can anybody tell me how can I change the css file associated to a page just pushing a link (for example). Use a style switcher. I recommend the following... http://www.howtocreate.co.uk/jslibs/script-swapstyle Some other alternatives listed in the css-d Wiki... http://css-discuss.incutio.com/?page=StyleSwitching 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] Dinamic css change
Use a style switcher. I recommend the following... http://www.howtocreate.co.uk/jslibs/script-swapstyle It relies on JavaScript and offers the links even when JS is disabled... That's just bad. http://24ways.org/advent/introducing-udasss uses a PHP server side fallback. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ 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] 3 column layout problems
I gave up on the In Search of the Holy Grail layout because the anchor links didn't work in FireFox. Now I'm trying the Skidoo Too 3 column layout. The anchor links work fine but I and am having other problems. I hope someone can help. Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the In Search of the Holy Grail menu, and the center column was first there also, my flyout did work there. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Thanks, Liz __ 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] One True Layout problems (was Re: holy grail problems)
1/ Based on the most recent WebKit nightly builds (aka future
Safari), adding {position:relative} to each column is a (possible)
work around.
This of course
* is only true at the time of writing (WebKit is not a release
version, but beta software; things may change ...)
* is only tested with all the simple test files we've used. What
happens in a complex construction is left your powers of
investigation :-)
That workaround doesn't cause problems for Gecko based browsers, as
far as I could see.
Of course, applying pos:rel to the columns then means that you can't
position elements inside them with regard to the containing element.
If you don't need to do that, then fine.
My workaround is along these lines:
Absolutely position a very tall element at the bottom of each column
using generated content which overflow:hidden clips
http://www.fu2k.org/alex/css/cssjunk/equalheightssfariidea
Obviously it won't work in Mozilla since it doesn't allow for
absolute positioning of generated content...
If you don't need to deal with anchors or its failure in Mozilla or
IE, this is actually a better method than the original since it
allows for background images to be reliably positioned elsewhere than
just at the top.
2/ I wouldn't be too surprised if Safari (Webkit) supports XBL
bindings as well. D.Hyatt was a co-author of the original Mozilla
docs. Although the test file didn't work.
Well yes. The CSS Standards editors are also adamant that XBL is the
correct way of dealing with such things, just as XBL is how we should
reorder semantically ordered columns for visual display.
That still leaves the issue of how to handle javascript being turned
off and XBL's not even being applied and the more practical one that
Safari doesn't support it yet. And as far as I know there's no word
on when if ever Opera will.
__
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] Dinamic css change
Christian Heilmann wrote: Use a style switcher. I recommend the following... http://www.howtocreate.co.uk/jslibs/script-swapstyle It relies on JavaScript and offers the links even when JS is disabled... That's just bad. All use of javascript has a weakness. Disabling/hiding links/selectors when script isn't supported shouldn't be much of a problem. I haven't received your latest book yet, so I wouldn't know how to solve that :-) Have suggestions for improvements without loosing the basic 'any number - combine in any order' advantage of that script? I do think it has practical value to be able to switch in and out any stylesheet, both for real world sites and for CSS-debugging across browser-land. http://24ways.org/advent/introducing-udasss uses a PHP server side fallback. Might be a suitable solution to the original request, but as far as I can see: it can't include/exclude/combine any number of stylesheets in any order. Can probably be fixed too, but PHP is not one of my strengths either. 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] stylesheet link causing validation to fail
Ingo Chao Add top:0; to .col3 and position:relative to each .LinestyleX Thank you very much. At least now the results are the same in IE and FF. or go the other route without position:absolute. I'm going to try to eliminate the position: absolute this weekend. The pointers you and LordChaos gave will be where I start, for sure. I tried using position:relative to begin with but that produced a bigger mess. I'm really having a hard time understanding 'normal page flow.' I see it referred to, but I haven't been able to find an understandable explanation of what it is. If you (or anyone else) could point me to a reference that could help me get my arms around those fundamentals, I would *really* appreciate it. Thanks again for your help. Best regards, Bill __ 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] Novice needs info.
How do I bundle my source code and my CSS link together so that when I send them from point A they both arrive at point B. and function as they should.??.(Plain English,please.) Thanks,Ernie Finlay. __ 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] Novice needs info.
[snip] How do I bundle my source code and my CSS link together so that when I send them from point A they both arrive at point B. and function as they should.??.(Plain English,please.) [/snip] Zip them up with WinZip and extract them when they get to point B __ 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] Novice needs info.
Can you clarify a bit? If you're emailing them, a ZIP (or SIT, etc) will
do the trick. Make sure that you're links between html and css (and
images and anything else outside the source html doc) are relative.
ie:
GOOD:
link href=v1/css/site.css rel=stylesheet type=text/css
media=screen /
BAD:
link href=file:///c:/www/v1/css/site.css rel=stylesheet
type=text/css media=screen /
--
s:r {
scott reston
http://scott.therestons.com
scott at therestons * com
}
Ernie Finlay wrote:
How do I bundle my source code and my CSS link together so that when I send
them from point A they both arrive at point B. and function as they
should.??.(Plain English,please.)
Thanks,Ernie Finlay.
__
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] How to send CSS and HTML as a package
How do I bundle my source code and my CSS link together so that when I send them from point A they both arrive at point B. and function as they should.??.(Plain English,please.) Plain English question or description please. As others pointed out, simply zipping all files up would do fine. If you want to have an HTML page with CSS and display them as an email for example in Outlook then your best option is to embed the CSS in the document directly. Explanations and more tricks are there: http://css-discuss.incutio.com/?page=StyleInEmail P.S.: I took the liberty to change the subject to something that can be searched and found in the archive later on. Novice needs info was a bit generic, unless you want to define what a Novice is. __ 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] New problem
Forgot to CC the group... I have a new problem I need help with fast! The side boxes are flaking out on me. By that, I mean that I added a couple test links there (because this was the whole purpose of putting those there...for news links) and the top box became bigger...expectedly...but as it grew it shoved the lower box over the footer. It didn't cause the wrapper div to grow with it. Also, if the main content box doesn't have a certain amount of content in it so that it's longer in length than the side boxes, the very bottom side box moves out of the flow and wants to sit UNDER the main content box! Why does this happen and how can I fix it? Here's the link again:http://216.119.67.187/js/index.htm Right now it doesn't look this way because I deleted the extra content in the top sidebox to get rid of the issue till I could find a solution. HELP! lol J - Do you Yahoo!? Next-gen email? Have it all with the all-new Yahoo! Mail Beta. - Do you Yahoo!? Next-gen email? Have it all with the all-new Yahoo! Mail Beta. __ 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 problem with relative positioning and one other small issue
Look at the following link in IE: http://test.lakequincy.com/Advertisers/Default.aspx Then resize the browser and notice that the positioning shifts until you refresh the page, then its back centered again like its supposed to be. I know this is because of the relative positioning I'm using and it works perfectly in FireFox, but IE's display is annoying. Is there anyway around this? BTW, the reason I need to use relative positioning is for the quote marks in the Customer Quote section and the blue separator links between each content section. 2nd issue: In the main blue navigation bar when you hover over the links, the vertical separator line (topnavbar-divideline.gif) disappears. This is because I have it as a background image on the link and on hover I'm replacing the background image with the yellowish background image. I just don't know how else to do it to all make it work correctly. Suggestions? Thanks, Craig __ 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] help with lists in IE
The list works in Firefox, but in IE, the block background color changes
only when I hover over the text. In Firefox, the background changes when I
hover over any part of the block.
Here is the css. How can I get IE's behaviour to mimic Firefox?
ul#imp {
width: 190px;
margin: 0 0;
padding: 0;
font-size: 11px;
list-style-type: none;
font-family: Tahoma, Arial, sans-serif;
font-weight: normal;
color:#00;
}
ul#imp li {
border-bottom: 1px solid #66;
padding: 0;
}
ul#imp a {
padding: 5px 5px;
color:#00;
display: block;
text-decoration: none;
}
ul#imp a:visited {
color: #00;
}
ul#imp a:hover {
color:red;
background: #dd;
}
--
Travis Crabtree
Webmaster
Tusculum College
phone: 423.636.7300 ext. 5132
fax: 423.636.7492
email: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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] New problem
Jeralyn Merideth [EMAIL PROTECTED] wrote:Right now it doesn't look this way because I deleted the extra content in the top sidebox to get rid of the issue till I could find a solution. I forgot that only the index page looks right...the rest of the linked pages show the problem I was referring to. Thanks, Jeralyn - Want to be your own boss? Learn how on Yahoo! Small Business. __ 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] New problem
I have a new problem I need help with fast! The side boxes are flaking out on me. By that, I mean that I added a couple test links there (because this was the whole purpose of putting those there...for news links) and the top box became bigger...expectedly...but as it grew it shoved the lower box over the footer. It didn't cause the wrapper div to grow with it. Also, if the main content box doesn't have a certain amount of content in it so that it's longer in length than the side boxes, the very bottom side box moves out of the flow and wants to sit UNDER the main content box! Why does this happen and how can I fix it? Here's the link again:http://216.119.67.187/js/index.htm Right now it doesn't look this way because I deleted the extra content in the top sidebox to get rid of the issue till I could find a solution. Searchable subjects help the list. __ 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] New problem
Jeralyn Merideth wrote:
The side boxes are flaking out on me. By that, I mean that I added a
couple test links there (because this was the whole purpose of
putting those there...for news links) and the top box became
bigger...expectedly...but as it grew it shoved the lower box over the
footer. It didn't cause the wrapper div to grow with it.
Yes, it does, but it's 5px short because of the pulled-up margin at the
bottom of the rounded corner part of the sidebar.
That's what I sometimes refer to as a hanging float or a half-cleared
float (depending on the degree of pull-up etc, but the effect you are
experiencing was completely unintentional. Correction included in the
CSS below.
Also, if the main content box doesn't have a certain amount of
content in it so that it's longer in length than the side boxes, the
very bottom side box moves out of the flow and wants to sit UNDER
the main content box! Why does this happen and how can I fix it?
Here's the link again:http://216.119.67.187/js/index.htm
Both problems are caused/affected by the fact that you have 3 individual
sidebar as 'float: left'. They will then act individually, and end up
where there are space for them - with hanging floats and all. That's how
floats are supposed to act, so we just have to get them back to where
they belong.
Solution: wrap all three (or more) sidebars in one and the same div, and
style that to hold the sidebars in place. I call it 'secondary' in the
following.
HTML:
div id=secondary
div id=sidebar
!--end box 3--
/div
CSS:
#secondary {
float: left;
width: 27%;
margin-bottom: 7px;
}
Now you'll get one, stable, float on the left side, and all elements
that belong on the left will stay inside it.
Then you also have to restyle the 'sidebars', like this:
#sidebar {
margin-left: 8px;
background: #F0F0E7;
float: left;
width: 95%;
margin-top: 14px;
clear: left;
display: inline;
}
...to compensate for the fact that they now take their width in relation
to 'secondary' instead of the entire page-width.
Some leftover from earlier - probably a misunderstanding...
You are now using an id=sidebar 3 times, and IDs shouldn't be used
more than once in each page. You should correct that so you have a
class=sidebar / div.sidebar instead, as classes can, and are supposed
to, be used as many times as you like/need in each page. You do have a
p.sidebar already, so make sure you address the right element with each
'sidebar' class.
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] CSS beginner seeking help
At 12:14 AM 7/21/2006, David Sharp wrote:
I actually originally had the background image on the header, but when I
did that, it created a white space between the header and the subheader
that I couldn't figure out how to get rid of. When I moved the background
image to the wrapper, that's when the white space disappeared.
The white space is the bottom margin of div#header h1. Because the margin
of #header is 0, this margin sticks out past the header creating the
unsightly gap. padding-bottom on the #header would be a better solution.
Even if the image was moved into the header, wouldn't the text squeeze
out anyway when the browser is shrunk significantly b/c the image is a
fixed size?
Perhaps the pattern you currently have could fade to a solid colour at the
top. Then give the #header this colour, and position your background image
at the bottom.
div#header {
background : #33 /* or whatever your colour is */
url(whatever.gif) bottom left repeat-x;
}
This way your page will look ideal at the default text size, but will
still look pretty good when text is bumped up.
Alternately you could make the background bigger than it needs to be - due
to the nature of the N taking space from the top and bottom (as will be
the case at default text size) will leave it still looking like an N. In
this case align the background with the center of the header using
{background-position : 0% 50%}. In this case I would still give the header
the solid background colour in case the text is bumped higher than your
image can handle.
I think the key is to allow the page to accommodate changes gracefully -
it won't always look pixel perfect. But your site is looking really good.
I wish my first sites looked half as decent!
Hope this helps.
D#
Hi David,
Thanks so much for the helpful tips. I just implemented them and it looks
great! I moved the background to the div#header,and adjusted the header
margins/padding. Also used your first suggestion of setting a background
color behind the image, and I think it looks perfectly adequate for
significantly resized windows.
Very grateful for your help,
Janet
__
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] input type image spacing issue
Hello All! I'm in the beginning process of coding this mock up... http://www.westga.edu/~webgroup/design/mocks/uwg-mock10-15.jpg My current progress... http://www.westga.edu/~webgroup/design/code/ My problem (well, one of them) is the image input element at the top right of the design. It's moving down the whole list. Here it is without the element... http://www.westga.edu/~webgroup/design/code/index2.html I can't seem to pull it down. Any suggestions? Thanks, Madison __ 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] inherit problems
On 7/20/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote:
[EMAIL PROTECTED] wrote:
I have set the properties of my form fields
textarea, input
{
width: 550px;
}
I only have one that I want to ignore this class. What is the best way to
get the single elements to ignore the class? Can I wrap it in a div and do
something that way?
Set a class or id on the element you want to be different and assign the
differing values to this class or id in your style sheet.
If you want that one, classed, element to be its normal width, try
setting the width to auto.
HTH,
Michael
__
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] Best navigational scheme?
[This is likely the wrong venue for this question, so I'd welcome redirection to sites/groups/fora that focus on design philosophy in lieu of answers if that's the case.] What's your opinion on the best navigational scheme for a site with several (4 or more) pages in each of several (5 or 6) sections? I like the idea of CSS dropdowns for easy access to all pages (like http://villagevoice.com but using CSS), but you can't tell where you are just by glancing at the menu, and I don't know whether these can be trusted to always work in you-know-what-browser. Using a two-row navigation header (like http://apple.com ) solves these problems, but this tends to look cluttered under a header graphic, and doesn't offer immediate access to pages in other sections. A third option is using both a row and a sidebar, such as http:// www.boerner-gruppe.de/gruppe does. A lefthand two level menu, sections and pages as indented list, possibly with sections opening on a click to display the page titles. Aaron __ 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] Combine Stylesheets Dynamically?
On 7/20/06, Alex Foley [EMAIL PROTECTED] wrote: The problem is my main page is the heaviest of the pages...it carries a large Flash graphic (although that would soon go away...). One thing I've decided on is that the user downloading a separate stylesheet for each page is no good... I have always maintained individual CSS files to avoid the one large file...possibly assembling this dynamically at the start would solve this problem. Are there any negatives to a client downloading a 10-12K stylesheet right away? Perhaps the answer is to give them the minimum on the main page, but on any other page serve them the full CSS... Hi, Alex, We ran into this same question when we redesigned our site. We split up our stylesheets into three basic sheets -- 1 that provided the basic layout, 1 that provided the standard content ornamentation (for data tables and such) and 1 for small, page-specific elements (like an ornament for a specific article). We also had specialized sheets for sections of the site, like the account area, that shared a lot of common styles not used elsewhere, and other sheets to support less CSS-complete browsers (IE 6, IE 5, IE Mac, etc). We found that multiple files wasn't that big a deal (multiple meaning 4 or 5, not dozens), because current browsers and servers support HTTP pipelining, which lets the site send multiple files in one connection. (IE 5+ mac and pc, Safari, Firefox, NS 7+ all support pipelining. I assume Opera 7+ does also.) When we did our speed tests, however, our basic style sheet load ended up being about 25K, and IE 6 had to download close to 37K. This included a home page-specific sheet named home.css, that was an additional 5K. The business managers felt that this would be too great an up-front hit for folks on IE on dial-up. (We get around 2,000,000 visits per month, so we can't ignore the 30% remaining on dial-up.) To resolve this, we removed the main stylesheet, the content ornamentation stylesheet, and the IE-fix stylesheets from the home page, and increased the size of home.css to included the bare minimum of main.css, content.css and filtered rules from the IE-fix stylesheets to get the home page to work. This let us get down to about 20K, total, for the home page. By keeping layout.css in the mix, it let us start the caching process for most browsers, so that 10K was being cached in the first hit, reducing the second hit when the rest of the CSS got loaded. It also helped that we could set our servers to GZIP our CSS files, so that the load became that much smaller. Long story short, the majority of your browser population will support HTTP pipelining, so the number of files is less important than the size of the files. Finding ways to spread your big files across multiple pages can help also. Also consider that if you have a script tag in your head tag, the content of your site won't begin to appear until the stylesheet loads. So on that first hit, you can assume that the 10-12K download will be hidden in the time the user is waiting for the browser to contact the site. 10K on a 56kbps modem is about 2 seconds. If you are downloading, say, 30 or 50K of stuff in the head tag, then it's time to start worrying. 10K shouldn't be too bad. HTH, Michael __ 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 flow [WAS Re: stylesheet link causing validation to fail]
Bill Walton wrote: Ingo Chao or go the other route without position:absolute. I'm going to try to eliminate the position: absolute this weekend. The pointers you and LordChaos gave will be where I start, for sure. I tried using position:relative to begin with but that produced a bigger mess. I'm really having a hard time understanding 'normal page flow.' I see it referred to, but I haven't been able to find an understandable explanation of what it is. If you (or anyone else) could point me to a reference that could help me get my arms around those fundamentals, I would *really* appreciate it. Thanks again for your help. Bill, It's not free, but I recommend this article: http://www.communitymx.com/abstract.cfm?cid=A33F5 Other helpful articles in understanding page flow: http://www.brainjar.com/css/positioning/default.asp http://css.maxdesign.com.au/floatutorial/ http://www.communitymx.com/abstract.cfm?cid=AC008 http://www.communitymx.com/abstract.cfm?cid=81CD7 http://www.communitymx.com/abstract.cfm?cid=6BC9D By the way, I commend you for using HTML since you knew you couldn't live up to the strictness of XHTML yet. That's absolutely the right thing to do. 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/
Re: [css-d] 3 column layout problems
Liz wrote: I gave up on the In Search of the Holy Grail layout because the anchor links didn't work in FireFox. Now I'm trying the Skidoo Too 3 column layout. The anchor links work fine but I and am having other problems. I hope someone can help. If you include the URL to your page, we can. :-) Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the In Search of the Holy Grail menu, and the center column was first there also, my flyout did work there. Can't tell without seeing the page. You could try giving it a ridiculously high z-index (1), or adding relative positioning to it to start a new stacking context. Not sure. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Sounds like margin collapsing: http://css-discuss.incutio.com/?page=CollapsingMargin 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/
Re: [css-d] Highlighting Nav Links
Joseph Lorenzini wrote: I am working on a web design that has three different columns of navigation that are persistent throughout the site. I would like to find a way to have the link of the page you are on be highlighted while the rest are grayed out. For example, say I had a main nav of About US which led to a secondary nav of Faculty which in turn led to a third navigation called Professor. How would I make it so about us, faculty and professor are all high lighted but the rest of it stays grayed out? Also, keep in mind that I am working with templates for all of this. Joe, The best way to do this is to use server-side scripting to remove the link from the page you are currently on and dynamically add classes or ids that you can then hook into with CSS. Christian Heilman has a great PHP script that does this: http://onlinetools.org/tools/easynav/ (I need a ColdFusion version!) If you can't use a server-side language, you can do the highlighting at least with CSS: http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ 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] problem with 3 column layout
Hello, all, I hope someone can help. I posted this before but forgot to add the link. Then I posted again with the link but my email came back so I'm trying again. link http://www.liztestsite.com/testsite/test2.html I gave up on the In Search of the Holy Grail layout because the anchor links didn't work in FireFox. Now I'm trying the Skidoo Too 3 column layout. The anchor links work fine but I am having other problems. I hope someone can help. Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the In Search of the Holy Grail menu, and the center column was first there also, my flyout did work there. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Thanks, Liz __ 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 caption and firefox
jaklitsch maya wrote:
I have a problem with caption that I frankly do not
understand.
I have been trying to solve it for several hours, and
can't seem to solve it.
The IE 6 is rendering my caption of a data table just
fine but Firefox will not center it to the table.
the partial css is:
.meetings {width: 50%;
border: 1px solid #143350;
padding: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;}
.meetings caption {padding: 4px 10px;
text-align: center;
font: bold .85em Arial, Helvetica, sans-serif;}
td {font-size: .85em;}
tr.odd {background: #BBD5FF;}
--
and the html is as follows: [...]
Hi Maya,
Add: .meetings caption {margin: 0 auto; } and ... testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-caption.htm :-)
In FF1.07 it's alright now, like IE6 and Opera8.01 before.
But why? The css2.1 spec's say:
The caption boxes ... are block-level boxes that retain their own
content, padding, margin, and border areas, and are rendered as normal
blocks *inside* the anonymous box.
http://www.w3.org/TR/CSS21/tables.html#q5
So I guess it is a Firefox bug, though my simple mind didn't find it in
a Bugzilla search for table caption:
https://bugzilla.mozilla.org/buglist.cgi?query_format=specificorder=relevance+descbug_status=__open__content=table+caption
https://bugzilla.mozilla.org/buglist.cgi?query_format=specificorder=relevance+descbug_status=__open__content=table+caption
(maybe this link will be broken)
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] input type image spacing issue
Madison Bryan wrote:
http://www.westga.edu/~webgroup/design/code/
My problem (well, one of them) is the image input element at the top
right of the design. It's moving down the whole list.
I can't seem to pull it down.
No wonder... images are inline-elements by default in Strict.
You can always add something like...
input.submit {margin-bottom: -5px; position: relative;}
...or...
input.submit {vertical-align: bottom;}
...depending on the effect you want. Both work just fine across
browser-land, but the first looks best when your layout is subjected to
font-resizing, I think. Fine-tune to taste :-)
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] problem with 3 column layout
Liz wrote: Hello, all, I hope someone can help. I posted this before but forgot to add the link. Then I posted again with the link but my email came back so I'm trying again. link http://www.liztestsite.com/testsite/test2.html I gave up on the In Search of the Holy Grail layout because the anchor links didn't work in FireFox. Now I'm trying the Skidoo Too 3 column layout. The anchor links work fine but I am having other problems. I hope someone can help. Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the In Search of the Holy Grail menu, and the center column was first there also, my flyout did work there. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Thanks, Liz Hi Liz, Here something about Problem 1: You can give a z-index to the #leftColumn, and ... [1] testpage http://home.tiscali.nl/developerscorner/css-discuss/test-liztest2.html :-) Greetings, francky [1] Had to satisfy the html-validator first, some strange things happening in the html... ;-) http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.liztestsite.com%2Ftestsite%2Ftest2.html http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.liztestsite.com%2Ftestsite%2Ftest2.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/
Re: [css-d] problem with 3 column layout
Liz wrote: link http://www.liztestsite.com/testsite/test2.html Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Easiest solution, change 'z-index' on #middleColumn to 'z-index: 0;'. Problem 2) I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. You're experiencing the effect of 'collapsing margins'[1]. Try replacing top and bottom borders with 1px paddings, to avoid margins on elements inside the containers from collapsing through their top and bottom edges. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins -- 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] help with float positioning problem
This is probably really simple, but I can't seem to figure it out today. I have content and navigation divs, floated left and right, respectively. The navigation should be at the upper right, under the header banner. Everything displays as it should in FF, but in IE, the navigation is at the lower right. page: http://www.ambientglow.com/garage/wakeup/web/about.html css: http://www.ambientglow.com/garage/wakeup/web/inside.css Any helpful ideas? Thanks, Peg __ 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] problem with 3 column layout
On 7/21/06 3:00 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Liz wrote: link http://www.liztestsite.com/testsite/test2.html Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Easiest solution, change 'z-index' on #middleColumn to 'z-index: 0;'. Problem 2) I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. You're experiencing the effect of 'collapsing margins'[1]. Try replacing top and bottom borders with 1px paddings, to avoid margins on elements inside the containers from collapsing through their top and bottom edges. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins That fixed both problems! Thanks so much Regards, Liz __ 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] problem with 3 column layout
On 7/21/06 3:03 PM, francky [EMAIL PROTECTED] wrote: Liz wrote: Hello, all, I hope someone can help. I posted this before but forgot to add the link. Then I posted again with the link but my email came back so I'm trying again. link http://www.liztestsite.com/testsite/test2.html I gave up on the In Search of the Holy Grail layout because the anchor links didn't work in FireFox. Now I'm trying the Skidoo Too 3 column layout. The anchor links work fine but I am having other problems. I hope someone can help. Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the In Search of the Holy Grail menu, and the center column was first there also, my flyout did work there. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Thanks, Liz Hi Liz, Here something about Problem 1: You can give a z-index to the #leftColumn, and ... [1] testpage http://home.tiscali.nl/developerscorner/css-discuss/test-liztest2.html :-) Greetings, francky [1] Had to satisfy the html-validator first, some strange things happening in the html... ;-) http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.liztestsite.com%2 Ftestsite%2Ftest2.html http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.liztestsite.com% 2Ftestsite%2Ftest2.html Thank you for answering my request. I fixed it with Georg's solution. I will look into the valadation problem. There is JavaScript in the code. I don't know if I need it there or not since I copied the source code from the sample. Maybe it was supposed to go above the head tag. Regards, Liz __ 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] problem with 3 column layout
On 7/21/06 3:00 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Liz wrote: link http://www.liztestsite.com/testsite/test2.html Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Easiest solution, change 'z-index' on #middleColumn to 'z-index: 0;'. Problem 2) I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. You're experiencing the effect of 'collapsing margins'[1]. Try replacing top and bottom borders with 1px paddings, to avoid margins on elements inside the containers from collapsing through their top and bottom edges. regards Georg [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins Hi Georg, Thank you for all your help. No 1 is completely solved. No 2 - was ok until I put a logo in it. The masthead is 99 px high and so is the image. I wanted no border or space above it. When I added the 1 px padding I got a large masthead space around it. When I make the padding 0 there is no masthead padding around the logo but there is the large white space above it. Any fix? Here is the current file http://www.liztestsite.com/testsite/page1.html Regards, Liz __ 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] problem with 3 column layout
Liz wrote:
No 2 - was ok until I put a logo in it. The masthead is 99 px high
and so is the image. I wanted no border or space above it. When I
added the 1 px padding I got a large masthead space around it. When
I make the padding 0 there is no masthead padding around the logo but
there is the large white space above it. Any fix?
http://www.liztestsite.com/testsite/page1.html
Zero out the default-margins on h1...
h1 {margin: 0;}
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] problem with 3 column layout
That worked. I never would have figured that out on my own. Thank you so
much!
Liz
On 7/21/06 7:28 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Liz wrote:
No 2 - was ok until I put a logo in it. The masthead is 99 px high
and so is the image. I wanted no border or space above it. When I
added the 1 px padding I got a large masthead space around it. When
I make the padding 0 there is no masthead padding around the logo but
there is the large white space above it. Any fix?
http://www.liztestsite.com/testsite/page1.html
Zero out the default-margins on h1...
h1 {margin: 0;}
Georg
__
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] help with float positioning problem
Peggy Coats wrote: This is probably really simple, but I can't seem to figure it out today. I have content and navigation divs, floated left and right, respectively. The navigation should be at the upper right, under the header banner. Everything displays as it should in FF, but in IE, the navigation is at the lower right. page: http://www.ambientglow.com/garage/wakeup/web/about.html You have met at least a couple of IE-bugs in there :-) In #content: the /italic/ bug[1]. In #nav: a 20px padding-left on ul and a 200px width on li, makes the list 220px wide - and #nav is only 200px wide. IE/win can't overflow, so the #nav is expanded to 220px in width. Either of these two bugs makes the two floating containers run out of space - in IE only, and the result is the float-drop you're experiencing. Georg [1]http://www.positioniseverything.net/explorer/italicbug-ie.html -- 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/
