Jump to content

elementalgrace

Members
  • Posts

    146
  • Joined

  • Last visited

Everything posted by elementalgrace

  1. You can use a quick fix solution to simulate alpha transparency in IE5 & IE6 for transparent PNG images. I use it regularly and it's absolutely brilliant: http://www.twinhelix.com/css/iepngfix/
  2. Thanks. I ended up doing something quite similar and it's finally working now exactly the way I'd hoped so I'm really pleased.Cheers!
  3. Hi GuysI'm looking to create some left navigation for a site I'm working on that includes subnavigation, which I'm using nested lists to achieve. The thing is, I want the main naivation to have list-style-type:none; which works fine, but I want to the subnavigation to use a list-style-image. However the list-style-type seems to be carrying over into the subnavigation for some reason. If anyone could offer an idea of what I'm doing wrong or has any suggestions, I'd be happy to hear them. Code is below: /*LEFT NAVIGATION*/#left{ width: 15%; float: left; text-align: left; margin-left:10px;}ul#nav{ margin: 8px 0 32px 0; padding: 0; list-style-type: none;}ul#nav li{ padding-left:1px; border-top: 1px solid #000066; vertical-align: middle; font: bold 85% arial,sans-serif;}ul#nav li a{ line-height: 150%; color: #828282; text-decoration: none; display: block; padding: 0 5px 0 0; margin: 1px 0;}ul#nav li a:hover, ul#nav li a.on{ line-height: 150%; background-color: #9f9f9f; color: #fff !important;}/*SUB NAVIGATION*/ul#nav li dl{ margin: 0; padding: 0; }ul#nav li dl dd{ margin: 6px 0 6px 15px; font: 85% arial, sans-serif; line-height:100%;list-style-image: url(images/bullet.gif) !important;}ul#nav li dl dd a{ font-weight: normal; display: inline; padding: 0; }ul#nav li dl dd a:hover, ul#nav li dl dd a.on{ background-color: #fff; color: #000 !important; text-decoration: underline; <!--LEFT NAVIGATION--> <div id="left"> <ul id="nav"> <li><a href="#" title="Home">Home</a> </li> <li><a href="#" title="">About Us</a> </li> <li><a class="on" href="#" title="">Services</a> <dl> <dd><a href="#" title="">Health & Safety</a></dd> <dd><a href="#" title="">Environment</a></dd> <dd><a href="#" title="">Quality</a></dd> <dd><a href="#" title="">Video</a></dd> <dd><a href="#" title="">DSGAs</a></dd> </dl> </li> <li><a href="#" title="">Frequent Questions</a> </li> <li><a href="#" title="">Links</a> </li> <li><a href="#" title="">Contact Us</a> </li> <li> </li> </ul></div> CheersEG
  4. You can do includes in asp as well, if your host supports that and I think you can also do them in SHTML but I've never actually tried to do it myself.
  5. Is there any way to set a width for an element, but specifically set it to be a different width if you're looking at it in IE6?I have a problem that I'm trying to fix for a friend as he was given some non standards compliant code. I now have it working fine for Firefox, IE7, Opera and Netscape but this one page won't work for IE6. It will work for IE6 if I change the width but then it knocks the background out in Firefox, IE7, Opera and Netscape.The site is developed in asp.net if that helps
  6. The validation result for the index page (all pages coming out the same) is hereThe HTML is here (it's rather long due to all the curved corners, sorry):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>East Meets West</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <link href="images/styles.css" rel="stylesheet" type="text/css" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="" name="abstract" /></head><!--ALL--><body> <div id="all"> <div id="main"> <div id="header"> <ul> <li><a href="#" class="on">Home</a></li> <li><a href="#">Catalogue</a></li> <li><a href="#">Product Information</a></li> <li><a href="#">Members</a></li> <li><a href="#">Basket</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!--LEFT-NAV --> <div class="leftnav"> <!--LEFT-NAV POD1 --> <div class="left-box"> <div class="left-t"> <div class="left-b"> <div class="left-l"> <div class="left-r"> <div class="left-tl"> <div class="left-tr"> <div class="left-bl"> <div class="left-br"> <div class="left"> <ul class="left-search"> <li>Quick Search</li> <li><label for="txtKeyword"> </label> <input id="txtKeyword" maxlength="55" name="txtKeyword" title="Enter Keyword" type="text" /></li> <li> <label for="btnSubmit"> </label> <input class="submit" name="btnSubmit" type="submit" value="go!" /></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END: POD1 --> <!--POD 2--> <div class="left-box"> <div class="left-t"> <div class="left-b"> <div class="left-l"> <div class="left-r"> <div class="left-tl"> <div class="left-tr"> <div class="left-bl"> <div class="left-br"> <div class="left"> <ul> <li>Browse Products</li> <li><a href="#">Boxes</a></li> <li><a href="#">Lights & Lamps</a></li> <li><a href="#">Ornaments</a></li> <li><a href="#">Jewellery</a></li> <li><a href="#">Furniture</a></li> <li><a href="#">Decorations</a></li> <li><a href="#">Rugs</a></li> <li><a href="#">Special Offers</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END: POD2--> </div> <!--CONTENT --> <div id="content-area"> <!-- BEGIN:MAIN BOX --> <div id="main-container"> <div class="main-box"> <div class="main-t"> <div class="main-b"> <div class="main-l"> <div class="main-r"> <div class="main-tl"> <div class="main-tr"> <div class="main-bl"> <div class="main-br"> <div class="main-content"> <!-- BEGIN:MAIN BOX --> <div class="clear"> </div> <!--PAGE-CONTENT OUTSIDE PODS --> <div class="container"> <div id="breadcrumb"> <a href="#">Home</a> > New Messages</div> <h1> Lorem Ipsum Dolor Amet</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. <a href="#">Praesent consectetuer augue sit amet mauris</a>. Maecenas adipiscing, dui sit amet auctor dapibus, lectus massa sollicitudin dui, nec pellentesque lectus turpis cursus diam. Donec tincidunt rhoncus odio. Nam sodales ipsum eu erat. Donec facilisis, orci in malesuada commodo, est nisl rhoncus nisl, ac commodo diam mauris quis quam. Mauris iaculis, dui quis condimentum vulputate, odio nunc aliquam purus, non ullamcorper nunc diam at leo. Nulla non leo. Nulla in velit. Nam ultricies sapien nec turpis. </p> <div class="products"> <table border="0" cellspacing="8" class="products"> <tr> <td> <div><img alt="" src="images/product1.jpg" /></div> <div><a href="#">Tableware</a></div> </td> <td> <div><img alt="" src="images/product2.jpg" /></div> <div><a href="#">Furniture</a></div> </td> <td> <div><img alt="" src="images/product3.jpg" /></div> <div><a href="#">Ornaments</a></div> </td> </tr> </table></div> </div> <!--END: PAGE-CONTENT --> <br clear="all" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END:MAIN BOX --> </div> <!--END: CONTENT --> <div class="clear"> </div> </div> <!-- END MAIN --> <div class="credit1">Website Design: <a href="http://www.xxxx.co.uk" target="_blank">xxxxx</a> </div></div></body></html> ... and the CSS here: body{ margin: 2px; background-color: #ffffff;}/* Everything */#all{ margin: auto; width: 770px; max-width: 770px; background-color: #ffffff; text-align: left;}#main{ clear: both; vertical-align: top; margin:0; padding:0;}/*HEADER AND TOP NAVIGATION*/#header{ background: url(../images/header.jpg) no-repeat 0px 0px; height: 197px;}#header ul{ padding-top: 10px;}#header li{ display: inline; padding-left: 8px; padding-right: 8px;}#header li a{ font: bold 100% arial, sans serif; font-size: medium; color: #cc6346; text-decoration: none;}#header li a:hover{ color: #5291C2; text-decoration: none;}#header li a.on{ color: #a9a9a9;}/*BREADCRUMB TRAIL*/#breadcrumb{ padding-top: 10px; text-align: right; margin-right: 20px; font: 75% arial,sans-serif; color: #474747; text-decoration: none;}#breadcrumb a{ font: 100% arial,sans-serif; text-decoration: none; color: #cc6346;}#breadcrumb a:hover{ color: #5291C2; text-decoration: none;}#breadcrumb a.on{ color: #a9a9a9;}/*TEXT, LINKS ETC*/h1{ margin: 15px; padding-top: 5px; font: bold 97% Arial, Helvetica, sans-serif; color: #5291C2;}h2{ margin: 7px 20px; padding-top: 5px; padding-bottom: 5px; font: bold 96% Arial, Helvetica, sans-serif; color: #a2a2a2;}p{ font: 75% arial,sans-serif; line-height: 150%; text-align: left; } .container p{ width: 90%; margin-left: 15px; color: #474747;}ul{ padding-left: 15px; margin-left: 0px;}li{ font: 82%/17px arial,sans-serif; margin-left: 0px; color: #02a1d8; text-decoration: none;}a{ color: #cc6346;}a.on{ color: #a9a9a9;}a:hover{ color: #5291C2; text-decoration: none;}/* LEFT, LEFT NAVIGATION AND LEFT SEARCH BOX*/.leftnav{ float: left; margin-top: 8px; width: 23%;}.left-box{ background-color: #ffffff; border: 1px solid #ffffff;}.left{ padding-top: 4px; padding-bottom: 15px;}.left-tl{ background: url(../images/left-tl.gif) no-repeat 0px 0px; position: relative;}.left-tr{ background: url(../images/left-tr.gif) no-repeat 100% 0px; position: relative;}.left-bl{ background: url(../images/left-bl.gif) no-repeat 0px 100%; position: relative;}.left-br{ background: url(../images/left-br.gif) no-repeat 100% 100%; position: relative;}.left-t{ background: url(../images/left-t.gif) repeat-x 0px 0px; position: relative;}.left-b{ background: url(../images/left-b.gif) repeat-x 0px 100%; position: relative;}.left-l{ background: url(../images/left-l.gif) repeat-y 0px 0px; position: relative;}.left-r{ background: url(../images/left-r.gif) repeat-y 100% 0px; position: relative;}.leftnav ul{ list-style-type: none;}.leftnav li{ font: bold 100% arial, sans-serif; color: #5593C3; margin-left: 7px; padding-top: 5px; text-decoration: none;}.leftnav li a{ font: normal 83% arial, sans-serif; color: #cc6346; text-decoration: none;}.leftnav li a:hover{ color: #5291C2; text-decoration: none;}.leftnav li a.on{ color: #a9a9a9; text-decoration: underline;}.left-search li{ font: bold 100% arial, sans-serif; color: #5593C3; margin-left: 7px; padding-top: 5px; text-decoration: none;}.left-search li label{ width: 0px; text-decoration: none;}.left-search input{ width: 100px; border: solid 1px #474747; font: normal 80% arial, sans-serif; color: #474747;}.left-search input.submit{ width: 104px; color: #cc6346; border: 1px solid #474747;}/* CONTENT AND CONTENT AREA */#content-area{ margin-top: 5px; float: right; width: 77%;}#main-container{ padding-left: 2px; padding-bottom: 2px; margin: 2px 0px 2px 2px; padding-top: 2px;}.main-box{ background-color: #ffffff; border:1px solid #ffffff;}.main-tl{ background: url(../images/main-pod-tl.gif) no-repeat 0px 0px; position: relative;}.main-tr{ background: url(../images/main-pod-tr.gif) no-repeat 100% 0px; position: relative;}.main-bl{ background: url(../images/main-pod-bl.gif) no-repeat 0px 100%; position: relative;}.main-br{ background: url(../images/main-pod-br.gif) no-repeat 100% 100%; position: relative;}.main-t{ background: url(../images/main-pod-top.gif) repeat-x 0px 0px; position: relative;}.main-b{ background: url(../images/main-pod-bottom.gif) repeat-x 0px 100%; position: relative;}.main-l{ background: url(../images/main-pod-l.gif) repeat-y 0px 0px; position: relative;}.main-r{ background: url(../images/main-pod-r.gif) repeat-y 100% 0px; position: relative;}.container{ margin: 27px; background: none; padding-bottom: 10px; }.box{ background-color: #F6F4F4; margin: 25px; border: 1px solid #ffffff;}/*PRODUCT PAGE*/#productpic { float: left; width:150px; border: 1px solid #ffffff;}#productpic img{ margin-top:5px;}#productdesc{ float: left; width: 370px; text-align:left; border: 1px solid #ffffff;}#productdesc p input{ color: #cc6346; border: 1px solid #474747; background-color:#ffffff; font: normal 100% arial, sans serif;}/*CATALOGUE / PRODUCT TABLE*/.products{ margin: auto; text-align: center;}table.products{ display: inline;}table.products tr td{ font: normal 80% arial,helvetica,sans-serif; text-align: center; width: 150px;}table.products tr td img{ border: 0px solid #777777; margin: 10px 0 4px 0; width: 150px; height: 150px;}table.products tr td a{ color: #cc6346; text-decoration: none;}table.products tr td a:hover{ color: #5291C2; text-decoration: none;}table.products tr td a.on{ color: #a9a9a9; text-decoration: none;}/*CREDIT*/.credit1{ clear: both; margin-top: 10px; margin-right: 10px; font: 75% arial; color: #474747; text-align: right; text-decoration: none; border: 1px solid #ffffff;}.credit1 a{ color: #5593C3; text-decoration: none;}.credit1 a:hover{ text-decoration: underline;}/*MISCELLANEOUS*/.clear{ clear: both;}.red{ padding-right: 0px; padding-left: 22px; font-size: 10px; padding-bottom: 18px; color: red; padding-top: 22px; font-family: arial,Sans-Serif;}/* FORMS */.container ul{ width: 95%; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.container li{ list-style: none; font: 89% arial, sans-serif,; padding-top: 5px; padding-bottom: 5px;}.container label{ font: 89% arial, sans-serif; color: #474747; width: 12em; float: left; text-align: left; margin-right: 0.5em; display: block;}.container input{ color: #474747; font-size: 89%; width: 40%; border: 1px solid #474747;}.container textarea{ width: 40%; font: 89% arial, sans-serif; color: #474747; border: 1px solid #474747;}.container checkbox{ border: 0px solid #ffffff;}input.submit{ color: #cc6346; width: 70px; border: 1px solid #474747; background: #ffffff; margin-left: 0px;}select{ border: 1px solid #474747; width: 41%; color: #474747; background: #ffffff; margin-left: 0px; font: 82% arial, sans-serif;}.LinkButton{ font-size: 25%; vertical-align: top; width: 69px; color: #cc6346; margin-right: 5px; font-family: arial, Sans-Serif; text-align: center; text-decoration: underline;}.LinkButton:Hover{ font-size: 89%; vertical-align: top; width: 69px; color: #cc6346; margin-right: 5px; font-family: arial, Sans-Serif; text-align: center; text-decoration: underline;}/*SHOPPING BASKET*/table.shopping{width:525px;text-align:center;margin:auto;}table.shopping tr td{ padding: 2px; font: normal normal 75% arial,helvetica,sans-serif; color: #777777; text-align: center; background-color: #f5f5f5;}table.shopping tr th{ padding: 5px; font: normal bold 80% arial,helvetica,sans-serif; color: #fff; text-align: center; background-color: #cc6346;}.shopping a{ color: #cc6346; text-decoration: underline;}.shopping input{ width:50px; border: 1px solid #474747;}.shopping tr td.buttons{ background-color: #fff; text-align: right; padding: 10px 0 0 0;}.shopping tr td.shop-small{width:100px;}.shopping tr td.buttons input{ border: 1px solid #033C20; color:#cc6346; background-color: #ffffff; font-size:small; text-align: center; width:150px;}/*STATS*/.statstable{ font: 100% arial,sans-serif; text-align: left; text-decoration: none; color: black; font-family: arial; text-decoration: none;}
  7. Has anyone else found that even though you have no errors it still tells you that your code won't validate? I have a warning for a label (apparently the validator doesn't like my label name, heaven forbid)but no errors in my code and still the dratted thing won't validate ...This seems crazy to me ...
  8. Thanks for the tips, but I have already set the margin and padding to zero. It's just this one button that's indenting. I have to assume it's got something to do with the way IE adds in extra pixels here and there as it's happening in IE 6 and 7, but not in any other browsers. It's not a huge deal and the developer would probably accept it as it is but I'm a nitpicky sort and it annoys me as I like things to line up properly and work the same in all browsers. I can post all the code if it would help at all?
  9. Hi there guys n gals.I have a problem that's been driving me a bit nuts today, that I can't see an obvious answer for. If anyone can possibly suggest an answer to deal with it, I'd really appreciate it. I'm designing a template for an ecommerce site before passing it over to the developer. Everything's working perfectly apart from one minor thing that's bugging the living daylights out of me. (I haven't validated it yet, but fingers crossed that should be fine). I don't really want to use multiple stylesheets if possible and it all has to be v accessible too.I'm creating the product detail page, and want it to display so that you have the product title, then the price underneath, an add to basket button and the product detail underneath that. It all seems to line up fine, except in IE (I've checked in v6 and 7) where it's putting in an indent automatically next to the Add to Basket button for no apparent reason. It displays perfectly in firefox, opera and netscape. Any suggestions would be more than welcome. HTML and CSS for relevant bits below.HTML <div class="container"><div id="breadcrumb"><a href="#">Home</a> > <a href="#">Catalogue</a> > <a href="#">Subcategory</a> > Product</div><h1>Lorem Ipsum Dolor Sit</h1><div id="productdesc"><p><b>Price:</b> £ 9.99</p><p><input type="submit" value="add to basket" /></p><p><b>Product Description:</b><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. <a href="#">Praesent consectetuer augue sit amet mauris</a>. Maecenas adipiscing, dui sit amet auctor dapibus, lectus massa sollicitudin dui, nec pellentesque lectus turpis cursus diam. Donec tincidunt rhoncus odio. Nam sodales ipsum eu erat. Donec facilisis, orci in malesuada commodo, est nisl rhoncus nisl, ac commodo diam mauris quis quam. Mauris iaculis, dui quis condimentum vulputate, odio nunc aliquam purus, non ullamcorper nunc diam at leo. Nulla non leo. Nulla in velit. Nam ultricies sapien nec turpis.</p><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. Praesent consectetuer augue sit amet mauris. </p> </div><div id="productpic"><img src="images/3.jpg" height="150" width="150" alt="" /><img alt="" height="150" src="images/3.jpg" width="150" /><img alt="" height="150" src="images/3.jpg" width="150" /></div><div class="clear"> </div></div> CSS .container{ margin: 27px; background: none; padding-bottom: 10px; }/*BREADCRUMB TRAIL*/#breadcrumb{ padding-top: 10px; text-align: right; margin-right: 20px; font: 75% arial,sans-serif; color: #474747; text-decoration: none;}#breadcrumb a{ font: 100% arial,sans-serif; text-decoration: none; color: #cc6346;}#breadcrumb a:hover{ color: #5291C2; text-decoration: none;}#breadcrumb a.on{ color: #a9a9a9;}/*PRODUCT PAGE*/#productpic { float: left; width:150px; border: 1px solid #ffffff;}#productpic img{ margin-top:5px;}#productdesc{ float: left; width: 370px; text-align:left; border: 1px solid #ffffff;}#productdesc p input{ color: #cc6346; border: 1px solid #474747; background-color:#ffffff; font: normal 100% arial, sans serif;}
  10. I don't know - I'm trying to find out as it would be quite useful for a project I'm working on at the mo. I guess it's possible using java or something as well it would be really useful if anyone knows anything about this.
  11. I was looking for a solution to an unrelated problem yesterday when I came across type="scribble" for an input box, which is supposed to allow the user to scribble on a predefined area using a mouse. Thing is I can only find references to it for html 3 - has it been deprecated now, and if so has it been replaced by something similar?The info I found was on http://www.w3.org/MarkUp/html3/input.htmlCheersEG
  12. Unfortunately I don't have the luxury of ignoring IE. Hopefully IE 7 will make cross browser compatibility a bit easier.I hadn't considered that the floated elements night overlap. As it turned out, I didn't actually need the float after all so I guess it worked out for the best. I will perhaps have a play about with it later and see if that was the case. Thanks again for your help - I was more or less at the end of my tether with it.
  13. Thanks for the help aspnetguy. The problem was with the contact form, the login boxes were behaving fine.For some reason the left float in the container div was locking the input boxes in the contact form in IE only so that you couldn't click on them to enter text. I've taken it out and it seems to work fine now across all the browsers but I honestly have no clue how a float element could affect it. Doesn't seem to make a lot of sense to me! Anyone have a clue? Would love to be enlightened about this because it's never happened to me before!
  14. For the login div - I just noticed and changed that so they matched but it's having no effect on the main form. I still can't get it to type into the main text box.I just tried removing the stylesheet and it seems to let me do it then so I guess it's a css prob rather than an html one but if anyone's got any advice I'd still be ahppy to hear it!
  15. Hi Guys,Desperate to a find a solution to problem that may well be the weirdest problem I have ever come across. I am creating an HTML template to send across to a web developer, which has an index page template and a form template. Both pages look fine but when testing the form I noticed that you can't click on the input boxes in IE to type in your details. It does work in firefox though. If you click on the label in IE, the cursor will appear in the input box and if you use TAB to navigate into the input boxes, it gets there ok. The HTML and CSS are below. I don't have a copy on the web yet so I hope this is enough for someone to give me a clue where I'm going wrong.... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Find My Job</title> <link href="images/styles.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="" name="abstract" /></head><!--ALL--><body> <div id="all"> <div id="main"> <!--CONTENT --> <div id="content-area"> <!-- BEGIN:MAIN BOX --> <div id="main-container"> <div class="main-t"> <div class="main-b"> <div class="main-l"> <div class="main-r"> <div class="main-tl"> <div class="main-tr"> <div class="main-bl"> <div class="main-br"> <div class="main-content"> <!-- BEGIN:MAIN BOX --> <div class="clear"> </div> <!--LOGIN --> <div id="login"> <ul> <li> <label for="txtUsername"> Username</label> <input id="Login_txtUsername" maxlength="12" name="Login:txtUsername" title="Your username" type="text" /></li> <li> <label for="txtPwd"> Password</label> <input id="Login_txtPwd" maxlength="8" name="Login:txtPwd" title="Your password" type="password" /></li> <li> <label for="btnLogin"> </label> <a href="#">Login Help</a> <input id="Login_btnLogin" name="Login:btnLogin" title="Login" type="submit" class="submit" value="Login" /> </li> </ul> </div> <!--END:LOGIN --> <!--LEFT NAVIGATION--> <div id="leftnav"> <ul> <li><a href="#" class="on">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Jobseekers</a></li> <li><a href="#">Employers</a></li> <li><a href="#">Search Vacancies</a></li> <li><a href="#">Browse Vacancies</a></li> <li><a href="#">Special Offers</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--PAGE CONTENT --> <div class="container"> <h1> Lorem Ipsum Dolor Amet</h1> <p> Please fill your contact details into the form below:</p> <form> <ul> <li> <label for="txtName"> Name</label> <input id="txtName" name="txtName" title="Your name" type="text" /></li> <li> <label for="txtOrganisation"> Organisation</label> <input id="txtOrganisation" name="txtOrganisation" title="Your company or organisation" type="text" /></li> <li> <label for="txtTelephone"> Telephone</label> <input id="txtTelephone" maxlength="20" name="txtTelephone" title="Your Telephone Number" type="text" /></li> <li> <label for="txtEmail"> Email</label> <input id="txtEmail" maxlength="255" name="txtEmail" title="Your Email Address" type="text" /></li> <li> <label for="txtEnquiry"> Enquiry</label> <textarea id="txtEnquiry" name="txtEnquiry" cols="2" rows="6" title="Your comment or enquiry"></textarea></li> <li> <label for="btnSubmit"> </label> <input id="btnSubmit" name="btnSubmit" title="Send Enquiry" type="submit" class="submit" value="Send" /></li> </ul> </form> </div> </div> <div class="clear"> </div> <!--PAGE-CONTENT --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END:MAIN BOX --> </div> <!--END: CONTENT --> <div class="credit1"> <a href="index.htm">FindMyJob.co.uk</a> | <a href="mailto:info@findmyjob.co.uk">info@findmyjob.co.uk</a> | Tel: 0121 522 4771 | <a href="contact.aspx">Contact Form</a> </div> <div class="credit2"> <a href="terms.aspx">Terms & Conditions</a> | <a href="privacy.aspx">Privacy Policy</a> | <a href="#">Sponsored Employers</a> </div> <div class="credit1"> Website Design: <a href="http://www.create-solutions.co.uk" target="_blank">Create Solutions (UK) Ltd</a> </div> </div> </div> <!-- END MAIN --></body></html> CSS: body{ margin: 2px; background-color: #ffffff;}/* ALL / HEADINGS/ PARAGRAPHS / LINKS */#all{ padding-right: 30px; width: 96%; max-width: 96%; background-color: #ffffff; text-align: left;}h1{ margin-left: 5%; padding-top: 25px; font: bold 97% Arial, Helvetica, sans-serif; color: #F5821F;}h2{ margin-left: 5%; padding-top: 5px; padding-bottom: 5px; font: bold 95% Arial, Helvetica, sans-serif; color: #2B2D90;}p{ font: 75% verdana,sans-serif; line-height: 140%; text-align: left;}a{ color: #F5821F; text-decoration:none; font: normal 12px verdana, sans-serif;}a:hover{ text-decoration:underline;}a.on{ color:#2E3092;}ul{ padding-left: 12px; margin-left: 10px;}li{ font: 11px verdana,sans-serif; margin-left: 0px; color: #a2a2a2; text-decoration: none;}/* MAIN BOX */#content-area{ padding-right: 0px; padding-left: 0px; float: right; padding-bottom: 0px; margin: 0px; width: 95%; padding-top: 0px;}.right{ border-right: #000 0px solid; border-top: #000 0px solid; float: right; margin: 0px 0px 0px 22px; border-left: #000 0px solid; border-bottom: #000 0px solid;}#main-container{ padding-right: 0px; padding-left: 2px; padding-bottom: 2px; margin: 2px 0px 2px 2px; padding-top: 2px;}.main-tl{ background: url(../images/main-pod-tl.gif) no-repeat 0px 0px; position: relative;}.main-tr{ background: url(../images/main-pod-tr.gif) no-repeat 100% 0px; position: relative;}.main-bl{ background: url(../images/main-pod-bl.gif) no-repeat 0px 100%; position: relative;}.main-br{ padding-right: 0em; padding-left: 0em; background: url(../images/main-pod-br2.gif) no-repeat 100% 100%; padding-bottom: 0px; padding-top: 0px; position: relative;}.main-t{ background: url(../images/main-pod-top2.gif) repeat-x 0px 0px; position: relative;}.main-b{ background: url(../images/main-pod-bottom2.gif) repeat-x 0px 100%; position: relative;}.main-l{ background: url(../images/main-pod-l2.gif) repeat-y 0px 0px; position: relative;}.main-r{ background: url(../images/main-pod-r2.gif) repeat-y 100% 0px; position: relative;}/*LOGIN*/#login{ margin-right:25px;}#login ul{ width: 90%; color: #2B2D90; height: auto; text-align: right; text-decoration: none; padding-top: 10px; list-style-type: none;}#login li{ font: bold 12px verdana, Helvetica, sans-serif; color: #2B2D90; text-decoration: none; padding-top:3px; }#login label{ vertical-align: middle; width: 50px; color: #2B2D90; margin-right: 0px; font: normal 12px verdana, Sans-Serif; text-align: left; text-decoration: none;}#login input, .login textarea, .login Select{ font-size: 100%; border: 1px solid #F5821F; color:#a2a2a2; width: 100px; min-width: 140px; font-family: verdana, arial, helvetica, sans-serif;}/* NAVIGATION*/#main{ clear: both; vertical-align: top;}#leftnav{ float:left; padding-right: 15px; padding-left: 25px; background: none; padding-bottom: 2px; text-transform: capitalize; width: 180px; padding-top: 90px;}#leftnav ul{ padding-right: 0px; padding-left: 30px; padding-bottom: 0px; margin: 12px 0px 0px; padding-top: 0px;}#leftnav li{ display: block; padding-bottom:7px; margin-bottom: 8px; list-style-type:none;}#leftnav li a{ font: bold 14px Arial, Helvetica, sans-serif; color: #2B2D90; text-decoration: none;}#leftnav a:hover{text-decoration:underline;}#leftnav a.on{ color:#F5821F;}/* CONTENT*/.container{ float:left; width: 63%; margin-right:35px; margin-bottom:45px; padding-bottom:5px; height:auto;}.container p{ line-height: 150%; margin-left: 5%; color: #a2a2a2;}.right{ border-right: #000 0px solid; border-top: #000 0px solid; float: right; margin: 0px 10px 0px 22px; border-left: #000 0px solid; border-bottom: #000 0px solid;}/* Footer */.credit1{ clear: both; margin-top: 10px; margin-left:138px; margin-right:40px; font: 12px verdana; width: 75%; max-width:75%; color: #a2a2a2; text-align: center; text-decoration: none;}.credit2{ clear: both; margin-top: 10px; margin-left:138px; margin-right:40px; width: 75%; max-width:75%; color: #a2a2a2; text-align: center; text-decoration: none;}#olPages{ font-size: 100%; font-family: verdana,arial, helvetica,sans-serif;}/*MISC*/.clear{ clear: both;}.red{ padding-right: 0px; padding-left: 22px; font-size: 10px; padding-bottom: 18px; color: red; padding-top: 22px; font-family: verdana,Sans-Serif;}/*TABLES*/.table{ font: 80% verdana, sans-serif; color: #035050;}.table a{ color: #a9a9a9; text-decoration: none;}.table a:hover{ text-decoration: underline;}.table tr{ margin: auto; text-align: justify;}.table td{ text-align: left; padding-bottom: 5px; padding-right: 5px;}/* Form styles */.container ul{ width: 95%; color: #000000; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.container li{ list-style: none; font: 89% verdana, sans-serif,; padding-top: 5px; padding-bottom: 5px;}.container label{ font: 89% verdana, sans-serif; color: #a2a2a2; width: 12em; float: left; text-align: left; margin-right: 0.5em; display: block;}.container input{ color: #a2a2a2; font-size: 89%; width: 59%; border: 1px solid #F5821F;}.container textarea{ width:59%; font: 89% verdana, sans-serif; color: #a2a2a2; border: 1px solid #F5821F;}.container checkbox{ border: 1px, #F5821F;}input.submit{ color: #F5821F; width: 70px; border: 1px solid #F5821F; background: #ffffff; margin-left: 0px;}.checkbox{ text-align: left;}select{ border: 1px solid #035050; width: 31%; color: #035050; background: #ffffff; margin-left: 0px; font: 89% verdana, sans-serif;}.LinkButton{ font-size: 25%; vertical-align: top; width: 69px; color: #121267; margin-right: 5px; font-family: verdana, Sans-Serif; text-align: center; text-decoration: underline;}.LinkButton:Hover{ font-size: 89%; vertical-align: top; width: 69px; color: #67b3b3; margin-right: 5px; font-family: verdana, Sans-Serif; text-align: center; text-decoration: underline;}.statstable{ font: 100% verdana,sans-serif; text-align: left; text-decoration: none; color: black; font-family: verdana; text-decoration: none;}
  16. Yup, that should work. If it doesn't work in IE, check your doctype is right as apparently it affects this - or apply text-align:center to the div, which works in IE but not FF.
  17. Great post but I think you've got your serif and sans-serif fonts mixed up!
  18. elementalgrace

    Resolution

    I generally like using % widths for sites as it prevents problems with spare space vs not viewable in smaller browsers. Saying that I'm tearing my hair out over a site at the moment that drops my main content below the left navigation every time I resize to 800 x 600 to test and it's driving me bonkers. The really annoying thing is I've done it before and it worked perfectly - all I changed was the navigation but I can't really work out how that's affecting it as I've set a width for it the same as before. Grrr. God bless flexible websites. *grin*
  19. I'm beginning to think you're right. Trying to design sites for two browsers that do totally different things is becoming a pain in the ...*ahem*... neck. I'm reasonably competent but for crying out loud - why make things more complex than it needs to be?
  20. Do you know, I've managed to fix it so that it displays in both browsers but as per usual I haven't a clue what did the trick. I literally started the table again from scratch and added the code back line by line to see where it was going wrong but I got to the end of the table and it was displaying perfectly.It might be worth trying something like this. I usually do this if I have a problem on one page but it's working on another page elsewhere in the site.I can only assume that I must have missed a closing tag or something somewhere (my eyes go a bit quiffy at 2am when I've been staring at a screen all day!) but it does seem odd that FF let me do it but IE didn't. Shrugs. I have an old version from when it wasn't working so I'll go back through it when I'm less busy and find out where I went wrong.Good luck
  21. Hi again!Wondering this time if anyone knows much about widths in IE and how the way IE interprets widths differs from the way FF does and why this would make a table jump out of its div???CheersEG
  22. Hi ScottThanks but I got the problem sorted through trial and error in the end. It ended up being that the label width was too narrow. For some reason if the label had to go onto 2 lines, it knocked out the next field (with a knock on effect!). I just widened the label and hey presto - it works!Thanks very much for your help anyway
  23. Hi Scott,Thanks for the reply. I tried adding that to the stylesheet but it doesn't seem to have any effect. I tried adding it as .content li span textarea so that it's within the content class like the rest of the form and it's still not having an effect.The fields that have the spans in them are all indenting until I just have a big diagonal line of fields that won't align. I find this a bit weird since the label isn't inside the span but it's indenting too.I meant to say it's doing the same for checkboxes too.I don't have a copy on the web to show you though.
  24. Hi This is my first post on the forum after a long time lurking and I'm really hoping someone can help me. I'm trying to use CSS to style a .net form (I'm not a .net developer, it just so happens that's what the form uses) so that it aligns and displays correctly in IE, firefox and opera. It's going pretty well but I've just come across a slightly weird problem and I'm not sure how to get around it. The style is applied for text boxes fine, but when text areas, check boxes and dropdowns are coded into the form, the .net code puts the label and input field into a <span> tag. I don't think there's a way to stop it doing this but surely I should be able to add a class that enables me align these spanned fields appropriately. It's someone elses code and it's starting to drive me a bit bonkers - so I'll put myself in the hands of the experts and unashamedly beg for help.The HTML looks like this: .content ul{ width: 95%; color: #000000; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.content li{ margin: 0.7em 0px;}.content label{ width: 7em; float: left; text-align: right; margin-right: 0.5em; display: block;}.content li.submit{ color: #474747; border: #474747; padding-left: 5em;}.content .buttonhov{ border-right: #1e5cdb 2px inset; border-top: #1e5cdb 2px inset; border-left: #1e5cdb 2px inset; border-bottom: #1e5cdb 2px inset;}.content input, .content textarea, .content Select{ color: #474747; background: #bcc8cf; border: 1px solid #474747; width:175px;}.content span.label{ width: 7em; float: left; text-align: right; margin-right: 0.5em; display: block;} Many thanksEG
×
×
  • Create New...