Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
The page I am working on is at http://www.mayland.edu/test and the stylesheet is at http://www.mayland.edu/test/SPryAssets/SpryMenuBarHorizontal.css .
I am having problems with my navigation bar, especially in IE7 (and probably earlier IE versions).
I placed my nav bar into a <div> entitled navigation and placed the <div> directly under the red graphic at the top of the page. Everything looks fine in all browsers EXCEPT Internet Explorer 7. In IE7, a white "bar" is placed between the red graphic and the nav bar and I can't get it to move up against the graphic as it appears in other browsers.
Plus, I'd like to center up the nav bar inside of the <div> that contains it. I've tried auto left and right margins and floating the bar to the left with the <div> being floated to the right, but nothing has worked.
I'm a newbie at CSS, and this is my first big project with it.
Any suggestions or help will be greatly appreciated.
wncmacs -
You may need to explicitly set the margins and padding to zero for those divs. Also, you've floated those divs but not the container div, which causes trouble in IE. If they are 100% width, you shouldn't need to float them.
-
The container <div> is not floated and has a size of 955 pixels (for a 1024x768 layout). I have an auto left and right margin and a top margin of 0 for it to put it in the center and at the top of the browser window. Does it need to be floated to make this all work?
Thank you for your help! -
-
CommentAuthorkari.patila
- CommentTimeMay 15th 2008
Try changing the doctype from transitional to strict. Things like margin: 0 auto; won't work in IE unless it's specifically told not to be in the quirks mode.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> -
-
OK, I've managed to get the bar to go together in IE (thanks kari.patila and arvana, both tips helped, but I decided to leave it transitional and I added a <br /> tag at the end of the image that was causing problems and everything worked). Now I have another issue. I have put an address and a telephone number in a floating <div> aligned right and placed just below the phrase "You Belong Here." I assigned it a Z-index initially of 2, but I have upped that to 100, as IE refuses to show the address at all, while all the other browsers have no problems. Is this a z-index problem or something else with the <div>?
Thanks again for the help, and the page is at http://www.mayland.edu/test .
wncmacs -
Also, I have a problem with the black bar I have at the bottom of the screen in Firefox. It doesn't go to the bottom of the screen in any platform of Firefox. I placed it in my <body> tag declaration for the background with a repeat-x position left, bottom. Is there a code trick for Firefox to force it to the bottom of the screen?
-
you could try breaking the black bar into it's own <div>...like a footer
-
I now have a float appearance problem in IE. I have put an address and a telephone number in a floating <div> aligned right and placed just below the phrase "You Belong Here" at the top of the page. I assigned it a Z-index initially of 2, but I have upped that to 100, as IE refuses to show the address at all, while all the other browsers have no problems. Is this a z-index problem or something else with the <div>?
1 to 8 of 8