[css-d] Can margins be reduced when an H1 is directly above another heading?
I'm sorry that none of our files are for public consumption yet, so I don't have an example to show, but... All pages on our site have an H1 as the page title. We have defined H2-H5 as our four levels of subheads. A top margin is added to these headings to space them from the paragraph/content that comes before each one (a normal convention, I'm sure). The problem we run into is when a heading is the first content on the page (this is the case about 90% of the time) There is too much space between the title (H1) and the next heading (usually H2). So, is there a way through CSS to declare that margins should return to 0 for H2 in the following case: H1This is Matt's Page/H1 H2Introduction/H2 Or, do I need to create a class for these special occasions? Thanks, Matt __ 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] Can margins be reduced when an H1 is directly above another heading?
Hi Matt:
Poyner, Matt wrote:
So, is there a way through CSS to declare that margins should return to 0 for
H2 in the following case:
H1This is Matt's Page/H1
H2Introduction/H2
Or, do I need to create a class for these special occasions?
I could be wrong, but I think that this is the way to do it:
h1 + h2 { margin: 0;}
Btw, a useful cheat sheet can be found here [1]. It's where I got that
tip re: selectors off.
Thanks,
Matt
Regards,
Rahul.
[1] http://www.ilovejackdaniels.com/css/css-cheat-sheet/
--
. . . . . . . . . . . . . . . . . . . . . . . .
Rahul Gonsalves
Make PNG, not War.
. . . . . . . . . . . . . . . . . . . . . . . .
__
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] Can margins be reduced when an H1 is directly above anotherheading?
Poyner, Matt wrote: A top margin is added to these headings to space them from the paragraph/content that comes before each one (a normal convention, I'm sure). The problem we run into is when a heading is the first content on the page (this is the case about 90% of the time) There is too much space between the title (H1) and the next heading (usually H2). So, is there a way through CSS to declare that margins should return to 0 for H2 in the following case: H1This is Matt's Page/H1 H2Introduction/H2 Or, do I need to create a class for these special occasions? There is CSS to define an h2 following an h1, but it's not supported by all the browsers. A class is of course an option, but personally, I usually set all top-margins for h* and p to 0, and define only bottom margins. In your case, if you only have a problem when an h2 follows an h1, how about just setting the bottom margin (and perhaps padding) of the h1 to 0? Would it then get too close to a following paragraph if there weren't an h2? -- Els http://locusmeus.com/ http://locusoptimus.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] bottom border not visible in EI 6.2 WIN
Greetings, This page: http://crcyclists.org//nl/2006/mar-ap/p1.html will not display the bottom border in the #info DIV. It displays OK in FF 1.7 WIN CSS is contained in the header. Ideas? Thanks, -Mike __ 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] Why the gap?
I have done some searching and head scratching over this one for a
couple of days now. I have the following;
/* header */
#header {
position: fixed;
height: auto;
}
#header div.left {
background-image:
url(../grfx/1280_header_left_anim_out_only.gif);
background-repeat: no-repeat;
float: left;
width: 270px;
height: 165px;
}
#header div.right {
background-image: url(../grfx/1280_header_right.gif);
background-repeat: no-repeat;
height: 165px;
margin-left 270px;
padding: 0;
}
/* hide from other browsers \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */
Now, this probably demonstrates my amateur status with CSS, even though
I have been using it for several years now, I am no guru.
Anyhow, without the hide from other browsers section in IE there is a
3px gap between the left and the right image. (I have the images as
backgrounds because other items will be placed in front of them). In
Mozilla the right image doesn't show up at all. Am I doing something
terribly wrong where lining up two images is concerned? I would like to
do it without tables and I would like it to look fine in a majority of
browsersis that asking too much?
I feel like such an id10t at this point.
__
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] head scratcher in IE (what else?)
Hi all, Pages are here: http://www.readshotel.com/index.php/hotel/about/en/ http://www.readshotel.com/index.php/hotel/about/es/ http://www.readshotel.com/index.php/hotel/about/de/ CSS is here (significant rules are the 4 rules at the very bottom): http://www.readshotel.com/index.php?css=main/core.css Does anyone have any suggestions regarding the following problem: the (unsightly but client wants it that way) red banner should change language when you switch the language in the upper right corner (en - es - de). It's just a different background image for each language. This happens correctly in every browser except IE6 which only displays this background image on the english page but refuses to do so on the spanish and german page... I'm at a total loss here, any takers ?? Cheers, erwin __ 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 the gap?
[EMAIL PROTECTED] wrote: I have done some searching and head scratching over this one for a couple of days now. I have the following; [snip code] Anyhow, without the hide from other browsers section in IE there is a 3px gap between the left and the right image. (I have the images as backgrounds because other items will be placed in front of them). In Mozilla the right image doesn't show up at all. Am I doing something terribly wrong where lining up two images is concerned? I would like to do it without tables and I would like it to look fine in a majority of browsersis that asking too much? Difficult to tell with nothing more than the CSS code. How about a url, so that we can see the HTML code as well as the circumstances? -- Els http://locusmeus.com/ http://locusoptimus.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] head scratcher in IE (what else?)
Erwin Heiser wrote:
http://www.readshotel.com/index.php/hotel/about/en/
http://www.readshotel.com/index.php/hotel/about/es/
http://www.readshotel.com/index.php/hotel/about/de/
http://www.readshotel.com/index.php?css=main/core.css
Does anyone have any suggestions regarding the following problem: the
(unsightly but client wants it that way) red banner should change language
when you switch the language in the upper right corner (en - es - de). It's
just a different background image for each language.
This happens correctly in every browser except IE6 which only displays this
background image on the english page but refuses to do so on the spanish and
german page...
#comm.en {
background-image: ...
}
#comm.es {
background-image: ...
}
#comm.de {
background-image: ...
}
div id=comm class=es/div
IE Win will look into the first rule of #id.class only, but if the class
does not match, IE will refuse to look further in other #id.class rules.
It's called the the multiple #id.class bug
http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
http://sonspring.com/index.php?id=102
Ingo
--
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/
Re: [css-d] Why the gap?
[snip] Difficult to tell with nothing more than the CSS code. How about a url, so that we can see the HTML code as well as the circumstances? [/snip] I will try to post it in a bit. The HTML is... div id=header div class=left/div div class=right/div /div!-- /header -- __ 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] bottom border not visible in EI 6.2 WIN
Mike: WV Mike wrote: At 10:11 AM 3/3/2006 , Rahul Gonsalves wrote: Please do validate your pages before posting them on CSS-D. It will not only most likely fix the problem, but is also a good practice to do so. Validation does not always help me. Will you? Gladly. However, I would strongly suggest that you validate your pages prior to posting them. It often picks up the small typos that all of us make - like your leaving out the semi-colon at the end of the last line of every style rule; or the fact that you were using an unrecognised doctype. This post explains the joys of validation in much greater detail [1] *. The HTML code was mostly correct, apart from the lack of a recognised doctype, and a bunch of small issues - the use of an ID twice, etc, etc. I would like to help you out as much as my skill will allow me to; however, I am restricted by my experience. I do see that adding a height to the #info does cause the border to display, but messes the rest of it up. A hasLayout bug? I wouldn't even know where to begin there. Going back to the original issue of validation, I would like to stress that validating ensures that there are no obvious errors on the page. I would not like to waste this lists time, and I would presume that no one else would either. So; in future, do validate - by doing so you show that you are willing to put time into your page and you give the list-members a reason to do so as well. -Mike Regards, Rahul. [1] http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you * In the post, Mark mentions that a guru-designer tells a newbie to validate. I would not presume any such competence; I am a complete newbie here. PS: I am about to go on a 120-km cycling trip tomorrow! Coincidence? ;-). The rides sound wonderful though! -- . . . . . . . . . . . . . . . . . . . . . . . . Rahul Gonsalves Make PNG, not War. . . . . . . . . . . . . . . . . . . . . . . . . __ 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 the gap?
[EMAIL PROTECTED] wrote:
http://www.sigmaphinothing.org/template.html
Is the one with the
/* hide from other browsers \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */
Which works in IE.
http://www.sigmaphinothing.org/template2.html has that section
removed from its CSS and you can see a 3px gap between images.
Look at this in almost any other browser and you do not see
the right image at all.
To make it appear in other browsers, add a width to #header, and
put a colon in the margin-left 270px for div.right ;-)
The 3px gap is the 3px jog bug, which can be remedied either by
the way you did it, or else like so:
/* \*/
* html #header div.right{
position:relative;
left:-3px;
}
/* */
--
Els
http://locusmeus.com/
http://locusoptimus.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] Why the gap?
[snip]
To make it appear in other browsers, add a width to #header, and
put a colon in the margin-left 270px for div.right ;-)
The 3px gap is the 3px jog bug, which can be remedied either by
the way you did it, or else like so:
/* \*/
* html #header div.right{
position:relative;
left:-3px;
}
[/snip]
Thanks for the insight. These fixes do not work in Mozilla however, the
right iamge is still not visible. I'll keep hacking away.
__
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 the gap?
[snip] Thanks for the insight. These fixes do not work in Mozilla however, the right iamge is still not visible. I'll keep hacking away.[/snip] Also, these fixes do not work in Opera and there are other problems there. Crud. __ 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 the gap?
[snip] Which Mozilla is that? It does work in mine (1.7.5 for Linux), as well as in Firebird (pre-FF), *and* in Opera (8.5) on Windows, IE6, IE7, Firefox: [/snip] Mozilla 1.5.0.1 (windows) Opera 8.52 (windows) I don't have a linux box set up with a monitor where I can check it from there. __ 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] Which browser do I design for?
The past several days have brought much frustration and leads me to the question, which browser do I design for? I have been designing web sites for over 10 years (I have a programming background) and I have been using CSS, fairly basically, for the past several years. During most of that time I was designing for web applications where I could control the browser being used. Now I am back into the public domain and checking layouts in what I consider to be the three most popular web browsers (IE, Mozilla, Opera). Of course designs are much more complex in this day and age and the advent of CSS means very good things for designers. I remember when mark-up would not render the same in all browsers (and still does not in some cases). At the risk of igniting a holy war I am curious about what others here do. __ 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] Which browser do I design for?
Morning Jblanchard wrote The past several days have brought much frustration and leads me to the question, which browser do I design for? Most on this list would agree that it is best to design / code for Fire Fox or Opera and make corrections as needed for IE Best to all Jim Nannery www.redfernenterprises.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] Why the gap?
on 3/3/2006 10:52 AM Els said the following: [EMAIL PROTECTED] wrote: Thanks for the insight. These fixes do not work in Mozilla however, the right iamge is still not visible. I'll keep hacking away. Which Mozilla is that? It does work in mine (1.7.5 for Linux), as well as in Firebird (pre-FF), *and* in Opera (8.5) on Windows, IE6, IE7, Firefox: http://here.locusmeus.com/temp/jblanchard.html It shows as intended here on FF 1.5.0.1 Win2k -- Brian Funk __ 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] bottom border not visible in EI 6.2 WIN
Thanks,
That worked.
-Mike
=
At 12:44 PM 3/3/2006 , Ingo Chao wrote:
That would be something like
#info { border-bottom: 1px solid; width: 100%}
__
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] Circumventing inheritance
I have some navigation where the last item in the navigation needs to have text in a different color. The color of the text is set in #list-menu. I've tried a variety of ways to have this last item in the navigation a different color, and I'm having no luck. I know this is an inheritance problem. My Definitive Guide to CSS isn't addressing this particular issue on pages 146-148. What am I missing? Your thoughts? Thanks in advance! http://mdh-test.com/egs_new http://mdh-test.com/egs.css -- Theresa Mesa Mesa Design House http://mesadesignhouse.com [EMAIL PROTECTED] http://market-your-small-business.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] Why the gap?
[EMAIL PROTECTED] wrote: [snip] Which Mozilla is that? It does work in mine (1.7.5 for Linux), as well as in Firebird (pre-FF), *and* in Opera (8.5) on Windows, IE6, IE7, Firefox: [/snip] Mozilla 1.5.0.1 (windows) I'm sure you mean Firefox? That's the same one I have, and it works here. Opera 8.52 (windows) So, I've now downloaded Opera 8.52 for Windows, and my example still holds. (I was using 8.5 when I first tested the working page). Can you show me your edited template that doesn't work in Opera 8.52 and Firefox 1.5.0.1? I don't have a linux box set up with a monitor where I can check it from there. I only tested Mozilla on Linux, because you said it didn't work in Mozilla, and I don't have Mozilla on this Windows box. I did test it in all my other browsers, and all work. -- Els http://locusmeus.com/ http://locusoptimus.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] Circumventing inheritance
If you give the last li an *ID* of 'environet', you can set you colours
with:
#environet a:link, #environet a:visited, #environet a:hover {
color: #FF9933;
}
as long as this is placed after your main link colour definitions. Read up
on 'specificity' on the W3C site to get a handle on this.
snip
I have some navigation where the last item in the navigation needs to have
text in a different color. The color of the text is set in #list-menu.
I've tried a variety of ways to have this last item in the navigation a
different color, and I'm having no luck. I know this is an inheritance
problem. My Definitive Guide to CSS isn't addressing this particular issue
on pages 146-148. What am I missing? Your thoughts? Thanks in advance!
http://mdh-test.com/egs_new
http://mdh-test.com/egs.css
/snip
__
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 the gap?
[snip] I'm sure you mean Firefox? That's the same one I have, and it works here. [/snip] I got it now, I hadn't upload the CSS to all of the places I was looking. *urp* The only tricky little thing is that the footer is below the scrollbar on FF when the browser is not maxed. It is OK in Opera and IE. Thanks for all of your help! __ 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 the gap?
[EMAIL PROTECTED] wrote:
http://www.sigmaphinothing.org/template.html
Is the one with the
/* hide from other browsers \*/
* html .left {margin-right: -3px;}
* html .right {margin-left: 0;}
/* end hide */
Which works in IE.
http://www.sigmaphinothing.org/template2.html has
that section removed from its CSS and you can see a 3px gap between
images. Look at this in almost any other browser and you do not see the
right image at all.
Another difference between the two versions is the missing width:100% in
#header in template2.
#header {
position: fixed;
height: auto;
}
#header div.left {
background-image: ...;
float: left;
width: 270px;
height: 165px;
}
#header div.right {
background-image: ...;
height: 165px;
margin-left 270px;
padding: 0;
}
div.left has a width, div.right has not.
It's correct to let .right collapse when #header itself has no width.
Ingo
--
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/
Re: [css-d] Gmail's CSS for expanding subject lines
Sorry for the delay on this. Here is a URL you can look at: http://grandmail.youngbloods.org/ It only looks right in Firefox. This is for a class project that is run inside of a client-side browser of our choosing, so we haven't bothered to code for more than one browser. You can see that on the read messages screen the text on the left gets covered up if you shrink your browser width. On 2/24/06, Andrew Close [EMAIL PROTECTED] wrote: On 2/23/06, Carl Youngblood [EMAIL PROTECTED] wrote: Success! I needed to use white-space: nowrap Carl, do you have an example that you could show us? thanks! __ 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 image float in Ff
Hello Listers I am having a small problem with this page. http://www.frost-genealogy.co.uk/ftree/index.html The photo is floated to the left, and the div in which it sits inside is set to 100% height, however when viewed in 800 * 600, the div does not expand when you scroll down. Anybody got any ideas what could be causing this? It works fine in IE. Steve __ 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] (no subject)
Got a question, hopefully someone can help. I have an app using XHTML, CSS and
tableless design. The page I am having fits with (meaning it works
differently in IE/FF/NN/Moz) has 3 columns of data in it, and is broken into
sections, and it looks like this (hope the wrap in email does not kill this!)
Each item in the column is in it's own div, with the width set to XX pixels and
set to float:left. Since only 3 columns will fit in the space, the 4th item
breaks to the next row ad infinitum...so when I am outputting the data I am
just outputting 1,2,3,4,5,6,7... and css handles the layout for me.
SECTION 1
COLUMN1 COLUMN2 COLUMN3
ITEM 1ITEM 2ITEM 3
ITEM 4ITEM 5ITEM 6
ITEM 7ITEM 8ITEM 9
ITEM 10 ITEM 11 ITEM 12
SECTION 2
ITEM 1ITEM 2ITEM 3
ITEM 4ITEM 5ITEM 6
ITEM 7ITEM 8ITEM 9
ITEM 10 ITEM 11 ITEM 12
SECTION 3
ITEM 1ITEM 2ITEM 3
ITEM 4ITEM 5ITEM 6
ITEM 7ITEM 8ITEM 9
ITEM 10 ITEM 11 ITEM 12
Everything works just fine, except in IE6/Win...?The section headers do not
display... BUT, if you scroll up/down, each header that disappears off screen
and then returns will display, or if you wipe your cursor on the screen, they
display, and will kind of stay...but once you mouse over the nav menu (not in
the code) it disappears again...
If anyone has any ideas, I am open to try them...Code is below so you to can
experiment and experience the frustration...grin
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html
head
meta http-equiv=Content-Type content=text/html; charset=iso-859-1
titleUntitled Document/title
style type=text/css
body {background-color: white;margin: 1px 1px 1px 1px;}
#main {font: .75em Verdana, Geneva, Arial, Helvetica, sans-serif;width: 750px;}
#content {background: #F6F6F6;margin-bottom:
10px;margin-left:130px;margin-right: 3px;border: 1px solid
#FFCF6F;padding:5px;font-size: 1em;overflow:
visible;}
.outby3 {padding: 3px;float: left;width:
190px;border-left-width:1px;border-left-style: solid;border-left-color:
#00;display: inline;} #content
div.SecTitleHd,h1 {font-weight: bold;font-size:1.25em;color:
#0033CC;text-align: center;border-bottom: medium solid #0033CC;padding-bottom:
4pt;margin-bottom: 8pt;padding-top:16pt;display: block;}
/style
/head
body
div id=main
div id=content
div class=SecTitleHda name=c4User group 1/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
1/a/div
div class=outby3a href=xxx.cfm?id=4Subscriber
2/a/div
div class=outby3a href=xxx.cfm?id=5Subscriber
3/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
4/a/div
div class=outby3a href=xxx.cfm?id=4Subscriber
5/a/div
div class=outby3a href=xxx.cfm?id=5Subscriber
6/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
7/a/div
div class=outby3a href=xxx.cfm?id=4Subscriber
8/a/div
div class=outby3a href=xxx.cfm?id=5Subscriber
9/a/div
div class=SecTitleHd style=clear:left;a name=c4User
group 2/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
1/a/div
div class=outby3a href=xxx.cfm?id=4Subscriber
2/a/div
div class=outby3a href=xxx.cfm?id=5Subscriber
3/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
4/a/div
div class=outby3a href=xxx.cfm?id=4Subscriber
5/a/div
div class=outby3a href=xxx.cfm?id=5Subscriber
6/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
7/a/div
div class=SecTitleHd style=clear:left;a name=c4User
group 3/a/div
div class=outby3a href=xxx.cfm?id=3Subscriber
1/a/div
div class=outby3a href=xxx.cfm?id=4Subscriber
2/a/div
div class=outby3a href=xxx.cfm?id=5Subscriber
3/a/div
p style=clear:both;nbsp;/p
/div
/div
/body
/html
TIA
MikeG
__
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] (no subject)
Hi Mike, Everything works just fine, except in IE6/Win...?The section headers do not display... BUT, if you scroll up/down, each header that disappears off screen and then returns will display, or if you wipe your cursor on the screen, they display, and will kind of stay...but once you mouse over the nav menu (not in the code) it disappears again... I believe this is the IE peekaboo bug: http://www.positioniseverything.net/explorer/peekaboo.html HTH, Prabhath -- http://nidahas.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] Full height and fixed width col issue
I'm still having trouble with understanding full width/height layouts in
CSS. Could someone have a look below at my sample and help me clear up
my understanding.
Thanks.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Alec A.
Lazarescu
Sent: Thursday, March 02, 2006 3:01 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Full height and fixed width col issue
Thanks for your help. I wish I could tell you why there's 100% mania,
but I've long given up trying to get in the mind of the designers that
foist this on me. :)
The point about 100% equalling the viewport and staying the same whether
it fits or not made the result make sense. Coming from a table world,
100% takes up the rest of available space there and not the viewport all
the time.
I've modified the code to move all the main ID code inline (the inline
floats left are just there as placeholders for internal content). This
prevents oddities, but puts me back at square one when it comes to
getting 100% stretch working properly
I couldn't get min-height to do anything for me either in FireFox or in
IE with one of the hacks for it
(http://www.dustindiaz.com/min-height-fast-hack/). The height of the
left ID didn't change at all. I need the left area grey to the bottom
so I know it's taking up the full 100%. I believe I need the blue and
green content and content footer stretched to max width (100%-165
somehow) and the content to be stretched to 100%-header height-footer
height. Otherwise I won't have background setup properly and I also
won't be able to center items within the content area if they are taking
the minimum width and height possible.
Thanks for any light you can help shine on this.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; head titleUntitled
Page/title style type=text/css
html,body {
margin: 0px;
}
#header {background-color: red}
#left {background-color: gray; width: 165px; float: left; margin: 0px;
padding: 0px; }
#content {background-color: blue; float: left;}
#footer {background-color: green; clear: both}
#leftnavcontainer { float: left; }
DIV.clear
{
clear: both;
float: none;
height: 0px;
width: 0px; /* needed to prevent overflow expand on IFRAME shim hack
of RadMenu */
overflow: hidden;
}
/style
/head
body
div id=headerHeader/div
div id=left
div id=leftnavcontainer
div style=float: left;
Some stuff in left
/div
div class=clear
/div
/div
div class=clear
/div
/div
div id=content
div style=float: left
Content/div
div id=footer
Content only footer/div
/div
div class=clear
/div
/body
/html
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Zoe M.
Gillenwater
Sent: Wednesday, March 01, 2006 4:02 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Full height and fixed width col issue
Hi Alec,
Alec A. Lazarescu wrote:
I'd like a header, a left bar with a fixed width of 165 and 100%
height, a content area with width the remaining window width 100% and
height 100% and a content footer (only on bottom of content, not the
whole bottom with the left bar).
I have a question for everyone wanting to know about creating 100% high
pages: why? Where has this fad come from? I'm just curious about the
100% high rabidness lately. :-)
With height 100% I'm having a problem with a vertical scrollbar
appearing for no reason
Oh, it's there for a reason. :-) You just don't understand the reason
yet.
and with width 100% on the content, it's going to the next line instead
of using 100%-165 to take up the full remaining space.
You haven't told anything to be 100%-165px.
I've added notes about a few of lines of your CSS and HTML that you are
not fully understanding. Hopefully this will get you on your way to a
100% high page.
html,body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
The height: 100% means make the html and body elements as high as the
viewport and never any higher/longer. You probably want a minimum
height of 100% instead.
#left {background-color: gray; width: 165px;}
If you want #left to be on the same line as #content, you need to tell
it to. Add float: left.
#content {background-color: blue; width: 100%}
You're telling #content to take up the whole viewport width and leave no
room for #left, so it has to sit on a line below #left, even once #left
is floated. Get rid of the width and add margin-left: 165px.
div id=left style=float: left; margin: 0px; padding: 0px;
height: 100%
Oh wait, you are floating #left. Why are you using inline styles, and
even worse, splitting styles between inline and embedded? Keep them all
embedded while
Re: [css-d] Problem with image float in Ff
On 03/03/06, Steve Frost [EMAIL PROTECTED] wrote:
The photo is floated to the left, and the div in which it sits inside is
set to 100% height, however when viewed in 800 * 600, the div does not
expand when you scroll down.
Anybody got any ideas what could be causing this? It works fine in IE.
That's probably because IE is getting it wrong :) You need to tell
standards compliant browsers that the need to enclose any floated
content. The easiest method I have found is to give the div a defined
width, and set overflow to hidden, eg:
div {
width: 100%;
overflow: hidden;
}
More on the subject at http://www.quirksmode.org/css/clearing.html
Cheers,
--
Olly
http://thinkdrastic.net/
__
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] Disappearing headers when building columns with float
Thanks to Olly's timely response to another similar post [Problem with image
float in Ff] as well as Prabhath pointing me to the Peekaboo bug, the solution
was pretty simple and is detailed below.
Added the following in the css file right after declaring #content
#content div {
width: 580px;
}
Then changed .outby3 to #content div.outby3
And finally changed div.SecTitleHd,h1 to #content div.SecTitleHd,h1
No more disappearing text.
Thanks to all for their help!
MikeG
__
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 Nav LIs that work in IE6, not in FF
I'm new to the CSS game, fresh from a table lifetime. I hate tables, am in love with CSS... but (you knew there was a but)... I have a new site design I'm working on at http://clwill.com/new/ The page is index.html, the CSS is in clwill.css. Obviously this is just an instance of my template page that I'm working on, I'll be all over the actual pages once I get this one nailed. (And yes, clearly some more work is to be done on centering, hovers, etc.) The problem is with the nav items that are supposed to show up in the dark banner above the gold bar. And just for a change of life, and to prove that weird things still happen in this world: It works on IE6, but NOT on FF. I know this is something silly and I'm just naïve. Can anyone enlighten me? Thanks, Chris __ 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] More issues...
http://mdh-test.com/egs_new http://mdh-test.com/egs.css IE6 looks fabulous. FF on PC and Mac, Opera, Safari: There's a space between the topgraphic and the content div. If I change the top margin to close it up, I'm afraid the background is going to go up under or over the topgraphic. Opera: The links are not changing color. The last link in the nav is supposed to be a special color. Nada. Works in the other browsers. IE5.2.3/Mac - there's no background at all. Yes, I know we're not supposed to use IE Mac anymore, but hey, there are still people using OS 9.x! Thank you in advance for your advice. I will be continuing to work it out on my own, too. Why can't all the browsers just do things the same so I don't have to spend an hour or so figuring this out??? Rhetorical question Theresa __ 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 image float in Ff
If I add overflow: hidden to the containing div it does resolve the
issue, however, it replaces it with another problem, now it does not
take the image in to account when applying vertical scrollbars.
I have uploaded the modified css so you can see the error.
Steve
Olly Hodgson wrote:
That's probably because IE is getting it wrong :) You need to tell
standards compliant browsers that the need to enclose any floated
content. The easiest method I have found is to give the div a defined
width, and set overflow to hidden, eg:
div {
width: 100%;
overflow: hidden;
}
More on the subject at http://www.quirksmode.org/css/clearing.html
Steve Frost wrote:
The photo is floated to the left, and the div in which it sits inside is
set to 100% height, however when viewed in 800 * 600, the div does not
expand when you scroll down.
Anybody got any ideas what could be causing this? It works fine in IE.
That's probably because IE is getting it wrong :) You need to tell
standards compliant browsers that the need to enclose any floated
content. The easiest method I have found is to give the div a defined
width, and set overflow to hidden, eg:
div {
width: 100%;
overflow: hidden;
}
More on the subject at http://www.quirksmode.org/css/clearing.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] Gmail's CSS for expanding subject lines
On 3/3/06, Carl Youngblood [EMAIL PROTECTED] wrote: Sorry for the delay on this. Here is a URL you can look at: http://grandmail.youngbloods.org/ It only looks right in Firefox. This is for a class project that is run inside of a client-side browser of our choosing, so we haven't bothered to code for more than one browser. You can see that on the read messages screen the text on the left gets covered up if you shrink your browser width. This is great but I don't see how it is similar to Gmail? It's similar to techniques I've seen elsewhere but not on Gmail, or is there something in Gmail I haven't seen? -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.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] Why the gap?
[EMAIL PROTECTED] wrote:
The only tricky little thing is that the footer is below the scrollbar
on FF when the browser is not maxed. It is OK in Opera and IE.
Hi,
Another strange thing: at my Win98SE every window size of FF1.07 does
display the footer o.k., just above the bottom scrollbar (in all 3
versions).
Besides, I found:
(a) in FF1.07 there *is* a horizontal scrollbar, which should not be
there (can move about 2-5px left-right, when the window is more then
ca.10px smaller then the available screenwidth).
(b) IE6 doesn't have the scrollbar, but has a white gap of 3px between
the right side of the header-img and the right border of the screen.
(c) Opera8.01 doesn't have the scrollbar, nor the white gap top right at
1024x768 resolution. At window-resizing or 800x600: a scrollbar, and at
first appearance the footer is halfway under the scrollbar; refresh is
giving the right position(!).
I think the scrollbar is due to the footer properties: 99% width + 10px
padding right. Full size window: this combination of relative and
absolute width is o.k. (at 1024x768 resolution!). Smaller window, or
lower resolution: the 10px padding is more than 1%, and scrollbar added.
Easy solved:
#footer { padding: 2px 1% 10px 0; }
For IE we have to compensate the shifting left: -3px with the same 3px
extra on the right side:
/* \*/
* html #header div.right{
position:relative;
left:-3px;
margin-right: -3px;
}
/* */
Together it's giving this testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-pocket.htm.
Greetings,
francky
ps:
Q: why does the fullsize header img (1280x1024) give such a strange
association to me? ;-)
A: The ugliest part of your body / It's not ... your nose / It's
not ... your toes / It's ... your mind (Frank Zappa)
__
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] More issues...
Theresa Mesa wrote: http://mdh-test.com/egs_new http://mdh-test.com/egs.css IE6 looks fabulous. [...] Opera: The links are not changing color. The last link in the nav is supposed to be a special color. Nada. Works in the other browsers. In Linux your links are exactly the same in Konqueror, FF, Moz, Seamonkey, and Opera/8.51-- all yellow except for the last one which is orange. [...] Theresa ~davidLaakso __ 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] Trouble implementing CSS Layout design
Hi, Im hoping someone or some people can help me on my first try of a CSS Layout. What I am trying to re-create in CSS Layouts is an Image I originally drew here: http://www.ajglover.net/CSS/Image.jpg So far what I have come up with is this: http://www.ajglover.net/CSS/Temp.html There is three problems here... 1) The image backgrounds of #MiddleLeft or #MiddleRight do not repeat, or even show up (they should repeat for the height of of #RowMiddle - which should be resized by setting the height of #StickyNote). 2) How do I set the gradient as a background and scale it, while still having text on top (that can be editable)? 3) The display is *completely* broken in IE. Thanks! Andrew. __ 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] More issues...
Yeah, I changed that to white. The links are supposed to be yellow only if they've been visited. That's acting funky, so I changed the colors. Any thoughts on the space between the top graphic and the content? On 3/3/06 2:59 PM, ~davidLaakso [EMAIL PROTECTED] wrote: In Linux your links are exactly the same in Konqueror, FF, Moz, Seamonkey, and Opera/8.51-- all yellow except for the last one which is orange. [...] Theresa ~davidLaakso __ 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] Trouble implementing CSS Layout design
I can't help but think that you are making this overly complicated. Wouldn't this be simpler? div id=box div id=top/div div id=content ptext text text/p /div div id=bottom/div /div then style it so that #top has the top of the box image set as background #content has the gradient as a vertical background image, repeat-x, and then the yellow as a background colour. #bottom has the bottom of the box image set as background. Steve Andrew Glover wrote: Hi, Im hoping someone or some people can help me on my first try of a CSS Layout. What I am trying to re-create in CSS Layouts is an Image I originally drew here: http://www.ajglover.net/CSS/Image.jpg So far what I have come up with is this: http://www.ajglover.net/CSS/Temp.html There is three problems here... 1) The image backgrounds of #MiddleLeft or #MiddleRight do not repeat, or even show up (they should repeat for the height of of #RowMiddle - which should be resized by setting the height of #StickyNote). 2) How do I set the gradient as a background and scale it, while still having text on top (that can be editable)? 3) The display is *completely* broken in IE. Thanks! Andrew. __ 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] page check :: ~dL
~davidLaakso wrote: Rigorous cross-browser, screen resolution, testing appreciated. Styles for this test page are hidden from Mac/IE5.2 CSS embedded. Famous last words: it looks ok on my end, sort of... http://www.dlaakso.com/chelsea.html Thanks, ~davidLaakso Many thanks to Els, Rahul Gonsalves, and Tedd Sperling(off-list) for the helful comments and suggestions. Appreciated! ~davidLaakso __ 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] Trouble implementing CSS Layout design
Hi Steve, If done like that though, wont the 4 corners also scale as the size is increased? I want the 4 corners to be the same size where the whole thing is 100 x 100, or 500 x 500. Andrew. -Original Message- From: Steve Frost [mailto:[EMAIL PROTECTED] Sent: Friday, March 03, 2006 4:11 PM To: Andrew Glover; css-d@lists.css-discuss.org Subject: Re: [css-d] Trouble implementing CSS Layout design I can't help but think that you are making this overly complicated. Wouldn't this be simpler? div id=box div id=top/div div id=content ptext text text/p /div div id=bottom/div /div then style it so that #top has the top of the box image set as background #content has the gradient as a vertical background image, repeat-x, and then the yellow as a background colour. #bottom has the bottom of the box image set as background. Steve Andrew Glover wrote: Hi, Im hoping someone or some people can help me on my first try of a CSS Layout. What I am trying to re-create in CSS Layouts is an Image I originally drew here: http://www.ajglover.net/CSS/Image.jpg So far what I have come up with is this: http://www.ajglover.net/CSS/Temp.html There is three problems here... 1) The image backgrounds of #MiddleLeft or #MiddleRight do not repeat, or even show up (they should repeat for the height of of #RowMiddle - which should be resized by setting the height of #StickyNote). 2) How do I set the gradient as a background and scale it, while still having text on top (that can be editable)? 3) The display is *completely* broken in IE. Thanks! Andrew. __ 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] More issues...
Theresa Mesa wrote: Yeah, I changed that to white. The links are supposed to be yellow only if they've been visited. That's acting funky, so I changed the colors. Any thoughts on the space between the top graphic and the content? The space looks the same to me in Linux Opera/8.51 as it does in the Gecko's listed below. Opera/8.52 is the latest stable version, I believe. What version are you using? Opera users tend to be fanatics about running the latest versions... On 3/3/06 2:59 PM, ~davidLaakso [EMAIL PROTECTED] wrote: In Linux your links are exactly the same in Konqueror, FF, Moz, Seamonkey, and Opera/8.51-- all yellow except for the last one which is orange. [...] Theresa ~davidLaakso Regards, ~davidLaakso __ 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] More issues...
Well, I pulled the topgraphic and the bottom part together in the same image. That's the background of the wrapper. Now I can just concentrate on futzing with the container so the the whole background image shows at any given time. On 3/3/06 3:21 PM, ~davidLaakso [EMAIL PROTECTED] wrote: Theresa Mesa wrote: Yeah, I changed that to white. The links are supposed to be yellow only if they've been visited. That's acting funky, so I changed the colors. Any thoughts on the space between the top graphic and the content? __ 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] Trouble implementing CSS Layout design
You would be able to scale vertically but not horizontally. Steve Andrew Glover wrote: Hi Steve, If done like that though, wont the 4 corners also scale as the size is increased? I want the 4 corners to be the same size where the whole thing is 100 x 100, or 500 x 500. Andrew. -Original Message- From: Steve Frost [mailto:[EMAIL PROTECTED] Sent: Friday, March 03, 2006 4:11 PM To: Andrew Glover; css-d@lists.css-discuss.org Subject: Re: [css-d] Trouble implementing CSS Layout design I can't help but think that you are making this overly complicated. Wouldn't this be simpler? div id=box div id=top/div div id=content ptext text text/p /div div id=bottom/div /div then style it so that #top has the top of the box image set as background #content has the gradient as a vertical background image, repeat-x, and then the yellow as a background colour. #bottom has the bottom of the box image set as background. Steve __ 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] Trouble implementing CSS Layout design
Which wouldn't solve my problems :) -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Steve Frost Sent: Friday, March 03, 2006 4:53 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Trouble implementing CSS Layout design You would be able to scale vertically but not horizontally. Steve Andrew Glover wrote: Hi Steve, If done like that though, wont the 4 corners also scale as the size is increased? I want the 4 corners to be the same size where the whole thing is 100 x 100, or 500 x 500. Andrew. -Original Message- From: Steve Frost [mailto:[EMAIL PROTECTED] Sent: Friday, March 03, 2006 4:11 PM To: Andrew Glover; css-d@lists.css-discuss.org Subject: Re: [css-d] Trouble implementing CSS Layout design I can't help but think that you are making this overly complicated. Wouldn't this be simpler? div id=box div id=top/div div id=content ptext text text/p /div div id=bottom/div /div then style it so that #top has the top of the box image set as background #content has the gradient as a vertical background image, repeat-x, and then the yellow as a background colour. #bottom has the bottom of the box image set as background. Steve __ 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 image float in Ff
Steve Frost wrote:
http://www.frost-genealogy.co.uk/ftree/index.html
The photo is floated to the left, and the div in which it sits inside
is set to 100% height, however when viewed in 800 * 600, the div
does not expand when you scroll down.
Anybody got any ideas what could be causing this? It works fine in
IE.
When you define height to be 100% (of window), than that's what any
reasonably good browser will give you. If window is too small - well -
you've asked for it :-)
IE isn't reasonably good, so it will ignore such height-restrictions.
1: get rid of...
#maincol {height: 95%; overflow: hidden;}
It does what it says - hides the overflow on set 'height: 95%', and that
is not what you want.
2: add...
#container, #container2 {display: table;}
...that'll make those containers expand beyond 'height: 100%;' when
window is too small (or content is too large) and contain the float.
CSS tables acts visually like HTML tables, so they expand by default.
3: delete 'padding' on #container2, and set a suitable padding/margin on
#maincol. Otherwise CSS2.1 compliant browsers may not render as you want.
#maincol {padding: 10px 25px 10px 10px;}
...seems to work fine.
No problems in Opera and Firefox at my end, and IE6 is playing along
just fine too.
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] Trouble implementing CSS Layout design
Im hoping someone or some people can help me on my first try of a CSS Layout. What I am trying to re-create in CSS Layouts is an Image I originally drew here: http://www.ajglover.net/CSS/Image.jpg So far what I have come up with is this: http://www.ajglover.net/CSS/Temp.html There is three problems here... 1) The image backgrounds of #MiddleLeft or #MiddleRight do not repeat, or even show up (they should repeat for the height of of #RowMiddle - which should be resized by setting the height of #StickyNote). 2) How do I set the gradient as a background and scale it, while still having text on top (that can be editable)? 3) The display is *completely* broken in IE. Thanks! Andrew. It's very simple, search in=Googlecss rounded corners/search -- Cem Meric | http://www.kalkadoon.net/ Kalkadoon Corporate Solutions __ 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] Gmail's CSS for expanding subject lines
Well, Gmail has a feature where the subject lines in the email list don't wrap but just flow underneath the other columns in the list if they are too long. It's not exactly the same but similar. I wish I knew exactly how they were doing it, because I think it's different from what I did. On 3/3/06, Christian Montoya [EMAIL PROTECTED] wrote: This is great but I don't see how it is similar to Gmail? It's similar to techniques I've seen elsewhere but not on Gmail, or is there something in Gmail I haven't seen? __ 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 check :: ~dL
Don - HtmlFixIt.com wrote: ~davidLaakso wrote: ~davidLaakso wrote: Famous last words: it looks ok on my end, sort of... http://www.dlaakso.com/chelsea.html Thanks, ~davidLaakso My take: Too much vertical scrolling required ... hard to therefore get the proper experience. [...] In my page view the i next to the l in oils looks bad. The i tips right and the l tips left and they nearly run into each other. That may be particular to my machine at the font/font size or something, but they don't play nice together. Don Thank you for your reply. I will consider your comments. Regards, ~davidLaakso __ 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] Trouble implementing CSS Layout design
Andrew Glover wrote: What I am trying to re-create in CSS Layouts is an Image I originally drew here: http://www.ajglover.net/CSS/Image.jpg So far what I have come up with is this: http://www.ajglover.net/CSS/Temp.html Andrew. Some nice stuff from a frequent contributer to css-d that may give you some ideas: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Regards, ~davidLaakso __ 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 right column overlap when main contains uncompressible table
Carl Youngblood wrote:
http://constructioncapitalsource.com/example.html
The main column contains a table that is so wide that it can't be
compressed further. What I want the right column to do in this case
is hug the right-hand side of the main column but not overlap it,
causing the browser to have horizontal scrollbars in order to see the
full horizontal extent of the page, but instead, the right column is
getting superimposed on top of the main column. Does anyone have
any suggestions on how I can fix this?
Start out a little simpler. You have styled a lot of contradictions in
there, so although it may work behind the scene in some browsers, the
visual effects will be a mess.
1: don't use 'overflow: hidden;' when you want something to show up.
2: don't set 'height: 100%' on elements that have nothing to calculate
that height against.
This will work by adding a scroll to 'maincol'...
#container{border-left:1px solid #aaa;border-right:1px solid #aaa;
background:#FFFCF7 url('paper.png') repeat-y top left;}
#container .column {}
#maincol{float:left;width:70%; overflow: auto; overflow-y: visible;}
#maincol div{float:left; padding:0 1em 0 1em}
#rightcol{float:right;width:29.5%; border-left:1px dashed #ddd}
#rightcol div{padding:0 1em 0 1em}
...and is tested in Firefox 1.5.0.1, Opera 9tp2 and IE6.
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] Help with Nav LIs that work in IE6, not in FF
Chris Williams wrote:
I have a new site design I'm working on at http://clwill.com/new/ The page
is index.html, the CSS is in clwill.css. Obviously this is just an instance
of my template page that I'm working on, I'll be all over the actual pages
once I get this one nailed. (And yes, clearly some more work is to be done
on centering, hovers, etc.)
The problem is with the nav items that are supposed to show up in the dark
banner above the gold bar. And just for a change of life, and to prove that
weird things still happen in this world: It works on IE6, but NOT on FF.
I could think of a few ways of better doing what Chris wanted (such as
position:relative or position:absolute) and have emailed off-list, but
wasn't quite sure why (despite some syntax anomalies) the negative top
margin on the #nav-div wasn't working. After some experimentation, and
the odd test page I discovered that in FF, floated elements within a div
that has a negative top margin seem to always be put behind an image in
the overlapping div. Adding z-index doesn't seem to fix the problem.
In this case, making the banner image unavailable (but adding an
explicit height via CSS) proves that the menu is being positioned
correctly, but is not visible with the image in place.
Adding class=nofloat to the final LI and putting ul#nav li.nofloat
{float:none} again proves that the menu is positioned correctly - here
the final LI shows on top of the image, but the floated ones are still
not visible. Again, I couldn't get z-index to make any difference. This
shows that it is not the div with the negative margin that is being
moved behind the image but merely the floated elements within the div.
IE doesn't exhibit this behaviour, but IE is not often correct.
Is this correct browser behaviour? Is it a bug? Am I completely
misreading the situation?
Just curiosity at this stage...
Regards,
D#
__
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 right column overlap when main contains uncompressible table
http://constructioncapitalsource.com/example.html
Forgot (it's really late at my end) :-)
You should also add...
#container{display: table; height: 100%;}
...to keep expansion working on that element. The good browsers use
'display: table' which means 'expand with content' in this context.
IE6 doesn't understand that, but will misinterpret and use 'height:
100%' - which in this case doesn't matter to the good browsers since
'height: 100%' means 'height: auto', and 'display: table' will in any
case cause 'height' to be redefined to mean 'min-height'.
All in all a nice little standard-solution... ;-)
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] building page with 100% divs
I am trying to build a page ... with little current success. Every
time I think I have it, it doesn't work.
I want this:
1. a background image for the whole page
html{
background-image: url(bgtile.gif);
background-repeat: repeat;
}
2. a body ...
body {
margin: 0px 0px 0px 0px;
border: none;
padding: 0px 0px 0px 0px;
height: 100%;
}
Will that confine my body to 100% of the view port? It seems to scroll
even though I have it specified that way.
3. an outside wrapper that has a second background image in it ...
#outside_wrapper{
background-image: url(wrapperbg.jpg);
background-repeat: repeat-y;
background-position: right top;
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
}
Problem, I cannot get this wrapperbg.jpg to go to the bottom of the
page. I have some left floated columns (after a header) and it doesn't
seem to repeat. I have tried adding a second wrapper outside of that
one superwrapper and then tried floating the outside wrapper inside of
that for example ... doesn't work. I have tired putting
div class=clear: both/div!-- clearboth --
just before the end of each div.
Where are the good resources for getting a grip on such issues?
I don't really have a clean site to refer to at this time as this is a
project for someone else and I have their images on that site and cannot
share them.
Thank you in advance.
Don
__
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 help with a few bugs
Hopefully this all works out, it is my first time here. http://www.bloggsworld.com/OWD/LimeLite/index.html http://www.bloggsworld.com/OWD/LimeLite/lime-light.css In IE if you make the text size smaller, the content disappears! In FF, if you resize the text, the Lime-Lite header (h1) doesn't vertically center like it does in IE. Is my code generally ok? I know I have had to put div style=clear: both/div which I don't consider very good, because it doesn't have anything in. I had to use that to fix a problem in FF when you have smaller text though. Also, can anyone explain a wee bit about the css warnings I am getting? Thanks __ 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] building page with 100% divs
Don - HtmlFixIt.com wrote: I am trying to build a page ... with little current success. Every time I think I have it, it doesn't work. I decided that was a bit obtuse ... so let me see if I can build my page one step at a time and get feedback. Step one is here: http://bestfoot.com/dummy/test001.html Question: why does my blue gradient not extend from top to bottom of page? There is a margin both top and bottom. Where is that coming from? As near as I can figure it is the width of the scroll arrow at the top and bottom. If I add overflow:hidden it runs top to bottom in ff, but not in ie7 (I'll worry about ie6 later), it works in ff (the overflow isn't hidden ... there is a scroll bar) but in ie7, it chops off the extra content. Last if you go to: http://bestfoot.com/dummy/test002.html you will find that it doesn't stretch at all if there is insufficient content. Tomorrow I may try to put a couple of div's inside of that. I want the blue gradient to go top to bottom in all cases, period. I cannot put it on the body div btw because I want it to be the right edge of an 800 px wide content column. Thanks in advance. __ 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] Pure CSS implementation of Gmail layout?
I'm trying to create a gmail-like layout that works for IE5+ without using javascript (primarily because the new IE looks like it's going to throw up warnings when I embed javascript in the css, but also for the sake of nailing this down with just css): Here's the html and css of my best attempt so far, but I can't seem to get rid of the horizontal scroll bar: http://ujive.com/test.html http://ujive.com/layout.css Desired features: - Header that spans the entire page - Fixed-width navigation div on the left - Liquid-width content div on the right - Footer, which doesn't need to span entire document (can float below content div) ...and the kicker - A fixed element (like Gmail's chat boxes) anywhere on the page Has anyone managed to create this gmail-like layout? If so, your guidance would be much appreciated. Many thanks, Brent __ 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] List problems IE bad / FF nice
On 3/3/06, Augusto Murri [EMAIL PROTECTED] wrote: Hi all, i've been testing this page for a week but there are some little problems in IE. The page in question is http://194.242.241.199/html/2/scheda_museo.php As u can see the list UL in the div#menu_categorie display bad in IE, i can't see the arrows on the left... sorry mate, no IE for now. i'm on ubuntu. but maybe u might try adding the list-style-image to the li's instead of the ul's. hope that do the trick... and btw, next time, try to arrange your code to be easier to read before u send it to the list. -- http://blog.br4inwash3r.com/ - Pro Web Design - Markup and Search Engine Optimization __ 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] Font Difficulties and Nav Positioning
Hi Could you have a look at this design for me please? http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/static/style.css The font size for the nav list has gone mad! I am declaring a font-size of 50% and it is still huge! It also won't sit in the header div properly. Could anyone tell me why please? Many thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d 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/
