A work in progress, CSS assistance needed

[Patrick Smith]

Hi All,

I am redesigning our current website and am going for the tableless
layout and fluid design. Yeah! Right? Only I am no CSS expert.

I've got the basic design but have hit two problems that I was hoping
someone might take a look at the page and maybe tell me how to fix it.

1st. The top banner area is divided into 3 divs. When I resize in
Mozilla, Firefox and Safari there is a vertical white stripe between the
center and right div and depending on where I stop it may or may not be
visible.

2nd. In IE6, there is a white space between the banner area and the
"menu bar" that I can not make go a way. This does not occur in Mozilla,
Firefox or Safari.

Also, if anyone sees where I might have glaring problems in the rest of
the CSS and wants to alert me to these I would be grateful.

The link to the page in question is here;
<http://ocgweb.marine.usf.edu/~patrick/New/test.html>

Thanks for your time and help,
Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: [phone]

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

[Beauregard T. Shagnasty]

Patrick Smith wrote:

1st. The top banner area is divided into 3 divs. When I resize in
Mozilla, Firefox and Safari there is a vertical white stripe between
the center and right div and depending on where I stop it may or may
not be visible.

Why the three divs? Is something else going to be in them? Seems like
overkill. Use one div, and float the graphic left with a bit of left
padding.

2nd. In IE6, there is a white space between the banner area and the
"menu bar" that I can not make go a way. This does not occur in
Mozilla, Firefox or Safari.

No IE at the moment...

Also, if anyone sees where I might have glaring problems in the rest
of the CSS and wants to alert me to these I would be grateful.

I removed a tonne! of "position:relative" (all of them) and nothing
changed. Why are any of them there?

Changing #topcontentleft 's margin:0 to margin:1px caused the entire top
area to explode.

The link to the page in question is here;
<http://ocgweb.marine.usf.edu/~patrick/New/test.html>

--
-bts
-Motorcycles defy gravity; cars just suck

[Andy Dingley]

On 31 Jan, 19:50, Patrick Smith <[e-mail]:

I am redesigning our current website and am going for the tableless
layout and fluid design.

<http://ocgweb.marine.usf.edu/~patrick/New/test.html>

Looking good so far and the coding is fairly good too.
Switch to a HTML 4.01 Strict doctype.
- You need this if you care about IE working right
- You ought to anyway. This isn't a legacy page

Don't greek out the menu bar markup, use real <liand <aif you
expect the CSS prototype to look representative of the final product.

Add a greeked "copyrights, credits and legalese" footer to your draft
design. I can't see much navigation here. Presumably there's going to
be a 2nd level menu at some point? Equally how images and image
captions are expected to be displayed.

There's a lot of position:relative; going on. This is superfluous,
unless you're actually moving stuff around (which you're not). I'd
drop them and leave static positioning. If you want an explicitly
stated default, add it to body {}

body {} should probably set colors.

0.8em is smaller than ideal for a major nav feature. Stick with 1em

Set the blue stripe header heights in ems, not px, or the text will
spill out of them when resized.

A bit (more) of horizontal padding inside the content boxes stops the
text running into each other when re-sized larger.

I'd add a class on the major elements like "topcontentleft" and I'd
use this in the CSS selectors rather than #id. The id itself is OK,
but using id in a CSS selector is quite powerful and it makes it hard
to "subclass" smaller components within these areas later. Using class
works just as well for what you need, but is more flexible to adjust
the details.

This
border: #000080 2px solid;
border-top-width: 15px;

is a bit more terse (and readable) than

border-top: #000080 15px solid;
border-left: #000080 2px solid;
border-right: #000080 2px solid;
border-bottom: #000080 2px solid;

1st. The top banner area is divided into 3 divs. When I resize in
Mozilla, Firefox and Safari there is a vertical white stripe between the
center and right div and depending on where I stop it may or may not be
visible.

I didn't see this in FF 1.5.0.9 / WinXP

2nd. In IE6, there is a white space between the banner area and the
"menu bar" that I can not make go a way. This does not occur in Mozilla,
Firefox or Safari.

Happens in IE7 too. Can't see anything obvious, but don't have time to
look harder.

[Beauregard T. Shagnasty]

Beauregard T. Shagnasty wrote:

Patrick Smith wrote:

>1st. The top banner area is divided into 3 divs. When I resize in
Mozilla, Firefox and Safari there is a vertical white stripe between
the center and right div and depending on where I stop it may or may
not be visible.

Try this replacement for your CSS for all the parts to and including the
..imgholder. Wrap a new <div id="topcontainer"around your other three
"top" divs. Works in Firefox, Opera, and IE6.

<style type="text/css">
body{
font: 100% #000 arial, sans-serif; /* don't forget fallback font */
margin: 0;
padding: 0;
}
#topcontainer {
background-image: url(bgforlogowbgsm.jpg);
background-repeat: repeat-x repeat-y;
height: 7em;
}

#topcontentleft {
background: transparent;
float:left;
width:24%;
}

#topcontentcenter {
background-color: transparent;
float:left;
width:49%;
}

#topcontentright {
background-color: transparent;
float:right;
width:24%;
}

..imgholder {
padding-left: 2.5em;
}

Further, I removed every instance of "position: relative" and nothing
changed. They do not seem to be necessary at all.

--
-bts
-Motorcycles defy gravity; cars just suck

[Ben C]

On 2007-02-01, Andy Dingley <di*****@codesmiths.comwrote:

On 31 Jan, 19:50, Patrick Smith <[e-mail]:

>I am redesigning our current website and am going for the tableless
layout and fluid design.

><http://ocgweb.marine.usf.edu/~patrick/New/test.html>

[snip]

There's a lot of position:relative; going on. This is superfluous,
unless you're actually moving stuff around (which you're not).

I haven't looked at this particular site, but sometimes there is a case
for using position: relative to establish a containing block for
positioned descendents, even if one doesn't wish to offset the
relatively positioned box itself.

[Patrick Smith]

Andy Dingley wrote:

On 31 Jan, 19:50, Patrick Smith <[e-mail]:

>>I am redesigning our current website and am going for the tableless
layout and fluid design.

>><http://ocgweb.marine.usf.edu/~patrick/New/test.html>

Looking good so far and the coding is fairly good too.
Switch to a HTML 4.01 Strict doctype.
- You need this if you care about IE working right
- You ought to anyway. This isn't a legacy page

Don't greek out the menu bar markup, use real <liand <aif you
expect the CSS prototype to look representative of the final product.

Add a greeked "copyrights, credits and legalese" footer to your draft
design. I can't see much navigation here. Presumably there's going to
be a 2nd level menu at some point? Equally how images and image
captions are expected to be displayed.

There's a lot of position:relative; going on. This is superfluous,
unless you're actually moving stuff around (which you're not). I'd
drop them and leave static positioning. If you want an explicitly
stated default, add it to body {}

body {} should probably set colors.

0.8em is smaller than ideal for a major nav feature. Stick with 1em

Set the blue stripe header heights in ems, not px, or the text will
spill out of them when resized.

A bit (more) of horizontal padding inside the content boxes stops the
text running into each other when re-sized larger.

I'd add a class on the major elements like "topcontentleft" and I'd
use this in the CSS selectors rather than #id. The id itself is OK,
but using id in a CSS selector is quite powerful and it makes it hard
to "subclass" smaller components within these areas later. Using class
works just as well for what you need, but is more flexible to adjust
the details.

This
border: #000080 2px solid;
border-top-width: 15px;

is a bit more terse (and readable) than

>>border-top: #000080 15px solid;
border-left: #000080 2px solid;
border-right: #000080 2px solid;
border-bottom: #000080 2px solid;

>>1st. The top banner area is divided into 3 divs. When I resize in
Mozilla, Firefox and Safari there is a vertical white stripe between the
center and right div and depending on where I stop it may or may not be
visible.

I didn't see this in FF 1.5.0.9 / WinXP

>>2nd. In IE6, there is a white space between the banner area and the
"menu bar" that I can not make go a way. This does not occur in Mozilla,
Firefox or Safari.

Happens in IE7 too. Can't see anything obvious, but don't have time to
look harder.

Thanks for the input. It is all very good thoughts and will work on
implementing them. What do you mean by greeking?

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: [phone]

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

[Andy Dingley]

On 5 Feb, 15:46, Patrick Smith <[e-mail]:

What do you mean by greeking?

Just adding some "rhubarb rhubarb" text to emulate the other features
you're likely to have to add in the final version. Originally (from
printed typography) greeking was literally unintellible blobs rather
than real characters, but for web design "Lorem ipsum" is more
convenient, representative and no more work.

If you mock up a trivial simplest case, it only demonstrates that
simplest case. I think you're likely to be needing a secondary menu
and a legalese footer before you're done. Many site style demos need
more than one page to be greeked up before they can really demonstrate
the full stylesheet.