CSS in actual page not right, I think floats aren't clearing?

jonahzona really helped the first time...

http://www.websitemystic.com/pages/proto.php

http://www.websitemystic.com/templates/dragon_mist/css/mysticcss_admin.css

The relevant css is between "/* nav_left" comments.

I've put the css and menu into place and the page is breaking. I would like it to look similar to this page only using the text links:

http://www.websitemystic.com/pages/index.php

I'm pretty sure I need to clear some floats, but not sure how.

Thank you.
SlickCatSevenAsked:
Who is Participating?
 
Eternal_StudentConnect With a Mentor Commented:
This should fix it:


ul {
    list-style: square outside none;
    margin: 0;
    padding: 0;
}

Open in new window

0
 
SlickCatSevenAuthor Commented:
0
 
jonahzonaCommented:
It is your background positions.

change them to this.
.nav_left .active a {
    background-position: 0px -64px;
    text-decoration: none;
}
.nav_left li.active a:hover {
    background-position: 0px -64px;
    color: #555555;
    text-decoration: none;
}
.nav_left a:hover {
    background-position: 0px -32px;
    color: #FFFFFF;
    text-decoration: none;
}

Open in new window

0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
SlickCatSevenAuthor Commented:
I forgot that I changed the image to simplify, thank you. I've edited the css, but still getting some movement. Use original links to see.
0
 
SlickCatSevenAuthor Commented:
...had a missing div called content_bucket and fixed a missing "<" from another. The page is almost there, just overall position on menu, and bullets above showing.
0
 
jonahzonaCommented:
Alright, have a fix that annuls our fix from before.

Remove the 8px padding from the .nav_left a and the 8px margin from the .nav_left li.

Then add

line-height: 30px;

Open in new window


to .nav_left a. This made it work normal in mine.

Sorry about the bad advice from before.
0
 
SlickCatSevenAuthor Commented:
Rats, still not working.

I at first tried removing the whole padding and margin lines, and the menu was out of alignment. When I leave them in with just the 8s removed, the menu moves closer to where it should be.
0
 
Eternal_StudentCommented:
Normally you reset the margin and padding on everything in the CSS to zero:

http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Which you haven't done so the UL was picking up padding and margin.
0
 
jonahzonaCommented:
If you are referring to the fact it is off to the right, it is the padding on the UL element.

Change your .nav_left ul class to this:

.nav_left {
    clear: left;
    float: left;
    font: 14px Gill Sans,Gill Sans MT,Helvetica,Arial,sans-serif;
    padding-left: 0 !important;
}

Open in new window

0
 
Eternal_StudentCommented:
I already established this jonahzona ... and it is better practice to set the global UL to padding:0 & margin:0. That way everything has an equal starting point and you can then add padding/margin as you need it.

0
 
jonahzonaConnect With a Mentor Commented:
@Eternal Student

Yes, you are correct. However I had this post opened last night and forgot to hit submit before I went to bed. Your posts hadn't been posted at that point, and I didn't see them when I got up this morning because the page hadn't refreshed.

Please don't think I was trying to trump you.

@SlickCatSeven - I agree with Eternal Student.
0
 
Eternal_StudentCommented:
@jonahzona ... Not at all ... your answer is correct too, I was just pointing out about the reset thing.
0
 
SlickCatSevenAuthor Commented:
The fix works and the page looks right looks great.

Mahalo again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.