Spacing Issues, Selected Menu Issues

[Lamez]

ok I am having some trouble with my side column, and top bar. if you click the link below you can see the 1px space between the top and column.

Also the div box in the middle that says "Hello" it way to close the side.

 

None of this happened until I added my menu.

 

Also when the menu item is selected I want the background color to stay the same as when you hover over it. How would I do this, I have been working on this for the last hour.

 

Here are some links that will help you help me

 

Current Template w/ Menu: http://lamezz.com/_NEW/

 

Older Template w/o Menu: http://uploads.lamezz.com/New%20Template (I want my side column and logo header to look like this one)

 

Current CSS w/Menu http://lamezz.com/_NEW/style/default.css

 

Please help me guys on these issues I am really lost at this point.

-Thanks, James Little

[dbrimlow]

Your css has errors. This will throw off everything. Fix the errors, THEN debug for layout.

 

background-repeat: repeat-x, repeat-y;

 

bad syntax. Change to:

 

background-repeat: repeat;

 

background-color: cbcbcb;

 

bad syntax. Change to:

 

background-color: #cbcbcb;

 

margin: center;

no such animal. Use either auto, 0, px or %

 

/* Links

 

a:link, a:visited, a:active 

 

{

 

COLOR: #CCCCCC; text-decoration: underline;

 

}

 

a:hover

 

{

 

COLOR: #FFFFFF; text-decoration: none;

 

}*/

 

a:active is out of proper order. You can't include it here as a shortcut.

It MUST be defined AFTER a:hover.

 

And stay consistent, use lowercase for your "color" command.

 

You should also avoid using font-size: "large", "medium" or "small". When you do this you totally lose control of your sizing. Use em or %.

 

Set it to 100% in your "body" tag, then adjust up or down when you want it larger or smaller like this:

 

"font-size:90%", or "font-size:.9em"

 

The tag <center></center> is deprecated. Use a proper text block container like paragraph or list for text and style it in the css for the specific element you want to use it in:

 

<p class="leftb">Content</p>

    <p class="box">Hello</p>

In the css style the p tags like so:

 

.box p{text-align:center}

 

Fix these and the layout is an easy fix (right now your menu is pushing down the left column and creating the space).

[Lamez]

Wow thanks, you really know your CSS. OK that fixed my menu background problem when it was being selected, but now when you rollover the selected menu link, it adds an extra grey bar. Also how would I fix my menu bar, and column spacing?

[Lamez]

Alright I fixed the issue with the menu bar, and side column.

[Lamez]

Alright, I fixed most issues with the menu, but when I roll over the selected menu, it adds a extra block, I think if I spaced it out more it will fix it, but I do not know

 

tell me what you think: www.lamezz.com/_NEW/

[Lamez]

all issues fixed, thanks guys!

[dbrimlow]

You see?

 

Once you fix any error (either in your markup code or your css code), debugging layout is easy as pie.

 

A little trick you can use to cover the space on the left is to create a gray box 22px wide and 20px high and use position:absolute. A quick guess at positioning would be left:0; top:120px.

[Lamez]

well if you are talking about the menu, then I forgot to add a "#" to my menu colors, and I fixed the hight issue.

 

Thanks you help very much!

 

lol now go critique it, under the Website Critique.

[dbrimlow]

Don't go posting it there yet! LOL! You NOW have 14 errors in your markup!

 

FONTS!!! Oh, NO you DIDN'T use FONTS in your markup!

 

Shame on you.

 

Seeing font tags within an xhtml markup page is like seeing old round cast iron cannon balls stacked up next to a state-of-the-art, laser guided, self-propelled 155mm Howitzer!

 

NEVER use font tags. That's the whole point of using css. Here, try this:

 

<div class="leftb">

<h4>Welcome!</h4>

<p>Welcome I have completely remodeled the web site from inside out. 
Please feel free to sign up and contact me about anything. 
I am still doing some work on the web site, so do not be 
surprised if your account has been deleted.</p>

<p class="center">-Lamez (James Little)</p>
</div>

 

Now, code your style sheet to make any "font" size, color, type changes:

p.center {
text-align:center
}

 

Also, I hate to say it, but this design is extremely unstable because of the way you made the div.logo and div.menu items.

 

You use both  #wrapper and div.top with no css commands (they aren't even in the css).

 

I've been playing around with it for an hour or so to get it cross-browser compatible, but I had to stop myself because I was changing the entire css.

 

It can be made to work in IE, but not FF. And that means something's broken. Remember, FF is a real browser that is web standards compatible and IE isn't.

 

So the key is to get your design working properly in FF first, then just make some adjustments for IE.

 

It is far, far easier to use a separate IE-only.css that has only a few lines to modify the widths, heights, left, right, margins and paddings. Then call it in your head tag using an IE conditional comment, like this:

 

<link rel="stylesheet" type="text/css" href="style/default.css"/>
<!--[if lt ie 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="IE-only.css" />
<![endif]-->

</head>

<body>

 

Any version of IE up to and including 7, will call the IE-only.css file and use the commands within it to over-ride the same commands in your real css file.

 

 

[Lamez]

Alright, I will do that, will I have to copy my old CSS for the new IE one? Then just modify it, right?

 

Then when I debugged my CSS, it said -2% is invalid, but then if I take it out, my menu drops down and messes it all up again.

so how would be able to fix this?

 

-Thanks for all the help!

 

 

[dbrimlow]

No, don't copy the whole css just to make it work in IE and recreate the proper css for valid content. It needs to be the other way around.

 

Remember, if it works in IE but NOT in FF, then there is most-likely a flaw in the layout concept. Conversely, if it works in FF, but not in IE, then you only need to tweak a few commands to make IE behave.

 

The point of using css is to make the web page cleaner and leaner, reducing the amount of page "weight" for faster and more efficient download and reduce the amount of bandwidth each page uses up.

 

If you just copy your css to ie-only.css, THEN create another whole new css file, you have doubled the page weight (everything a page uses as a resource is part of the page's weight, external files, jscript, markup, graphics, etc.)

 

The trick with using "IE conditional comments", is that the css it points to (for use with any IE), does NOT contain ALL of the same commands as the main css including any modifications.

 

It ONLY modifies the portions of the main css commands necessary to get IE to behave - sort of like using the old "hacks" within a css.

 

For instance, I have a page that uses a main css where most of it works in IE, except for the margins of two container items. My ie-only.css file just contains two lines, an ID and a class, and it doesn't copy ALL of the commands for them, just the one or two that IE requires.

 

Here are those two items within the main css file, with all commands:

#header {

width: 100%;

height:56px;

margin:1px 0 10px 0;

background: #4B0254 url (headback.jpg) bottom right no-repeat

}

 

.content {

margin:5px 0 0 5px;

width: 70%;

float:left;

padding-left: 10px;

}

 

Now here is the complete ie-only.css file, that just modifies the commands necessary:

 

#header {
margin:0 0 10px 0; 
clear:right
}
.content {
margin:5px 0 0 10%}

 

Notice the only changes in #header that IE needs is to use a top margin of 0px instead of the main css of 1px, and it clears any floats to the right of it. Otherwise, all other commands for #header from the main css work fine in IE.

 

The only change for my .content for IE is the left margin of 10% instead of 5px, it is a MAJOR change. And one would think, "whoa, how do you go from 5px left margin in real browsers to 10% in IE!!!"

 

Welcome to the wonderful world of IE 6.0 and floats.

 

********************

 

For your page, the whole structure is wrong, the problem is with the header and menu. They don't work neatly with the other elements. The killer is the way the menu is set up. It creates too large of a block when used with the ul and li commands.

 

What you are trying to do is called a "tab" menu.

 

Here is a cool article and sample on how to do this

http://www.alistapart.com/articles/slidingdoors/

 

And of course let's not forget the master at list-o-matic:

http://css.maxdesign.com.au/listamatic/index.htm

 

Look at how they do it.