I'm building my first site using CSS. As I'm laying out (using absolute positioning) it's apparent the linked sheets (a total of 2 *.css) will end up fairly large. I've completed one page and the combined sheet = 5kb. Any advice appreciated.
It depends on the rest of your page. If you are using images then these will quickly swell the page to 100kb and make the 5kb css file largely irrelevant. The only thing to do it remove whitespace from the css file but if you look at loads of large sites they have big css files.
Given the 100kb file size w/ imgs you've spec'd (which is close to what my 1st page will be w/ imgs & css) there's no penalty on load time? To be more specific, my concern is load time penalty after I've built the entire site. Larger CSS files after the entire site is built.... Sounds like your saying it's no big deal. thx again for your help
There are ways to use CSS more efficiently. The common ways include using CSS shorthand and adding multiple selectors to single rule statements when rules are the same. Personally, I prefer writing out rules on a single line. Most people write CSS one style per line. I do it on a single line, with styles in alphabetical order. It makes it easy for me to make changes later. This might make a file slightly smaller. But, there are other tricks you can use too, such as finding ways to apply common styles to multiple objects, and then breaking those objects out to give them a couple unique styles, as the case may be. I do this frequently when I'm creating dynamic menus. It's amazing how much you can compress your code when you get a handle on these techniques
interesting suggestions the_pm. I'll employ those thoughts as I build. The one sggestion you make for css shorthand. Have you had any trouble with some browsers not interpreting the shorthand correctly?
I haven't had any issues, but I've found that it's rare I need to venture outside of the elements that were in CSS1, which has been around for 10 years now.
That's good to hear. Thx the_pm. Off thread subject but.....I've noticed a fairly large difference in the way NS 8.1 and IE 6 interpret the text line heights. I've played with the line heights in the style sheets to no avail. NS displays text several pixels lower than IE 6. Images in lieu of text here?
The example below is a background bar in the masthead where the 1-800 # is displayed. The .inc_atxtVert tweak compensates enough between browsers that I’ve left this code in place. NS 8.1 displays it low,,,,,IE 6 high. The nav_ln.gif is a 3px divider graphic. I could have / should have used css border. I coded it both ways however and w/ or w/out the graphic still get the difference between browsers. /** page markup **/ <div class="inc_anavBar" id="inc_anavBar"> <p class="inc_aTxtVert">Call Us at 1-800-637-6386 </p> </div> /** css style sheet **/ .inc_anavBar { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #000000; background-image: url(../../Images/nav_ln.gif); background-repeat: no-repeat; background-position: bottom; position: absolute; visibility: visible; width: 752px; height: 23px; left: 0px; top: 153px; z-index: 3; color: #FF9900; text-align: right; font-weight: bold; } .inc_atxtVert { vertical-align: middle; line-height: 5pt; }
Are you simply trying to get the phone number to be centered vertically within the black area? This seems to do the trick. I don't have NS8.1 installed, because I consider NS to basically be adware, given how it forces a full scale AOL infiltration into your system. Let me know if this gives you a consistent look in the manner you were wanting: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Testing</title> <style> .inc_anavBar { background:#000 url(../../Images/nav_ln.gif) bottom no-repeat ; color:#F90 ; font:bold 12px/2em Arial, Helvetica, sans-serif ; height:23px ; left:0px ; position:absolute ; text-align:right ; top:153px ; visibility: visible ; width:752px ; z-index:3 } .inc_anavBar p { margin:0 ; padding-right:3ex } </style> </head> <body> <div class="inc_anavBar" id="inc_anavBar"> <p>Call Us at 1-800-637-6386</p> </div> </body> </html> Code (markup):
You're correct. I'm simply wishing to center the text vertically. The net result of the above code is comparable to the original. NS 8.1 displays low and IE 6 very high. (Fire Fox vs. IE) It's no big deal now but it's one of those little details that is bound to bit me later in the build.
Really? I just tried it out in IE6, and it was vertically centered just fine I'm going to go install Netscape right now. Just so you understand how gravely I am going against my better judgment, here's the actual verbiage from the NS8 download page: ******* malware, that's what Netscape is! All right. Let's get this sorted
Real quick, before I go do something stupid like actually installing that hunk of crap, what happens when you leave line-height out of the equation all together, and simply pad the top and bottom of your text equally? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Testing</title> <style> .inc_anavBar { background:#000 url(../../Images/nav_ln.gif) bottom no-repeat ; color:#F90 ; font:bold 12px Arial, Helvetica, sans-serif ; height:23px ; left:0px ; padding:.5em 0 ; position:absolute ; text-align:right ; top:153px ; visibility: visible ; width:752px ; z-index:3 } .inc_anavBar p { margin:0 ; padding-right:3ex } </style> </head> <body> <div class="inc_anavBar" id="inc_anavBar"> <p>Call Us at 1-800-637-6386</p> </div> </body> </html> Code (markup): It worked fine in IE6 (and yes, the code I first posted seemed to work just fine as well - I'll give you a screenshot if you're still having trouble).
Booya! Centers in both browsers! As per your suggestion I added equal padding to the p element, top & bottom. (Could have sworn I tried that early on.!.) Thanks much the_pm! Really appreciate your time.
Sure thing badlael. Every browser adds its own default margins to the paragraph element. So if you want consistency, you need to reset the margin to 0, and then add whatever you want to it. That's what I did in the code I posted. Nothing too complicated I'm glad you have everything sorted now!