I can't get this very simple, tiny page to work the way I want. I feel like a real idiot. http://www.comh.com/web07test/test.html I want all tabs on the right side to touch the white area at the bottom. So far, only the white tab does this and the blue ones do not. I want them all to be the same size and lined up with each other vertically. Also, in IE, it appears to ignore the bottom padding of the blue tabs, and, on hover, the top of the blue tab and the right and left hand side get a white border. The sides show up in IE and FF, but the top white border doesn't show up in IE, only in FF. Can anybody help? Here's the very simplistic code that stupid me can't figure out. Hoping a second pair of eyes will do it. Thanks. <html> <head> <style> #solutionsNav { margin: 0px; padding: 0px; background: #3399CC; height: 25px; } #solutionsNav img { padding: 0px; margin-top: 8px; float: left; } #solutionsNav li { font-family: Verdana, Arial, Helvetica; font-size: 12px; border-top: solid 1px #3399CC; border-left: solid 1px #3399CC; border-right: solid 1px #3399CC; border-bottom; solid 0px #3399CC; margin: 0px; float: right; } #solutionsNav li a { color: #FFFFFF; background: #000066; border-top: solid 1px #3399CC; border-left: solid 1px #3399CC; border-right: solid 1px #3399CC; border-bottom; solid 0px; padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 10px; } #solutionsNav li a:hover { border-top: solid 1px #FFFFFF; border-left: solid 1px #FFFFFF; border-right: solid 1px #FFFFFF; border-bottom; solid 0px; } #solutionsNav ul { padding-right: 10px; padding-top: 6px; padding-bottom: 0px; padding-left: 0px; margin: 0px; list-style: none; } #solutionsNolink { background: #FFFFFF; test-decoration: none; color: #000000; float: right; margin: 0px; padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 10px; } </style> </head> <body> <div id="solutionsNav"> <img src="/web07Test/images/bstDescrip.gif"/> <ul> <li id="solutionsNolink">TEST</li> <li><a href="/solutions/soultionsBST.asp">BST</a></li> <li><a href="/solutions/soultionsHST.asp">HST</a></li> <li><a href="/solutions/soultionsRT.asp">RT</a></li> </ul> </div> </body> </html>
use float: only two times: #solutionsNav img { .... float: left;} #solutionsNav ul { .... float: right;}
Okay, I switched float: right from the li to the ul (I only had two floats), but this doesn't work and it all falls apart. I definitely need the float right within my list items to display them horizontally. Otherwise, they become vertical. Any other thoughts?
Oh, damn. I'm sorry. I didn't mean to line them upo vertically as in one over the top of the other, I meant that their top and bottom edges would all line up vertically, but their positioning would also be horizontal to each other. Sorry about that. What you see is almost what I want. Also, I tried to make it as simple as possible so that anybody can try it on their browser after they make changes. Here's the full address for the image http://www.comh.com/web07Test/images/bstDescrip.gif and that should be alol anybody needs to try it themselves. Again, sorry about not being more clear. Thanks again for responding.
try these edits: #solutionsNav ul { position:relative; bottom:-6px; list-style-image:none; list-style-position: outside; list-style-type:none; margin:0; padding:0; } You are still going to have to play with #solutionsNolink because it is offset with some odd padding, but this should get you started. I would recommend getting rid of all of your margins and padding at the beginning of your sylesheet like this: * { margin: 0; padding: 0; } Take out the margin and padding you have in all of your styles, get things lined up like you want them, then add padding and margins in last. Good luck!
Thank you. yes, I zeroed everything thing out, and then built back up. Didn't seem to make any difference, but I've sure done a completely scientific study on the differences in alternating list items between Opera, FF and IE6. But with still no answer !!! LOL!! It's gotta be something stupid that I'm doing. It always is in these particular situations, but I can't see it. But, in terms of relative positioning, I'd rather avoid any of that as it seems like it would be an extra complication. There has to be a very simple, and more importantly, flexible css way to do this. I'm an old tables guy that was very good, but now I'm a css person, but I'm stumped on this as I am still working out the transition. DUH on me. ((smiles))
If you are making the conversion to CSS from tables, relative positioning is a good place to begin as it is the most simple to understand. Floats will do tricky things in different browsers. I have seen Float layouts break with odd IE bugs like italics text, or contents inside a Float being too wide and causing the layout to shift. (personally I use Floats, just saying they are tricky to start with) Relative positioning moves an element relative to where it should be. So if you have a menu that you would like to move down a few pixels, that is where relative positioning comes in. It becomes more complex as you are trying to position things absolutely or absolutely inside relative positions.
Few more suggestions: Get a doctype on it - that way IE is out of quirksmode and works more like all the other browsers. Use the universal selector * to null all margins and padding for a even baseline. condense like border and paddings to a single line... in the case of things like margins and padding just remember it's top first, runs clockwise, and a missing value at the end defaults to the opposite side. Make an :active state equivalent to your hover - don't leave keyboard navigators out. Use 3 digit hex colors when you don't need the full width, saves you a few bytes. Specify your lineheights - this is one beginners, and many experts often forget. Line-height, the actual height of a line of text is NOT a fixed value cross-browser. As such you cannot predict the height of your links unless you actually state it. Include a fallback font-family. You listed plenty of fonts, but you should always include sans-serif, serif or monospace as appropriate in your font line. Put your CSS classes in the order they appear in the HTML. Makes it easier to find them in the future when things get REALLY big. Is how I'd write that... Well, not entirely. Being that 'image' is text, I'd either use text or an image replacement technique. <h1>Base Station Testing Solution<span></span></h1> - good as always. You put the image in the span and slide it up over the text. Hope this helps - any questions fire away.