Menu bar moves to the right in IE6 and IE7

Hello, my name is Stephen and a site I worked on is having problems of compatibility with IE6 and IE7. It could very well have problems of compatibility with other browsers as well, but I work in newer versions of IE, Mozilla, Safari, and Chrome.

My problem is that the navigation at the top of my screen bar moves to the right, off the page, when there should be balance.

I use Dreamweaver CS5.

The Web site can be found at http://www.dremata.com

It is currently under construction, but you should be able to see the line menu bar.

Here is a screenshot of the page rendered in IE7, with the wrong menu bar on the right:

menubar-off.jpg

And behold, it is correctly aligned in IE8:

menubar-correct.jpg

Below, I've posted my CSS and welcome, opinions, critical and all your comments. My knowledge on HTML, CSS and using Dreamweaver is incredibly limited. All that I know is a mixture of self-taught and a course I took in high school. I try to learn as much as I can, so don't hold back. I have tried countless hours to get this menu bar for centering in IE6 and 7 and have applied the techniques I've read on (something hasLayout and floats compensation), but nothing helped. It is too frustrating to work more, so I hope someone can help me, lol.

@charset "utf-8";

{body

background-color: #FFF;

Color: #000;

font:90%/1.4 Arial, Helvetica, without serif;

}


H1, h2 {}

Color: #333;

Auto margin: 0;

padding: 0;

}


H3, h4 {}

color: #696;

Auto margin: 0;

padding: 0;

}


{.menubar}

width: 960px;

zoom: 1;

* display: inline;

_height: 20px;

}


. MenuBar ul {}

width: 960px;

list-style-type: none;

zoom: 1;

* display: inline;

_height: 20px;

}


.sidebar ul ul {} information

border: 0;

margin: 0;

padding: 0;

list-style-type: none;

text-align: center;

}


. MenuBar ul li {}

display: inline;

zoom: 1;

* display: inline;

_height: 20px;

}


.sidebar ul li ul li {} information

display: block;

text-align: center;

padding: 0;

margin: 0;

}


. MenuBar ul li a {}

background: #fff;

width: 100px;

height: 20px;

border-top: 1px solid #CCC;

border-left: 1px solid #CCC;

border-bottom: 1px solid #CCC;

border-right: 1px solid #CCC;

color: #000;

text-decoration: none;

display: inline-block;

text-align: center;

police: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida without serif.

zoom: 1;

* display: inline;

_height: 20px;

}


.sidebar ul li a, any ul li {}

background: #fff;

width: 175px;

height: 25px;

border-top: 1px solid #CCC;

border-left: 1px solid #CCC;

border-bottom: 1px solid #CCC;

border-right: 1px solid #CCC;

padding: 0;

margin: 0 10px 0 0;

color: #000;

text-decoration: none;

display: block;

text-align: center;

police: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida without serif.

}


.sidebar ul li a: hover, any ul li a: hover, .menubar ul li a: hover {}

color: #FFF;

background: #B1CAAE;

}


body #one a {#onenav

color: #FFF;

background: #696;

}


an img {}

border-color: #000;

}


. Header {}

Background: #FFF;

Auto margin: 0;

text-align: right;

Width: 960px;

}


. Header p {}

Auto margin: 0;

padding: 0;

text-align: right;

}


. Container {}

Auto margin: 0;

Width: 980px;

}


{.box1}

Background: #FFF;

margin: 0px 0px 10px 0;

padding: 10px;

Width: 960px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

border-top: 1px solid #CCC;

border-left: 1px solid #CCC;

border-bottom: 1px solid #CCC;

border-right: 1px solid #CCC;

}


. Sidebar {}

Background: #FFF;

Color: #000;

float: left;

Auto margin: 0;

padding: 0px;

Width: 180px;

}


{information

Background: #FFF;

float: right;

Auto margin: 0;

padding: 0px;

Width: 180px;

}


{.box2}

Background: #FFF;

Auto margin: 0;

Width: 960px;

}


.footer {}

background-color: #FFF;

do-size: 12px;

Auto margin: 0;

text-align: center;

Width: 960px;

padding: 10px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

}


UL, ol, dl {}

margin: 0;

padding: 0;

}


#content1, {#content2}

margin: 5px 200px 200px 0;

padding: 0;

Width: 560px;

}


{UL.info168}

margin left: 186px;

}


{UL.list148}

margin left: 184px;

}


UL.list148 li {}

list-style: disc;

padding: 1px;

}


{UL.list168}

margin left: 204px.

}


UL.list168 li {}

list-style: disc;

padding: 1px;

}

{.overview}

margin left: 265px;

}


{.overviewinfo}

margin-left: 20px;

}


a: link {}

color: #696;

text-decoration: none;

}


a: visited {}

color: #B1CAAE;

text-decoration: none;

}


a: hover, a: active, a: {emphasis

text-decoration: none;

}


{h}

margin: 5px 5px 0 0;

color: #CCC;

}


{} .info

margin: 5px 5px 0 25px;

}

Thanks in advance to anyone who can offer help!

-Stephen

Add clear: both; in the .menubar css selector.

HOWEVER, although that will position your navigation inside your page it will still not be rendered exactly the same in IE6 IE7 & as in Firefox, Safari, etc.

Thick cross-browser I would revise the css for the .menubar .menubar ul, li and css anchor as below (is there no need to use the star or underscore hacks as long)

{.menubar}
Width: 960px;
Clear: both;
}
. MenuBar ul {}
Width: 960px;
list-style-type: none;
}
. MenuBar ul li {}
float: left;
margin: 0 0 0 4px;
}
. MenuBar ul li a {}
display: block;
Background: #fff;
Width: 100px;
border: 1px solid #CCC;
Color: #000;
text-decoration: none;
text-align: center;
Police: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida without serif.
}

Tags: Dreamweaver

Similar Questions

  • my Start menu bar is on the right side of my screen and not to the bottom... How can I get that back down?

    I closed a program and my Start menu bar went on the right side of my screen. I need to know how to get it back down.

    Do you mean the Windows taskbar? Right-click on it and unlock it. Left click on an empty space and just drag it down. Re-lock. Bruce Hagen
    MS - MVP October 1, 2004 ~ September 30, 2010
    Imperial Beach, CA

  • Need to change the menu bar Spry for a right-to-left language

    Hello

    I am trying to create a menu bar Spry with submenus for a language from right to left.  This means that I need to the menu bar appear on the right side of the screen, having the submenus pop up to the left of their parent buttons and the little arrows that appear on the parent point left buttons (instead of the right as is the default behavior).  I discovered how to get the menus pop up to the left of their parents and you can manage to get the menu on the right side of the screen, I think.  However, I am having a hard time finding how to get small arrows on the left.  Can someone help me with this?

    I use DW CS3 on Windows XP and test with IE and Firefox.

    Web site can be found at: http://www.pogostick.NET/~Shahaf/test2

    In the document css SpryMenuBar, 3rd section for Indication of submenu.  You'll see a few GIFs with a substantive position.  It is the image of the arrow.  Simply change the position and you are good to go.

  • I lost my menu, bars etc at the top of the page.

    Original title : I lost my menu, bars etc at the top of the page. How can I restore them? statusWe'll get answers

    Without the bars above, I can't do anything, like printing a document, set one upward, etc..  I must have pushed a wrong button that sent these bars in hiding or deleted.

    1, if you meant the menu bar in Internet Explorer

    Right click on the space where the menu bar is supposed to be > check the menu bar.

    That's all.

    2. If you hear the menu bar on any Windows Explorer such as Documents, pictures, music etc.

    Open one of those top-level > click on organize > click on layout > check the menu bar.

  • Control screen moves to the right?

    My screen moves to the right about 1/2 "after that I have reset to factory settings?  I can fix with the factory settings, but after about an hour she moves to the right again?

    DEERJOHN

    Hello deerjohn,

    I understand that you are having problems when your monitor guard shift to the right, and you have tried to do a factory reset on it and it continues to happen. There is not a lot of troubleshooting you can do with a monitor. I provided you with the steps to do a hard reset on the screen below:

    Step 1. Unplug the power cord from the wall and the monitor

    Step 2. Hold down the power button while the power cord is disconnected for 30 seconds (this drain ALL the power to the monitor)

    Step 3. The monitor, ensuring that it is plugged directly into a wall and not into a power strip or surge protector.

    If the problem persists, try to reduce your screen resolution down a little and see if it works.

    To go further with troubleshooting that I encourage you to post the number for your product for your computer (if it's an HP computer). I'm a link a HP Support document below that will show you how to find the number for your product. So, if you could indicate what operating system you are using. And if your operating system 32-bit or 64-bit like this and the product number I can give you accurate information.

    How can I find my model number or product number?
    Operating system Windows am I running?
    Is the Version of Windows on my computer 32-bit or 64-bit?

    Will you please re-post with the information requested and I would be happy to provide assistance. Thanks for posting on the HP Forums. Have a great day!

  • How to get back my menu bar, command buttons, the button refresh and option buttons

    Original title: help

    How can I get my menu bar, command buttons, the button refresh and boxes option on my computer at the top screen

    Hello

    In Internet Explorer?

    1st try F11 - toggle mode full screen in the case where is defined.

    Hold the ALT key and the V key - Bar Menu DISPLAY - toolbars-.

    I hope this helps.

    Rob Brown - Microsoft MVP<- profile="" -="" windows="" expert="" -="" consumer="" :="" bicycle=""><- mark="" twain="" said="" it="">

  • ObjectChoiceField move to the right on the selection of an option

    Hello world

    I was using ObjectChoiceField in the Component Manager. But when I click on ObjectChoice Field, it automatically moves to the right. Help me!!

    Ahh... I found the solution...

    earlier, I've been putting property manager as GridField

    gfm3.setColumnProperty (0, GridFieldManager.FIXED_SIZE, 3 * width/7);

    gfm3.setColumnProperty (1, GridFieldManager.FIXED_SIZE, 3 * width/7);

    gfm3.setColumnProperty (2, GridFieldManager.FIXED_SIZE, width/7);

    BUT I NEED TO WRITE THAT:

    gfm3.setColumnProperty (0, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM, 2 * width/7);

    gfm3.setColumnProperty (1, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM, 4 * width/7);

    gfm3.setColumnProperty (2, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM, width/7);

  • Illustrator art Council moves to the right of the app and disappears. I'd appreciate the help. I rebooted the software and then my macbook pro, nothing helps.

    Illustrator art Council moves to the right of the app and disappears. I'd appreciate the help. I rebooted the software and then my macbook pro, nothing works

    [Ask in the correct forum allows... Left non-technical Forum Lounge for forum specific program... MOD]

    MacBook is the material.

    Is what system this?

    Any improvements installed in the system? Well is the material?

  • One of the pages of my site moves to the right when using anchors to scroll. I checked for Ghost off the page boxes and checked that all my 100% width images are actually 100%. I discovered that this problem is in Chrome and do not hap

    One of the pages of my site moves to the right when using anchors to scroll. I checked for Ghost off the page boxes and checked that all my 100% width images are actually 100%. I discovered that this problem is chrome and does not happen in Firefox. Any suggestions?

    Thank you Brad, my ankles were lined up however they were in the Center. I am proposing to-100 and it solved the problem. Thanks for your help.

  • If I buy adobe Elements 10 or later what software should I make the DVD to mov files, the files are large and I know they must be compressed and I don't want to lose quality... I know that adobe pro you still need software, but will still work with el

    If I buy adobe Elements 10 or later what software should I make the DVD to mov files, the files are large and I know they must be compressed and I don't want to lose quality... I know that adobe pro you still need software, but will still work with the elements and may itself make the compression... I know it can burn DVDs...

    vidog

    If you burn to a DVD disc in first items 10 and later versions, some choices are

    a. DVD-VIDEO standard screen or 4:3 16:9 on DVD disc

    Both will have the frame size of 720 x 480 pixels. But the big screen comes with a 16:9 flag that extends approximately 856/480 16:9 display video after encoding. The screening is not adjustable by the user... and you end up with the DVD-VIDEO format @ 29.97 images per second interlaced.

    b. format of the AVCHD on DVD

    Here is the video display 1920 x 1080. And, depending on the version, can be 29.97 images interlaced per second, or 23.976 progressive frames per second (if not just 29.97 images per second interlaced). Although you can generate some AVCHD DVD with a regular DVD burner, DVD AVCHD is in need of a blu - ray player that supports supported AVCHD DVD or one of these drives multimedia multi which is also.

    c. If the player allows... you can export your Timeline file saved on a USB Flash drive and then insert this USB Flash drive in the drive to get the reading of the file. On this route, you can set the Premiere Elements avancΘs to customize your choice of export preset.

    Please consult the bulletin and consider then, let us know if we have targeted your question. If this isn't the case, please give more details in the areas where we do not have.

    Thank you.

    RTA

  • I can't Logg in, I typed the right Mail (Gmail) and password. but it says: Adobe Id and password does not match. Try again.

    I can't Logg in, I typed the right Mail (Gmail) and password. but it says: Adobe Id and password does not match. Try again.

    Forget it, it's working now

  • IE6 and IE7 do not like my position absolute DIV tag

    I did some research on Google.  I made sure that the position of the envelope has been set at parent and I tried clearing offending left, right and two tanks of the div tag.

    This is the header which gives me headaches. I could include it as part of the mainNav div if all else fails, but I hope there is a simple solution to this bug, I've not found in Google.

    Everything I learned about web design I learned over the last month or two, so if you can keep this in mind, I would be grateful.

    Thank you.

    Web site URL: http://www.ladyhawkslair.com

    Code: http://www.ladyhawkslair.com/code.txt

    IE already gave me some problems.  I use Firefox because it's faster.  I learned that it's less buggy.  Yeesh.

    BTW, how important are IE6 and IE7?  I'm more upset by their behavior and may simply strike them if most of the people have upgraded to IE8.

    Glad it works for you... good luck.

    Brad Lawryk

    Adobe Professional Community: Dreamweaver

    The Northern British Columbia Adobe user group: Manager

    Thompson Rivers University: Dreamweaver instructor

    My Blog from Adobe: http://blog.lawryk.com

  • Need help for debugging CSS for IE6 and IE7

    I'd appreciate anyone with a bit of free time to give another pair of eyes. I tried a number of hacks found on this forum and other places to ensure that IE plays well with this site of two columns, I've been thinking, but according to BrowserLabs, there are still problems with IE6 and IE7. Naturally, all other browsers, including IE8 (!), goes as planned.

    The initial attempt, I settled on is here: http://www.patriciayoungquist.com/pages/public/welcome.html . (This page is representative, as all other internal pages are built the same way.) According to BrowserLabs, pageContent and copyright divs rather than show beside and below (respectively) drop-in IE6 and IE7. I still think there's a simple solution here, but I was not able to hit on him

    So I started a new model and CSS to see if I could work out another way and came with http://www.patriciayoungquist.com/pages/test/PYPAtemplate.html . Curiously, this still works in all and now works in IE6 but not in IE7. In IE7, the sidebar is displayed on top of the pageContent.

    I don't know there is something obvious that I'm missing. Work in CS4, and I know the pages validate. So, if anyone has any suggestions, I'd like to try.

    Thank you

    Chris

    Using your first link as an example, I see several things that are not fair.

    (1) do not use positioning.  For the majority of your layout of the site, you must use default CSS that is not positioning at all.

    (2) a fixed positioning does not work in older IE on any container except the body.  It's playing havoc with your left sidebar.  Solution is to remove position: fixed and replace by float: left.  In addition, you may need to add a clearing for your footer float.

    (3) height is a restriction.  Remove height of containers with text in them.

    (4) to align elements on the page, use the margins, padding, or floats - not absolute, fixed or relative positioning.

    Learn CSS positioning in 10 easy steps-
    http://www.Barelyfitz.com/screencast/HTML-training/CSS/positioning/

    Float tutorials-

    http://CSS.maxdesign.com.au/Floatutorial/

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • How to display the MENU bar. Aide said "right-click on a blank section of the band to tabs. What is a tab strip?

    My friend just bought a laptop Windows 8 so I told her to download the latest version of FireFox. Unfortunately, a fool has removed the menu bar, which most people like. You can see all of your options in plain language. In any case, I aimed to help and can't believe it's so hard to get a simple answer to this question. Why FireFox makes it so difficult to get a menu shaped bar old?

    Aide said: "right click on a blank section of the band tabs and check the menu bar". OK, what is a "BAND as TABS" and where she finds it? Who writes these tips help stupid and useless?

    Yo, man! Chill out!

    In order to display the menu bar, press Alt. Once this is done, you have temporarily. Now, all you have to do is go to view > toolbars and check menu bar.

    And the band to tabs is as follows:

    https://support.Mozilla.org/en-us/gallery/image/9469 (one below the address bar)

  • BlackBerry Smartphones to move the Menu bar blue off the screen is just your desktop screen

    By chance I was able to click on the Blue Menu bar instead of expand or contract, it falls to the bittom of the screen of the homepage. All that's left then is your home screen background. Any help on making it understandable for me?

    Put your finger on the menu bar.  While continually pressing the screen, slide your finger upward, toward the top of your screen.  Presto, problem fixed!

    Let us know if that helps you.

Maybe you are looking for

  • Unable to connect to the server of NI Veristand

    Hi all I'm new to NI VeriStand. I try to add a .mdl file in my system definition file by clicking 'add the Simulation Model '. After selecting the .mdl, I get the error pop up message which is attached below. Can someone tell me what is the reason be

  • split the signal not showing multiple output

    I'm dividing the multichannel signal from acquisition of data NOR-6008. When I connect the data to the separation of the vi signal, there is that a single output eventhough I did the dow to give me all the outputs. Please help its urgent.

  • convert from 8.2.1 to 7.1

    Since Robbob thought that it would be better to start a new thread, that's what I did (I think!). I ask if someone with LV 8.0 installed could do me the favor of the simple conversion of these screws for LV 7.1. If copy and paste between different ve

  • How can I get the album artwork for sansa when using of FLAC

    Hello world I am archiving my CD collection on my pc and I use EAC to do. I was wondering, when I drag and drop my albums FLAC on the Sansa Fuze album art isn't here. How to configure EAC so that it will bring on the album art also when I rip CD rhe

  • Login script

    My work (a college), we use a program to wake up our PC, and it can also push scripts.  Y at - it a script that I can push which would connect the PC?  I don't want to do an automatic login because it only to do when we do a certain type of maintenan