OK, I thought what I am trying to do would be simple, and maybe it is, but it is giving me all sorts of trouble. Take a look at http://sieglers.griergroupinc.com/About/. This is my site that I am working on. I can't seem to get the padding to work right on the panel. You'll notice that the text on the right is cut off. If I add padding to the panel style though, it does something strange....not add padding. You'll also notice that the rounded corners on the right side are somewhat cut off as well. I just don't get it. What should work, isn't, and I have no idea what I am doing wrong. <div class="container"> <div id="ctl00_ContentPlaceHolder1_pnlContainer" class="panelStyle"> <h1>Welcome to our site!</h1> <p>Siegler’s Custom Kitchens offers custom kitchen and bath cabinetry, solid surface and laminate countertops for new construction and remodeling homeowners. We offer complete remodeling of kitchens, bathrooms, home offices and more.</p> <p>Our company was established in 2005 by Mike Siegler. Siegler’s goal is to <u>establish a lasting relationship with our customers and ensure the longevity of our company through repeat and referral business achieved by providing an innovated design, quality products and the highest level of customer service</u>. With over 40 years of combined experience, our designers have the <u>vision</u> to design a well allocated space, <u>knowledge</u> of cabinet construction and <u>experience</u> in cabinet installation. This ensures that your project receives the <u>best attention to details</u>.</p> <p style="text-align:center; font-weight:bold;">Bring us your dreams and let us create and transform your space.</p> <p>Siegler’s Custom Kitchens has a beautiful 2000sq ft showroom. The showroom is conveniently located at 1760 W. Terra Lane in O’Fallon, MO. The showroom is open to the public Monday thru Friday 9:00-5:00pm or by appointment.</p> <div class="wrapper margin20"> <ul class="list_img"> <li><a href="#"><img src="/images/astoria.gif" alt="Astoria" /></a></li> <li><a href="#"><img src="/images/tahiti.gif" alt="Tahiti" /></a></li> <li class="no_marg"><a href="#"><img src="/images/winslow.gif" alt="Winslow" /></a></li> </ul> </div> </div> </div>
Define "panel". It's not an HTML term. What is it? What do you see wrong with your white area? I assume that's where you mean? Looks ok here on FF. Describe the problem better. Remember that you've set a width to .container (width:646px. Then you have a child who is bigger (width:690px and are adding padding to that child. If you put a fat child in a box, and then make him fatter, do you expect him to fit? BTW, two things to remark on your page: I can barely read "custom kitchens". Dark blue on black is rather unreadable. You could give a small white outline or something to make that text readable. Two, you've underlined stuff, which tells me and most people surfing the web that those are clickable links. But nothing happens when I click them. This is why the <u> tag was deprecated: it went against user expectations. You can use other styles to make that text stand out: emphazised or strong text, or if purely for stylistic reasons, use a span instead of u and style the span to either bold or italic, or slightly bigger font.
Panel...a standard ASP.NET control. It renders to a <div>, but it can have server-side properties. I am using AJAX.NEt to apply the rounded corners to the panel. In IE8, the text is cut off on the right, and the rounded corners on the right are cut off slightly as well. I can't seem to add padding to the right side. I want an even border between the edge of the transparent/white bg and the text. Yes, I know about the image....waiting for a new one. I agree about the text as well....just how I received it. This is just in development.
I reduced the size of the inner div and now look what happened. I don't get it. The right side of the text is still cut off as well.
Ok, so mistake #1. ... and mistake #2, using some bloated server side crap with extra handshakes to do CSS' job. Do yourself a HUGE favor, and pitch all that crap in the trash. All you are doing is making MORE work for yourself, not less - and you can pretty much kiss off ANYTHING ASP.NET working properly cross browser since it has the habit of 'making up' tags and attributes that have NOTHING to do with HTML/CSS. Whoever came up with 90% of that half-assed rubbish needs to be beaten severely with a wet trout. Also, "welcome to our site" is REALLY bad choice of H1 text - missed SEO opportunity AND likely the wrong element to be a H1 across all your pages, since it's unlikely other heading tags on other pages are going to always be subsections of the content area... assuming one is trying to use semantic markup. You should also take an axe to all the jquery ***otry since you don't have a damned thing on ANY of the pages that warrants it's use, lose the IE7 conditional, Lose the stupid 'extra' aspnet form that doesn't even HAVE a submit method, you've just got a whole bunch of excess trash in there that isn't doing a damned thing for you except making the job harder than it is. I really don't understand why anyone would let asp.net generate code on it's own - every off the shelf/automatic crap it has is such a total accessibility /FAIL/ and cross browser design train wreck it makes frontpage look good. Of course that giant background image unto itself is larger than I usually allow for an entire PAGE on a site. Digging deeper though, the most likely cause is declaring padding and width on the same element, something I consider a CSS faux pas. Throwing all that away, we can see that you're going to need a few extra div for presentational hooks - especially so we can open it up to dynamic height - that will let us get rid of all that scripted nonsense and stuff you are trying to do in asp.net for no good reason... The markup you want should probably look something like this: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title> About Us - Siegler's Custom Kitchens </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! Horizontal rules and .jumpto menus should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> Seigler's <small>Custom Kitchens</small> <span></span> </h1><hr /> <ul id="mainMenu"> <li> <a href="home" accesskey="h" title="Back to Home Page" ><b>H</b>ome</a> </li><li> <a href="about" accesskey="a" title="About Us" class="current" ><b>A</b>bout</a> </li><li> <a href="contact" accesskey="a" title="Contact Us" ><b>C</b>ontact Us</a> </li> </ul><hr /> <div id="content" class="borderBox"> <div class="borderTop"></div> <div class="borderWrapper"> <div class="borderFauxContent"></div> <div class="borderInnerContent"> <h2>Welcome to our site!</h2> <p> Siegler's Custom Kitchens offers <strong>kitchen and bath cabinetry</strong>, <strong>solid surface and laminate countertops</strong> for both <strong>new construction</strong> and <strong>remodeling homeowners</strong>. We offer complete remodeling of kitchens, bathrooms, home offices and more. </p><p> Our company was established in 2005 by Mike Siegler. Siegler's goal is to establish a lasting relationship with our customers and ensure the longevity of our company through repeat and referral business. We achieve this by providing <strong>innovative design</strong>, <strong>quality products</strong> and the highest level of <strong>customer service</strong>. With over 40 years of combined experience, our designers have the vision to design a <strong>well allocated space</strong> using knowledge and experience in <strong>cabinet construction and installation</strong>. This ensures that your project receives the attention to detail it deserves. </p> <h3>Bring us your dreams and let us create and transform your space.</h3> <p> Siegler's Custom Kitchens has a <b>beautiful 2000sq ft showroom</b> conveniently located at 1760 W. Terra Lane in O'Fallon, MO. This showroom is open to the public Monday thru Friday 9:00-5:00pm or by appointment. </p> <ul class="imageList"> <li><a href="#"><img src="images/astoria.gif" alt="Astoria" /></a></li> <li><a href="#"><img src="images/tahiti.gif" alt="Tahiti" /></a></li> <li><a href="#"><img src="images/winslow.gif" alt="Winslow" /></a></li> </ul> <!-- #innerContent --></div> <!-- .borderWrap --></div> <div class="borderBottom"></div> <!-- #content --></div> <div id="footer"><hr /> BIO © 2009 | <a href="privacy">Privacy Policy</a> <!-- #footer --></div><hr /> <!-- #pageWrapper --></div> </body></html> Code (markup): If I have time after lunch I'll toss together the CSS and remaster the images I'd use that would make it work. Javascript is not the answer, and using some 'panel' crap in the .NET WYSIWYG isn't the answer either. In fact, it's the worst way to build a site I can think of. You're handicapping yourself by throwing too much technology at something simple. Oh, I also punched up the copy to improve the grammar, remove the run-on, and mark it up for SEO purposes. You'll notice the underline tags are gone, since in MODERN HTML there is no underline tag... besides, underlines make people think link - and that wasn't a link.
... and here's what I'd do for CSS: http://www.cutcodedown.com/for_others/ftbadolato/screen.css Which you can see working live here: http://www.cutcodedown.com/for_others/ftbadolato/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/ftbadolato is unlocked so you can grab the gooey bits, which you might since I redid the images not only eliminating the need for ANY sort of alpha transparency nonsense, but also to shave about 60k off the filesizes. (though I'd try to shave another 100k off of that minimum - which would probably mean pitching that background jpeg in the trash) Valid XHTML 1.0 Strict, would be valid CSS if not for the IE specific code - which I prefer to put in the CSS instead of wasting time sending it with every copy of the markup via conditional comments. (Which IMHO there's little good reason to ever use). Tested working 100% in IE 5.5, 6, 7 & 8, FF 2 & 3.6, Opera 10.10 and 10.5, and the latest flavors of Saffy and Chrome. To break down the CSS: First, I use a reset. Mines smaller than most - since I only set the things I need reset. body - text-align so that broken box model browsers (IE 5) will center #pagewrapper. You might be thinking "Why bother with 5.x" - because it's SO SIMPLE TO SUPPORT I DON'T UNDERSTAND WHAT PEOPLE ARE KVETCHING ABOUT. I set the font size in %/em becuase that's what the content should be. You used PX on your original which is an accessibility /FAIL/ - read the WCAG. Don't use PX on your content! hr - outside of my content area I usually use HR to divide up sections for non-CSS users. CSS on, we get them out of the way. #pageWrapper - fixed width, only needs one wrapper. I absolute positioned the footer, I'd be sure if a sidebar goes above where it's located I pad the bottom to 'make room' for the footer so they don't overlap. Width, margin, background - nothing too fancy. I did apply min-height so that the entire background image will always show - you can see the * HTML hack to target IE6/earlier to use it's bug on height to fake min-height. h1 - to me the site title should always be the h1 so that every heading on the page is a subsection of it. It also means I need to waste no classes on my logo and gives me great styling hooks. I style the text inside it to match the big red text, and set up some padding and positioning so people browsing with images off (and search engines) will have something to look at. h1 small - more styling for images off users. View the page with images disabled and you'll instantly see why I use this approach. h1 span - out actual image. I 'precomposited' it to a single image so we don't need to dick with alpha transparancy - which also lets us do the whole gilder-levin image replacement thing. #mainMenu - bullets off, negative margin to position it in relation to our h1, which we then use position:relative to make certain it depth sorts over it. Since we're interacting with a image over it and a fixed height background we are stuck using PX fonts (boo!) so we want at least 14px so large font/120 dpi users aren't bitching us out for the text being unusably small. #mainMenu li - as a rule I try to avoid doing a whole lot with LI. Setting it to display:inline makes it effectively 'not exist' for our layout purposes dodging a whole slew of bugs in IE7/ #mainMenu a - Float 'em, pad 'em, color, remove the underline. Nothing fancy. Extra top padding is to make room for the hover/current image. #mainMenu b - the bold is for CSS off users who might want to see what the accesskey is. You'll see I put in titles with the accesskeys in the markup. USUALLY there is no reason to put titles on identical to the content of an anchor, but with accesskeys in the mix browsers like Opera will show the title in the accesskeys menu. (Open the page in Opera, hit shift-esc). Technically I'd use the <u> tag, but as I previously mentioned there is no underline tag in STRICT. #mainMenu .current, #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover - pretty simple, just apply that background image for the hover state or current. I also trap active and focus since that will get applied to keyboard navigation on certain browsers. #content - clear it just to be sure, float it right so if you are adding a sidebar that's easy, margin - and a display:inline fix for IE. Nothing to write home about. #content h2 - fonts, padding, your little bullet image. #content h3 - fonts, padding, centering. #content p - padding, big deal. .borderBox - float wrapping, bottom padding - throughout this section you'll see I don't declare any widths, this means you can re-use these classes on any area you want to have a box just by changing out the background-image. .borderTop, .borderBottom, .borderFauxContent - I set the opacity on these elements all together. By breaking them up, especially the area behind the content we can use opacity on the background without inheriting it on the text or images in the content area - something yours was doing that frankly, didn't look all that great. .borderTop, .borderBottom - these two share even more properties in common. The position:relative squashes a wierd rendering quirk in IE6 (that doesn't exist in 5.5?) - the height and background is pretty obvious, and the font-size prevents IE from forcing the element to be as tall as the current font-size and line-height. .borderBottom - the only thing different about border-bottom here is the background-position. I use a single image file for all corners of the background, just sliding it around to pull off our effects. The next few elements are a trick to let us do that opacity background in code without alpha .png - while not effecting the content's transparency. .borderWrapper - The element on which the height of our fake background will be determined. Position:relative works in 'compliant' browsers, the width helps IE7 and IE8 by tripping haslayout. .boardFauxContent - this is our transparent background. Modern browsers WILL obey width:100% and height:100% if the parent element is position:relative, IE7 will obey it if the element haslayout... Just leaving us to try and support IE6/earlier. To do that, we use the classic * HTML hack to target those browsers and an expression to set the height. This means it will NOT work in IE6/earlier if javascript is turned off, but you can't have EVERYTHING; besides anyone dumb enough to still be using IE6/IE 5.5 probably doesn't know how to turn JS off in the first place. .borderInnerContent - We need this separate container so that .borderWrapper will stretch properly in all browsers - and so we can be 100% certain our content will depth-sort over our div.boardFauxContent. .imageList - strip bullets, set float wrapping. .imageList li - again, basically just strip it of formatting. .imageList a - by padding only one side it means we don't need that extra class to not set margins. Setting it on the anchor also means IE 5.x won't collapse/ignore the spacing we want. .imageList img - setting it to display:block prevents oddball spacing issues across all browsers. #footer - I absolute positioned it, though a negative margin might do the trick as well. #footer a - color - ooh... ... and that's it. That's how I'd approach that layout. Oh, I remastered a lot of the images too, and added some anti-aliasing to try and clean up the jaggies.
Ah, that may explain why i didn't see a single rounded corner. I guess NoScript blocks ASP somehow? That or they weren't implemented when I looked. If I remember correctly, ASP is the language with the habit of wrapping all pages inside <form> tags. Which happened to have this neat habit of making Opera take a big puke. Also on pages where real forms are needed, it meant there were forms inside forms... illegal. Crusty, I strongly disagree with the lettered accesskeys. The best you can do to not conflict with my browsers is to use numbers (though that's only tentatively recommended, as accesskeys in general, while they can be useful, are not really being recommended anymore).
My only problem is that I will be creating a new image for the header with white text instead of blue, and the way you have this image in there, I can't easily swap them.
Usually I reserve the numbers for on-page navigation pointing at #pageWrapper, #mainMenu, #content, #sidebar and #footer - or any other 'major' sections. Handy for people using blazer or Opera mobile/mini. Anyone who cares about accesskeys probably isn't using some shit browser that screws them up anyhow Especially since they are meant for handheld. Using letters means they can't hot access navigating off the page, but can still pull it up as a accesskeys menu. Again, go into Opera and hit shift-esc... or opera mobile on a phone and hold down # until it pops up.