|
HTML - Ie6 Padding Issues
I run a forum with a small progress bar under the user's avatar showing how far until the user achieves the next rank. The progress bar is simply an image resized based on the % of current posts to posts needed for the next rank. The styling of the progress bar is done entirely inline.
<dd style="padding-left:5px; padding-top:2px;"> <div style="text-align:left; display:block; height:3px; width:80px; border:1px solid #DACDA5;"> <div style="height:3px; width:{postrow.RANK_LEVEL_SIZE}px; background: url('images/progress.jpg') no-repeat;"></div> </div> </dd> In Firefox and later versions of IE, the progress bar renders perfectly: In IE6 however, the bar is oversized and the padding is clearly off: Any suggestions on how I might correct the padding for IE6 would be greatly appreciated. I was going to create a seperate set of code showing the progress bar bracketed by <!--[If IE]> <![endif]-->. Similar TutorialsHi all, Does anyone have other techniques to mock a padding in IE. I think the new IE ver8+ have padding, but i don't think IE ver6-7 have it. I did not realize it becuase i would always expect my clients to update thier browsers. I also see that there are still a HUGE percentage of people across the world that is still using IE 6. One trick that i use is to create two div for example: HTML Code: <div>
<div style="margin: 10px;">
content
</div>
</div>
this mocks a padding type hope anyone finds this useful Hello htmlforums and members, i am having trouble with spacing my text away from my image... Problem: -------------------------------------------------- as you all can see from my picture the text is to close to the image even though i have checked my css and html i cant find the problem line css: PHP Code: #small-content { float:left; width:150px; height:372px; padding:12px 0 0 0; margin:18px 0 0 34px; } #box1 { height:124px; padding:38px 5px 0 5px; margin-bottom:22px; font-size:0.6em; line-height:1.0em; overflow:auto; html: PHP Code: <div id="small-content"> <div id="box1"> <a id="link" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19"> <img style="float: left; padding: 3px 3px 0px 3px;" src="http://i713.photobucket.com/albums/ww140/daveedking/moviezsmall.png" width="25" height="25" /> </a> <p> http://Betyoulikeit.com is on a mission to obtain only the best clean, virus Free Data From around the World... We Do not Host the Data But WE Track Down and Run Security scans on all Files... ___________________________ -Upgrading Everyday- </p> </div> help me find the errors of my ways jajajaja.... -tikki- How do I fix this: Please help! i set up a large gap for cellpadding with my site and im wondering if i can undo that for 1 object, i want 1 object to be style="float:right; and in the top right area of the screen is there anyway i can undo the cellpadding effect for that object ? Hey guys, I want a kind of horizontal border down the side of my comment div, and padding that pushes it away from it. So far, it's worked perfectly in Firefox and Opera, but it goes all haywire in IE. I honestly don't even know what's going on. Here's an example page with the comments: http://automata.firephoenixnet.com/item/85 It looks okay in Firefox, but it looks all weird in IE. Can someone tell me what's causing this? Hi All, I have a table under a div tag, and there seems to be some padding that I want to remove. I've set the padding and border-width property to 0px, but there gap's still there. Any suggestions? Thanks, HTML Code: <html>
<head>
<title>Untitled Document</title>
</head>
<body>
<div id="stuff1" style="background-color: red">Stuff 1</div>
<table style="padding-top: 0; border-top-width: 0px">
<tr><td style="background-color: Black">asd</td></tr>
</table>
</body>
</html>
Website is Here Ok, so I'm trying to get the text near the picture with the old guy with the roses padded a little. I tried adding "padding: 2px;" to the css but that doesnt work...Can someone look at my css and figure it out? Im stuck! -Thanks Hi! I am in the process of designing my first web page and I am having some difficulty with cell padding. I want there to be some space between my text and the edge of the tan box. What i am doing is obviously not working! Any help would be greatly appreciated! Here's the URL: http://www.freewebs.com/pixelsnponies/index.htm And here's the code: <html> <head> <title>Pixels 'n Ponies Graphics</title> </head> <body bgcolor="A85045"> <img src="http://img221.imageshack.us/img221/6698/sagebannerwg7.jpg" align="center" width="100%"> <br> <br> <TABLE width=100%><TR><TD bgcolor=#A85045 width=20% valign=top> <center><A href="http://www.freewebs.com/pixelsnponies/index.htm"><font color="161513"><img src="http://img222.imageshack.us/img222/9146/homelinkaf5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Layouts.htm"><font color="161513"><img src="http://img136.imageshack.us/img136/7010/layoutsap5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Seasons.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/9294/theseasonsst5.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/The%20Breeds.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/7374/thebreedsgw1.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Banners.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/1058/bannersandadshw3.jpg"></FONT></A></center> <br> <br> <center><A href="http://www.freewebs.com/pixelsnponies/Support.htm"><font color="161513"><img src="http://img225.imageshack.us/img225/4702/supportgx7.jpg"></FONT></A></center> </TD><TD bgcolor=#EEE7DB width=80% valign=top cellpadding=10><center><font size="3" face="baskerville" color="161513" > <br> <b>Welcome to Pixel's n' Ponies Howrse Graphics!</b> <br> <br> Your Howrse profile page represents you, so it's appearence is important. Here you can find a number of free layouts to make your page look professional. Feel free to take a look around and choose a look that suites you. A new layout is added every week, so check back often! <br><br>Don't have a Howrse account? <A href="http://www.howrse.com" target="_blank"><font color="161513">Click here</A> and come join the fun!</center> <br> <br> <b>FAQ</b> <br> <br> <b>Q: How do I put the layout on my page?</b> <br><br><b>A:</b> - Copy the HTML code. <br>- Go to "Edit My Profile" <br> - Click "HTML Mode" <br> - Paste the code. <br> - Click "Edit My Profile" <br> - Add your own text, pictures, etc. <br> <br> <b>Q: Can I have a custom layout?</b> <br><br> <b>A:</b> Due to the time it takes to design and code a layout, I do not make custom layouts for free. However, I would consider doing one for around 400E. Message me for details. My Howrse name is Pookielou. <br> <br> <b>Q: I have a good idea for a layout. Will you code it?</b> <br> <br><b>A:</b> I'm always open to new ideas. If you message me with your proposal, I will consider coding it and adding it to the free layouts on this site.<br></font> </TD> </TR> </TABLE> </body> </html> Hello, This is similar to my last post that has been already marked resolved so I'm starting a new one. I can't figure out how to have a TABLE WITHIN A TABLE be at 100% height and not create a scroll bar in IE. One table alone, there is no problem, but when you nest another table, a scroll bar appears. Here is a link to a visual example: www.thehamandcheese.com If you use Firefox, you can see how I would like it to work. But if you use IE, you will see how I don't want it to work. How do I get IE to work like FF? Here's the code of that link: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html { PADDING:0px; MARGIN:0px; HEIGHT: 100%;WIDTH:100%;}
BODY { PADDING:0px; MARGIN:0px; HEIGHT: 100%;WIDTH:100%;}
FORM { PADDING:0px; MARGIN:0px; HEIGHT: 100%;WIDTH:100%;}
</style>
</head>
<body>
<form runat="server">
<table style="height:100%; width:100%; border-color: Red" border="3" cellspacing="0" cellpadding="0">
<tr>
<td style="height:100%; width:100%">
<table style="height:100%; width:100%; border-color: Blue" border="3" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" align="center">
Hello
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Thanks, Alec Has now been sorted. Hi, I am extremely new to HTML so please bear with me. Basically I downloaded a template for blogger. I am having a problem with the location of a picture. I want to move it up, so it is even with the other side but there is a big space on top of it. I believe that deals with either padding or margins? This is the HTML code that I am trying to figure out. Any help would be appreciated. If I have forgotten anything please let me know, because I can't think of anything else to add. <div style='clear:both;'/> <div id='right-content'> <!-- main image --> <div id='main-img'><img alt='' src='http://i77.photobucket.com/albums/j67/jennjohnny/Soccer-Mom-1-1.jpg'/></div> <div style='margin-left:25px; margin-right:60px;'> </div></div> I use Firefox 3.6.15 and Vista. Below is my url, so you can see what I mean. http://jennileighsjournal.blogspot.com/ http://dampheat.com/store.html i cant recall the html to make the spacing to the left and atop that graphic go away. Hi all, I was trying some real simple HTML code, but I couldnt get my "firstTag" to start at the top of the page i.e. top: 0px and left 0px. If I try to make the position absolute the entire alignment of the sub table changes. Can someone please tell me how to fix it? Thanks, HTML 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>Untitled Page</title>
</head>
<body>
<div id="firstTag" style="background-color: Red;"> <table><tr><td><img alt="pic" src="ms.png" /></td><td style="text-align: right;" ><a class="upperBHeading">User: abc</a> | <a class="upperHeading">Sign Out</a></td></tr></table> </div>
</body>
</html>
Maybe it's not padding or whatever, but i'm having an issue with my assignment (given the very sketch instructions we get) and I simply can't figure this one out it's making me crazy -.- Look closely at the box with the paragraph, and the logo. Between them is a space of the original background color. I can't seem to figure out why that space is there and how to close the gap. Any ideas? here's the CSS code for the div class/id's around the main content(paragraph and photo) Code: #content { padding-left: 20px;
padding-right: 20px;
margin-left: 150px;
background-color: #F1E8B0;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
#container {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #E8D882;
text-color: #000000;
border: 2px double #000000;
min-width: 700px;
}
And here is my xhtml code. HTML Code: <body> <div id="container"> <h1 id="logo"><img src="javalogo.gif" alt="Java Logo" height="117" width="619" /></h1> <div id="nav"><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="music.html">Music</a> <a href="jobs.html">Jobs</a></div><br/> <div id="content"> <img src="windingroad.jpg" height="156" width="333" class="floatright" alt="Winding Groad Photo" /> <p>Following the winding road to JavaJam...</p> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Open Mic Night</li> </ul> <p>12312 Main Street<br/>Mountain Home, CA 93923<br/>1-888-555-5555</p></div> <div id="footer">Copyright © 2011 JavaJam Coffee House<br/><a href="mailto:whatever">SomeSite</a></div> </div> </body> Thanks a lot in advance. Hi all, im new here and was wondering if you guys could help me out? I work for an email deployment company and we have started working with a new deployment system called YesMail and we have found that some browsers are not compatible with padding so I was wondering if anyone knew what browsers dont support it fully? Thanks in advance. Hello! I hope you can help. This code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <style type="text/css"> .container {display: table; border-collapse: collapse} .row {display: table-row} .cell {border: 3px solid red} .map{width:480; border:4px solid #C63; margin:0} </style> <link type="text/css" rel="stylesheet" href="GA.css"/> </HEAD> <BODY> <div class="container"> <div class="row"> <div class="cell"><IMG class="map"SRC="mapA.jpg"alt='PAP'></div> <div class="cell"><IMG class="map"SRC="mapB.jpg"alt='Pacot'></div> </div></div> </BODY></HTML> gives the expected red outer borders and brown inner borders. But... what is the blue (empty) space between them? Okay, so as you can see from this page: http://ggmdolly.com/headersample.php The only problem with the page is that the text is overflowing out of the supposed layout area. The reason for this is that if I add padding to the div, the layer's BACKGROUND IMAGE (which is the grey area plus the shading over the main background) also moves, and looks really messed up. So I need to know how I can add padding to the text - what way is there? I tried making a new div layer within the div layer that contains the background - but the div doesn't 'stretch' for the text so the background doesn't repeat itself, if you get what I mean. Any solutions? My code looks like this: <div id=layer2 style="position:absolute; top:348px; left:276px; width:785px; z-index:2; padding-left:0px; padding-right:0px; padding-top:0px; background-image:url(http://ggmdolly.com/divbackground.png);"> <body> (Body text) </body> </div> Hello, I have some simple code here that gives my one table a height of 100% and a width of 100%. In Internet explorer I can't seem to get rid of the padding or margin. I get scroll bars which I don't want. Here's a link to this code. If you use firefox, no problem. How do I get IE to act like firefox. www.thehamandcheese.com HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head id="Head1" runat="server">
<title>Ham And Cheese</title>
<link href="StyleSheet.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; }
BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; }
FORM { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; }
</style>
</head>
<body>
<form id="Form1" runat="server">
<table class="GeorgiaBoldBig" height="100%" width="100%" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="center" valign="middle">Hello</td>
</tr>
</table>
</form>
</body>
</html>
Thank you, Alec Hi, I have a fine gray line around the logo. This is not the border of the table it’s the gray bgcolor. I and other HTMLers try to find the reason of this bug but failed. Can you help? You see the style.css and try to find the reason (please do not give vague answers, please look in the code and in the css) tnx |
|||||||