sticks464

I tested this code in IE7 & 8, FF, Safari, Chrome and Opera. It centers in all browsers. Is there some code your not including that could affect this code? <style type="text/css"> #form { width: 400px; margin: 0 auto; } #left-side { width: 200px; float: left; } #right-side { width: 200px; float: right;} #form input,select { margin-bottom: 10px; } </style> <div id='form'> <form name='yourformname' action=''> <div id='right-side'> <input type='checkbox' name='example' value='delivery' />Delivery<br /> <input type='checkbox' name='example' value='eat-in' />Eat-in<br /> <input type='checkbox' name='example' value='wifi' />Wi-Fi<br /> <input type='checkbox' name='example' value='buffet' />Buffet<br /> <input type='checkbox' name='example' value='tv' />Tv<br /> <input type='checkbox' name='example' value='parking' />Parking<br /> <input type='checkbox' name='example' value='catering' />Catering<br /> <input type='checkbox' name='example' value='take-out' />Take Out </div> <div id='left-side'> Name: <br /> <input type='text' name='name' /><br /> Zip Code: <br /> <input type='text' name='zipcode' /><br /> County: <br /> <select name='county'> <option value='Bronx'>Bronx</option> </select><br /> Type of Food: <br /> <select name='food-type'> <option value='spanish'>Spanish Food</option> </select> </div> </div>

See topic,275152.0.html

Since there is no form with an id of form23, change #form23 { width: 400px; margin: 0 auto; } to #form { width: 400px; margin: 0 auto; } and it will center in all browsers.

See if this script is what you want.

Add a rule for the features a links .feature1 a, .feature2 a, .feature3 a {text-decoration: none;}

You can also add img {border:0;}

Is there a method of showing the current page in the menu using php? The css I'm using works for showing the current page if using just html but not for php. I am using php to call my page content into a div with the following <?php if (isset($_GET['pg']) && $_GET['pg'] != "") { $pg = $_GET['pg']; if (file_exists('pages/'.$pg.'.php')) { @include ('pages/'.$pg.'.php'); } elseif (!file_exists('pages/'.$pg.'.php')) { echo 'Page you are requesting doesn´t exist'; } } else { @include ('pages/home.php'); } ?> And using this menu <div class="main_nav"> <ul> <li id="home"><a style="background-position: 0pt 0pt;" href="?pg=home">Home</a></li> <li id="services"><a style="background-position: 0px 0px;" href="?pg=services">Services</a></li> <li id="media"><a style="background-position: 0px 0px;" href="?pg=media">Media</a></li> <li id="testimonials"><a style="background-position: 0px 0px;" href="?pg=testimonials">Testimonials</a></li> <li id="bio"><a style="background-position: 0pt 0pt;" href="?pg=bio">Bio</a></li> <li id="contact"><a style="background-position: 0pt 0pt;" href="?pg=contact">Contact</a></li> </ul> </div> css for the menu div.main_nav { width: 750px; height: 83px; padding: 25px 0 0 28px; margin: 0 auto;} div.main_nav ul { float: left; padding: 19px 20px 0 0; } div.main_nav ul li { display: inline; } div.main_nav ul li a { float: left; display: block; height: 38px; text-indent: -9999px; margin-left: 15px; } div.main_nav ul li#contact a { background: url('../images/nav_cont.png') no-repeat; width: 113px; } div.main_nav ul li#bio a { background: url('../images/nav_bio.png') no-repeat; width: 71px; } div.main_nav ul li#testimonials a { background: url('../images/nav_test.png') no-repeat; width: 142px; } div.main_nav ul li#media a { background: url('../images/nav_media.png') no-repeat; width: 85px; } div.main_nav ul li#services a { background: url('../images/nav_serv.png') no-repeat; width: 118px; } div.main_nav ul li#home a { background: url('../images/nav_home.png') no-repeat; width: 80px; } div.main_nav ul li#home a:hover, div.main_nav ul li#services a:hover, div.main_nav ul li#media a:hover, div.main_nav ul li#testimonials a:hover, div.main_nav ul li#bio a:hover, div.main_nav ul li#contact a:hover { background-position: 0 -52px; } div.main_nav ul li.current a { background-position: 0 -104px!important; } Also, is there a way to show only the page name in the address bar instead of http://mysite/index.php?pg=services

This should do for what you want. The longest column will push the other two columns down. Checked in IE8, FF, Safari, Chrome and Opera. Not checked in IE7. <!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" xml:lang="en" lang="en"> <head> <title>3 Col Equalizing Divs</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * {margin:0;padding:0} h1,h2,h3,h4,h5{padding:5px 10px; text-align:center} p,ul{padding: 5px 10px} ul{margin-left:16px} #header h2 {font-size:18px} #footer h5 {padding:0 10px} body { background: #FFF; font-family: Arial, Tahoma, sans-serif; font-size: 95%; text-align: center; color:#000; } #container { width: 824px; min-height: 350px; margin: 15px auto; background: #fff; text-align: left; } #header { width: 100%; height:3.5em; text-align: center; } #innerwrap { position:relative; background: #fff; overflow:hidden; height:1%; } #content { width: 330px; background: #fff; text-align: justify; color: #000; float:left; position:relative; left:310px; } #leftcol { width: 300px; margin: 0; float: left; position:relative; left: -330px; z-index:2; } #rightcol { width: 174px; margin: 0; float: right; position:relative; z-index:2; } #footer { width: 100%; height: 2em; line-height:2em; text-align: center; clear: both; } #botleft { position:absolute; z-index:1; height:100%; bottom:0; left:0; width:300px; background:#c3e4f5; } #botright { position:absolute; z-index:1; height:100%; bottom:0; right:0; width:174px; background:#fff; } .center { text-align: center; color: #000; } #footer h5 {padding:0 10px} </style> <!--[if IE 7]> <style type="text/css"> #leftcol {left:0; margin-left:-630px} #content {left:0; margin-left:300px;} </style> <![endif]--> </head> <body> <div id="container"> <div id="header"><h2>Equalizing Columns</h2></div> <div id="innerwrap"> <div id="content"> <h4 class="center">Middle Col</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p> </div> <div id="leftcol"> <h4>Left Col</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit.</p> </div> <div id="rightcol"> <h4>Right Col</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit.</p> </div> <div id="botleft"></div><!--equal height coloring div--> <div id="botright"></div><!--equal height coloring div--> </div><!--end innerwrap--> <div id="footer"><h5>Footer Stuff</h5></div> </div> </body> </html>

This is correct coding but can be simplified and use a class if reusing elsewhere on the same page <p class="white">This is white<span>This is blue</span></p> .white {color:white;} .white span {color:blue;}

You probably want something like this. Use view source to get the code.

Removing this line makes it go away. <img src="http://b3774mhdj4yo3y9et5taqg1z5s.hop.clickbank.net/?tid=9490" alt="" width="1px" height="1px" /> I don't see this 1px by 1px serving any purpose but it follows the footer image and makes the container extend. You would be better off by re-thinking your layout a bit and applying the container.gif background to the main div instead of the container div.

If you remove the background color all that remains is a rule effecting the text. If you need the white background for other hover links then yes you will have to separate out the links with slasses and/or id's.

As haku said, div's will expand with content unless it is floated content. Floated content need to be cleared to push the div down.

Sorry, No. Not until IE catches up with the rest of the browsers and the css3 spec is approved.

The styling of the div is not the problem I don't think. You didn't show all the code so it's just a guess. Absolute positioned elements must be contained in a parent container that is relatively positioned or the absolutely positioned element will position off the body element which is the top left corner of your screen. Your css could be cleaner by using shorthand #meat { position: absolute; left: 493px; top: 280px; width: 538px; background: url(/graphics/meat-bg.jpg) repeat-y; text-align: left; line-height : 20px; height: 269px; padding-top: 0 60px 0 35px; } Font is used as a styling attribute not an html tag.

Give this a try * { padding:0; margin:0; } #rmc { border: 6px solid red; position:relative; margin:80px auto 0; width:65%; height:100%; } #rc1 { width:100%; } #rc1 ul{ font-size:14px; } #videoplayer { margin:0 auto; width:500px; padding-top:40px; clear:left; } #videoplayer img{ width:100%; } #rc1 ul { list-style-type:none; text-align:center; } #rmc #rc1 ul li { width:190px; float:left; margin:4px; border:1px solid green; } #rc2 { margin-top:70px; height:inherit; } .smallthumbs{ text-align:center; } #rc2 .line { width:100%; height:3px; } #rmc #rc2 ul { list-style-type:none; text-align:center; width: 750px; margin: 10px auto; } #rmc #rc2 ul li { width:140px; height:60px; float:left; margin:4px; border:1px solid green; text-align:center; } #rc2 ul li img{ text-align:center; height:100%; width: 100%; } #rc2 .largethumb { margin-top:10px; width:100%; height:90%; } .clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both; } Add a clearing div to clear the floats </ul><!-- end smallthumbsul --> <div class="clearer"></div> <img class="largethumb" src="images/blog5.jpg" alt="large">

You don't have to use div's to do this. <p class="test"><span>This is some left text </span>This is some right text</p> .test{ background:white; border:1px solid #000; color: #000000; text-align:right; padding:10px; white-space:nowrap; } .test span{float:left;width:5em;text-align:left;} If you want either side text to wrap, remove white-space:nowrap; If the text is images, replace the text with the image path, width and height. Or you can make one side text and the other side an image. Remove any css not needed ie. background, border.

So you want someone to show you the code for the photoshop layout so you can insert your unordered list where you want them. There's nothing semantically wrong with your list.

You should be able to customize this layout for what you want. Use view source to see the code.

You must remove browser defaults pertaining to margins and padding, and each browser is different. You can use Eric Meyer's css reset or try with * { margin: 0; padding: 0; }

Not sure about ie7 but for ie6 you can add a clearing rule to each absolute positioned div. clear left, right or both. One of these should work.

If you are using an html doctype then it is valid since html is not case sensitive. However if your usin an xhtml doctype then it is invalid since xhtml is case sensitive.

Why can't you delete this so no call is made background-color: <?php echo $background_color;?>; and add a background color for either the id or class div id="message_border" name="message_border" class="message_border" #message_border { background-color:#fff; }

I would start by placing this css inside style tags in the head section and seeing the results. All styling is dependent on using the correct doctype and removing all browser defaults.

Actually I moved the table inside the loop which with the present styling give 40px of separation between tables. Thank you once again, I have learned a lot. <?php while($row=mysql_fetch_array($result)){ ?> <table class="listing"> <form method="post" action="<?php $_SERVER['REQUEST_URI']; ?>"> <tr> <th>Job Number:</th> <td><input type='text' name='JobNumber[]' size="20" maxlength="250" value="<?php echo $row['JobNumber']; ?> "> </td> </tr> <tr> <th>Job Title:</th> <td><input type='text' name='JobTitle[]' size="100" maxlength="250" value="<?php echo $row['JobTitle']; ?> "> </td> </tr> <tr> <th>Company:</th> <td><input type='text' name='JobCompany[]' size="100" maxlength="250" value="<?php echo $row['JobCompany']; ?> "> </td> </tr> <tr> <th>Location:</th> <td><input type='text' name='JobLocation[]' size="100" maxlength="250" value="<?php echo $row['JobLocation']; ?> "> </td> </tr> <tr> <th>Job Description:</th> <td><textarea name='JobDescription[]' rows="10" cols="61"><?php echo $row['JobDescription']; ?> </textarea> </td> </tr> <tr> <td colspan="4" align="center"><input type="submit" name="Submit" value="Submit"></td> </tr> </form> </table> <?php } ?>