Horizontal Menu Not Straight in IE7

see code
<style type="text/css">
/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */

/* The Styles */
#main-nav {
	position:relative;
	height: 45px;
	background-color: #38312f;
	margin-top: 10px;
	border-top-style: solid;
	border-top-width: 1px;
}

#main-nav ul {
	margin: 0px 15px 10px 1px;
	font-size:1.5em;
	font-family: Georgia, serif;
}

#main-nav li a{
	display:inline;
	width:100px;
	float:left;
	text-align:center;
	display: block;
	text-decoration:none;
	padding: 12px 0px 12px 0px;
	border-left-color:white;
	border-left-width:1px;
	border-left-style:solid;
}

#main-nav li:last-child a:last-child{
	border-right-color:white;
	border-right-width:1px;
	border-right-style:solid;
}

#main-nav a:link {
    color:white;
	text-decoration:none;
}

#main-nav a:visited {
    color:white;
	text-decoration:none;
}

#main-nav a:active,

#main-nav a:hover {
    color: #ac281e;
	background-color: white;
}

</style>

<div id="main-nav">
			<ul>
				<li><a href="/">Home</a></li>
				<li><a href="/xxx/">Xxx</a></li>
				<li><a href="/xxx/">Yyy</a></li>
				<li><a href="/xxx/">Zzz</a></li>
			</ul>
            <img class="floatright" src="http://rss.jpg" alt="Subscribe to our RSS Feed!" style="margin-top:-10px;" />
            <img class="floatright" src="http://5u84f48n.png" alt="Find us on Facebook" style="margin-top:-10px;" />

</div>

Open in new window

LVL 16
JF0Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZylochCommented:
You should try to change the style for

   #main-nav li a

to being targeted toward

   #main-nav li
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JF0Author Commented:
Ok that is a start,  but then I loose the rollover effect. Compare the original in FF, IE8 or Chrome to see the rollover properly.

I also had to edit this line:

#main-nav li:last-child a:last-child {
to
#main-nav li:last-child
0
ZylochCommented:
Does it help if you create a new style for #main-nav li a with all the padding styles as well as display: block. Then, remove the padding from the style for the li element.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

JF0Author Commented:
Yes, thank you.

Can you tell me why the rollover is different in IE7 compared to newer browsers? Is this something that can be fixed?
0
ZylochCommented:
I'm actually not really sure why it appeared different in IE at first but not so on other browsers. However, by putting the float styles on the list element itself, all browsers will float the list instead of just attempting to float the links.
0
JF0Author Commented:
i dont understand, can you give an example?
0
ZylochCommented:
An example of what? Changing the styles the way we did; that was an instance of what I was talking about. There might be reasons for why it looked different before on IE and on other browsers having to do with standard compliance that one browser or the other was getting wrong (probably IE), but I'm not familiar enough anymore with the standards to say for sure.
0
double_helixCommented:
After the #main-nav ul tag you should insert the following:

#main-nav li {
    float: left;
}


This will handle the layout of individual list items.
The next section relating to the anchor tags within each list item can be modified to apply only settings relevant to anchor tags.

Regards.
0
JF0Author Commented:
double helix you can see that style already exists.

Zyloch, we are misunderstanding each other. If you take the change you suggested to my original code that did indeed fix the problem of the items not staying on a single line however you can see there is a visible difference in the actual rollover effect of the menu.


0
FDMilwaukeeCommented:
JFO,

See my article regarding IE conditional comments.

http://www.experts-exchange.com/articles/Web_Development/Web_Languages-Standards/HTML/Conditional-Statements-for-IE-Internet-Explorer.html?sfQueryTermInfo=1+30+comment+condit

Return your css to its original state, before you were having problems with your rollover effect, then apply the styles to IE7 only using the method I describe in the article.

Hope that helps!

FDM
0
JF0Author Commented:
FDMilwaukee - The problem only exists in IE7, it is not a conditional problem.
0
FDMilwaukeeCommented:
OMG!!!! are you serious??? did you even read the article?

The entire article is about targeting IE, or specific versions of IE.

so you need to apply "conditions" to IE7
0
JF0Author Commented:
I don't need to know how to apply conditions.  I need to know WHICH conditions to apply in order for IE7 to have the same rollover effect as current browsers. The rollover effect never worked in IE7.
0
FDMilwaukeeCommented:
I thought in a previous comment you had it working in IE7, but it screwed it up for all other browsers.  I will take a look at this for IE7 when I have the chance...
0
JF0Author Commented:
Since this is really a separate issue from the original question I will just start a new question for it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.