[WSG] I.E Navigation help
hey guys,
Have got the following navigation to work in firefox, safari, chrome, opera and
the such, but not IE.
In IE, the links do not go inline but scale left to right in a step manner.
Any ideas of what i'm missing?
==HTML
ul class=navlist
lia href=#Link1/a/li
lia href=#Link2/a/li
lia href=#Link3/a/li
lia href=#Link4/a/li
/ul
==CSS
#nav {
background-color: #930;
float: left;
width: 600px;
}
.navlist {
list-style-type: none;
}
.navlist li a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
display: block;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.navlist li a:hover {
color: #0F3;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] I.E Navigation help
On Wed, Nov 18, 2009 at 4:24 AM, Jerome Carpen enqu...@wombatmedia.com.auwrote: hey guys, Have got the following navigation to work in firefox, safari, chrome, opera and the such, but not IE. In IE, the links do not go inline but scale left to right in a step manner. Any ideas of what i'm missing? ==HTML try this. ul class=navlist lia href=#Link1/a/li lia href=#Link2/a/li lia href=#Link3/a/li lia href=#Link4/a/li /ul cheers, dwain -- Fear of the devil is one way of doubting God. - Kahlil Gibran *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] I.E Navigation help
Sounds to me like you’ve added display:inline to the li but left out float:left. Mike From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of dwain Sent: 18 November 2009 10:52 To: wsg@webstandardsgroup.org Subject: Re: [WSG] I.E Navigation help On Wed, Nov 18, 2009 at 4:24 AM, Jerome Carpen enqu...@wombatmedia.com.aumailto:enqu...@wombatmedia.com.au wrote: hey guys, Have got the following navigation to work in firefox, safari, chrome, opera and the such, but not IE. In IE, the links do not go inline but scale left to right in a step manner. Any ideas of what i'm missing? ==HTML try this. ul class=navlist lia href=#Link1/a/li lia href=#Link2/a/li lia href=#Link3/a/li lia href=#Link4/a/li /ul cheers, dwain -- Fear of the devil is one way of doubting God. - Kahlil Gibran *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] I.E Navigation help
Hi Jerome,
I had the same problem some time ago - so long ago, I'm no longer sure
exactly what actually fixed it. However, I think the answer, or part of
it, involves setting display:inline on the li, not the a and then
setting your padding, etc. on the a. I also found I had to set a line
height for my a. Using a font size of 1.2em, a line height of 1.6em
seemed to do the trick, although why I have no idea!
Hope this helps.
Lesley
Jerome Carpen wrote:
hey guys,
Have got the following navigation to work in firefox, safari, chrome, opera and the such, but not IE.
In IE, the links do not go inline but scale left to right in a step manner.
Any ideas of what i'm missing?
==HTML
ul class=navlist
lia href=#Link1/a/li
lia href=#Link2/a/li
lia href=#Link3/a/li
lia href=#Link4/a/li
/ul
==CSS
#nav {
background-color: #930;
float: left;
width: 600px;
}
.navlist {
list-style-type: none;
}
.navlist li a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
display: block;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.navlist li a:hover {
color: #0F3;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] I.E Navigation help
What you're trying to do is alter the display of the native list structure
- not the links.
That is you want to display the list-items inline and floated left. (
e.g.
.navlist li {
display: inline;
float: left;
list-style-type: none;
}
On Wed, November 18, 2009 10:24 am, Jerome Carpen wrote:
hey guys,
Have got the following navigation to work in firefox, safari, chrome,
opera and the such, but not IE.
In IE, the links do not go inline but scale left to right in a step
manner.
Any ideas of what i'm missing?
==HTML
ul class=navlist
lia href=#Link1/a/li
lia href=#Link2/a/li
lia href=#Link3/a/li
lia href=#Link4/a/li
/ul
==CSS
#nav {
background-color: #930;
float: left;
width: 600px;
}
.navlist {
list-style-type: none;
}
.navlist li a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
display: block;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.navlist li a:hover {
color: #0F3;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] I.E Navigation help
I've obviously missed a vital part of the code and that is the
navlist li part.
Thanks all guys.
Sent from my iPhone
On 19/11/2009, at 11:18 AM, Stuart Foulstone
stu...@bigeasyweb.co.uk wrote:
What you're trying to do is alter the display of the native list
structure
- not the links.
That is you want to display the list-items inline and floated left. (
e.g.
.navlist li {
display: inline;
float: left;
list-style-type: none;
}
On Wed, November 18, 2009 10:24 am, Jerome Carpen wrote:
hey guys,
Have got the following navigation to work in firefox, safari, chrome,
opera and the such, but not IE.
In IE, the links do not go inline but scale left to right in a step
manner.
Any ideas of what i'm missing?
==HTML
ul class=navlist
lia href=#Link1/a/li
lia href=#Link2/a/li
lia href=#Link3/a/li
lia href=#Link4/a/li
/ul
==CSS
#nav {
background-color: #930;
float: left;
width: 600px;
}
.navlist {
list-style-type: none;
}
.navlist li a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
display: block;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.navlist li a:hover {
color: #0F3;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
