22 replies [Last post]
holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

I designed a site but when viewed in ie only one box isnt as wide as all the others. I have the same width and same border etc. At first my html had the position absolute set. my header was set left:0px width: 800px, and my navigation div tag was set to the same. why would it appear in ie as nearly 5px off on the right margin? see site at www.holepunchstudios.com/cereserv/index.html it looks fine in ff but in ie its off.

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

this is my html

this is my html

div id="navigation" style="width:800px; height:25px; z-index:1">

#navigation
{
background-color: #f7af2a;
position: absolute; left: 0px; top: 150px;
border-color: #174120;
border-style: solid;
border-width: 2px;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Where do I start? Read the

Where do I start?

Read the stickies at the head of the forum:

1. Get a valid doctype (yours is only partial)
2. Validate the code (it fails)
3. You have used absolute positioning everywhere. Aaaghhh.

You need to re-think how to lay out a 3 column page. Yours is the easiest of layouts to make in css, three columns and fixed width, left aligned, so go find a template that works.

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

i read the doctype but im

i read the doctype but im using a weather thing that the client wants and it causes that not to work. I havent got to the point to validate the code but i will. I mostly a designer of print so im new to css. I dont want to work off a template though, i want to build my own. how do i position it the same without absolute?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Take a look at this

Hi

Take a look at this code:

HTML:

CereServ
@import url("style.css");

This is the
Main Content

This is the Left Sidebar

CSS:

/*** Style for 3 Column Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; min-width:804px; /*** Content Width ***/ } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ text-align:left; position:relative; width:804px; /*** Content Width ***/ display:table; margin-bottom:-50px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background:#174120; /*** Background colour of left AND right columns. ***/ } #wrapper{ display:table-cell; position:relative; } #outer{ position:relative; margin-left:200px; /*** Left Column Width ***/ width:418px; /*** Center Column Width ***/ background:#FFFFFF; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:418px; /*** Center Column Width ***/ float:left; display:inline; } #left{ float:left; display:inline; width:200px; /*** Left Column Width ***/ margin-left:-200px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:186px; /*** Right Column Width ***/ margin-right:-186px; /*** NEGATIVE Right Column Width ***/ position:relative; } #center{ width:418px; /*** Center Column Width ***/ float:right; height:100%; display:table; } #clearheadercenter{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderleft{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderright{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearfootercenter{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterleft{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterright{ height:50px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } .bar2px{ margin:0px; background:#174120; height:2px; overflow:hidden; } #footer{ z-index:1; position:relative; width:100%; height:0px; } #footer-inner{ width:804px; /*** Content Width ***/ height:0px; } #bottomgap{ margin:0px; background:#FFFFFF; height:10px; overflow:hidden; } #subfooter1{ margin:0px; background:#FFFFFF; text-align:center; height:53px; overflow:hidden; } #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; height:0px; } #header-inner{ width:804px; /*** Content Width ***/ height:0px; } #topmargin{ margin:0px; background:#FFFFFF; height:10px; overflow:hidden; } #subheader1{ margin:0px; background:#FFFFFF; text-align:center; height:140px; overflow:hidden; border:2px solid #174120; border-width:0px 2px; } #subheader2{ margin:0px; background:#F7AF2A; text-align:center; height:23px; overflow:hidden; border:2px solid #174120; border-width:0px 2px; } #container-left{ color:#FFFFFF; margin:0px 2px; } #container-right{ color:#FFFFFF; margin:0px 2px; } #container-center{}

No use of Abs Pos.

Note that border width is NOT used if a width is set to the div, and border height not used where a height is set to a div. Important for IE5.x

Drop your bits in. Try to use % settings for fonts (experiment to get best results but leave page set to 100.1%

Trevor

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

sheesh

only if i understood that. I guess i will mess with it and try to understand it a bit. Thank You greatly.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok Here's how it

Ok

Here's how it works.

The center column comes first.

It avoids the left and right columns by having left and right margins

The footer comes next, it is moved upwards by a negative margin on the pagecontainer. The columns above avoid it by having dummy empty divs below them the same height as the footer (like air bags).

The header comes last. It is moved back to the top of the page, over everything. Again, the columns miss it using empty divs as air bags.

The other wrapping divs (wrapper, outer, float-wrap) are used to make sure that the backgorund pattern is repeated downwards without using images, and that whiever column is longest pushes the footer and baground colors down.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I played arround with

Hi

I played arround with the code and found a few errors (I had taken a template and made it like yours), so here is the fixed coded (also smaller):

CSS:

/*** Style for 3 Column Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; min-width:804px; /*** Content Width ***/ } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ text-align:left; position:relative; width:804px; /*** Content Width ***/ display:table; margin-bottom:-65px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background:#174120; /*** Background colour of left AND right columns. ***/ } #outer{ position:relative; margin-left:200px; /*** Left Column Width ***/ width:418px; /*** Center Column Width ***/ background:#FFFFFF; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:418px; /*** Center Column Width ***/ float:left; display:inline; } #left{ float:left; display:inline; width:200px; /*** Left Column Width ***/ margin-left:-200px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:186px; /*** Right Column Width ***/ margin-right:-186px; /*** NEGATIVE Right Column Width ***/ position:relative; } #center{ width:418px; /*** Center Column Width ***/ float:right; height:100%; display:table; } #clearheadercenter{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderleft{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderright{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearfootercenter{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterleft{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterright{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } .bar2px{ margin:0px; background:#174120; height:2px; overflow:hidden; } #footer{ z-index:1; position:relative; width:804px; /*** Content Width ***/ height:0px; } #footer-inner{ height:0px; } #bottomgap{ margin:0px; background:#FFFFFF; height:10px; overflow:hidden; } #subfooter1{ margin:0px; background:#FFFFFF; text-align:center; height:53px; overflow:hidden; } #header{ z-index:1; position:absolute; top:0px; left:0px; width:804px; /*** Content Width ***/ height:0px; } #header-inner{ width:804px; /*** Content Width ***/ height:0px; } #topmargin{ margin:0px; background:#FFFFFF; height:10px; overflow:hidden; } #subheader1{ margin:0px; background:#FFFFFF; text-align:center; height:140px; overflow:hidden; border:2px solid #174120; border-width:0px 2px; } #subheader2{ margin:0px; background:#F7AF2A; text-align:center; height:23px; overflow:hidden; border:2px solid #174120; border-width:0px 2px; } #container-left{ color:#FFFFFF; margin:0px 2px; } #container-right{ color:#FFFFFF; margin:0px 2px; } #container-center{}

HTML:

CereServ
@import url("style.css");

This is the
Main Content

This is the Left Sidebar

Trevor

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

Thank you, if i wanted to

Thank you, if i wanted to center the whole thing, i give the main content div a "align="center" correct?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ah ... no The template I

Ah ... no

The template I used had the centering bits in. I took them out for you. Do you want them back in?

I have to go to a school parent's evening right now.

I'll re-post later.

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

yeah, then i can see the

yeah, then i can see the difference.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

holePUNCH wrote:Thank you,

holePUNCH wrote:
Thank you, if i wanted to center the whole thing, i give the main content div a "align="center" correct?

While this used to work, it's not a recommended method. Styling should be kept as far away from the HTML content as possible.

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Here comes the centered version

Here comes the centered version:

HTML:

CereServ
@import url("style.css");

This is the
Main Content

This is the Left Sidebar

CSS:

/*** Style for 3 Column Template ***/ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; min-width:804px; /*** Content Width ***/ text-align:center; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ margin-left:auto; margin-right:auto; text-align:left; position:relative; width:804px; /*** Content Width ***/ display:table; margin-bottom:-65px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background:#174120; /*** Background colour of left AND right columns. ***/ } #outer{ position:relative; margin-left:200px; /*** Left Column Width ***/ width:418px; /*** Center Column Width ***/ background:#FFFFFF; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:418px; /*** Center Column Width ***/ float:left; display:inline; } #left{ float:left; display:inline; width:200px; /*** Left Column Width ***/ margin-left:-200px; /*** NEGATIVE Left Column Width ***/ position:relative; } #right{ float:left; display:inline; width:186px; /*** Right Column Width ***/ margin-right:-186px; /*** NEGATIVE Right Column Width ***/ position:relative; } #center{ width:418px; /*** Center Column Width ***/ float:right; height:100%; display:table; } #clearheadercenter{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderleft{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearheaderright{ height:179px; /*** TOTAL Height of Header Rows ***/ overflow:hidden; } #clearfootercenter{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterleft{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } #clearfooterright{ height:65px; /*** TOTAL Height of Footer Rows ***/ overflow:hidden; } .bar2px{ margin:0px; background:#174120; height:2px; overflow:hidden; } #footer{ z-index:1; position:relative; height:0px; width:100%; } #footer-inner{ margin-left:auto; margin-right:auto; height:0px; width:804px; /*** Content Width ***/ } #bottomgap{ margin:0px; background:#FFFFFF; height:10px; overflow:hidden; } #subfooter1{ margin:0px; background:#FFFFFF; text-align:center; height:53px; overflow:hidden; } #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; /*** Content Width ***/ height:0px; } #header-inner{ margin-left:auto; margin-right:auto; width:804px; /*** Content Width ***/ height:0px; } #topmargin{ margin:0px; background:#FFFFFF; height:10px; overflow:hidden; } #subheader1{ margin:0px; background:#FFFFFF; text-align:center; height:140px; overflow:hidden; border:2px solid #174120; border-width:0px 2px; } #subheader2{ margin:0px; background:#F7AF2A; text-align:center; height:23px; overflow:hidden; border:2px solid #174120; border-width:0px 2px; } #container-left{ color:#FFFFFF; margin:0px 2px; } #container-right{ color:#FFFFFF; margin:0px 2px; } #container-center{}

Checked in IE FF and Opera.

Trev

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

your the best no matter what

your the best no matter what the others say about you!
you can see what i added as far as content at http://www.holepunchstudios.com/cereserv/index.html
some things that im unsure about:
in the left side bar i have links with a white background. i gave the paragraph a white background in css with a negative top margin to make a complete white box with the the paragraph header (farm industry links) that also has a white background. I was unsure if i could make another div inside the leftside bar with a white background and its own text inside.
also on the left side bar i have logos. how do i center horizontally. if i give it a float: left then it jumps out of the div. If i give it a high left and right margin it moves it more to the right (probably cause left margin takes precidence over right margin) any ideas?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

holePUNCH wrote:no matter

holePUNCH wrote:
no matter what the others say about you!

Who does? Dis me? Let me at them ..

The rest I am looking at and will advise each bit as I check it.

However ...

You have an xml declaration at the start. You should not use this as it throws IE6 into quirks mode. You can safely delete it.

The left sidebar links in white background should be an unordered list. I'll show you how in the next post, when I've checked it.

Trev

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Oh And whilst were are at

Oh

And whilst were are at it, we will lose that nasty javascript and do the email link rollover in css, OK?

BTW, I presume that link is always at the bottom of that left sidebar, and should sit just above the footer?

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

i guess i never thought of

i guess i never thought of doing the image swap in css. and yes always on the bottom of left side bar.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok Done the css thing to

Ok

Done the css thing to swap the image, here are the changes:

1 Delete the java in the head
2 Delete on the body onload
3 Delete the link, this one:

staff email

4 Change the margin-bottom of the fullheightcontainer to 105px:

#fullheightcontainer { background: rgb(23, 65, 32) none repeat; margin-left: auto; margin-right: auto; text-align: left; position: relative; width: 804px; display: table; margin-bottom: -105px; }

5 Change the height of clearfooterleft to 115px (this allows an extra 10px over the height of the footer rows for a margin):

#clearfooterleft { overflow: hidden; height: 115px; }

6 Add this new css:

#emailcss {overflow: hidden; height: 30px; margin:0px 644px 10px 40px; width:120px} #emailcss a{ text-decoration:none; background:url(images/emailbutton_css.gif) 0 0 no-repeat; display:block; height:30px; width:120px; overflow:hidden; } #emailcss a:hover{ background:url(images/emailbutton_css.gif) 0 -30px no-repeat; }

7 Add this new html above the bottomgap div and below the opeing of the footer-inner:

Finally, you need a new gif (see attached).

I'll take a look at the side links now.

Trevor

AttachmentSize
emailbutton_css.gif 2.79 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

That reminds me. You are

That reminds me. You are coding in xhtml now, so you must close unpaired tags, they have a space and slash before the end bit, like this for break:


The other tags that need this are link, img and meta

Other tags close normally.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Here's the sidebarlinks

Here's the sidebarlinks code:

1 Delete the html for the links:

Farm Industry Links

National Farm
News


CereServ
News

2 Add this code instead:

Which reminds me, target is not allowed under xhtml. You simply let the user learn to use the right mouse button to open in a new window/tab or let them set their browser to do this automatically, so you should remove those from this code too.

3 Remove these css bits:

A:link.leftsidebar{ color: #000000; font-family: helvetica, arial, sans-serif; font-size: 100%; text-decoration: underline; margin: 5px 5px 5px 5px ; } A:visited.leftsidebar{ color: #000000; font-family: helvetica, arial, sans-serif; font-size: 100%; text-decoration: underline; margin: 5px 5px 5px 5px ; } A:hover.leftsidebar{ color: #174120; font-family: helvetica, arial, sans-serif; font-size: 100%; text-decoration: underline; margin: 5px 5px 5px 5px ; }

and

p.leftsidebarheader { margin: 10px 5px 5px; color: rgb(68, 68, 68); background-color: rgb(255, 255, 255); font-size: 100%; font-weight: bold; text-decoration: none; text-align: center; line-height: 150%; } p.leftsidebarlinks { margin: -5px 5px 5px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); font-size: 80%; line-height: 150%; text-align: center; }

4 Add this new css:

#leftsidebarlinks{ background-color: rgb(255, 255, 255); margin:10px 5px; text-align: center; padding:5px 0px; line-height: 150%; } #leftsidebarlinks dt{color: rgb(68, 68, 68); font-weight: bold; text-decoration: none; } #leftsidebarlinks dd{margin: 5px 0px; color: rgb(0, 0, 0); font-size: 80%; }

Also, change the font-family in the body css:

body { font-family: helvetica,arial,sans-serif; font-size: 100.1%; color: rgb(0, 0, 0); min-width: 804px; text-align: center; }

And then remove all other font-family references in the css.

Similarly:

You have lots of text-decoration:undeline for links. Don't bother putting these in, as they are the default unless you switch them off for the whole page. Same applies to font-size: 100%. Not needed.

Also, I prefer colors as hex code simply because it uses less code!

Finally, make sure the tag references in the css and html are lower case. I noticed some upper case A's.

You will find you have put in lots of unnecessary css attributes.

Oh, after finally, don't but breaks before the end of a paragraph, instead use extra bottom-margin for spacing.

Was there anything else you wanted? Looks like I'm getting a snow day tomorrow.

Trevor

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

that should be enough. i

that should be enough. i have already learned a lot. thanks for all your help.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Let us know when you reach

Let us know when you reach significant milestones in your design so we can see how you are getting on.

holePUNCH
holePUNCH's picture
Offline
newbie
Ohio
Last seen: 14 years 10 weeks ago
Ohio
Joined: 2007-02-05
Posts: 10
Points: 0

will do. I have a few more

will do. I have a few more coming up soon. Plus i may try to redesign my own site using a ton of photoshop and css. so that might be a challenge.