Re: [css-d] Help broke my template
Diane Ross wrote:
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote:
* testpage 2
http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html
So I guess it must be some margin or padding in the inner parts of the
#sidebar, for when we make the width of the #sidebar some 10px smaller,
it's ok.
How did you come up with 10px?
* testpage 3
http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html
It was just a guess to see what should happen, not deliberated.
I have some questions on the change you suggested to the sidebar.
div class=quicklinks style=width: 140px;
You mention margins...do I adjust margins for divs inside the sidebar or
simply change the size as you suggested?
Rather than just do-it, I want to understand what I'm doing.
Yes, that is a good attitude. I pointed to the direction, but now I've
to do some further investigations to see what is really going on! ;-)
...
Back here: it appears to be the left and right border of 1px around the
.quicklinks and the other boxes in the #sidebar.
If we disable them, IE is showing good, and also FF doesn't have a
horizontal scrollbar anymore.
* See testpage 4
http://home.tiscali.nl/developerscorner/css-discuss/test-base4.html
And if we make the border larger, we see more overlap with the yellow
background'ed #content in IE, while FF is giving a larger horizontal
sidebar.
* See testpage 5
http://home.tiscali.nl/developerscorner/css-discuss/test-base5.html
I really appreciate your patience with me on this.
#quicklinks is inside the #sidebar. I have both set for width 150. Is this
wrong thinking to make them the same?
#sidebar {
text-align: left;
width: 150px;
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 0; }
/*Quicklinks
*/
.quicklinks {
width: 150px;
border: solid 1px #ccc;
margin: 0;
}
You can view the site with just the cleanup for the divs here:
http://www.entourage.mvps.org/
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
* See css box model specs
http://www.w3.org/TR/CSS21/visudet.html#the-width-property
If we omit the width in .quicklinks, .highlight and the other boxes
below, then these boxes _inclusive everything_ (borders, paddings, ...)
have to stay inside the width of the surrounding container #sidebar.
* That's done in testpage 6
http://home.tiscali.nl/developerscorner/css-discuss/test-base6.html
Now no more drop of the #sidebar in IE, and no more horizontal scrollbar
in FF. :-)
Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
On 2/8/07 5:53 AM, francky [EMAIL PROTECTED] wrote:
Indeed, this is the direction to find the culprit. You assigned the
{width:150px} to the .quicklinks and so on, but then the border-width is
added to the box-width. Then FF is giving overflow + hor. scrollbar to
see the overflow, and IE is extending the surrounding right-floated
#sidebar (thus extending to the left, coming in conflict with the width
of the content, and dropping down because later in the normal flow).
I omitted the width in the #sidebar and the drop down problem is fixed. I
appreciate knowing what I did and why.
I'm not sure if I created another problem because I also omitted the width
in the right sidebar boxes. They were identical to the left even though they
had not caused a problem. Now in IE 7, part way down in the MVP Links box
the links just stop and the following boxes are not showing up. It's not a
problem in any Mac browser or in IE 6.
Did removing the width do this, or is this a display problem using VPC to
view the pages?
http://www.entourage.mvps.org/
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote:
* testpage 2
http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html
So I guess it must be some margin or padding in the inner parts of the
#sidebar, for when we make the width of the #sidebar some 10px smaller,
it's ok.
How did you come up with 10px?
* testpage 3
http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html
I have some questions on the change you suggested to the sidebar.
div class=quicklinks style=width: 140px;
You mention margins...do I adjust margins for divs inside the sidebar or
simply change the size as you suggested?
Rather than just do-it, I want to understand what I'm doing. I really
appreciate your patience with me on this.
#quicklinks is inside the #sidebar. I have both set for width 150. Is this
wrong thinking to make them the same?
#sidebar {
text-align: left;
width: 150px;
float: right;
margin-top: 0;
margin-right: 0;
margin-bottom: 0; }
/*Quicklinks
*/
.quicklinks {
width: 150px;
border: solid 1px #ccc;
margin: 0;
}
You can view the site with just the cleanup for the divs here:
http://www.entourage.mvps.org/
--
Diane
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
Stephane Bortzmeyer wrote:
On Mon, Feb 05, 2007 at 06:47:29PM -0800,
Diane Ross [EMAIL PROTECTED] wrote
a message of 39 lines which said:
SAVE EVERY STEP with an OWN VERSION NUMBER!
A better advice may be to use a real Version Control System, for your
HTML pages and your CSS stylesheets. A version number does not tell
much (What is version 567? When did I change the color scheme?). A
VCS is much more powerful (for instance, you can attach a text to each
change, the date is automatically set, etc).
[...]
Hi Stephane,
The most important part of my advise is save every step: do it! The
way _how_ do to this, is at choice. Can be with a version #, can be with
a VCS. While I'm not working in huge projects with many contributors,
I'm happy to give just quick version numbers without spending time to
describe what I changed.
But it's true: to be 100% correct, I should have written: ... with an
OWN VERSION _INDICATION_ (version number, or version date, changing
description, and so on; or a combination of these). - So thanks: I'll
add the VCS-option to the Golden Rule as another option.
[...]
The page you mention has other strange advices such as:
To see where you are: use TEMP BACKGROUND COLORS for the div-boxes,
ul's, li's and other elements.
Sometimes a TEMP {border: 1px dashed red;} can do the same. - But
that is a bit more risky, because adding or removing borders can
influence the layout (suddenly dropping or lifting of an element can
be the result, or appearing or disappearing of paddings with
unintended backgrounds).
While it is much simpler (and cleaner!) to use a browser extension
such as Firefox's WebDeveloper (with its Outline function).
For a quick problem shooting sometimes the Outline function in the FF
WebDev (apart, or in combination with the edit functions) can be very
handy, but to be sure, I prefer a real change in my code, and real
testing in different browsers:
* The Outline function sometimes causes a dropdown of one or more
elements (because of the with of the border line), in case a page
has a narrow layout. [1]
AFAIK, a background color is never changing the width or height of
an element, and even for IE there is no risk.
* With the FF WebDev under my WinXP (and before under Win98SE),
sometimes background-img parts of the page are disappearing when
the window format is changed on the fly; then the Outline alone
can be not enough for analyzing and playing with margins and paddings.
* I cannot save the outline version of the WebDev.
* I want to see the result of a change in hard coded html /css, to
compare browsers - often a browser difference has to be eliminated.
With respect to my strange advices: I agree, they aren't all clean
coded. - But that's just for building, bug hunting and testing purposes.
As long as unallowed methods (as the X-out method) are helping me to
get a page faster to what I desire, then a tmp pollution doesn't matter
for me. [2]
Afterwards the strange elements can easily be deleted: to get clean,
valid and crossbrowser pages in the end. - Nobody knows! :-)
Greetings,
francky
[1] Yes, I always should make pages which have some liquid freedom; but
I'm testing pages of others too. ;-)
[2] Together with tools as the WebDev extension, the dirty comment-out
methods are saving about 40% of my analyzing time, I guess. But maybe
for more experienced coders it doesn't make any difference. Let
everybody follow his/her heart...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote: So I guess it must be some margin or padding in the inner parts of the #sidebar, for when we make the width of the #sidebar some 10px smaller, it's ok. I'm reluctant to even respond at this late hour when my head is mush, but I don't see how you made the #sidebar 10 px smaller. Where in the 'CSS' did you do this? I'm off to bed and will get back to this tomorrow when I am hopefully more clear headed. Thanks for the quick responses. -- Diane __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
Diane Ross schreef:
On 2/4/07 11:31 PM, francky [EMAIL PROTECTED] wrote:
So I guess it must be some margin or padding in the inner parts of the
#sidebar, for when we make the width of the #sidebar some 10px smaller,
it's ok.
I'm reluctant to even respond at this late hour when my head is mush, but I
don't see how you made the #sidebar 10 px smaller. Where in the 'CSS' did
you do this?
I'm off to bed and will get back to this tomorrow when I am hopefully more
clear headed.
Thanks for the quick responses.
Yep,
You have to take a break sometimes! In this part of the world (NL in EU)
it's morning already and fresh after sleep. ;-)
I didn't change the stylesheet, but added inline style in the html:
div class=quicklinks style=width: 140px;
overruling the stylesheet's:
#sidebar { width: 150px; }
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. I thought I was being careful to comment out the divs when I set up, but somehow there were some critical changes made. It took a bit to go back and correct my markup, but it's working now. One of my biggest problems is knowing how to troubleshoot problems. I feel like I have made a small step today learning from your suggestions. Thanks to francky for his comments in sending me in the right direction. I wish I had read his Golden Rules of CSS prior to starting my journey into CSS. I especially want to point out to other newbies #5 The personal archive: SAVE EVERY STEP with an OWN VERSION NUMBER! http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm I can recommend to Mac users FolderOrgX. FolderOrg is an AppleScript Folder Action that organizes files and folders by moving them into dated subfolders. This is helpful in keeping files and folders organized by the day they were added, not created or modified. http://homepage.mac.com/dougeverly/folderorg.html -- Diane __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help broke my template
I was working on my template and broke something. Now the text in the main content area flows into the right sidebar. I added a div in the right sidebar trying to fix a problem on my own for IE and made some minor changes to text in the right sidebar, but not sure what I did to affect the content area. I didn't purposefully make any changes there. I am stuck until I get this fixed. http://www.test.entourage.mvps.org/base.html Link to CSS: http://www.entourage.mvps.org/css/ The template is based on the the 3 column layout on this page http://alistapart.com/articles/negativemargins. -- Diane (with desperate cries of help along with moaning and gnashing of teeth) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
Diane Ross wrote: I was working on my template and broke something. Now the text in the main content area flows into the right sidebar. http://www.test.entourage.mvps.org/base.html Link to CSS: http://www.entourage.mvps.org/css/ The template is based on the the 3 column layout on this page http://alistapart.com/articles/negativemargins. I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. But validate first (and I think you need a title other than untitled :-) ). Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. But validate first (and I think you need a title other than untitled There is no title since it's my template and I want pages I create ask me for a title. I'll check the div closings. Can you give me a clue as to which one? -- Diane __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help broke my template
Diane Ross wrote: On 2/4/07 8:40 PM, ~davidLaakso [EMAIL PROTECTED] wrote: I think it may be markup rather than css issue. Compare the order in which the divisions are closed in Ryan Brill's layout with yours. It is a tricky layout-- very easy to get the division closings out of order. But validate first (and I think you need a title other than untitled There is no title since it's my template and I want pages I create ask me for a title. I'll check the div closings. Can you give me a clue as to which one? Hi Diane, Yes I can. - Was just writing this: I agree with David: some div's have a wrong position. * See source code of testpage 1 http://home.tiscali.nl/developerscorner/css-discuss/test-base1.html Now IE appears to drop the right column, and FF is showing (still) a horizontal scrollbar. So there will be a css issue too. ;-) If we replace the content of the #sidebar by a common paragraph, it's going alright. * testpage 2 http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html So I guess it must be some margin or padding in the inner parts of the #sidebar, for when we make the width of the #sidebar some 10px smaller, it's ok. * testpage 3 http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html See also: Golden Rules of CSS #10 http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm#r10 :-) Success, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
