rockinlinux

I have been using position:absolute for some <div>'s but when i do the following type code FF will put them on the right and IE on the left...how can i fix this? div#blah { position: absolute: top: 30px; left: 100px; } thanks!!

ok well that did not turn out right but i figured it out

ok well i got it looking really good in firefox but it is crap in IE6 (have not tried any other version). the links are not on the same line, they are stepping from left to right like this: 4 3 2 1 thats what they look like. if i make the nav#ul 50px wide they are like this: 4 3 2 1 and not centered in FF or IE. I dont know why this seems to be so hard, I have done it before (horizontal menus) but this one is hard. any ideas? thanks

thats a good question...hmm i dont really know the answer. Forms are my weakest point in html, i have only done them a few times and dont really know much about them. I guess i need to read more and stuff, right now the submint or login button looks like this in my form. <input type="image" src="images/login.gif" value="login" /><br /> <input type="hidden" name="redir" value="/account/index.php" /> i know the first line is simply the image, right? the second line is a redirect to an account profile, dont you need the images to be an input for it to redirect? thanks guys im really glad i found this forum, i have never seen a forum where people were so nice and helpful

so the good news: i have everything centered and it looks ok and once i fiure this out....i dont think i will ever need to ask questions about this again:) the not so good news: How do i add right or left padding to the li ? it does not seem to work how i want it. What i really need is to add pading to the individual classes but when i do you start to see the hover state picture. I just need more space between the links thanks and sorry, i feel kinda dumb asking all this stuff...i thought i knew it pretty well but i guess not

thanks for all the great help Now i have another question... what about the image for the button i.e., this part <input type="image" src="images/login.gif" value="login" /><br /> <input type="hidden" name="redir" value="/account/index.php" /> do i need to do any alt r anything like that? do they need labels, and ids?

But in xhtml strict you cant have name="NAME" can you? i mean the nae in an input or form.

i should add too im using doc type strict...so no name in the input field

ok i am trying to make a form validate WAI. I have never done this but feel i need to learn. here is my code: <div id="login"> <h5>Login Here</h5> <form action="https://secure.registearpi.com/account/login.php?2382343=0000" method="post"> <fieldset> <p>User Name:</p> <input type="text" name="login" value="" /> <p>Password:</p> <input type="password" name="Password" value="" /> <input type="image" src="images/login.gif" value="login" /><br /> <input type="hidden" name="redir" value="/account/index.php" /> </fieldset> </form> <a href="/account/services/password/requestpassword.php"> Forgot password?</a> </div><!--END LOGIN--> The message i am getting when i try to validate is this: Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL. * Failure - INPUT Element, of Type TEXT, found at Line: 86, Column: 1 * Failure - INPUT Element, of Type PASSWORD, found at Line: 88, Column: 1 * Failure - INPUT Element, of Type IMAGE, found at Line: 89, Column: 1 I have googled but it seems this stuff is kinda hard to find so i thought i would ask all of you. also any other tips for getting sites to WAI validate would be great, i want to do this will all my sites from now on. thanks

i guess thats pretty much what i did, almost. Thanks. I still cant figure out why the margin:auto wont work to center the links. anyone? thanks in advance

If i have a fixed width layout that is 776px and have the margins set to margin:auto so the whole thing is centered how can i put a background image/color on the sides? I hope you understand what i mean

hmmm...that did not work. here is my css: div#nav { width: 776px; height: 35px; border-bottom: 1px solid #0078ed; margin: 0 auto; } .webdesign { display: block; width: 120px; height: 40px; background: url(images/design.gif) no-repeat; float:right; } a.webdesign { background-position: 0px 0px; } a.webdesign:hover { background-position: -120px 0px; } .graphics { display: block; width: 95px; height: 40px; background: url(images/graphics.gif) no-repeat; float:right; } a.graphics { background-position: 0px 0px; } a.graphics:hover { background-position: -95px 0px; } .about { display: block; width:76px; height: 40px; background: url(images/about.gif) no-repeat; float:right; } a.about { background-position: 0px 0px; } a.about:hover { background-position: -76px 0px; } .home { display: block; width: 66px; height: 33px; background:url(images/home.gif) no-repeat; float:right; } a.home { background-position: 0px 0px; } a.home:hover { background-position: -66px 0px; } and html: <div id="nav"> <a href="webdesign.html" class="webdesign"></a> <a href="graphicsdesign.html" class="graphics"></a> <a href="about.html" class="about"></a> <a href="index.html" class="home"></a> </div><!--END NAV--> I have not read the link but im going to right now....btw thanks for all the help!

anyone?

yeah it worked great. The olny question i have now i show do i get them to align horizontally in the middle of the page. text-align: center in the #nav div does not work. How do i do this? thanks everyone

wow. i dont even know what to say. I not only got an answer but i got something better that i hoped. thanks now i will try it.

I have some a little further but the image is half cut off now. i turn the borders on in the div#nav a {}. i also relize that the background image only show up when there is content in the html between the <a href="index.html">CONTENT HERE</a>. is there anyway around this?i want the image to be the link, i dont want text and i think it is the blank /gif that is throwing the whole thing off. thanks for everything

Now i have the right effect. I added a blank .gif image to the html so it looks like: <div id="nav"> <a href="index.html"><img src="images/foreground.gif" /> </a> </div><!--END NAV--> But now it is not lining up. The background image in the .css file is at the bottom of the foreground.gif. I cant even move it by using padding of margins...what can i do. The funny thing is that if this were any day but friday i bet i couple figure this out...i loose focus on Fridays like no other here is my css now. div#nav { height: 35px; text-align: center; padding:2px; border-bottom: 1px solid #0078ed; } div#nav a { width: 88px; background: url(images/home.gif) top center no-repeat; } div#nav a:hover { background: url(images/home_sh.gif) top center no-repeat; }

sorry the div#nav img was a left over. not there now.

this is what i was trying, here is my code: very simple. xhtml: <div id="nav"> <a href="index.html"></a> </div><!--END NAV--> CSS: div#nav { height: 35px; text-align: center; padding:2px; border-bottom: 1px solid #0078ed; } div#nav img { border: none; } div#nav a { width: 88px; height:10px; background:url(images/home.gif) top center no-repeat; } div#nav a:hover { background: url(images/home_sh.gif) top center no-repeat; } Right now no image shows up, i know i have the path right and everything so thats not why. thanks

I am making a site and on my horizontal menu i want the text to add a drop shadow on hover. I made the images one is "home" and the other is the same plus a shadow. I have tried a few different things and have been googleing for a couple hours now and cant figure this out. Any help i would really like thanks in advance also i inlcued the images so you have an idea, the home.gif is the normal one and the home_sh.gif is the one i want on hover. I think i could do this with JS but i dont know much and it seems possible with css....i just dont know how