|
CSS - Ie 5.0 / Win - Oveflow, Width, Padding Problems
Hi,
The site I'm developing is: http://www.jaysonsgroup.com/index2.html It's only a temporary page..some old <table> tags are in there..which don't validate as XHTML. But, I come across many IE 5.0 - related problems for many of my sites..i.e. even those that validate under W3C etc. So I'm just asking generally, does anyone know a site that has fixes for IE 5.0 bugs? My sites seem to be fine on most browsers except this one. In regard to the above link, I had some major problems with IE 5.0 on the middle area (i.e. the images & text under "news" and "login"). The basic HTML code for that: Code: <div class="outerblock"> <div class="news"> <div class="news_left"><div class="news_left_text">My text</div></div> <div class="news_mid"><img src='images/sinhala.gif' width='431' height='286' alt='' /></div> </div> <div class="login_right"> my login table </div> </div> and the CSS for that: Code:
.outerblock {
width: 100%;
overflow:hidden;
display: block;
clear: both;
}
.news {
width: 607px;
overflow:hidden;
float: left;
border-right: 1px solid #C5C5DD;
}
.news_left {
width: 163px;
float: left;
overflow:auto;
display: block;
background: url(../images/home_worldwide.gif) no-repeat;
padding: 110px 0px 0px 0px;
}
.news_left_text {
padding: 0px 0px 0px 5px;
color: #3B537D;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
line-height: 13px;
}
.news_mid {
width: 440px;
height: 300px;
float: left;
overflow:hidden;
}
.login_right {
width: 160px;
height: 250px;
padding: 50px 0px 0px 0px;
float: left;
background: #ECEDF2;
border-right: 1px solid #C5C5DD;
border-left: 2px solid #FFFFFF;
overflow: hidden;
}
One problem I had (on IE 5.0) was that the middle 'news_mid' image was overflowing, positioned just below the 'news_left' area. The widths etc are all correct because the container width is 771px. So the entire area should just fit and not overflow (even though in IE 5.0 it did). The 'news' overflow property was AUTO, and I fixed the problem by specifying the overflow:hidden. Likewise, the 'login_right' div was overflowing just below the entire news section, and not to the right as it should have been. Once again I fixed this by specifying overflow:hidden for the outer div. Is it common to use overflow:hidden for things like this? Or is there a more appropriate fix? Another small problem I noticed for IE 5.0 : http://www.jaysonsgroup.com/ie5win.jpg (screenshot). The login_right background does not extend all the way. The height of the div should be 250 pixels + 50pixels on the padding - so 300 pixels total. But IE 5.0 ignores the 50pixels padding and leaves the background with a height of 250px. Thanks very much in advance! Similar Tutorialshi, i was centering some divs thats 100% width with some padding on both sides, and position absolute it's like 3 layers...the background first is just black, second layer is gray with 10px margin on both sides...next layer has 10 more pixels margin... i see it doesnt work in FF but only IE and Opera...in FF the page gets bigger from the padding HOW can i center these div's instead, i tried without width and now they come very thin...maybe invisable... i also tried with position relative instead of abolute...then some other crazy things happen much respect for the people that helps me with this, its the last bit before my site is ready! I have a css problem with windows 2000 OS. Here's the CSS I have that creates the menu to the left. PHP Code: #nav{ float:left; clear:both; text-align:left; color:#FFFFFF; font-size:10px; height:177px; width:119px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 70px; background: url(http://www.moretanninglotion.com/images/backnav.gif) repeat-y; } The acutal size of the div is supposed to be 189px but the padding isn't getting factored into that when the browerser in windows 2000 renderes it. Does anyone have a hack or an idea of what to do? Below are screen shots of my page. http://www.browsercam.com/public.aspx?proj_id=180419 I am having what seems like the most elementary problem, yet I cannot figure out what is causing it. I am creating DIVs and nested DIVs to position, contain and format my content. And for some reason, adding padding to a style applied to a given DIV is causing that DIV to expand by the amount of padding added. So for example, if I have a style: Code: #contentBox {
width: 500px;
background-color: blue;
}
And apply it like so: Code: <div id="contentBox">My content goes here</div> It displays as it should: a blue box that is 500px wide. But if I change the style to add padding to the box likee so: Code: #contentBox {
width: 500px;
background-color: blue;
padding: 10px;
}
The blue box is now 520px wide (it added the 10 px of padding on either side to the overall width. I thought that the padding was included in the width of a box so that changing the padding would not change the amount of space occupied by that element. Am I wrong or missing something here? Hello all. This is a problem I am encountering on many placing: when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px; This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels. Does anybody know how to get of this bug in Firefox? Hi I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code:
<style>
.foo {
width: 100px;
padding: 10px;
}
</style>
<div class="foo">Bar</div>
Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa I have a beautiful looking site when viewed in Firefox but I am having some problems with Internet Explorer (surprise, surprise!) http://cbo4edu.org/newSite/index.html I want the Headings, OUR MISSION and CBO NEWS to be lined up just below the navigation div. In Firefox, my CSS and padding renders perfectly, with the background on OUR MISSION blending in with the navigation div's bottom border. In IE, these headings are mostly hidden behind the navigation div. How can I adjust my CSS for IE without disturbing the Firefox version? I am creating a web page using CSS, and having a hard time with IE vs Netscape. IE ignores padding in defining width, and Netscape includes it. So, my page design is correct in one browser or the other. Does anyone know a way around this problem? Hi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with. Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help. 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" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px;
}
body {
background: #FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
}
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px;
}
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left;
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
}
#productSlogan h3 span {
display:none;
}
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}
#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>
Hi all, I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7. The li tag css is Code:
li{
background:url('../images/li_bg.gif') repeat-x #ff0000;
display:inline;
padding:0 5px 0 5px;
margin:0 2px 0 0;
}
List html is: Code: <ul> <li><a href="member.php">Home</a></li> <li><a href="profile.php">Profile</a></li> <li><a href="help.php">Help</a></li> <li><a href="logout.php">Logout</a></li> </ul> I reset margin and padding for all other tags in a general css file. The image is a 1px width gradient. Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin. Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space. Have seen plenty of navbar tutorials but not with margin between list elements. Any help is much appreciated... Hello again. Or should I say ( Time on my watch is 22:17 and because of time zones (+7 for US) ) good morning ? If go to the: http://www.odin.foxnet.pl/archives.html and expand these 2 menus : Navigation and Other - You will see my problem, and it was working before, now it looks, just like you can see. Second problem: solved And at the ending: Fileds for name and mail for comment wasn't so bad as now. Just look at it (2 eg: http://www.odin.foxnet.pl/2005/09/14/Tales/mj-przyszy-bokken.html http://www.odin.foxnet.pl/2005/09/15/Home/userfriendly-url.html ) Goodnight everyone. You are great people, offering great help. milosz-odin - known from this weigher I'm working on my first website located at http://www.longklaw.com and I started having trouble when I tried to make some changes . I have a header, a middle section (left sidebar, center, right sidebar), and a footer. As you can see, the container seems to be bigger than the total size of the sections and I cannot figure out how to fix it. I figured that it might be a padding/margin issue. I want the page to end where the borders separating the sections on the right sidebar ends. My CSS follows. Thanks in advance for the help. DIV { margin: 0px;} body { margin: 5px 5px 5px 5px; background-color: #000000; text-align: left; } a { text-decoration: underline; } a:link { color: #0000FF; } a:visited { color: #8A2BE2; } a:active { color: #0000FF; } a:hover { color: #006699; } h1, h2, h3 { margin: 0px; padding: 0px; font-weight: normal; } .container { line-height: 140%; margin-right: 0px; margin-left: 0px; text-align: left; padding: 0px; width: 98%; background-color: #FFFFFF; border: 0px solid #FFFFFF; } .banner { font-family: Verdana,Arial,sans-serif; color: #000000; background-color: #FFFFFF; text-align: left; padding: 15px 0px 0px 10px; border: 0px solid #000000; height: 39px; } .banner-img { display: none; } .banner a { color: #999999; text-decoration: none; } .banner h1 { font-size: xx-large; } .banner h2 { font-size: small; } .navigation { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; font-size: small; margin-top: 5px; border: solid 0px #000000; } .navigation table { border-collapse: collapse; margin: 0px } .navigation td { border-color: #999999; border: 1px solid; } .content { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; background-color: #ffffff; padding: 15px 15px 5px 15px; } .content blockquote { line-height: 150%; } .content li { line-height: 150%; } .content p.posted { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; line-height: normal; text-align: left; margin-bottom: 25px; padding: 3px; border-top: 1px solid #999999; } .content h2 { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; font-weight: bold; text-align: left; margin-bottom: 10px; } .content h3 { color: #000000; font-size: small; font-family: Verdana,Arial,sans-serif; font-weight: bold; text-align: left; margin-bottom: 10px; } .sidebar { padding: 0px; float: left; width: 20%; background-color: #FFFFFF; overflow: hidden; border-right: solid 0px #000000; } .sidebar p { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; font-weight: normal; line-height: 140%; text-align: left; margin: 0px; } .sidebar h2 { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing: 0.3em; margin-bottom: 10px; } .sidebar border { margin: 0px; padding: 0px; } .sidebar ul { margin: 0px; padding: 0px; } .sidebar li { color: #000000; font-size: x-small; font-family: Verdana,Arial,sans-serif; line-height: 140%; text-align: left; list-style-type: none; margin: 0px; } .sidebar img { border: solid 3px #ffffff; } .sidesection { color: #000000; font-family: Verdana,Arial,sans-serif; font-size: x-small; line-height: 140%; text-align: left; padding: 15px; margin: 0px; border-bottom: 1px solid #999999; } .center { float: left; width: 57%; overflow: hidden; border-right: 1px solid #999999; border-left: 1px solid #999999; } .clearer { height: 1px; overflow: hidden; clear: both; margin-top: -1px; } .footer { color: #000000; float: left; font-family: Verdana,Arial,sans-serif; font-size: x-small; line-height: 140%; text-align: left; width: 98%; padding: 15px; margin-bottom: 0px; background-color: #FFFFFF; border-top: 1px solid #999999; overflow: hidden; } .calendar { line-height: 140%; color: #666666; font-family: Verdana,Arial,sans-serif; font-size: x-small; padding: 15px; text-align: center; margin-bottom: 0px; border-bottom: 1px solid #999999; } .calendar table { padding: 2px; border-collapse: collapse; border: 0px; width: 100%; } .calendar caption { color: #000000; font-family: Verdana,Arial,sans-serif; font-size: x-small; text-align: center; font-weight: bold; text-transform: uppercase; letter-spacing: 0.3em; } .calendar th { text-align: center; font-weight: normal; } .calendar td { text-align: center; } .photo { text-align: left; margin-bottom: 20px; } .comment-data { float: left; width: 180px; padding-right: 15px; margin-right: 0px; text-align: left; border-right: 1px dotted #BBB; } textarea[id="comment-text"] { width: 80%; } Hiya, I am having some problems with 100% width elements. As you can see he http://explosiveracing.net/new_design/orange/ CSS: http://explosiveracing.net/new_design/orange/styles.css The horizontal bars go further than 100% across the page resulting in a horizontal scroll bar appearing. I have only tested in FF1.5 and IE6 so far but both have the same problem. EDIT: I have fixed the horizontal bars. I cannot work out how to stop the menu bar expanding further than 100% though. Any ideas? OK i have a div and inside it i have a flash animation.. i am playing with the width property of div to make it same width as flash however the values are differing between IE and firefox? in firefox it is 67% and in IE it seems to be 70%!! i have NO other css for that div apart from margin-right/left: auto!! Hope someone can help with this i've set this code below <table width="160"> <tr> <td><div class="mystyle">some text here</div></td> </tr> <tr><td>...some other stuff...</td></tr> </table> The div style sets padding, background colour, font colour and a background image that's aligned to the right hand side; .mystyle { font-size: 10px; font-weight: bold; color: #FFFFFF; background: #003366; padding: 6px; white-space: nowrap; } The problem is that the div fills the <td>'s 160px width rather than constraining itself to the with of its content, i've tried adding a minimum width of say 10px which seems to work in IE on PC but nothing else. How can i get it to reliably follow the widths of the content and padding?? Hi all, I have a mysql database with a list of milkshake flavors. I want to pull those out and display them into 4 columns. No problem there. The hangup is that the width of these columns isn't going to be the same (because the list of milkshake flavors is going to be updated regularly and the display of them is dynamic as well). So, I can have it kick out 4 columns no problem and the width of these columns is based on the longest name in that column (which is what I want, so everything is OK there). The problem is that I want these 4 columns to be grouped together and centered on the page. I got it working in Firefox by making a container div and giving it a {display: table} value... works perfectly. However, that's not the case in IE. In IE, the container div is the width of the entire page and the columns are all left-aligned. Here's the page in question and my code is below. Any help is greatly appreciated. Thanks! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style type="text/css">
.mcontainer {
border: 2px solid black;
display: table;
margin: 0 auto;
}
.mcol {
border: 1px solid blue;
float: left;
padding: 0 5px;
font-size: .75em;
text-align: center;
font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
}
.emptyspacer {
clear: both;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mcontainer">
<div class="emptyspacer"></div>
<div class="mcol">
Almond<br>
Almond Joy<br>
Amaretto<br>
Apple<br>
Apple Pie<br>
Banana<br>
Banana Pineapple<br>
Banana Split<br>
Black & White<br>
Blackberry<br>
Blueberry<br>
Butterfinger<br>
Butterscotch<br>
California Blend<br>
Caramel<br>
<strike>Caramel Apple</strike><br>
Caribbean Rum<br>
Cheesecake<br>
Cherry<br>
Chocolate<br>
Chocolate Banana Peanut Butter<br>
</div>
<div class="mcol">
Chocolate Cherry<br>
Chocolate Covered Banana<br>
Chocolate Mint<br>
Chocolate Raspberry<br>
Cinnamon<br>
Coconut<br>
Coffee<br>
Cookie Dough<br>
Creamsicle<br>
Creme De Menthe<br>
Double Chocolate<br>
Egg Nog<br>
Grape<br>
Grapefruit<br>
Hazelnut<br>
Heath Bar<br>
Irish Cream<br>
Island Breeze<br>
Key Lime<br>
Kiwi<br>
Kiwi Strawberry<br>
</div>
<div class="mcol">
M&M<br>
Macadamia Nut<br>
Mango<br>
Mango Kiwi<br>
Mango Peach<br>
Maple Walnut<br>
Mocha<br>
Mounds<br>
<strike>Mud Pie</strike><br>
Neapolitan<br>
Nerds<br>
Orange Pineapple<br>
Oreo<br>
<strike>Oreo Green Mint</strike><br>
Peach<br>
Peanut Butter<br>
Peanut Butter & Jelly<br>
Peanut Butter Cup<br>
Pear<br>
Peppermint<br>
<strike>Peppermint Oreo</strike><br>
</div>
<div class="mcol">
Pina Colada<br>
Pineapple<br>
Pistachio<br>
Raspberry<br>
<strike>Raspberry Cheesecake</strike><br>
Reese's Pieces<br>
Root Beer<br>
Rum<br>
<strike>S'mores</strike><br>
Snickers<br>
Strawberry<br>
Strawberry Banana<br>
Strawberry Orange<br>
Swiss Chocolate<br>
Three Musketeers<br>
Toffee<br>
Vanilla<br>
Watermelon<br>
</div>
<div class="emptyspacer"></div>
</div>
</body>
</html>
Please delete... Hi! I'm working on a design for an art gallery client that calls for a primary image of variable width with static alignment to the right and bottom, with a row of thumbnails below that align with the left edge of the image. This is working fine in FF and Chrome, but I can't seem to get IE to constrain the containing div by the image width. The thumbnails, floated left, go all the way to the edge of the layout... I've tried different combinations of positioning on the containing div (you can see the comments in my CSS), but can't seem to get it to go. The URL in question is here . Any help would be mightily appreciated! -BBD Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference. I'm taking this plunge because I'm ready to rip hairs one by one on a problem. I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document. Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution. What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time. Code: <STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>
<DIV class="banner"><IMG SRC="images/vbar.PNG" WIDTH=900 HEIGHT=93 BORDER=0></DIV>
The above works but its a fixed width and I would like it to be full width no matter what resolution ones using. I have tried making the Div class="banner" use a width=100%. This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away. I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me.. Thanks in Advance Me Hello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey |
|||||||