CSS Menu problems Chrome & IE 8

HTML & CSS
1

If you view this page http://www.propertieswithstyle.com/cdmmap.html in IE(8) and Chrome(latest version) you will see annoying differences.

This page uses mapsearch.css. In other words, the difference must be in the browsers.

The space on the left of the menu is different and the map title, Corona del Mar Map Search, is more clear in Chrome than IE.

I know I’m ignorant about these subtleties but it’s really quite frustrating.

Site Point gurus preached I use Strict in my html in lieu of Transitional. Is this true? Would using Transitional make this go away?

I’ve mostly been an IE follower but now I’m favoring Chrome in lieu of IE, and Chrome appears to load faster also.

How do I make the menus display the same?

What shall I do . . ?

I like an ordered life. Ha!

Happy new year everyone.

Rick

2

The only difference I can spot is that the lower menu on the left moves a little bit when you hover on the upper menu.
In firefox, changing this
#navli { font-size: 90; margin:0 0 5px;
list-style: none;
line-height:120%;
}
to be font-size;90%; stopped the small movement.

otherwise I’m not really sure what problem you think you have.
Map title looked the same to me in firefox, chrome and IE8.

3

No, it will make no difference to your menu. Transitional just means that the doctype allows some presentational elements to be included which are not valid in strict doctypes. There are very minor differences in how transitional handles some elements but is not an issue here and in general you would not notice any difference.

As mentioned above I see little noticeable differences with the menu in IE8 and other browsers. Chrome show a smaller overall height for the menu but that’s probably down to rounding errors in the percentage line-heights. You could test this out using a pixel line-height to see if that’s what you are talking about.


#navli1 {line-height: 16px;}

Also you can’t do this:


		<ul id="navli1">
				<br />
				<li><i>Search Local Communities</i></li>
				<br />

You can’t have any elements between list items as its invalid. Just add a class to that list element and apply larger margins as required. It actually looks like the first item should be a header element then followed by the list of links.

4

Okay - I’ve got the menu list items aligned to the left and was able to solidify the menu items so they don’t change size on mouse over.

Thanks for the suggestions as it did the trick.

Now I need the menu 12px from the top of the viewport as defined in body{}.

I also have an issue with the left margin of the menu list items not being flush to the left of the nav box definition.

If you look at the Left 42.png file attached, you can see a thin green 42 pixel vertical line.

Once I have them flush left I will place a padding left: in the nav CSS page.

For the life of me I have no divs’ or definitions defined for that!

My CSS body is . . .

body           {background-color: #0A1794;
		background: url(images/swirl.png) fixed;/*newbkground.png)*/								
		max-width: 1200px;
		min-width: 400px;
		font-family: Verdana, Geneva, sans-serif;
		font-size:16px;				     /* this is the base font = 100 */
		color:#fff;
    		line-height:106%;
		[COLOR="#0000FF"]margin-top:12px;[/COLOR]
}

My main content is:


#maincontent
     {float:right;
      width:73.33%;
      position:relative;
      background-image: url(images/gray4b32.jpg);  /* background image for the iframe or object */				
}

You can see the 1200 px at the top right of the image as defined in the body.

Thanks for your assistance on this.

Rick . . .

5

Oops . . . Ralph said . . . “Just add a class to that list element and apply larger margins as required. It actually looks like the first item should be a header element then followed by the list of links.”

I can create that in my CSS page but I’m not sure where to place it in the nav section of the html page.

Thanks again . . . Rick

6

I’m not sure what you are talking about here as I see a gap at the top in all browsers. You would be better of using padding rather than margins on the body for old browsers support though.

I also have an issue with the left margin of the menu list items not being flush to the left of the nav box definition.

You don’t have any margin applied as far as I can see?