CSS Forum

**edzdallas79** · 07-07-2007, 03:55 AM

hey all,

i'm currently working on a project (www.eddiewalter.com/staging) and i can't seem to get the left menu div positioned correctly. this is the first site i've done using css positioning vs. tables, so i may be doing something really stupid. the div is set to 197px (193px for IE because of borders) and the contents of the div seems to only be taking up 147px of it. if i set the position for this div to a negative value, it positions it at the top left of the column where i want it, but the contents still only seem to take up 147px. =(

the html for the menu is:

Code:

<div id="left-menu">
<ul>
<li><a href="index.aspx">&gt;&nbsp;&nbsp;&nbsp;Home</a></li>
<li><a href="buying-real-estate.aspx">&gt;&nbsp;&nbsp;&nbsp;Buyer's Center</a></li>
<li><a href="selling-real-estate.aspx">&gt;&nbsp;&nbsp;&nbsp;Seller's Center</a></li>
<li><a href="search.aspx">&gt;&nbsp;&nbsp;&nbsp;Search My MLS</a></li>
<li><a href="about.aspx">&gt;&nbsp;&nbsp;&nbsp;About Me</a></li>
<li><a href="contact.aspx">&gt;&nbsp;&nbsp;&nbsp;Contact Me</a></li>
</ul>
</div>

the css for that div is:

Code:

#left-menu {
    position: relative;
    left: 0px; top: 0px;
    width: 197px;
    border: 0px;
    float: left;
    text-align: left;
    color: #fff;
    font-size: 70%;
    overflow: hidden;
    margin: 0px; padding: 0px;
    margin-bottom: 7.5em;
    text-align: left;
    }
    
    /* Hack for IE */
    * html #left-menu {
       width: 193px;
       }
    /* End IE Hack */

the complete css file is located at www.eddiewalter.com/staging/assets/main.css

thanks guys. any help would be greatly appreciated. also, would love to have someone go through the css file and let me know if i'm missing something for learning how to transition from tables to css positioning.

**edzdallas79** · 07-07-2007, 04:19 AM

well, it looks right to me in ie7. the menu takes up the whole area i want it to, but it's still not working in FF2. grrr

**LadynRed** · 02:34 PM

Ok, that * html hack for IE does NOT work in IE 7, despite what you see as 'correct'.

Why are you positioning the #left-menu div at all ?? It may not be necessary, most newbies use positioning on everything - and it's mostly overkill.

In looking at your code, you have over-used positioning. Learn to use the normal document flow and use floats. I would remove the position: relative on almost everything except your #page, that is an appropriate place for it.
The top #nav doesn't need to be positioned at all.

You've got the #left-menu set to float:left, leave it that way and remove the position:relative. The section IS rendered in FF at 195px wide, so I'm not sure how you arrive at 147 - unless you're referring to the text. In that case, the text is only taking up as much space as needed based on your set font sizes.

Get rid of the hacks ! Move them to a separate CSS file that contains ONLY these rules and then use conditional comments to call the CSS file that contains the 'fixes'. IE is the only browser that will read those conditional comments.

**edzdallas79** · 07-07-2007, 07:54 PM

hey ladynred. thanks for the feedback. i got rid of all of the additional position: attribute. i got everything working right as far as i can tell. i've tested the page in FF 2, IE 5.5, IE 6, and IE 7 and everything looks right to me.

the only thing i notice is that in the "Search North Texas MLS" box, where it lists the lists of cities, whenever you mouseover "carrollton texas homes", it seems to put a border on top of the UL in all of the versions of IE. any advice?

**edzdallas79** · 07-07-2007, 07:56 PM

"Get rid of the hacks ! Move them to a separate CSS file that contains ONLY these rules and then use conditional comments to call the CSS file that contains the 'fixes'. IE is the only browser that will read those conditional comments."

can you point me to somewhere that explains how to do this?

**LadynRed** · 09:01 PM

Sure - http://css-discuss.incutio.com/?page=ConditionalComment

I use 2:

This one takes care of anything LESS than IE 7



This takes care of any IE version greater than 6



I'll make another suggestion to clean up your code. In your lists you have a ton of non-breaking spaces to push the text over in the list. Get rid of those and use padding on the <li> or <a> to push the text over where you want it.

I *think* the black border thing is coming from the .blockquote rules but I'll have to d/l the page and see if that's really it and how to fix it.

**edzdallas79** · 07-07-2007, 09:17 PM

yeah. i don't like having all of the non-breaking spaces in the page, but i can't figure out how to change the bullet image for a list the way i want. i want to just use a > for the bullet image on the left menu and i can't find a way to do that without creating an actual image.

the rules for .blockquote are here:

Code:

 #main-content .blockquote {
    padding: 15px;
    background-color: #999783;
    color: #fff;
    border: 1px solid #000;
    line-height: 1.5em;
    }
    
#main-content .blockquote a {
    color: #fff;
    }
    
#main-content .blockquote a:hover {
    text-decoration: none;
    }

**LadynRed** · 07-07-2007, 09:25 PM

aaahh.. changing the bullet is actually easy

The best way to do it is to use an image as a background on the <li> or the <a> if you want a roll-over effect. This eliminates the goofiness you get with IE's treatment of list bullets and gives you more control. You set the bg image to no-repeat, then you can use margins and padding put text/link text where you want it. You set <li> to list-style: none.

**edzdallas79** · 07-07-2007, 09:31 PM

ok. i just took the > out of the menu to git rid of the extraneous code.

any idea about the blockquote? it's got a border of 1px on it, but it looks like it's putting a border on the top of the UL when you mouseover the first LI.

**LadynRed** · 07-07-2007, 09:41 PM

yes.. it IS coming from the .blockquote rules- NOT #main-content .blockquote either. I put a 1px red border around the whole thing, and sure enough that's where it's coming from. Have to figure out why.. you may be running into conflicting rules in the cascade.

**edzdallas79** · 07-07-2007, 09:51 PM

i took out the .blockquote rules. i think they were extraneous. i just left the #main-content .blockquote rules in.

thanks for your help. by the way? how have i done for a CSS newbie?

**LadynRed** · 07-08-2007, 11:56 AM

Not too bad, actually

. Once you remember that the goal of CSS is to separate presentation from content, you learn to think about things like all those extraneous  s you had in there. Spacing between paragraphs, divs, etc. all done with CSS and not line breaks.

As I said, newbies tend to want to position everything and css positioning is one of those things that takes a while to grasp. Learn to use floats effectively and the normal document flow and you'll save yourself a lot of headaches.

The biggest pain, by far, is learning to beat the IE bugs - and I just read about a new one in IE 7 last night - an IE 7 variation on the old Guillotine bug. Once you learn to beat those, you're in pretty good shape

**edzdallas79** · 07-09-2007, 07:51 AM

hey ladynred. moved all of the ie stuff to a separate css file. thanks for that info! that's cool.

i'm not sure why you said that those hacks wouldn't work for ie7, because they did... if i would remove one of the ones that were for width of an element, it would mess up the layout in ie7.

anyway, i still can't figure out what's wrong with that blockquote. =(

**LadynRed** · 07-09-2007, 04:01 PM

Info on the *html hack is here: http://www.positioniseverything.net/...-dehacker.html

**edzdallas79** · 07-09-2007, 06:50 PM

i understand what you're saying. but i'm telling you that (because of borders in my layout), IE6 and IE7 for windows were not displaying the page properly. and those hacks fixed in and didn't effect FF.

take them out...... page looks funky because stuff isn't lining up correctly. put them back in........ everything's perfect.

**LadynRed** · 07-09-2007, 06:59 PM

You can leave them in, but you put them in the separate CSS files that are there ONLY for IE.