CSS Menu problem with IE all versions

Hi everyone and thanks for your time and responses.

So, here in this website: http://bit.ly/pOXOGe when you open it, top menu will not be in its appropriate place in IE.
For some reason, menu looks wider than it should be. However, it works fine with other browsers.

CSS I used for that menu is:

.menu {
	margin: 13px;
	padding-left: 0;
	list-style: none;
	padding-top:8em;
}
.menu li {
	padding: 0;
	height: 35px;
	margin-right: 0;
	list-style: none;
	background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 35px;
	background-repeat: no-repeat;
}
.log a {background-image: url(images/menu/log.png); width: 192px; height:35px}
.log {background-image: url(images/menu/log.png); width: 192px; height:35px}
.ev a {background-image: url(images/menu/ev_esas.png); width: 111px; height:35px}
.ev  {background-image: url(images/menu/ev_ust.png);}
.openq a {background-image: url(images/menu/sual_esas.png); width: 115px; height:35px}
.openq  {background-image: url(images/menu/sual_ust.png);}
.topuser a {background-image: url(images/menu/qabaq_esas.png); width: 113px; height:35px}
.topuser {background-image: url(images/menu/qabaq_ust.png);}
.popularq a {background-image: url(images/menu/meshur_esas.png); width: 111px; height:35px}
.popularq  {background-image: url(images/menu/meshur_ust.png);}
.qeydiyyat a {background-image: url(images/menu/qeyd_esas.png); width: 114px; height:35px}
.qeydiyyat  {background-image: url(images/menu/qeyd_ust.png);}
.haqq a {background-image: url(images/menu/haqq_esas.png);}
.haqq {background-image: url(images/menu/haqq_ust.png); width: 116px; height:35px}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


for the area it is staying:


#container{
	margin: 0px auto;
	text-align: center;
	width:898px;

}#header{
	width:898px;
	text-align: left;
	height: 122px;
	margin:0px auto;
	position:relative;
}

Can you see the reason??

Hi Welcome to Sitepont :).

It looks as though menu is snagging on the float above.

Try this:


.menu {clear:both}


Thanks for your prompt response. I went for something like this

.menu {
	clear:both
	margin: 13px;
	padding-left: 0;
	list-style: none;
	padding-top:8em;}

and it did not work.

I tried same for :

.menu li a, .menu li a:visited {
        clear:both
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 35px;
	background-repeat: no-repeat;
}

and now it looked shrinked after applying it. Please let me know if you see the reason behind.

and it did not work.

I have it working locally with the code I have you and it works fine (as my code always does :)).

Revert to the rule I gave you and upload again in case there is some other issue you introduced since I gave you the fix.

I tried same for :

.menu li a, .menu li a:visited {
        clear:both
	display: block;
	text-decoration: none;
	text-indent: -9999px;
	height: 35px;
	background-repeat: no-repeat;
}

.

Remove that as it has nothing to do with it.

You’re right master. It worked. One question, is there any difference between these two?


.menu {clear:both}
.menu {
	margin: 13px;
	padding-left: 0;
	list-style: none;
	padding-top:8em;}

and


.menu {
        clear:both
	margin: 13px;
	padding-left: 0;
	list-style: none;
	padding-top:8em;}

Thank you again.

Yes in the second version you forgot the trailing semi colon after clear:both; which is why it didn’t work for you the first time around :slight_smile:


.menu {
        [B]clear:both;[/B]
	margin: 13px;
	padding-left: 0;
	list-style: none;
	padding-top:8em;
}

Otherwise there is no difference and you should of course amalgamate the rules as above.

You’re right. There’s also “behavior” I use in css which also seem not working. Opera dragon fly returned that the path is incorrect. However, path is fine. I use htc file to give rounded corners/borders to the boxes in IE versions. Do you know how can I fix this problem?

Your doctype is tripping quirks mode.

Try this one:


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

I do have it on top of header.php and I also tried to put this into htacce

AddType text/x-component .htc
AddHandler text/x-component .htc

did not help. can not still get rounded corners in IE9

No, your doctype is not the same as mine there’s a strange character in it somewhere. As you can see from the validator it doesn’t like it. Maybe you are outputting a BOM if you have it added via php or something.

Browsers are being tripped into quirks mode and IE in quirks mode behaves much like ie5. Ie9 won’t do border radius in quirks mode or any of the other new things that it knows about.

Fix the doctype first and then we can look at other issues.

Do you mean something like this?  or when it is not copied and pasted something like this n>>i??

I quick googled it, i found it to be blank space issue. Im looking for a solution now.

Try removing your doctype completely and any spaces that you have around it then copy and paste my code from above to replace it just to make sure you haven’t got a weird character in the doctype itself. The validator says your doctype has a BOM when I copy it locally and test but my one doesn’t.

I found one blank space, but finding it hard to find 2nd space :frowning: I found that it is not doctype since i call it from php

so it basically does this : <?php get_header(); ?> and in header.php the first line is
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Fixed it, and corners finally appeared. You’re right, just enlightened me with BOM… I had seen it before, but re-doublechecked essential php files in different directory and I found out I do have BOM. How do I avoid getting BOM?? It usually happens when I save in DW and upload to FTP.

Thank you very much!

Now some windows floated away. Do I have to go back to css and edit?

Yes the page is in standards mode now and you will have to check your css as things will be different.

Make sure you clear your floats and don’t put heights on boxes buut let the content dictate the height where possible.

e.g.


#loginbox {
    background-color: #9ABEE0;
    background-repeat: no-repeat;
    border: 1px solid #3473AE;
    border-radius: 5px 5px 5px 5px;
    /*height: 195px; height not needed and is too short anyway */
    margin-bottom: 15px;
    margin-top: 15px;
    overflow: hidden;/* clear the floats*/
    width: 263px;
}

thank you Mr. Paul. I will consider your css directions. By the way, when using auto-caching, what do you usually put time as?

Mine is following:

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A1728000
ExpiresByType image/png A1728000
ExpiresByType image/jpg A1728000
ExpiresByType image/jpeg A1728000
ExpiresByType image/ico A1728000
ExpiresByType text/css A1728000

And, do you know why validator gives me such an error:


Error Line 197, Column 59: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

And when I use firebug and speedtest my website, it gives this error:

The following images served from problem.az should be combined into as few images as possible using CSS sprites. What should I do with them? I already optimized and now wants me to CSS Sprite them.

That’s because you have missed the opening and closing uls for the list here:


&lt;div id="right&gt;
 &lt;li id="login-3" class="widget widget_login"&gt;

There should be a ul to start that lis and to finish it at the end.


&lt;div id="right"&gt;
 &lt;ul&gt;
  &lt;li id="login-3" class="widget widget_login"&gt;

... etc ...

 &lt;/ul&gt;
&lt;/div&gt;  

And when I use firebug and speedtest my website, it gives this error:

The following images served from problem.az should be combined into as few images as possible using CSS sprites. What should I do with them? I already optimized and now wants me to CSS Sprite them.

Sprites save on repeated calls to the server and can speed up your site. Whether you use them or not depends on the situation but they can make things a little more complex to work with sometimes. There are sprite tools around.

I will consider your css directions. By the way, when using auto-caching, what do you usually put time as?

That’s a question for another part of the forum really as its not css related. There are some tips here but for an in-depth discussion I would ask the question in the relevant forum on Sitepoint.

I see. Thanks for your help Mr. Paul. How may I center my copyright text at the bottom?