|
CSS - Unwanted Element Top Margin
Please look at
http://certified.tmhdesign.com/know.asp in FF I have a div element with an id of "know" that is appearing under an h1 element with an id of know_header In Firefox there is an unwanted top margin on the div#know (or a bottom margin on the H1 element). I can't seem to understand why? T Similar TutorialsHi there, I'm building a page that requires 100% width & height, and absolutely NO margins on any side. I've applied the following inside my CSS: body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: 000000; } For this to work in Firefox, I've also had to add the same code just above the head tag (inconvenient, but I don't mind). My problem is the unwanted right margin that appears in IE. I have no idea how to remedy this. You may view the page here. Thanks so much! So I'm working on a new css-based design for my site and everything looks great.. until I open it in IE. I'm using rounded corners in 2 div boxes placed both on the top and bottom of my <div> body, they are both positioned correctly. The rounded images are used as background images in the <div>'s and not as an <img>. Problem #1: There is either a margin or padding that is separating the first and second <div> containers that make up the top and bottom rounded corners. I've tried *{margin..padding:0} to eliminate it from all elements (to no avail). Problem #2: I've set each <div> container used for the rounded corners to 12x12px, because that is the size of the image (rounded corner image). For some reason, in IE both containers are bigger than 12px in height, no idea why this is. In Firefox everything is working as it should, anyway here is the.. HTML: Code: <html> <head> <title>P_TITLE</title> <link href="skin.css" rel="stylesheet" type="text/css"> </head> <body> <div id="tlcorner"></div><div id="trcorner"></div> <div id="divbody"> <div style="float:left;width:75%"><div id="logindiv"></div><br><div id="searchdiv"></div></div><div id="logo">logo..</div> </div> <div id="blcorner"></div><div id="brcorner"></div> </body> </html> CSS: Code: html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-color: #CFCFCF;
margin: 3px;
padding: 0;
}
#logindiv {
background-color: #FFF000;
float: left;
width: 100%;
height: 120px;
}
#searchdiv {
background-color: orange;
float: left;
width: 100%;
height: 35px;
}
#logo {
background-color: #000000;
float: right;
width: 155px;
height: 155px;
}
#divbody {
background-color: #FFFAF0;
height: 700px;
padding-left: 12px;
padding-right: 12px;
}
#tlcorner {
background-color: #FFFAF0;
background-image: url(images/tl_corner.gif);
background-repeat: no-repeat;
background-position: top left;
float:left;
width: 12px;
height: 12px;
margin:0px;
}
#trcorner {
background-color: #FFFAF0;
background-image:url(images/tr_corner.gif);
background-repeat: no-repeat;
background-position: top right;
height:12px;
}
#blcorner {
background-color: #FFFAF0;
background-image: url(images/bl_corner.gif);
background-repeat: no-repeat;
background-position: bottom left;
float:left;
width: 12px;
height: 12px;
}
#brcorner {
background-color: #FF0000;
background-image:url(images/br_corner.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 12px;
}
I'm sure if you use any image that is 12x12 you should see the same problems I am getting. Notice the padding or margin on the top left <div> element, and the incorrect height for both. Thank you very much for any suggestions. I don't know why but for some reason I thought if you give an element a position of absolute the margin is irrelevant. Not so in FF huh? Tom Pleae look at this page in IE8 & Firefox - Click Here It appears as I want it in FF but in IE there is a gap between the paragraph in the center column and the first listing of product. I have tried to put margins on all elements but can not get that closed in IE. Can someone shed some light? Thanks. Tom My css is at CSS. The site is at site The problem I am having is that on the .maintextdiv or the .subtextdiv if I add any left or right margin values IE6 in strict mode is adding that value to the parent element, #rightbox. I should clarify that if I add margin values to just one of them it displays fine, but if I add margin values to both of them then I end up with the problem of extra space added to the parent element. More wierdness, if those (maintextdiv and subtextdiv) are not floated then the problem doesn't show up at all. It's only once they got floated did I have problems. This behavior doesn't show up in FF or Safari. Anyone with any ideas? Forget it, I solved the issue. How does one delete a post like this... Hi all 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> new document </title>
<style>
div.outer {
background-color: yellow;
overflow: auto;
}
h1 {
margin: 10px;
}
</style>
</head>
<body>
<div class="outer">
<h1>Title</h1>
</div>
</body>
</html>
Expected result (Firefox): expected.JPG Unexpected result (Internet Explorer): unexpected.JPG Is there something I can do against this instead of adding a padding-top to the H1 or a padding-top to the div.outer? Thanks for help, Josh 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? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas Hello, im working on styling an unordered list into a file tree. So far, so good. However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. Hi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts. Here's the html/css: Code: <TD style='vertical-align:top; text-align:left;'> <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'> <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a> </div> </TD> </TD> I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance! I've read many forum replies to help getting rid of indents in li & ul items. None of the solutions are working for me. PLease help! I have a footer divided into 3 columns. The text inside each column is left-aligned with no padding/margin except for my twitter feed, which shows up with a ~41px indent. I've tried every combination of padding & negative margin in the CSS, nothing works. Currently: #twitter_update_list li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_update_list ul li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_div {padding:-41px 0 0 0; text-indent:0px; margin-left:0 0 0 0; overflow:hidden; display:inline; text-align:left;} My website is marinaporter.blogspot.com Thanks so much... hello all, I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine. Can someone see what is happening...I hope so! You can see the site at www.obsign.com Here is the code that I am working with: Code: <body>
<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }
</script>
<table class="boundaries">
<tr>
<td class="vertical">
<center>
<div id="site">
<div class="padding">
<div class="navigation"><div class="navigation">
<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg"
width="94" height="30" border="0" /></a>
</div>
</div><div class="locations"><img alt="Cincinnati, Ohio - Cleveland, Ohio - Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg"
width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg"
width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg"
width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg"
width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg"
width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg"
width="533" height="22" border="0" /></div></div>
<div class=""><h1>HOME BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
</div>
</div>
</center>
</td>
</tr>
</table></body>
</body>
</html>
Code:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
padding:0px;
background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
background-repeat:repeat
}
img {
margin-bottom: 0px;
}
#site {
text-align:left;
width:770px;
padding:0px;
border:0px;
margin:0px;
background:#ffffff;
border:1px solid #CFC9C0;
}
table {
font-size: 100%;
}
a.breadcrumb {
color: #444444;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
a.breadcrumb:visited {
color: #888888;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
ul {
margin-bottom:5px;
margin-top:5px;
padding:0px;
border:0px none;
list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}
li {
padding-top:3px;
}
.text_highlight {
background: #FDFD00;
color: #000000;
}
.clear {
clear:both;
}
.gentext {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
.gentext a {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
input.liteoption {
background: #efefef;
font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
color:#444444;
text-align:center;
padding: 1px;
border: 1px solid #dddddd;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
}
input.searchoption {
font: bold 100% Verdana, Helvetica, Arial, sans-serif;
background-color : #eeeeee;
color : #000000;
border: 1px solid #000000;
}
input.text {
font: normal 105% Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #dddddd;
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}
select {
font: normal 100% Verdana, Helvetica, Arial, sans-serif;
color: #000000;
}
.form_label {
font:bold 100% Verdana, Helvetica, Arial, sans-serif;
display:inline;
color:#000000;
}
.search_text{
font:normal 9px Verdana, Helvetica, Arial, sans-serif;
color:#000000;
border-top:#000000;
border-left:#000000;
}
.boundaries {
width:100%;
height:99%;
}
.vertical {
vertical-align:middle;
}
.padding{
padding:16px;
}
.navigation{
border:0px;
margin:0px;
float:left;
width:376px;
}
.locations{
border:0px;
margin:0px;
float:right;
width:362px;
}
.logo{
padding:10px 10px 10px 0px;
float:left;
border:0px;
margin:0px;
}
.image {
padding:10px 0px 10px 0px;
border:0px;
margin:0px;
}
.main_1{
float:right;
background:#EAE3DB;
border:0px;
white-space:nowrap;
margin:0px;
padding:0px;
}
|
|||||||