Doesnt Work in IE

**hotnuts21** · Sep 6, 2004 07:54

Ok,
This code works fine in Firefox, but not in IE, any idea why, here is the CSS.

div.menuMainItemNormal
{
width: 166px;
height: 24px;
background-image: url('../images/main_menu_empty_normal.gif');
background-repeat: no-repeat;
font-weight: bold;
font-color: #FFFFFF;
font-size: 10px;
text-align: left;
}
div.menuMainItemNormal:Hover
{
width: 166px;
height: 24px;
background-image: url('../images/menu_rollover.gif');
background-repeat: no-repeat;
font-weight: bold;
color: #000000;
font-size: 10px;
text-align: left;
}

You can see the site here, it applies to the navigation.

But if you look at the site if firefox, there is a white box at the bottom left above the search box, anyone any clue why this is here, but not in IE?

Weird problems

**Fiska** · Sep 6, 2004 08:32

where can we see the site? 'here'? doesn't works, make sure you create a proper hyperlink for label 'here'

**hotnuts21** · Sep 6, 2004 08:36

DOH,
I just forgot to add the link thats all !!!
www.sers.org.uk/index.php

sorry about that.

**LJK** · Sep 6, 2004 11:18

Hi -
You might try tweaking your !DOCTYPE to actually state what 'flavor' of xhtml you're using:

Current -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Poss. Choice -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That may help the display issues...
El

**hotnuts21** · Sep 6, 2004 11:27

Thanks for pointing that out, we took on a new lad to do the template for the CMS and I hadnt spotted that. It doesnt help with on hover not showing in IE though.

**Paul O'B** · Sep 6, 2004 13:16

Hi,

IE only supports hover on anchors and in the code above you are applying it to the div only.

Make the anchor display:block and apply the style to the anchor instead.

paul

**hotnuts21** · Sep 6, 2004 17:02

Thanks for that Paul

I think it might be the time here and the fact im CSS'ed out, I just cant get my head round this sometimes. Can you point out what you mean.
Shall I just create another style and assign that to the link somehow?

**Paul O'B** · Sep 7, 2004 03:22

Hi,

Just apply it to the anchor like so:

Code:

.menuMainItemNormal a
{
 
 width: 166px;
 height: 24px;  
	 background-image: url('http://www.sers.org.uk/templates/sers/images/main_menu_empty_normal.gif'); 
 background-repeat: no-repeat;   
 font-weight: bold;
 font-color: #FFFFFF;
 font-size: 10px;
 text-align: left; 
	display: block; 
}
.menuMainItemNormal a:hover
{
	background:url('http://www.sers.org.uk/templates/sers/images/menu_rollover.gif') no-repeat left top; 
 color: #000000;
}

You don't really need to surround each of those anchors in a class, you could have just wrapped them all up in one div with a class to cover all of them. Then the anchors wouldn't need to be wrapped up in individual divs. However a list structure would be more semantically correct.

Also remember thats id's are supposed to be unique on the page and you have used some more than once which is not allowed.

Hope that helps.

Paul

**hotnuts21** · Sep 7, 2004 15:45

OK I redone a whole load of the section to make it more friendly.
The CSS is now thus.

#navigation {
color: #ffffff;
font-weight: bold;
}

#navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
border: none;
}

#navigation li {
margin: 0;
padding-left: 1;
}

a.menu-link
{
width: 166px;
height: 24px;
background-image: url('../images/main_menu_empty_normal.gif');
background-repeat: no-repeat;
font-weight: bold;
font-color: #FFFFFF;
font-size: 10px;
text-align: left;
display: block;
}

html>body a.menu-link {
width: auto;
}

a.menu-link:hover
{
width: 166px;
height: 24px;
background-image: url('../images/menu_rollover.gif');
background-repeat: no-repeat;
font-weight: bold;
color: #000000;
font-size: 10px;
text-align: left;
}

The code displayed is thus

Code:

  <div id="inline2">
       <div id="menu"><div class="module">
 		<div id="navigation">
 <ul>
 <li><a class="menu-link" href="index.php?option=content&amp;task=section&amp;id=2&amp;Itemid=25">tutorials</a></li>
 <li><a class="menu-link" href="index.php?option=content&amp;task=section&amp;id=1&amp;Itemid=2">News</a></li>
 <li><a class="menu-link"  href="index.php?option=com_weblinks&amp;Itemid=4">The Web Links</a></li>
 <li><a class="menu-link"  href="index.php?option=com_contact&amp;Itemid=3">Contact Us</a></li>
 <li><a class="menu-link" href="index.php?option=content&amp;task=blogcategory&amp;id=7&amp;Itemid=26">blog</a></li>
 <li><a class="menu-link" href="index.php?option=content&amp;task=view&amp;id=5&amp;Itemid=27">Testing for one</a></li>
 </ul></div>   </div>

So this is almost there, its a lot closer and the markup is cleaner, however I do still have a few issues i cant clean up

I want a small margin on the left but when i try the whole thing goes flying to the middle. I also want all the links Black, but that doesnt seem to work either.

Im going to look at replacing the images with pure css for the rollover too.

The only problem I am having at the moment is getting a background image to show up and repeat in firefox, it works fine in IE,
this is the css

#inline2 {
background-image:url(../images/content_bg.gif);
background-repeat:repeat-y;
}

Any idea why nothing shows up in firefox for this?

**Paul O'B** · Sep 7, 2004 16:00

Do you have a link to the page as the code looks like it should work. Of course I can't see what #menu and #module are doing because you didn't supply the code. If they are floated then you need to clear the floats before the closing tag of #inline2.

I note you have missed the 2 closing divs from the end but I assumed thats just a cut and paste error.

You have also missed the unit off here:

Code:

#navigation li {
margin: 0;
padding-left: 1;
}

should be 1px.

Paul

**hotnuts21** · Sep 7, 2004 16:09

Here is a link
http://www.sers.org.uk/new_site/index.php

I have it nearly all working in both IE and firefox now, i found the missing unit and that helped. Yes the closing tags are just cut and paste errors.

ok the css for menu is, module doesnt appear to exist!!

#menu {
width:169px;
text-align:left;
display:block;
float:left;
background:inherit;
background-image:url(../images/bg_menu.gif);
background-repeat:repeat-y;
}

interestingly this must overlay the background image as they both provide the yellow background down the left. Which I didnt realise. As i said above we had a new lad code this up as a test of his skills and im still finding some of his errors. My skill is sales not coding as you might guess.
T

**Paul O'B** · Sep 7, 2004 17:10

Hi,

You need to add a clearing div to allow the background to extend in mozilla as mentioned above

.

Code:

 
.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}

Code:

		 </div>
		</div>
	 </div>
	 <div id="menu_b"></div>
	 <div class="clearer"></div>
	</div>
</div>
<div id="search"> 
	<form class="searchform" action='http://www.sers.org.uk/new_site/index.php' method='post'>

Paul

**hotnuts21** · Sep 8, 2004 13:01

Paul,

Thanks for your help

That seems to have cleared the problem up yippeee.

Just a weird problem on the contact us now page, which I dont how its happening never rains but it pours

**Paul O'B** · Sep 8, 2004 15:34

Hi,

The problem on the contact page is that you have 2 divs in the wrong place.

Make the code look like this:

Code:

		  </form>
		</div>
	  </div>
	</div>
		<div id="menu_b"></div>
	 <div class="clearer"></div>
</div>
  <div id="search">

The position must be exact as above or it all goes astray

Paul

**hotnuts21** · Sep 8, 2004 16:53

Hmm, Ok I notice in your code that you moved one of the Divs from below the two you have highlighte to the one above it. Im not sure why but this is something to do with teh CMS i am running.

Ok the template looks like this

Code:

    <div id="content"><?php include_once ("mainbody.php"); ?></div>
                   <div id="menu_b"></div>
          <div class="clearer"></div>
     </div>
      </div>
      <div id="search">

The area mainbody.php always pulls in the content, in this case the contact form.
Here is the HTML that is outputted using the above code. I have bold the same div as above, the div=id is not included as its at the top of the page

Code:

    </form>
   </div>
           </div>
                            <div id="menu_b"></div>
                   <div class="clearer"></div>
       </div>
     </div>
     <div id="search">

As you can see the first from and div tags are part of the contact page, however
the div you moved is part of the template and so cannot be added to the contact page because its needed for the whole template.
Does that make sense? Or did i miss what you were telling me !

**hotnuts21** · Sep 8, 2004 17:00

ohh im so stupid, I just moved the div id=menu and id=clearer below the /div tag which was below them

and that worked

My other problem i dont think is CSS based, if you click on Tutorials in the menu, a small sub menu should appear underneath it with a pointing arrow, instead you get two huge lines missing.

DOH
Thanks Paul.

**Paul O'B** · Sep 9, 2004 07:06

My other problem i dont think is CSS based, i

The link above doesn't work anymore so I couldn't look anyway

Paul

**hotnuts21** · Sep 9, 2004 07:50

Oh yeah I moved the site to the main folder.
www.sers.org.uk/index.php

thnx

**Paul O'B** · Sep 9, 2004 10:17

Hi,

I'm not sure whats going on there as you just have two images in the code. One blank png and the arrow and they are just placed on the next line with a break which gives you the 2 lines space.

I could't see any implementation of a sub menu. However I was in a hurry as my main computer died on me and I'm busy getting this one to work as I want

Paul

**hotnuts21** · Sep 9, 2004 10:58

When you click tutorials a new menu item called 'testing for one' appears. It should be next to the little arrow and indented, but instead it appears as a new menu item below the arrow. Maybe because of the block element?

**Paul O'B** · Sep 9, 2004 14:29

Hi,

I see what you mean now.

You are right its because the link is display block and will take up the whole line. You will need to devise some new classes to the sublist as you want and to style the tutorial heading as you probably won't want it to rollover but have the sub mneu rollover instead.

Innstead of using breaks you should structure with sublists as follows.

Code:

		  <div id="navigation"> 
			<ul>
			  <li><a class="menu-link"  href="http://www.sers.org.uk/component/option,com_frontpage/Itemid,1/">Home</a></li>
			  <li id="active-link"><a href="http://www.sers.org.uk/content/section/2/25/">tutorials</a> 
				<ul>
				  <li ><img src="http://www.sers.org.uk/images/M_images/blank.png" alt="" height="12" width="4" /> 
					<img src="http://www.sers.org.uk/images/M_images/indent1.png" alt="" />&nbsp;<a href="http://www.sers.org.uk/content/view/6/28/">Testing 
					for one</a> </li>
				</ul>
			  </li>
			  <li><a class="menu-link"  href="http://www.sers.org.uk/content/section/1/2/">News</a></li>

This will display the sublist as you intended I think

However as mentioned above you now need to apply styles directly to that sublist to display as you want.

You can use the active-link id that you have in place and target the ul and its anchor by specifity if you don't want to add classes. (e.g. li#active-link ul li a)

Hope that helps.

Paul

**hotnuts21** · Sep 10, 2004 15:13

Hey we are getting there

I have set up the sub menus so it uses proper sub-lists and is more 'correct'.

I have this CSS class

Code:

li#active-link li a {
 		color: #ffffff;
 }

As a test class to try and get it working, but it doesnt, its still inheriting the main 'menu-link' class

What I want is it slightly indented and a different colour although I havent worked out what yet

**Paul O'B** · Sep 10, 2004 16:23

Try making the style more specific and see if that helps.

e.g.

Code:

#navigation ul li#active-link ul li a {
 		color: #ffffff;
 }

Otherwise post the code ( or link) and I'll look later tomorrow (or is it today now).

Paul

**hotnuts21** · Sep 10, 2004 16:49

Nah dont work either, thanks for trying though

Here is the CSS code.

Code:

 /* MENU SETTINGS */
 
 #navigation {
 	color: #ffffff;
 	font-weight: bold;
 	}
 	
 #navigation ul {
 		list-style: none;
 		margin: 0;
 		padding-left: 0;
 		border: none;
 		}
 		
 #navigation li {
 		margin: 0;
 		padding-left:0;
 				padding-right 1px;
 		}
 		
 a.menu-link
 {
 	width: 160px;
 	height: 24px;		
 	background: #FCB915; 	
 	font-weight: bold;
 	color: #000000;
 	font-size: 10px;
 	text-align: left;	
 		display: block;	
 }
 
 html>body a.menu-link {
 		width: auto;
 		}
 		
 a.menu-link:hover{
 	width: 166px;
 	height: 23px;		
 	background: #FFCC00;
 	border-top: 1px solid #000000; 
 	border-right: 5px solid #009966;
 	font-weight: bold;
 	color: #009966;
 	font-size: 10px;
 	text-align: left;		
 }
 
 
 #navigation ul li#active-link ul li a {
 		 color: #ffffff;
  }

Here is the html code that is outputted now

Code:

 <ul>
<li><a class="menu-link"  href="component/option,com_frontpage/Itemid,1/">Home</a></li>
<li><a class="menu-link" id="active-link" href="content/section/2/25/">tutorials</a>
 <ul>
<li><a class="menu-link"  href="content/view/6/28/">Testing for one</a></li>
</ul></li>
<li><a class="menu-link"  href="content/section/1/2/">News</a></li>
<li><a class="menu-link"  href="component/option,com_weblinks/Itemid,4/">The Web Links</a></li>

The URL is the same as above.

**Paul O'B** · Sep 11, 2004 04:58

Hi,

Haven't had time to look at this but just noticed you had the id in the wrong place here:

Code:

<li><a class="menu-link" id="active-link" href="content/section/2/25/">tutorials</a>
<ul>

In the css the id is in the list item

Code:

#navigation ul li#active-link ul li a {
		 color: #ffffff;
}

So the html should be:

Code:

<li id="active-link" ><a class="menu-link" href="content/section/2/25/">tutorials</a>
<ul>

Haven't had time to test yet but try the above first.

Paul

User Tag List

Thread: Doesnt Work in IE

Thread Tools

Display

Hybrid View

Doesnt Work in IE

Bookmarks

Bookmarks

Posting Permissions