7 replies [Last post]
Philmo
Philmo's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Joined: 2007-02-02
Posts: 9
Points: 0

I am working on re-doing a travel blog for a friend, I am using wordpress and integrating Gallery2 using the plugin WPG2.

The problem I am having is to do with the navigation, I used a tutorial from CSS Play to produce it. It displays correctly in Firefox and IE6 but appears incorrectly in IE7.

"This will not work in IE7 RC1. This browser has not been updated to understand display:table; but has been updated to correct the float bug that IE6 uses to make the ul contain the list of links."

Is it possible to fix this or do I need to start again?

You can view the site here: http://www.fatmantravels.co.uk/testarea

HTML:


CSS:

.menu {
display:table; /* ignored by IE */
padding:0;
list-style-type:none;
white-space:nowrap; /* keep text on one line */
border:2px solid #C92316; /* add a border to show size of menu */
}

* html .menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand to fit menu width */
padding:0 2px; /* fix bug in IE for border spacing */
}

.menu li {
display:table-cell; /* ignored by IE */
}

* html .menu li {
display:inline; /* for IE only */
}

.menu a, .menu a:visited {
display:block; /* for all browsers except IE */
padding:4px 60px;
color:#ffffff;
background:#C10F00 url(images/img9.jpg) repeat-x;
border:3px solid #fff; /* add a 1px white border around items */
text-decoration:none;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 130%;
}

* html .menu a, * html .menu a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE border width bug */
}

.menu a:hover {
color:#C10E00;
background:#ffffff;
}

Any help would be much appreciated.

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 47 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Remove the star hack to see

Remove the star hack to see if IE 7 needs the rule.
Then move the needed rules between conditional comments.

Philmo
Philmo's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Joined: 2007-02-02
Posts: 9
Points: 0

DanA wrote:Remove the star

DanA wrote:
Remove the star hack to see if IE 7 needs the rule.
Then move the needed rules between conditional comments.

Thanks for the quick reply!

Unfortunately, I don;t know what that means...

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 47 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Move the rules beginning by

Move the rules beginning by * html at the bottom of the stylesheet (to know where they are) and remove each occurrence of * html to see if it fixes the problem with IE 7.
If it does, you will have to move the those rules between conditional comments so that IE 6 and IE 7 apply the rules.

Philmo
Philmo's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Joined: 2007-02-02
Posts: 9
Points: 0

I removed all the rules

I removed all the rules beginning with * html and it made no change to IE7, it just made IE6 look wrong.

Do you think I'm better off just starting again?

Thanks again DanA

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 12 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think this may be the

Smile I think this may be the exact same confusion that possibly arose an another current post.

It is not all the rules in the rulesets that begin *html it is just removing the '*' at the beginning of the selector group to allow IE7 to read the rules as well,this will prove whether rules filtered to be read by IE6 only are actually needed by IE7.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Philmo
Philmo's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Joined: 2007-02-02
Posts: 9
Points: 0

Ah I see, I removed the '*'

Ah I see, I removed the '*' to see the effect. Obviously it screwed it up in Firefox but I guess thats what I need to use the conditional comments for.

Here is how is now looks in IE7, better... but not quite there.

Philmo
Philmo's picture
Offline
newbie
Last seen: 13 years 4 weeks ago
Joined: 2007-02-02
Posts: 9
Points: 0

Solved!

I did what every brave and fearless web designer would do when faced with this sort of problem... I changed my design!

To be honest I think it looks better with this new navigation.

Thanks anyway for having the patience to try to explain it to me.

fatmantravels.co.uk/testarea