Little help with my site?

[Wee Beastie]

Hello all,
This is my first post in the web development forum, though I have been watching it for awhile and have picked up lots of great info. I was hoping I could get a little help on my site. You will no doubt be able to tell that I am a novice designer, so be prepared for some very ugly code. It is a very simple, streamlined portfolio site (I have only uploaded some of the content). Basically I am having some spacing issues occuring in IE 7. If I can get it right in IE 7 I'll be satisfied. IE 6 is just icing on the cake. The site looks perfect in Safari and Firefox (same old story). The trouble seems to be directly above the footer in all pages, and in multiple areas in my "About/News" page. I started out using the Dreamweaver template for a fixed three column with a header and footer. I am posting the URL and a CSS file. I have two CSS files that I need help with, but I'll stick with just the one for now to keep this post from getting too long (oops too late). If anyone can help me out I'd really appreciate it. Thank you!

http://www.plasticmenagerie.com/

The CSS file below pertains to the "art" section of my site.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
}
.thrColFixHdr #container {
width: 950px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px none #FFFFFF;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColFixHdr #header {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: normal;
background-image: url(images_BG/headers2/header_BG.gif); background-repeat: no-repeat;
}
.thrColFixHdr #container #header #links {
margin-left: 648px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #EE755F;
text-decoration: none;
background-image: none;
height: 81px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.thrColFixHdr #container #header img {
float: left;
}
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 164px;
background-image: url(images_BG/sidebar1.gif); background-repeat: no-repeat;
height: 659px;
overflow: auto;
padding: 0;
margin: 0px;

}
.thrColFixHdr #sidebar2 {
float: left; /* since this element is floated, a width must be given */
width: 204px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0; /* padding keeps the content of the div away from the edges */
background-color: #FFFFFF;
height: 659px;
background-image: url(images_BG/sidebar2.gif); background-repeat: no-repeat;
line-height: 130%;
margin: 0px;
}
.thrColFixHdr #mainContent {
padding: 0;
line-height: normal;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width: 582px;
float: right;
margin: 0;
height: 659px;
}
.thrColFixHdr #footer {
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
width: 950px;
background-color: #FFFFFF;
margin: 0px;
height: 60px;
}
.thrColFixHdr #footer p {
margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.thrColFixHdr #container #header h1 a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #EE755F;
text-decoration: none;
}
.thrColFixHdr #container #header h1 a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #EE755F;
text-decoration: none;
}
.thrColFixHdr #container #header h1 a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #0066FF;
text-decoration: none;
}
.thrColFixHdr #container #header h1 a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #CCCCCC;
text-decoration: none;
}
.thrColFixHdr #container #sidebar1 h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #333333;
text-decoration: none;
padding-right: 0px;
padding-left: 40px;
padding-top: 10px;
}
.thrColFixHdr #container #sidebar2 p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #333333;
text-decoration: none;
padding-left: 18px;
padding-top: 10px;
padding-right: 15px;
}
.thrColFixHdr #container #mainContent h1 {
line-height: 0%;
}
.thrColFixHdr #container #sidebar1 h3 a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #333333;
text-decoration: none;
}
.thrColFixHdr #container #sidebar1 h3 a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #333333;
text-decoration: none;
}
.thrColFixHdr #container #sidebar1 h3 a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #0066FF;
text-decoration: none;
}
.thrColFixHdr #container #sidebar1 h3 a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #CCCCCC;
text-decoration: none;
}
.thrColFixHdr #container #header #links h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #EE755F;
text-decoration: none;
padding-top: 50px;
line-height: normal;
margin: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

 

[jng]

Could you post some screenshots of specific spacing issues? I don't have access to a PC right now.

 

[Wee Beastie]

Could you post some screenshots of specific spacing issues? I don't have access to a PC right now.

Unfortunately neither do I--I should have done that yesterday when I was on a PC... I will be using one tomorrow though. Worst case, I will just post the screen shots tomorrow. Thank you for your interest though.

 

[Wee Beastie]

screen shot

okay, as requested I am posting a screen shot of the issue. The yellow box indicates the problem area. You can compare to the working version by opening this link in FF or Safari: http://www.plasticmenagerie.com/ and click on "Art." What do you think I am doing wrong? Thanks!

I am unable to attach a file. I keep returning to the login page each time I attempt to. So lets try something else.

click here for the screen shot: http://s29.photobucket.com/albums/c272/mpseymour/Other/?action=view&current=screenshot.jpg

 

[jng]

You're right, it is ugly code. Unfortunately that's the problem with using WYSIWYG programs like Dreamweaver. It's actually easier for me just to recode that page. To really fix the problem, I'd need a PC and I've deleted Windows off my Mac for space reasons. Sorry.

I dumped your curved borders. Mostly because I don't like them. I think columns should be self-evident and thus borders unnecessary. But also, they make your design much more complicated. If you want to keep the round outer border, you'd need to use Sliding Doors.

I know in the end, I didn't answer your question about the gap. But take a look at this anyway:

http://iklio.com/art/

I think it'll help you in the long run, esp. when if you want to get into design/development. Also the code is just much cleaner and should be easier to update.

Let me know when you've downloaded it (with images) because then I'll remove it from my server.

 

[Wee Beastie]

^^^ Okay I've got it, so feel free to remove it from your server. I like what you've done here. I think I see your vision. I agree that my thinking regarding my site has been too rigid. I'm trying to get a couple of practice sites under my belt to free my thinking and get me used to designing/developing websites.

Okay let me take a closer look at what you've done and see how I can approach my site differently. Thank you very much for taking the time to do this.

 

[jng]

np, just threw it together. Also I forgot to add, I didn't throw in your navigation graphics at the bottom right (which can be more easily done in CSS actually) because I don't think it should be at the bottom. It seems like an important piece of navigation and it belongs somewhere higher on the page. On many pages, you don't even see it until you scroll down.

Good luck getting the hang of things. My advice is to really handcode though. Use photoshop as your sketchpad but do as much as you can by hand, code wise. Dreamweaver is good. But debugging is hell when it comes to Dreamweaver code.

 

[Wee Beastie]

Yeah I have been finding that there has been no choice but to dive in and fix things by hand. This is usually preceded by searching all over for examples of code. Believe me I am definitely heading toward the hand coding world, but I just have a lot to learn. I alway use the split view, so I can study what is happening in the code when I make a change using the UI.

The decision to put the navigation between the three major sections at the bottom was something that I debated for awhile. I wanted to present my creative exploits in a central location, but keep them distinct somehow. I really don't want to maintain three distinct sites for my work. Providing intuitive access to every part of my page is naturally better for the user, but I felt that each section would be viewed by a different audience and might distract from other sections. For instance, I am a bit worried that my art section might somehow negatively impact the users impression of my design section. I am probably worrying about it too much. And perhaps the effect would be positive instead of negative. Either way, by downplaying the links at the bottom, I was hoping to give each section a more inclusive feel.

As I am typing this I am considering virtue of trying to control the end user's experience. I think that a major challenge in web development is finding a balance between steering the users and opening everything up for them and letting them choose their own adventure.

All this worry over a site that is probably going to get like 11 hits a year

 

[jng]

The decision to put the navigation between the three major sections at the bottom was something that I debated for awhile. I wanted to present my creative exploits in a central location, but keep them distinct somehow. I really don't want to maintain three distinct sites for my work. Providing intuitive access to every part of my page is naturally better for the user, but I felt that each section would be viewed by a different audience and might distract from other sections.

But no matter what, it's navigation and navigation needs to be visible at first glance without scrolling. I would have just stuck it where you have the main navigation and also that one item, "News / About" confuses me with the slash.