April 22, 201016 yr Howdy friends I made a horizontal navigation menu for my website. The CSS code I made for it is ul#navigation { padding: 0; margin: 0; background-color: red; color: black; position: absolute; right: 0px; left: 0px; width: 100%; } ul#navigation li { display: inline; } ul#navigation li a { padding: .1em 1em; background-color: red; color: black; text-decoration: none; float: left; } a:link, a:visited { color: black; } ul#navigation li a:hover { color: white; background-color: black; } p a:link, p a:visited { color: black; } The thing is I want to make it expand to occupy the whole of the screens width. By doing position:absolute, right and left: 0px and width: 100% (see code above) I managed to do this on all browsers except from Internet Explorer (specifically I checked it on IE8). On IE8 the menu starts from the left but does not go up to the right of the screen, it stops short. I hope you understand what I mean. Can anyone help me to stretch my menu's width 100% also on IE? thanks
April 22, 201016 yr I've just tested your styles above with this:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Test</title> <style type="text/css"> ul#navigation { padding: 0; margin: 0; background-color: red; color: black; position: absolute; right: 0px; left: 0px; width: 100%; } ul#navigation li { display: inline; } ul#navigation li a { padding: .1em 1em; background-color: red; color: black; text-decoration: none; float: left; } a:link, a:visited { color: black; } ul#navigation li a:hover { color: white; background-color: black; } p a:link, p a:visited { color: black; } </style> </head> <body> <ul id="navigation"> <li><a href="link1.html">Link 1</a></li> <li><a href="link2.html">Link 2</a></li> </ul> </body> </html> and a doctype at the very top before the <html> tag:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and IE8 shows no space at the sides. IE7 shows a dummy vertical scrollbar. Did you have other styles and markup on the page?
April 22, 201016 yr Author I am sorry, I am not yet ready to post a link to my site Wickham why did you put that <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> in the beginning? What exactly does this do? Also, the file you wrote me seems to work fine, though when I try the exact same thing you wrote me (with the doctype thing) in my own file, the menu of my website gets even less width. Yes I do have other CSS written on the same file as this nav-menu styling, but there are all below the nav-menu style. Shouldn't this mean that this styling should be more powerful? thanks
April 22, 201016 yr Author Since I'm here I also wanted to ask if it would be OK to erase some unnecessary codes from my nav-menu code. It's a modification of a code I found somewhere on the web but I'm not sure if all of it is necessary. For example erasing the "padding: 0" code does not seem to affect the outcome. What things can I erase?
April 22, 201016 yr You haven't given enough information to provide a proper answer; it's like the missing doctype - we are guessing just the same way that a browser has to guess when you don't tell it what standards to apply by including a doctype. Browsers are quite good at guessing what you want, but need to guess less when you give a doctype. If my example works but your's doesn't, then there may be conflicting styles but I can't see them. Can you post your entire code here? It helps to give an online url so that images can be downloaded but if you post code here someone will have to sort out the problem without images. It's a good idea to state a general reset style at the very top of your styles * { margin: 0; padding: 0; } which makes all elements start with no margin or padding and this makes all browsers start the same because browsers have different default margins and padding which often causes extra spaces in one browser but not in another unless you start by making them all 0. Then add margin or padding to individual styles where you need it. The ul tag is one where browsers have different default left margin so if you include my general style first then you may need to add a margin or padding to ul which will then be the same for all browsers. It may seem like extra code, but it saves extra spaces popping up where you don't expect them.
Create an account or sign in to comment