|
HTML - Unexpected Margin/padding
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? Similar TutorialsHi, 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/ I made this in my CSS-file: li { margin: 0em 0em 0em 4em; padding: 0px 0px 0px 0px; font-size: 9pt; } (This is for an element in a list) Then I made this: h3 { margin: 0; padding: 5px 0px 10px 0px; font-size: 10pt; } Now IE7 refuses to understand that I want to put the h3 margin to zero. It keeps using the li margin even though I programmed it like that. How is this possible? Everything works fine in Firefox with this code. Hi, Do you know the answer to this question? (I wasted a lot of time trying figure out this problem, before finally giving up.) How do I get the book cover image to display with no left margin, while preserving the 5px right margin? It displays with no left margin in my WYSIWYG editor. But, it displays with a 5px left margin in IE and Firefox. Here is the code... <a target="_blank" title="New Covenant Theology" href="/images/stories/book/book_cover_original_size.jpg"> <img style="border-style: none; border-width: 0px; left-margin: 0px; right-margin: 5px; title=" alt="New Covenant Theology" src="/images/150x199.jpg" width="150" align="left" height="199" /></a> 24 Reasons Why All Old Testament Laws Are Cancelled and All New Testament Laws Are for Our Obedience. See God's law in redemptive history explained simply and clearly with 7 diagrams, 20 charts, and 702 verses. Dedicated to Reformed, Covenant Theologians; Seventh Day Adventists; and other Sabbath-keepers. Read 3, free chapters from the book now: <a href="/new-covenant-theology.htm" title="New Covenant Theology"><span class="style20">New Covenant Theology</span></a></p> And, here is the webpage... http://www.jesussaidfollowme.org/#biblestudies Thanks for your insight, Greg Gibson Hi 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 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]-->. 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 How do I fix this: Please help! 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? 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 ? 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>
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- I'm having problems getting my site to render correctly in internet explorer 7. It seems to ignore the margin-top, I want a gap at the top of the page. Also the absolute bar along the top seems to get moved to the right. This is my site: http://suffolkcottage.x10.bz/ Here is the css for the container on the page, where most of the content is inside. #container { width:900px; margin: 30px auto 0px auto!important; margin: 30px auto 0px auto; background-color:#FFFFFF; background:#ffffff url('grad.png') repeat-x bottom; border:1px solid #e8e8e8; z-index:100; } Any help would be appreciated Hi, Someone developed an html newsletter for one of my clients, but when I uploaded it to the website, the right margin gets cut off. This is the link: http://www.eastpointehealthandfitnes...r-2010/?&t=449 How can I fix that? I don't really know much HTML, so I'll appreciate very specific feedback on what I need to change. Any help will be much appreciated! Regards, Reem I have a historical website that I'm going to rebuild. There are a lot of dates and unfamiliar terms. There are a lot of places where the text will say something like, "on the 9th so-and-so did such-and-such..." Using float:right, I have a little box that says "Jun 9, 1788." (I would like to do the same thing on the left with short definitions) I would like to scoot that little box over into the margin. I tried position:relative; left:90px, and that moved it over into the margin, but it still wrapped the text around the blank space it left. My thinking is that they'll be less distracting for people who don't care about the exact date or what the meaning of breaming is. Hello, what is the coding for affecting the margins in HTML? Also, how can I change the color of the margins? (To make it different than the background) Edit: For example, I like the way gamespot.com is set up whereas there is a permanent left and right margin. When you adjust the size of the window from right to left, the whole webpage doesn't get smaller or word wrap, it just shrinks the margins. If that is actually something different, please explain. Thank you. Hi folks, I've got an error saying: Parse error: syntax error, unexpected T_STRING in /home/a2387326/public_html/index.html on line 1 Here's my code: <?xml version="1.0" encoding="UTF-8"?><!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></title><meta http-equiv="refresh" content="0;url= HOME.html" /></head><body></body></html> I used iWeb to build my website, and I've uploaded it to a web host which is different to the domain registrar - I don't know if that makes a difference, but I believe I've set up the DNS stuff correctly anyway... This is driving me crazy - if anyone could help, I'd MASSIVELY appreciate it! Thanks, bloowy 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 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. 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. |
|||||||