[RGB]

I'm in charge of the redesign of my organization's website, and for accessibility issues will be laying it out via CSS, but am having a bit of difficulty.

The overall effect should look like:
http://www.kutc.ku.edu/KUTC2/KUTC2.jpg

But the top of the content box won't format correctly. The header image aligns to the right as desired, but I can't get that background to fill all the way to the left. And the page needs to expand to fit the screen.

The problem can be seen at:
http://www.kutc.ku.edu/KUTC2/index.html

And the CSS file is at:
http://www.kutc.ku.edu/KUTC2/kutc2.css

Any help would be appreciated, let me know if there's anything I did not explain adequately.

[Synotic]

Originally posted by RGB:
I'm in charge of the redesign of my organization's website, and for accessibility issues will be laying it out via CSS, but am having a bit of difficulty.

The overall effect should look like:
http://www.kutc.ku.edu/KUTC2/KUTC2.jpg

But the top of the content box won't format correctly. The header image aligns to the right as desired, but I can't get that background to fill all the way to the left. And the page needs to expand to fit the screen.

The problem can be seen at:
http://www.kutc.ku.edu/KUTC2/index.html

And the CSS file is at:
http://www.kutc.ku.edu/KUTC2/kutc2.css

Any help would be appreciated, let me know if there's anything I did not explain adequately.

OK, well this probably isn't the answer you want but a stronger foundation in the layout would help significantly. Your particular design needs to be pixel perfect, so you're probably going to have to use the box model hack. Glish has an example that you can base your layout on.

You should probably stick with just four layout divs. The left sidebar, middle content, right sidebar and the header. The content top div and any other divs dealing with layout shouldn't be there.

Are you still trying to create the effect with the watermarked flower? Do you want the light blue background that's in the mockup to be present under all the headers?

I think that your original colors were a bit more subtle than that's what used currently on the site. Lighter gray, lighter blue etc... Also an increased leading would make the text a lot easier to read.

If you're still having trouble with just using four divs for the layout then I can make a little diagram or something and show you how to break up the design.

Sorry for the answer that didn't really answer anything

[Nebagakid]

Well, first of all, i agree that you can definitely get rid of a lot of unnecessary code.

The SPAN inside the H1 does not really fit a purpose. Also, there seems to be a lot of extra div's that are not doing much except being wrappers around stuff that could do it all itself.

Yeah, box model seems the way to go on this one, look it up

ALSO

get Zeldman's book, it is amazinG!

[RGB]

Thanks for the prompt replies. I've been using CSS to style text for years, but this is my first attempt at laying out a site with CSS, so it's a new way of thinking for me. I have tried to get it down to just the 4 divs, but struggled at that as well.

The colors should be pretty much the same since they're taken from the same Photoshop file as the jpeg mockup. I was planning on adding in the watermarked flower later in the process, once the page was all laid out correctly. Once it's laid out properly, I will go back and reexamine all the colors and fonts and whatnot to refine the look, as you have recommended.

The span inside the h1 is a trick I've seen in several places in order to turn text into an image. http://www.csszengarden.com - all of the designs there utilize it, is there another way of going about this?

When I merged the contentTop div with the content div, I had problems figuring out how to do the borders around the box, because there can't be a vertical border on the upper right. How can I work around this, to simplify the layout? I've done a lot of reading on the box model, and tried to apply it, but I think I'm still missing something key about it.

Thanks again for your help, this is driving me nuts, I'm so tempted to go back to tables, but I know that if I can get this to work using CSS, it will accomplish the goals of the redesign given to me by the higher ups so much better than tables ever could.

[RGB]

So I've rebuilt the layout based on the three column layout from Glish, and it renders nearly perfect in Safari (only glitch is that the center content area doesn't expand to the bottom of the screen if there isn't enough text to push it down).

But rendering on IE and Mozilla for Windows is aweful, especially in IE.

New page is at:
http://www.kutc.ku.edu/KUTC2c/index.html

CSS at:
http://www.kutc.ku.edu/KUTC2c/kutc2c.css

Yeah there's some leftover, unneeded code in there but I don't think that's what's messing it up. Can anyone tell me what the major flaws are here?

Thanks.

[RGB]

'Nother update:

Mozilla issue fixed.

Only remaining problems are getting the content box to expand to the bottom of the page, and getting the content box to stay within the boundries of the left menu and right what's new sections.

[Synotic]

Originally posted by RGB:
'Nother update:

Mozilla issue fixed.

Only remaining problems are getting the content box to expand to the bottom of the page, and getting the content box to stay within the boundries of the left menu and right what's new sections.

I'd just like to add some insight as to why there aren't that many people jumping out to help. It's partly because you're trying to do everything at once which isn't necessarily a good thing. By doing everything all at once you have to hope that everything else falls together. A fix may just be a workaround. If you just do the three column thing and test it in all the browsers you want your site to work in then you can proceed to work on the content code. Then test that in all your browsers. Put that in your columns and then test that again. If you go through a modular approach you'll understand your code a lot better and you'll be able to track problems much more easily.

Another thing is the bulk of your CSS code. Try and see if you can find something on the web about using shorthand properties. Here's a piece of your current code:

#leftmenu {
color: white;
text-decoration: none;
font: bold 11px;
width: 143px;
height: 320px;
padding-left: 5px;
padding-top: 5px;
left: 2px;
border-left: 2px solid #FFCC00;
border-bottom: 2px solid #FFCC00;
border-top: 2px solid #FFCC00;
background-color: #999999;
list-style-type: none;
list-style-image: none;
text-align: left;
margin-left: 0px;
margin-top: 86px;
}

when optimized:

#leftmenu {
color: white;
text-decoration: none;
font: bold 11px;

width: 143px;
height: 320px;

padding: 5px 0 0 5px;

left: 2px;

border: solid 2px #fc0;
border-right: none;

background: #999;

list-style: none none;
text-align: left;

margin-top: 86px;
}

Also simple things like adding returns between things can help. If you have web-safe colors you can abbreviate them from #XXYYZZ to #XYZ. By default divs do not have any padding or margin. So it just adds extra bulk if you put "margin: 0px". And at that you can just say 0 because again it's redundant to say zero pixels. You appear to have a "left: 2px" there for some reason... That's only used for positioning yet you don't have any positioning code in your CSS yet.

Other ways you can optimize your code:

You seem to be using the box model hack in places where it's not appropriate. Essentially, Windows IE adds borders, margins and padding to the box but maintains the overall width of the box. All other browsers appropriately add them on top of the divs width. Tantek goes into more depth. Anyways, you don't need to use it where you have no borders, padding or margins. Like on your #header. I don't know why you'd want it to appear as 59px tall on some browsers but you can completely not use the hack there.

You also seem to have some left over code that may be causing psome problems. It's right after your "#header h1 span" selector and ends right before your "p, h1,pre" selector. All that you can get rid of.

As I mentioned before, any instances of 0px can be changed to just 0.

In your left sidebar you have two divs, one which shows the rest of the flower image then another which houses the ul. You only need one. In the HTML, get rid of the second div container. Now you just have #leftcontent. In #leftcontent add a padding of 86px which will make sure it doesn't draw anything over the flower. Then in your CSS code, change "#leftmenu" to "#leftcontent ul". Then delete all the code for the original "#leftmenu ul". Since you are using fixed widths and heights you'll need to employ the box model hack. Read the link I gave you earlier and then once you fully understand it, you can use it.

In your #centercontent you're using the box model hack. The "left: 154px" will ONLY be read by Win:IE, other browsers will keep going past the voice-family code, and then use the correct "left: 150px". Anything after the voice-family code should ONLY be code that you only want compliant browsers to read. Like the updated left property. "z-index: 10" however seems like you want all browsers to know that. Therefore you should put it before the voice-family. Moving on, you have your "html>body #centercontent" selector. This is just a recover selector for Opera. It prematurely doesn't load anything after voice-family as well. So it uses this selector instead. Therefore anything in here should be identical to anything that was directly after the "voice-family" of the previous selector. But it's not. You have several margins and whatnot. Which seems to be a workaround, which isn't good If you have a strong foundation then the rest will flow. BTW, why have margins anyways when you can just use the "top, right, bottom, left" positional code instead? Do margins even do anything when their object is positioned?

There's a lot more but I'll leave it at that for now. That's why I think it's kind of hard just to tell you what to fix. If you can clean up the code then I think more people can help you with any problems you may have.

Hope this helps

[RGB]

Originally posted by Synotic:
-- Lots of great advice --

Thank you very much for the detailed response, I will tackle these issues one by one when I go into work on Monday.

[Scarpa]

I just wanted to add that I've seen some plenty of other good replies from Synotic in CSS-related threads. Thank you!

[RGB]

Just to note: The majority of the CSS was written by CSSEdit. It will definitely be cleaned up.

[RGB]

Almost fixed.

Page is at:
http://www.kutc.ku.edu/KUTC2c/index.html

CSS at:
http://www.kutc.ku.edu/KUTC2c/kutc2c.css

Two issues remain:

1) In IE for PC, the right border of the center content is 'off' by 2px, and won't realign.

2) The center content box won't stretch to the bottom of the screen unless the content pushes it down, on any browser.

Other than that, this stage of the design is pretty much solved.

Synotic, I went through the CSS looking for everything you pointed out, and I got most of it (but obviously not all). Thanks again for the quality response.

Now if only I could solve these last two glitches.