please help me understand! CSS Menu in IE GONE WRONG!

[daraclare]

Hi, I'm having a problem with a css menu I used for a friends website.
It looks fine in FireFox but the menu (which is a dropdown menu which should be horizaontal) is to the left side going vertically in Internet Explorer
My friend is quite upset about this as he was very excited about his new website. Can you help me?

It's simpliar to the menu in

http://www.dynamicdrive.com/style/cs...olor-tabs/P10/


and I've used "ddcolortabs"

I'm new to web design and apologise if this is a stupid question.

Any help would be most appreciated as I would like to fix it asap!

Signed fretful Irish bird

[shalom_m]

Without seeing what you have done, it is near impossible to give advise.

[daraclare]

The website is merrion.ie Thanks

[Bocaj]

Validation might be the first step to take, in IE your header is huuuuge.

I don't understand tables in general.....

You should switch so the whole layout is css... it gives alot more flexebility.

I can't see what specifically is causing it... but you need to avoid little mistakes like this

Code: Select all

 
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
          <tr>
  
<tbody>
  <tr>
                <title></title>
                <script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

</script>

The title should be called in the head, i think it is... as well..

Theres a few little mistakes like that...

Validation (Failed validation, 34 Errors)

From experience i've noticed that fixing validation errors solves roughly about half of all my problems.

[daraclare]

It's in the menu CSS I think but I can't work out where. I've uploaded a menu.htm before and it looked the same in Internet Explorer (ie terrible)

The ddcolourtabs source is below but it could be other files not sure My poor head is melted.

Code: Select all

.ddcolortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
    margin:0;
    padding:0;
    list-style:none;
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:none;
}


.ddcolortabs a{
    float:left;
    color: #FFFFFF;
    background: #003366 url(media/color_tabs_left.gif) no-repeat left top;
    margin:0 2px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    display: block;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #006699;
}

.ddcolortabs a:hover span{
background-color: #006699;
}

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #003366;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #003366;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

/* ######### style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid #003366; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #000033;
border-bottom: 1px solid #000033; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: #003366;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #006699;
color: white;
}

[dab42pat]

Hi

Locate this piece of code in your source

HTML: Select all

<title></title>
                <script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

</script>

Remove the <title></title> completely

put the remaining code eg <script to </script> in the <head> section of your page.

I dont know if this will cure it but give it a go.

Also as mentioned before, your header image in ie is the size of a small continent.

Pat

[shalom_m]

I had a look at the site and at the code.
The HTML code is in a bit of a mess, I assume due to cutting and pasting without too much thinking.
The suggestion by dab42pat should solve part but not all the problems.
It should be easy enough to rewrite the lot.
3 questions:

1. Do you want me to attempt it?
2. On the left hand side you have a menu that links to exactly the same paces as the drop-down. Do you want/need both?
3. Will you allow me some artistic license (like centering and borders), or do you want the page to look exactly as is?

Let me know.

Your main problem with IE is not in the CSS but in the HTML

<td width="100%"><img src="Merrion Computers_files/merrion-computer.jpg" width="100%"></td>

FF looks at 100% and interprets it to be 100% of the screen
IE looks at 100% and interprets it to be 100% of the graphic (if the graphic is larger than the boundaries - in our case 3600x540 pixels)

[shalom_m]

Here is how I would code the page: See here

For the menu css you will need permission of Stu Nicholls of http://www.cssplay.co.uk because this is going to be a commercial site.

[daraclare]

Thanks for your help but I can't see how it could be in the HTML. If you look at a test page www.merrion.ie/test.html it is still messed up in IE so I can only assume it's in the css

[shalom_m]

On my IE (both 6 and 7) it works exactly the same as in FF
Note: this time it is not dropdown as in the previous post.

[daraclare]

Sorry I should have given you this one
http://www.merrion.ie/dropdowntabsdemo.htm
Look at example 1. It should look the same in FF and IE but doesn't.

[shalom_m]

What differences are you talking about?

IE6 Menu


FF2 Menu


There is a slight colorshift in the IE and a difference if 1px vertically. Is that what you are talking about or am I missing something?

[daraclare]

Had it sorted by the time you'd a look Thanks for all your help though :o)