?
Solved

Horizontal Menu Not Straight in IE7

Posted on 2010-03-30
15
Medium Priority
?
389 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:JF0
  • 7
  • 4
  • 3
  • +1
15 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 1000 total points
ID: 29145949
You should try to change the style for

   #main-nav li a

to being targeted toward

   #main-nav li
0
 
LVL 16

Author Comment

by:JF0
ID: 29146537
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 29146701
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 16

Author Comment

by:JF0
ID: 29147390
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 29147987
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
 
LVL 16

Author Comment

by:JF0
ID: 29149482
i dont understand, can you give an example?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 29150911
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
 
LVL 3

Assisted Solution

by:double_helix
double_helix earned 1000 total points
ID: 29151086
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
 
LVL 16

Author Comment

by:JF0
ID: 29157885
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
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 29159900
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
 
LVL 16

Author Comment

by:JF0
ID: 29215827
FDMilwaukee - The problem only exists in IE7, it is not a conditional problem.
0
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 29228363
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
 
LVL 16

Author Comment

by:JF0
ID: 29229052
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
 
LVL 9

Expert Comment

by:FDMilwaukee
ID: 29256976
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
 
LVL 16

Author Comment

by:JF0
ID: 29458294
Since this is really a separate issue from the original question I will just start a new question for it.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

593 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question