CSS Menu problem with IE all versions

**zap0paz** · Oct 24, 2011 08:11

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:

Code:

.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:

Code:

#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??

**Paul O'B** · Oct 24, 2011 08:29

Hi Welcome to Sitepont

.

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

Try this:

Code:

.menu {clear:both}

**zap0paz** · Oct 24, 2011 08:40

Originally Posted by Paul O'B

Hi Welcome to Sitepont

.

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

Try this:

Code:

.menu {clear:both}

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

Code:

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

and it did not work.

I tried same for :

Code:

.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.

**Paul O'B** · Oct 24, 2011 09:14

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 :

Code:

.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.

**zap0paz** · Oct 24, 2011 12:39

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

Code:

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

and

Code:

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

Thank you again.

**Paul O'B** · Oct 24, 2011 16:45

Originally Posted by zap0paz

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

Code:

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

and

Code:

.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

Code:

.menu {
        clear:both;
	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.

**zap0paz** · Oct 25, 2011 02:30

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?

**Paul O'B** · Oct 25, 2011 13:41

Your doctype is tripping quirks mode.

Try this one:

Code:

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

**zap0paz** · Oct 25, 2011 14:26

Originally Posted by Paul O'B

Your doctype is tripping quirks mode.

Try this one:

Code:

<!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

Code:

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

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

**Paul O'B** · Oct 25, 2011 15:20

Originally Posted by zap0paz

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

Code:

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.

**zap0paz** · Oct 25, 2011 16:38

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

**zap0paz** · Oct 25, 2011 16:55

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

**Paul O'B** · Oct 25, 2011 17:47

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.

**zap0paz** · Oct 25, 2011 17:53

I found one blank space, but finding it hard to find 2nd space

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">

**zap0paz** · Oct 25, 2011 17:59

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?

**Paul O'B** · Oct 25, 2011 18:08

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.

Code:

#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;
}

**zap0paz** · Oct 25, 2011 18:35

Originally Posted by Paul O'B

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 heoghts on boxes buut let the content dictate the height where possible.

e.g.

Code:

#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:

Code:

# 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

**zap0paz** · Oct 25, 2011 18:44

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

Code:

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.

**Paul O'B** · Oct 26, 2011 02:23

Originally Posted by zap0paz

And, do you know why validator gives me such an error:
[code]
Error Line 197, Column 59: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

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

Code:

<div id="right>
 <li id="login-3" class="widget widget_login">

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

Code:

<div id="right">
 <ul>
  <li id="login-3" class="widget widget_login">

... etc ...

 </ul>
</div>

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.

**zap0paz** · Oct 26, 2011 14:05

Originally Posted by Paul O'B

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

Code:

<div id="right>
 <li id="login-3" class="widget widget_login">

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

Code:

<div id="right">
 <ul>
  <li id="login-3" class="widget widget_login">

... etc ...

 </ul>
</div>

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.

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?

**Paul O'B** · Oct 26, 2011 14:39

I;m n ot sure what you want that footer to look like but surely those icons should be next to each other without margins?

e.g.

Code:

div#footer-wrapper div#footer {
   /* height: 126px;*/
    margin: 0 auto;
    overflow: hidden;/* clear:floats*/
    text-align: left;
    width: 898px;
}

div#footer-wrapper div#footer img {
    float: left;
}

No need to call everything a div#footer as #footer is unique.

**zap0paz** · Oct 26, 2011 15:08

these logos will be different from each other and I want them to be on the center and under that copyright text. You're right about #footer but I copied that from somewhere, so I need to give them new names.

**Paul O'B** · Oct 27, 2011 04:44

Originally Posted by zap0paz

these logos will be different from each other and I want them to be on the center and under that copyright text. You're right about #footer but I copied that from somewhere, so I need to give them new names.

Then don't float the images and just put text-align center on the #footer and the images will center (as long as they are still display:inline) and so will the text.

**zap0paz** · Oct 27, 2011 10:49

Originally Posted by Paul O'B

Then don't float the images and just put text-align center on the #footer and the images will center (as long as they are still display:inline) and so will the text.

I don't know what I'm doing wrong but cannot get it..maybe they both are in the same line, I mean both logos and text.

**zap0paz** · Oct 27, 2011 13:41

Originally Posted by zap0paz

I don't know what I'm doing wrong but cannot get it..maybe they both are in the same line, I mean both logos and text.

How do I position footer bg fixed? I don't want it to float up.

User Tag List

Thread: CSS Menu problem with IE all versions

Thread Tools

Display

CSS Menu problem with IE all versions

Bookmarks

Bookmarks

Posting Permissions