SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 40
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 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:
    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??
    Last edited by zap0paz; Oct 24, 2011 at 08:14. Reason: changes

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepont .

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

    Try this:

    Code:
    .menu {clear:both}

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Last edited by zap0paz; Oct 24, 2011 at 08:42. Reason: changes

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by zap0paz; Oct 24, 2011 at 12:39. Reason: changes

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zap0paz View Post
    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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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">

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zap0paz View Post
    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.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean something like this?  or when it is not copied and pasted something like this n>>i??

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I quick googled it, i found it to be blank space issue. Im looking for a solution now.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">

  15. #15
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Last edited by zap0paz; Oct 25, 2011 at 17:59. Reason: changes

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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;
    }

  17. #17
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by zap0paz; Oct 25, 2011 at 18:45. Reason: suggestions

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zap0paz View Post
    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.

  20. #20
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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?

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  22. #22
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zap0paz View Post
    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.

  24. #24
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  25. #25
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zap0paz View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •