#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    4
    Rep Power
    0

    HELP! CSS Menu Small Problem with centering issue on Internet Explorer only


    Hey Everyone,

    I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned.

    See: ratemodifiers.com/menu.htm

    Thanks for all help!!

    Id appreciate all help! thank you so much
  2. #2
  3. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,323
    Rep Power
    0
    welcome to DevShed, winston1776!

    CSS Code:
    .menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:179px; line-height:20px; text-indent:17px; color:#767676; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}


    becomes

    CSS Code:
    .menu :hover ul.sub li a {display:block; text-align:left; font-size:11px; height:20px; width:179px; line-height:20px; text-indent:17px; color:#767676; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}


    (just add text-align:left;)

    worked for me! if you don't have it, you should make sure you have the developer tools in IE. if you load it up you can alter CSS on the fly; it really speeds up the hunting and altering to see where to add/change a css rule. good luck!
    Last edited by derelict; April 29th, 2010 at 06:18 PM. Reason: welcome!
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    4
    Rep Power
    0
    Hey - Thank you SO much for your help. I really appreciate that. It worked. I have a few questions. I didnt notice this until i put the navigation in with the rest of the site but to make the drop down work, i have to use those first two lines of code that are the starting HTML Tags. If you go to the site i sent, you'll see it.. its the first two lines.

    Everytime i use that code (i only use it to make drop downs work when I need to create a drop down), it really messes up the rest of the sites alignment, spacing, spacing between lines of text, etc. Do you know a way around that?

    Also, how do i get the developer tools in IE? what does it do?
  6. #4
  7. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,323
    Rep Power
    0
    are you talking about the doctype tag and the html tag? this has the effect of disabling quirks mode (or this other quirks mode ref) and sending the browser into standards mode instead -- which actually makes the browser render more correctly according the the w3c standards. your best bet is to reassess your stylesheet so that your styles display appropriately in standards mode; this set of styles should be appropriate for all browsers, whereas styles in quirks mode are handled differently for IE than for other browsers.

    as a quick and dirty fix, you can insert a comment ahead of the doctype declaration to force IE into quirks mode:

    HTML Code:
    <!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">


    again, your best bet is to fix your stylesheet to run in standards mode, since your doc is xhtml and should rightly trigger standards mode in all browsers. take a look at the references I linked to above to learn more about it.

    for developer tools, check the msdn page for developer tools, which should give a good overview of how it works and allow an immediate download.

    good luck!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2010
    Posts
    4
    Rep Power
    0
    hey - yea i was talking about the doctype tag. I tried what you mentioned by placing that code in but it's still having issues. Im not using any css for the rest of the sites coding, just regular html...

    any thoughts?

    again thanks SO much for your time. I really appreciate it
  10. #6
  11. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,323
    Rep Power
    0
    read up on quirks mode and what it affects -- if your page has different rendering behavior with and without the doctype declaration it's almost a sure thing that it's related to quirks mode -- usually having to do with padding/margin vs. width/height values and sometimes document whitespace. it can also affect how the browser 'flubs' bad html (missing closing tags, tags out of sequence, etc). can really make a difference in a tightly designed page when just a few items are just a few pixels off...

    trust me, in the long run you'll be better off making the whole site have that doctype declaration and fixing all your site template code so it works correctly; you'll end up cleaning up errors you didn't know you had and probably learning a bit along the way. a good start might be using an html file validator to point out some obvious (and not-so-obvious) issues to be aware of. it may take some time, but it's worth every minute.

    good luck!

IMN logo majestic logo threadwatch logo seochat tools logo