Top Level Section List Does Not display Correctly in Internet Explorer

[leehack]

David

Your 'lColumn' has this style:

#lColumn {
border-left:1px solid #CDDD9B;
border-right:1px solid #CDDD9B;
color:#5A6C24;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
margin-bottom:-4000px;
padding:10px 10px 4000px 25px;
text-decoration:none;
width:140px;
}

You then have on the product sections title:

.tech_menu_button_title {
background-color:#CDDD9B;
border-top:1px solid #FFFFFF;
width:122px;
}

And on the section link area:

div.tech_menu_button_product {
border:1px solid #CDDD9B;
left:0px;
top:0px;
width:119px;
}

With this styling the links:

div.tech_menu_button_product a {
background-color:#CDDD9B;
color:#FFFFFF;
display:block;
font-size:12px;
padding:3px 3px 3px 12px;
text-align:left;
text-decoration:none;
width:104px;
}

So in summary, you are defining a '140' wide area, in which you are putting a '122' wide product section title, then a '119' wide product area in which any anchors are styled as '104' wide.

Resolution:

Leave the column as 140 wide, no style needed and remove the differing widths specified on the styles mentioned above. I selected auto as the width on:

div.tech_menu_button_product a
div.tech_menu_button_product
.tech_menu_button_border

In reality, this width declaration could be removed.

This would be how to fudge the actinic css, in reality i would remove any actinic styling and just apply your own. It's a whole load of nested crap to be honest the way they have done it, which i'm sure has some reason.

The above stretches everything to the '140' you have given it, removing the spaces either side. You could just as easily up the '140' to say '160' and take '20' off the left padding and you should then get all of the text on one line, rather than the text wrap currently.

I would probably surround the whole nav area in a <div id="sectionLists">.

Then style the <ul>

#sectionLists ul {
margin: 0;
padding: 0;
}

Then the <li> a

#sectionLists li a {
display: block;
padding: 2px 6px;
margin: 0;
blah blah
}

You then need to style the <li> a:hover

#sectionLists li a:hover {
background-color: #FF0000;
color: #FFFFFF;
}


I'm pretty sure that will work, just backup b4 you try and make sure you add your own colours etc..

[leehack]

Jules what you need to do should be very similar to what David needs to do. I cannot guarantee this will be cross-browser perfect as i cannot be arsed to test it to be honest, although undoubtedly it will get you very close to what you want, if in fact it does not solve it completely.

Back up the whole file or do a snapshot before you start messing with it.

[JulesRS]

ok, thanks Lee. I will try this and let you know how I get on. I presume that I will find all this information in the head tag within my DW external layout?

[completerookie]

David,
hopefully just a couple of lines to change.

can you try something for me please, I can't edit your styles so . . .
edit Actinic.css in the main site folder - look for the line where you define div.tech_menu_button_product a and then ADD the line EXACTLY as shown in red (important, include the underscore at the front of the width: statement.)
save it and the preview the page - I'm hoping that the width of the white border showing up in IE will be diminished

then can you report back as to how it went.

div.tech_menu_button_product a   {
	width: 104px;
	_width: 117px;
	color: #ffffff;
	text-decoration:none;
	display:block;
	padding:3px 3px 3px 12px;
	text-align:left;
	background-color: #cddd9b;
	font-size: 12px;
	}

for purists sake, also amend .tech_menu_button_title - this will ammend the subtle mis-alignment on the title bar of your menu.

.tech_menu_button_title	{
	width: 121px;
	_width: 119px;
	 border-top: 1px #ffffff solid;
	 background-color: #cddd9b;
	 }

[leehack]

ok, thanks Lee. I will try this and let you know how I get on. I presume that I will find all this information in the head tag within my DW external layout?

No Jules, you will find it in the stylesheet. Worth trying Kevin's change first, may be quicker, depends if you want to carry on with the actinic styling or wish to quash it all and use your own. Try em both see what happens, it's a little difficult trying to work out the changes without seeing them happen at the same time.

[JulesRS]

Ok, thanks Lee and Kevin. Will let you know how I get on. Thanks very much for your help.

[JulesRS]

Hi,

Kevin, I tried your resolution and it has worked on my Top Level Section List. Thank you so much for your help!

I still have the white line appearing down the side of my Brochure Navbar. I have attached this so you can see what I mean. Which part of the CSS would I need to edit to make this menu display properly?

Also, I would prefer the Brochure Navbar to be all one colour like the Top Level Section List which sits above it. I tried to change the colours for this within Design|Themes|Colour Scheme but with little success. Is there a quick way of doing this within the CSS layout?

Thanks again.

[completerookie]

I find it easier to work in firefox, then use the Web Developer 1.1.4 add on, once installed, use the CSS menu (3rd one?) and turn on the View Style Information
then hover over the button on the web page thats giving you the problem. and left click - in this case the system shows that its div.tech_menu_button a that appears to be giving you the problem

Look for the one with the width command (yours is width:113px)
duplicate that line underneath it and add an underscore to the front of the word width - then just play about with the pixels until you get it right - in you case, try adding another 8 or so making it 121px
its a bit of an experiment here so just adjust the page and then preview it

div.tech_menu_button a
{
     width: 113px;
     _width: 120px;
     color: #ffffff;
     text-decoration: none;
     display: block;
     padding-top: 3px;
     padding-right: 3px;
     padding-bottom: 3px;
     padding-left: 3px;
     text-align: left;
     background-color: #660099;
     font-size: 11px;
}

if you are changing colours, then look at the style associated with the "nice button" and then change the "not very nice button" to get the colour you want.

using the underscore is a hack, firefow will ignore the command, but IE will obey the new underscore (and so override the width with the new value)

You can use the underscore in many places (padding: margin: etc ) and it will convert many many irregularities.
hope it all makes sense, play with the web-developer addin, it will become your best friend

[JulesRS]

Hi Kevin,

Thanks very much. It's all sorted now! The Firefox Web Developer is a nifty little tool. I think it already has become my best friend!

Now I can rest easy as that menu problem has been driving me nuts!

Thanks again,

[TraceyHand]

The Firefox Web Developer is a nifty little tool.

Having just downloaded it from the previous post link, I agree..nice add-on!

[dscontroller]

Hi Lee and Kevin,

Thanks very much for your help on this point, it is much appreciated!

I have altered the css, and it displays OK on the acatalog pages, but does not show up on the index.html (Home Page), for some obscure reason. I'm sure that I'm missing some simple point, but cannot see what it is. The css is shown in the source code for the index page, but Firefox does not list it when using the view or edit modes and consequently doesn't help the navigation. Any ideas, please?

Lee,

I do agree with your sentiments on the actinic.css. It is a real pain in the arse! But worse still, I missed some of your sticky toffee pudding, my all-time favourite!!

Regards,
David