|
CSS - Is Is Vicious To Display A Table As "display: Block" To Force Margin-collapsing?
Hi!
Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Similar Tutorialshttp://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! Hi Guys, I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible. What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS? what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely. Here is my site: www.msredimp.000webhost.info At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it. Is there a way to force the settings in Mozilla to normal size? Or any other way? Thank you, and sorry for being such a newbie. I'm wondering what's the alternative to the "MARGIN: 0px auto;" where I need the -1px for the margin-left and margin-right as oppose to auto for margin-left and margin-right?? Code: MARGIN: 0px auto; Thanks, FletchSOD I have seen sites that have their content centred, but when you make the browser window smaller, their left margin gets lost. When the right hand edge of the browser window touches the right edge of the content I would like the left margin to reduce proportionally until it's all gone. I know auto margins will do something like this, but when I tried that my content continually moved as the window is resized. I only want the left margin to reduce when the window is too small for the content. I have looked at the sites that work like this but generally they are very complicated and as a beginner I cannot isolate which bit allows this to happen. I have a small test page below. What would I need to add/change to make my left margin get lost when the window gets smaller. I have a link to the same code so you can see how it looks in the browser. http://www.cv2.co.uk/margins.html I have kept the CSS in the main file just to keep it simple. Thanks Code: <html>
<head>
<style>
#main {
background:red;
width:500px;
margin-left:200px;
}
</style>
<body>
<div id="main">This is content</div>
</body>
</head>
</html>
I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? My issue is the area around the image. It's the background color so i'm pretty sure it's not a border, I tried messing around with margins. Bottom line, I want my image (header panel) to be flush with the top and sides of the browser! Here's my code: <html> <head> <style type="text/css"> body { background-color: #282627; font-family: sans-serif; } img.hdr { height: 53px; width: 100%; } </style> </head> <body> <img src="HeaderImage.gif" class=hdr> </body> </html> Just starting out so I appreciate it! I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Hi There- I have a page that I'm making for a friend (with the code below) that's a couple web hosting plans in a CSS styled table. The style.css file is also below. If you look at the plans page above, the whole table has a giant space/gap from the text block for some reason and I really can't find out why! I'm trying to get the top of the table to be close to the bottom of the text block but all of my styling to fix this isn't working to fix the gap. I'm wondering if anybody can offer any advice that I can use to fix this. I tried to post the URL to the site but the forums rules prohibit me from putting in a URL to the post. I've tried lots of coding changes with Firebug and the gap still stays. Thanks for your help. HTML Page Code: Code:
<!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>Personal Hosting Plans</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="phostingstyle.css"></link>
</head>
<body>
<span class="toptext">
NextGen's personal hosting plans offer a broad variety of features for creating anything from a simple family blog or photo album to an advanced personal portfolio or blog site. Our Fantastico auto-installer allows you to install a variety of blogging, photo album, wiki or forum tools with the just click of your mouse. Or, choose from the hundreds of easy-to-edit, professional site templates in the signature RVSiteBuilder to make your website.<p> The features included on NextGen personal hosting accounts allow you to have all the tools you need right at your fingertips to create exactly the site you're looking for- what are you waiting for? Contact NextGen Sales if you have questions, or take a look at our selection of personal plans below.<p> Looking for business hosting that includes advanced eCommerce, blogging and website creation tools? Click here.
</span>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="personalhostingplans">
<tr class="planheaders">
<th width="174" height="147" scope="col"> </th>
<th width="154" class="planheaderslite" scope="col"><span class="plantitles"><strong>LITE</strong></span> <p class="price">$3<span class="subprice">49</span></p></th>
<th width="159" class="planheadersdeluxe" scope="col"><span class="plantitles"><strong>DELUXE</strong></span> <p class="price">$4<span class="subprice">99</span></p></th>
<th width="154" height="50" class="planheaderssuper" scope="col"><span class="plantitlessuper"><strong>SUPER</strong></span> <p class="pricesuper">$6<span class="subpricesuper">99</span></p></th>
<th width="159" class="planheaderspremier" scope="col"><span class="plantitles"><strong>PREMIER</strong></span> <p class="price">$10<span class="subprice">99</span></p></th>
</tr>
<tr>
<th class="featurelistmainfeature" scope="row">main features</th>
<td class="toplitesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/lite_signup.png" alt="Lite Sign Up" width="117" height="29" align="center" /></a></div></td>
<td class="topdeluxesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=11"><img src="images/deluxe_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
<td class="topsupersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=12"><img src="images/super_signup.png" alt="Super Sign Up" width="117" height="29" align="center" /></a></div></td>
<td class="toppremiersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=13"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=13"><img src="images/premier_signup.png" alt="Premier Sign Up" width="117" height="29" align="center" /></a></a></div></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Disk Space</th>
<td class="individualfeatsdark"><strong>.</strong>3GB</td>
<td class="individualfeatsdark">1.7GB</td>
<td class="individualfeatsdarksp">2.8GB</td>
<td class="individualfeatsdark">3.5GB</td>
</tr>
<tr>
<th class="featurelistlight" scope="row">Bandwidth/Data Transfer</th>
<td class="individualfeatslight">1.5GB</td>
<td class="individualfeatslight">2.8GB</td>
<td class="individualfeatlightsp">3.6GB</td>
<td class="individualfeatslight">4.3GB</td>
</tr>
<tr>
<th class="featurelistdark" scope="row"><strong>Website Builder</strong></th>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistlight" scope="row">FREE Domain Name</th>
<td class="individualfeatslight">-</td>
<td class="individualfeatslight">-</td>
<td class="individualfeatlightsp">-</td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Advanced Email Accounts</th>
<td class="individualfeatsdark">2</td>
<td class="individualfeatsdark">4</td>
<td class="individualfeatsdarksp">Unlimited</td>
<td class="individualfeatsdark">Unlimited</td>
</tr>
<tr>
<th class="featurelistlight" scope="row"><strong>cPanel Control Panel</strong></th>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row"><strong>Fantastico Auto-Installer</strong></th>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td class="individualfeatslight"> </td>
<td class="individualfeatslight"> </td>
<td class="individualfeatlightsp"> </td>
<td class="individualfeatslight"> </td>
</tr>
<tr>
<th class="featurelistmainfeature" scope="row">OTHER FEATURES</th>
<td class="individualfeatslight"> </td>
<td class="individualfeatslight"> </td>
<td class="individualfeatlightsp"> </td>
<td class="individualfeatslight"> </td>
</tr>
<tr>
<th class="featurelistdark" scope="row"><strong>Satisfaction Guarantee</strong>*</th>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistlight" scope="row">phpMyAdmin</th>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">MySQL Databases</th>
<td class="individualfeatsdark">1</td>
<td class="individualfeatsdark">3</td>
<td class="individualfeatsdarksp">Unlimited</td>
<td class="individualfeatsdark">Unlimited</td>
</tr>
<tr>
<th class="featurelistlight" scope="row">FTP Accounts</th>
<td class="individualfeatslight">1</td>
<td class="individualfeatslight">3</td>
<td class="individualfeatlightsp">Unlimited</td>
<td class="individualfeatslight">Unlimited</td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Subdomains Allowed</th>
<td class="individualfeatsdark">1</td>
<td class="individualfeatsdark">5</td>
<td class="individualfeatsdarksp">Unlimited</td>
<td class="individualfeatsdark">Unlimited</td>
</tr>
<tr>
<th class="featurelistlight" scope="row">Parked/Addon Domains Allowed</th>
<td class="individualfeatslight">1</td>
<td class="individualfeatslight">5</td>
<td class="individualfeatlightsp">Unlimited</td>
<td class="individualfeatslight">Unlimited</td>
</tr>
<tr>
<th class="featurelistdark" scope="row">eCommerce Enabled</th>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td class="individualfeatslight"> </td>
<td class="individualfeatslight"> </td>
<td class="individualfeatlightsp"> </td>
<td class="individualfeatslight"> </td>
</tr>
<tr>
<th class="featurelistmainfeature" scope="row">DEVEloper features</th>
<td class="individualfeatslight"> </td>
<td class="individualfeatslight"> </td>
<td class="individualfeatlightsp"> </td>
<td class="individualfeatslight"> </td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Hotlink Protection</th>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistlight" scope="row">Password Protection</th>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Unlimited Redirects</th>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistlight" scope="row">IP Address Denial</th>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Custom Site Error Pages</th>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistlight" scope="row">SSH/Shell/SFTP Access</th>
<td class="individualfeatslight">-</td>
<td class="individualfeatslight">-</td>
<td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Full Ruby on Rails and RubyGem Support</th>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdark">-</td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistlight" scope="row">Advanced Visitor Statistics and Logging</th>
<td class="individualfeatslight">-</td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th class="featurelistdark" scope="row">Latest Server Modules, Software and Configuration</th>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
<td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td class="bottomlitesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/lite_signup.png" alt="Lite Sign Up" width="117" height="29" align="center" /></a></div></td>
<td class="bottomdeluxesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=11"><img src="images/deluxe_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
<td class="bottomsupersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=12"><img src="images/super_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
<td class="bottompremiersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/premier_signup.png" alt="Premier Sign Up" width="117" height="29" align="center" /></a></div></td>
</tr>
</table>
</body>
</html>
CSS Page Code: Code:
@charset "utf-8";
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
}
personalhostingplans {
border-collapse:collapse;
}
.toptext {
font-family:"Lucida Grande",Tahoma,Arial,Verdana;
line-height:150%;
font-size:11px;
color: #666666;
}
.planheaderslite {
background-color: #FFFFFF;
background-image:url(images/lite_header.png);
background-position:bottom;
background-repeat:no-repeat;
}
.planheadersdeluxe {
background-color: #FFFFFF;
background-image:url(images/deluxe_header.png);
background-repeat:no-repeat;
background-position:bottom;
}
.planheaderssuper {
background-color: #FFFFFF;
background-image:url(images/superheaderdeal.png);
background-repeat:no-repeat;
background-position:bottom;
}
.planheaderspremier {
background-color: #FFFFFF;
background-image:url(images/premier_header.png);
background-repeat:no-repeat;
background-position:bottom;
}
.price {
position:relative;
top:52px;
font-size:48px;
font-weight:bold;
text-transform:uppercase;
color: #FFFFFF;
}
.subprice {
position:relative;
font-size:20px;
font-weight:bold;
text-transform:uppercase;
color: #FFFFFF;
vertical-align:super;
}
.pricesuper {
position:relative;
top:32px;
font-size:60px;
font-weight:bold;
text-transform:uppercase;
color: #FFFFFF;
}
.subpricesuper {
position:relative;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
color: #FFFFFF;
vertical-align:super;
}
.individualfeatsdark {
background-color: #C5E7ED;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
text-align:center;
}
.individualfeatslight {
background-color:#DEF6F7;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
text-align:center;
}
.featurelistdark {
background-color:#E9E9E9;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:right;
font-weight:normal;
padding:6px 14px 6px 0px;
}
.featurelistlight {
background-color: #F4F4F4;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:right;
font-weight:normal;
padding:6px 14px 6px 0px;
}
.featurelistmainfeature {
background-color: #FFFFFF;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
color: #14A5E1;
padding:6px 6px 6px 6px;
}
.individualfeatsdarksp {
background-color: #B4E3E9;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
text-align:center;
}
.individualfeatlightsp {
background-color: #C3EFEF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
text-align:center;
}
.signup {
text-align:center;
padding: 3px 3px 3px 3px;
}
img {
border-style:none;
}
.plantitles {
position:relative;
color: #000000;
top:105px;
font-family:Arial, Helvetica, sans-serif;
font-size:21px;
font-weight:normal;
color: #FFFFFF;
left:5px;
}
.plantitlessuper {
position:relative;
color: #000000;
top:91px;
font-family:Arial, Helvetica, sans-serif;
font-size:21px;
font-weight:normal;
color: #FFFFFF;
left:5px;
}
.toplitesignupbg {
background:url(images/litetoprounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.topdeluxesignupbg {
background:url(images/deluxetoprounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.topsupersignupbg {
background:url(images/supertoprounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.toppremiersignupbg {
background:url(images/premiertoprounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.bottomlitesignupbg {
background:url(images/litebottomrounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.bottomdeluxesignupbg {
background:url(images/deluxebottomrounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.bottomsupersignupbg {
background:url(images/superbottomrounded.png);
background-position:bottom;
background-repeat:no-repeat;
}
.bottompremiersignupbg {
background:url(images/premierbottomrounded.png);
background-position:right;
background-repeat:no-repeat;
}
that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? |
|||||||