Re: [css-d] First timer looking for css review
Mike Buettner wrote:
I did a bunch more reading (and associated confusion) with this result:
Site: http://scottriggs.com/2007/index.html
CSS: http://scottriggs.com/2007/css.html
1. I used Francky's suggestion:
* The 3 small images [...]
And it worked great.
2. Don't really understand this comment though:
* Sometimes you are using a CLASS and an ID with the same name. For
the most elements, I found in the stylesheet only the ID-references
(with the # before the name). For elements with only the ID-styles
the CLASSes in the html can be missed.
Hi Mike,
For instance I see in the html:
div class=bgTopbar id=bgTopbar
In the stylesheet I see only the ID mentioned:
#bgTopbar { ... }
If in addition a CLASS with this name was defined, it should have read:
.bgTopbar { ... }
But as this CLASS doesn't exist in the css stylesheet, the reference to
it can be missed in the html. So what is needed to show the Topbar
styles, is only:
div id=bgTopbar
3. Back to having trouble in IE Mac 5.2 with the page not centering
in browser.
I've no Mac aboard, and no solution for this. Maybe some of the other
list members can check? ;-)
4. My biggest issue is not being able to get the left and right
columns to expand down (with more content) and pull the other column
with it:
http://scottriggs.com/2007/indexv2.html
CSS and HTML validated.
Thanks,
Mike
In your construction, the Scott Riggs image (rtcol_pichome.jpg) is
connected to the bottom of the right column. If the left column is
longer, this bottom is not the bottom of the combination, and a white
gap under it (towards the footer bar) is showed.
What you can do, is to connect the image to a bottom line div under both
columns (i.e. in the footer bar), and then working upwards. This can be
done by isolating this div from the normal flow (with a float: right),
and giving this div a negative margin-top of the amount of the height of
the image. Then it is pushed upwards. :-)
Remaining problem is, that the man's head can go so far upstairs, that
the image part over there is covering the under parts of the 3 images
(or something else) in the right column. This will occur if the left
column is too small.
To avoid this, we can give the right column an empty space under the
content, which is some larger in height as the img. We can do this by
adding a div at the end of the right column, with only a height in it.
Here is a testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-indexv2.html.
If you browse with something else than IE, now you can see the img
moving on the fly (and staying fixed to the bottom), if you change the
font-size in the browser. [1]
Greetings and success,
francky
[1] ... and you'll see some other things to correct. ;-)
__
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] First timer looking for css review
Thanks again Francky! I especially like this part: [1] ... and you'll see some other things to correct. ;-) No kidding. Mike __ 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] First timer looking for css review
Finally got this part sorted out. I was confused a bit with the footer bar but found a misplaced /div tag. I found this site to be very helpful in sorting out the various containers: http://www.ilovejackdaniels.com/css/view-page-structure/ Scroll down towards the bottom and insert your site URL. On to the next fix. Thanks! Mike Site: http://scottriggs.com/2007/index.html CSS: http://scottriggs.com/2007/css.html In your construction, the Scott Riggs image (rtcol_pichome.jpg) is connected to the bottom of the right column. If the left column is longer, this bottom is not the bottom of the combination, and a white gap under it (towards the footer bar) is showed. What you can do, is to connect the image to a bottom line div under both columns (i.e. in the footer bar), and then working upwards. This can be done by isolating this div from the normal flow (with a float: right), and giving this div a negative margin-top of the amount of the height of the image. Then it is pushed upwards. :-) Remaining problem is, that the man's head can go so far upstairs, that the image part over there is covering the under parts of the 3 images (or something else) in the right column. This will occur if the left column is too small. To avoid this, we can give the right column an empty space under the content, which is some larger in height as the img. We can do this by adding a div at the end of the right column, with only a height in it. Here is a testpage http://home.tiscali.nl/developerscorner/css- discuss/test-indexv2.html. __ 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] First timer looking for css review
I did a bunch more reading (and associated confusion) with this result: Site: http://scottriggs.com/2007/index.html CSS: http://scottriggs.com/2007/css.html 1. I used Francky's suggestion: * The 3 small images (car and logos) with associated text at the top of the right column: this is one of the points where the layout is breaking at larger font-sizes (because of the fixed 49px height of the .links class). Can be repaired by deleting this style rule. Another quick way to get it unbreakable with the text staying vertically centered, is to apply a css-styled table for them. See testpage http://home.tiscali.nl/developerscorner/css-discuss/test- mike.htm (other things still have to be done). And it worked great. 2. Don't really understand this comment though: * Sometimes you are using a CLASS and an ID with the same name. For the most elements, I found in the stylesheet only the ID-references (with the # before the name). For elements with only the ID-styles the CLASSes in the html can be missed. 3. Back to having trouble in IE Mac 5.2 with the page not centering in browser. 4. My biggest issue is not being able to get the left and right columns to expand down (with more content) and pull the other column with it: http://scottriggs.com/2007/indexv2.html CSS and HTML validated. Thanks, Mike __ 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] First timer looking for css review
Thanks for the help Francky.
* You have put the IE-only-styles in the body of the document;
they
should go to the head part. Notice: the html-validator doesn't
notice this, because these styles are placed (correctly) in IE
conditional comments, which are just normal comments / unseen by
other browsers and the validator as well (REM: what is inside
a CC
is not validated!).
I'm a little behind the learning curve on -only- styles. I take it
you are talking about this:
!--[if lte IE 6]style#p7PMnav a{height:1em;}#p7PMnav li{height:
1em;}#p7PMnav ul li{float:left;clear:both;width:100%}/style!
[endif]--
!--[if IE 6]style#p7PMnav ul li{clear:none;}/style![endif]--
!--[if IE 7]style#p7PMnav a{zoom:100%;}#p7PMnav ul li
{float:left;clear:both;width:100%;}/style![endif]--
Can this go anywhere in the head?
Mike
__
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] First timer looking for css review
Mike Buettner wrote:
Thanks for the help Francky.
* You have put the IE-only-styles in the body of the document; they
should go to the head part. Notice: the html-validator doesn't
notice this, because these styles are placed (correctly) in IE
conditional comments, which are just normal comments / unseen by
other browsers and the validator as well (REM: what is inside a CC
is not validated!).
I'm a little behind the learning curve on -only- styles. I take it you
are talking about this:
!--[if lte IE 6]style#p7PMnav a{height:1em;}#p7PMnav
li{height:1em;}#p7PMnav ul
li{float:left;clear:both;width:100%}/style![endif]--
!--[if IE 6]style#p7PMnav ul li{clear:none;}/style![endif]--
!--[if IE 7]style#p7PMnav a{zoom:100%;}#p7PMnav ul
li{float:left;clear:both;width:100%;}/style![endif]--
Can this go anywhere in the head?
Mike
Yes Mike,
on condition these lines are following the normal style declarations /
links to stylesheet(s). Otherwise the normal styles later on are
overruling the IE-specialties, and there is no correction for IE.
In fact it are normal style declarations in the head (only in very
compact notation), but because of the wrapping comment construction the
styles are only readable for IE.
It is easier to recognize in the more extended notation:
!--[if lte IE 6]
style
#p7PMnav a {height:1em;}
#p7PMnav li {height:1em;}
#p7PMnav ul li {
float:left;
clear:both;
width:100%;
}
/style
![endif]--
... and so on.
To be complete, you can add the type-property:
style type=text/css
An alternative way, if there is a bunch of styles for (versions of) IE,
is to direct IE (or one or more IE-versions) to special (additive)
IE-stylesheet. This can be done by means of the same CC (conditional
comment) method, again following on the link to the normal stylesheet(s).
link rel=stylesheet type=text/css
href=css/general.css
!--[if lte IE 6]
link rel=stylesheet type=text/css
href=css/lte-IE6.css
![endif]--
!--[if IE 6]
link rel=stylesheet type=text/css
href=css/only-IE6.css
![endif]--
.. and so on.
In the same way, you can link to an IE-only script in the head; or give
IE-only messages in the body, as was done in the early years of the CC's:
body
!--[if IE]
pDear visitor, you're surfing with Internet
Explorer. Consider to
a href=http://browsehappy.com/;Browse
Happy/a!/p
![endif]--
More about serving CC's to IE can be found of MS's MSDN:
* About Conditional Comments
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
To view in IE ... [1]
Greetings,
francky
[1]
To see why this IE page isn't coming through in FF or Opera: check the
html-validator. :-)
__
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] First timer looking for css review
Mike Buettner wrote:
[...]
Could you please take another look at it?
Site: http://scottriggs.com/2007/index.html
Hi Mike,
For a first timer, it´s hard stuff and you are going not bad for this
not too simple layout! :-)
But I'm afraid there are still some css-hills to climb.
* IE is dropping down the right column. This is a perfect
illustration of the IE Doubled Float-Margin Bug. ;-)
It is described here in PIE
http://www.positioniseverything.net/explorer/doubled-margin.html
The remedy is to add { display: inline; } to the floating #lftColbox.
* You have put the IE-only-styles in the body of the document; they
should go to the head part. Notice: the html-validator doesn't
notice this, because these styles are placed (correctly) in IE
conditional comments, which are just normal comments / unseen by
other browsers and the validator as well (REM: what is inside a CC
is not validated!).
* You have chosen for a fixed width of 800px, probably to serve
800x600px resolution monitors. In 800x600 an horizontal scrollbar
is coming, though. That's due to the needed space to put the
vertical scrollbar aside the page. Making the width about 770px
can help (implicating the header-img has to be smaller too...).
* With a fixed width, much screen space is not used in higher
resolutions. In 1280x1024 there is an area of about 40% unused,
which is rather much. A solution is to give the page a liquid
width in a % of the screen width.
A lot of models are linked from the css-d Wiki page about layouts
http://css-discuss.incutio.com/?page=CssLayouts.
* Sometimes you are using a CLASS and an ID with the same name. For
the most elements, I found in the stylesheet only the
ID-references (with the # before the name). For elements with only
the ID-styles the CLASSes in the html can be missed.
* In your page fixed font-sizes are used (in px). This has 2
disadvantages. For IE, which is is not standards compliant here,
the fonts cannot be enlarged in the browser of the visitor. For
some people the pages aren't accessible then, especially if they
are using a screen of 1280x1024px or more (very small letters).
On the other hand, at 800x600 the fonts are biggy, and no
possibility to get them smaller in IE.
In FF, Opera and other browsers, the font-size can be enlarged or
made smaller by the visitor's browser. But then the present layout
is breaking ...
* This breaking of the layout is caused by some fixed heights, for
instance in the navigation bar. Maybe a good idea is to develop
the page from the top elements downwards.
See: some Golden CSS-Rules
http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm.
* The 3 small images (car and logos) with associated text at the top
of the right column: this is one of the points where the layout is
breaking at larger font-sizes (because of the fixed 49px height of
the .links class). Can be repaired by deleting this style rule.
Another quick way to get it unbreakable with the text staying
vertically centered, is to apply a css-styled table for them.
See testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-mike.htm
(other things still have to be done).
So far,
Greetings and success!
(and don´t hesitate to come back to the list for questions)
francky
PS: excellent name for your site! :-)
__
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] First timer looking for css review
Working on my first CSS based site: http://scottriggs.com/2007 The site is just beginning to get laid out and this is the home page. I'm looking for any an all input PLUS some help with: 1. Footer (blue bar) is out of alignment. This happened after I started adding content to the right column. 2. My nav drop down menus go behind elements in both the right and left columns in IE 5. The CSS is here: http://scottriggs.com/2007/css.html Please pull no punches and let me know how I am doing. Thanks, __ 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] First timer looking for css review
Hi mike, I'm not too sure about the drop down menus but as to your footer, it isn't aligned like your 'container'. The container is auto aligned so that it centers but your footer is floating to the left, not aligned. When I say aligned I mean: margin: auto. I havn't tested it out but I have a feeling that that might help you. Although, I could be wrong. Paula From: Mike Buettner [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Subject: [css-d] First timer looking for css review Date: Tue, 6 Feb 2007 16:52:23 -0800 Working on my first CSS based site: http://scottriggs.com/2007 The site is just beginning to get laid out and this is the home page. I'm looking for any an all input PLUS some help with: 1. Footer (blue bar) is out of alignment. This happened after I started adding content to the right column. 2. My nav drop down menus go behind elements in both the right and left columns in IE 5. The CSS is here: http://scottriggs.com/2007/css.html Please pull no punches and let me know how I am doing. Thanks, __ 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/ _ MSN Hotmail is evolving check out the new Windows Live Mail http://ideas.live.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] First timer looking for css review
Hi Mike, Brian Riley wrote: Try to validate your XHTML. You'll find a few errors that should be fixed. I like to make sure that the XHTML markup is valid before diving into the CSS. And in case you don't already know, you can do that at: http://validator.w3.org/ The CSS validator is at: http://jigsaw.w3.org/css-validator/ hth, Bill __ 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] First timer looking for css review
Thanks Brian - but still not working. New CSS: http://scottriggs.com/ 2007/css.html. Thanks for the tip on validating... fixing those errors now. Mike On Feb 6, 2007, at 5:06 PM, Brian Riley wrote: Mike Buettner wrote: Working on my first CSS based site: http://scottriggs.com/2007 The site is just beginning to get laid out and this is the home page. I'm looking for any an all input PLUS some help with: 1. Footer (blue bar) is out of alignment. This happened after I started adding content to the right column. Set the footer as margin: 0 auto; and remove the float and even position: relative (the latter is just superfluous). You're footer will then be centered. Try to validate your XHTML. You'll find a few errors that should be fixed. I like to make sure that the XHTML markup is valid before diving into the CSS. Good luck! Brian __ 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] First timer looking for css review
Awesome. Thanks. That was it. What a great forum. Now on to my other problem: My nav drop down menus go behind elements in both the right and left columns in IE 5. I have tried various z-index variables but no luck? Mike http://scottriggs.com/2007 The CSS is here: http://scottriggs.com/2007/css.html On Feb 6, 2007, at 5:30 PM, Brian Riley wrote: Mike Buettner wrote: Thanks Brian - but still not working. New CSS: http://scottriggs.com/ 2007/css.html. Instead of margin-top: 0px; margin-right: auto;, you should have margin: 0 auto;. This will set the top and bottom margins to 0 and the right and left margins to auto. That should do the trick, but if not, let us know. Brian -- Brian Riley http://www.seventysevendesigns.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/ __ 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/
