CSS - The Position Bullets In List Menu Differs In Ff & Ie

For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time.

Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav.

Below is code I'm using to troubleshoot:

Code:

<ul><li><a href="#">dog</a></li>
  <li><a href="#">cat</a></li>
  <li class="here"><a href="#">fish</a></li> 
    <ul>
      <li><a href="#">trout</a></li>
      <li><a href="#">angel</a></li>
      <li><a href="#">salmon</a></li>
    </ul>
  <li><a href="#">turtle</a></li>
  <li><a href="#">elephant</a></li>
</ul>

Code:

li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}

If a user is on the page fish, they will see that bullet point to page salmon.

Any recommendations?

My site is RegionalCreations.com if you want to see the issue for yourself. I actually haven't encountered this issue before with the countless sites I've made. I used the basic layout of an already made wordpress theme and redesigned it for my site, I didn't change the menu position however, so I think the issue is with the original theme.
Here is an image showing the problem:
Well apparently I can't post an image so go to my site and then add /images/IE-CSS-bug.jpg on to see it, thanks.
As you can see my image across the top is off center in IE even though it looks fine in Firefox. My menu is also spaced down in IE when it shouldn't be.
Here are the locations of my stylesheets, the second 1 loads after the main 1 if you view the page in IE. (I can't post the url so go to my site and add the rest of the url on.)
Stylesheet: /main/wp-content/themes/cleanmachine/style.css
IE additional style: /main/wp-content/themes/cleanmachine/ie-win.css

If anyone can look at my stylesheets and tell me the problem that would be great. Thanks.

Hi guys!

I have good HTML knowledge, and I am learning CSS for the first time, no matter how much I read about position relative, absolute, fixed blah blah blah floats, clear, whitespace I am really struggling to get my head around it.

I can position my header and side menu and main content easily as they sit side by side,

The problem is I have a list with 4 bullet points, I want that to run horizontally which again I can do... but I want it to run horizontally over the main content part only and have 200px of "white space" to the side

No matter what I try it all starts to mess up and wraps around the other parts.

Idealy I'd like this 4 bullet point list to be a drop down horizontal menu, but if I can at least get it in the right place for now then that would be a start!

Hope this makes sense, I also made a mockup in mspaint of what I mean but can't link it

I also can't link my webpage to show you what I got so far
as the forum wont me allow to link as a new user

Thanks in advance!

Hi all,

I've got a site which you have to scroll horizontally to view the content (different eh?), but I want the menu to stay in a fixed position on the left side of the screen.

Can anyone tell me if/how I can do this?

Cheers!

Hi everyone

Now i hope you all wont get mad at me for this very nooby question i'm about to ask, but i'm pretty new to CSS at the moment, so im not sure what to do...

Two questions actually, which i will explain.

On my blog at the moment, ive put in a CSS dropdown navigation menu...the problem is that it automatically stays up the top of the page, i want to be able to position it down the bottom of the header...

you can have a look at the blog here, which would help if anyone has any ideas...I want to position it just above the thin red line you can see...

http://www.rivercitylife.org.au/testing/

another pain i'm having is that the menu is JUST overflowing the boundries of the page width...you can see there is a thin black line on the right hand side up at the header of the page...

Sorry if i'm asking lots of questions to start with...

Thanks to anyone who has any ideas and can help

-Crawf


Edit: Please let me know if you need any of the code or you want me to post the stylesheet for the menu..

Hi,

I need to adjust only the 1st link(for 1st menu item) of my main menu. I have used pat pat template and have managed to apply a background image for the first item. Here is the css:

Code:

#first-suckerfish-vertical{
background:url(../images/menutop.jpg) no-repeat;
height:75px;
margin-top:-2.5px !important;
margin-top:-3px;
position:relative;
}

Now to apply style on the main menu item, i use a.mainlevel.
but i cant use the a.mainlevel..coz it will adjust all the links. I need to apply style only to the first link of my menu.

I am wondering if there's a way in css to access a class from another class or id. I already have this style(#first-suckerfish-vertical) for the 1st menu item. is it possible now to access the a.mainlevel from it..

Thx

I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling.
Make sense?

I am not an expert on developing websites, but I've been able to get our site up and running without much challenge. I used a menu I found on www.dynamicdrive.com that allowed you to have our menu in a horizontal or verticle layout.

We don't use frames in our site but we wanted a frames-type look. So we use the menu in the vertical layout. What I'd like to do is find a way to keep the menu on the screen as people scroll down. I've seen other websites do this and have looked at a couple that were recommended from a previous post, but I can't figure out how to make it work propertly.

Our website is www.indyartistgroup.com. If someone could take a look at the site and suggest some ideas on how to make the menu on the left hand side stay on screen no matter how low you scroll I would appreciate it. I'm out of options at this point.

Thanks for the help.
John

I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item.

I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla.

I am thinking that it may be something to do with the link visited properties but am not sure what.

I have validated the css via the W3C website but there were no errors reported.

The css segment is as follows:

#subnavcontainer {
position: absolute;
left: 10px;
top: 0px;
margin-top:0px;
padding-top: 0px;
height: 700px;
width: 160px;
background: url("../images/bg_vert.gif") no-repeat;
}

#subnavcontainer ul
{
list-style-type: none;
color: #000;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
display: block;
width: 200px;
background-color: #D7D7D7;
}

#subnavcontainer li
{
padding-left: 0px;
margin-top: 1px;
}

#subnavcontainer ul li {
margin: 0 0 1px 0;
padding-left: 0px;
}

#subnavcontainer ul a
{
display: block;
padding: 0px 2px 2px 5px;
width: 160px;
color: #000;
background-color: #F0EFEE;
text-decoration: none;
border-left: 4px solid #B09292;
}

#subnavcontainer ul a:hover
{
color: #000;
background-color: #fff;
text-decoration: none;
border-left: 4px solid #FF0000;
}

The html segment is as follows:

<div id="subnavcontainer">
<ul>
<li>
<a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a>
</li>
<li>
<a href="../content/company/se_company_location.htm" target="mainFrame">Location</a>
</li>
<li>
<a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a>
</li>
</ul>
</div>

I am having problems with a horizontal list menu. If you take a look at the link below I'm trying to get the top picture, menu and the main content area to all line up vertically.

http://www.willisemail.co.uk/skill/

I may be wrong but the list menu seems to be the problem as it never lines up.

Any help would be great or a suggestion on how to go about this another way.

Thanks

Jemes


html {
padding:0px;
margin:0px;
}

body {
background-color: #F5F5F5;
font-size: 12px;
color: #564b47;
text-align:center;
margin:0px;
padding:0px;
}


/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */


/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
}
/* Site Holder End */


/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: auto;
}
/*Right Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding: 1px;
margin:0px;
}

.Main {
margin: 0px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}

I'm having troubles with a list menu.

The first problem I have is that the menu options dont fill the whole of the menu but do in Firefox.

The second problem is that the padding is different in IE and Firefox and I would like them to be the same.

If anyone could help that would be great.

http://departments.brooklands.ac.uk/wine/example/

Jemes

I cant seem to get this to position correctly in firefox. Looks great in IE though...

Perhaps I should just use divs with margins rather than ul's

I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can.

I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list.

FIRST MENU:
Code:

<ul>
    <li>
        <a href="page1.html">Link 1</a>
        <ul>
            <li><a href="page1.1.html">Link 1.1</a></li>
            <li><a href="page1.2.html">Link 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="page2.html">Link 2</a>
        <ul>
            <li><a href="page2.1.html">Link 2.1</a></li>
        </ul>
    </li>
</ul>

SECOND MENU:
Code:

<ul>
    <li>
        <a href="page1.html">Link 1</a>
    </li>
    <li>
        <a href="page2.html">Link 2</a>
    </li>
</ul>

My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu.

This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS.

The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do.

Does anyone out there have an idea of where I can start with this?

Hi,

I am working on this website atm: www.powys.gov.uk

I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g:

Code:

   My Menu Link
Has been wrapped

I want it to be like:

Code:

  My Menu Link
  Has been Wrapped

The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas.


Regards,
Graham