|
CSS - Mystery Bottom Margin...
I cannot figure out how to get rid of the bottom margin on my body tag. It's driving me nuts. It's set to zero explicitly yet there's still a gap between the body tag and the bottom of the page. I don't think it's a browser bug since it happens in both FF and Opera.
site: gohanman.com/cms/image/tid/3 (forum rules say I can't link) There has to be something simple, but I don't know any way to change the bottom margin other than setting margin-bottom... Similar TutorialsForget it, I solved the issue. How does one delete a post like this... 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! 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! I seem to be missing the margin at the bottom of my subforums in IE. Works fine in FF. See the subforums, in IE the boxes are right up against the bottom instead of spaced out like in FF. http://mmogm.com/ Anyone please help me with the solution? Thanks in advance Code: html, body {
margin: 0;
padding: 0;
font: 62.5%/1.5;
}
#container {
width: 770px;
margin: 15px auto 15px auto;
background: white;
}
#headera {
height: 57px;
}
#nav {
background: white;
height: 28px;
}
#headerb {
height: 158px;
margin-bottom:10px;
}
#sidebar {
float: right;
width: 250px;
}
#content {
margin-right: 250px;
}
#footer {
clear: both;
background: white;
height: 50px;
}
IE is not recognizing the bottom margin for the container. The container is centered and 15px off the top of the page but the bottom of the container is not 15px off the bottom of the page. It works fine in other browsers. So, what IE bug is this? http://dailyblogdose.com Above the image there is a bunch of links to the different pages, well on Firefox when you hover on them, there is a border-bottom underline. On IE7 however it disappears. I could get them back by adding display:block; to #pages ul li a:hover however it makes them look slightly elevated. Any other ways? 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? Problem with IE8 http://kool-invention.mine.nu/~httpd2/bug.JPG take look at: http://kool-invention.mine.nu/~httpd2/ with firefox and ie or other web browsers. why the right column in logo and page content is slightly going down? in Firefox it works perfectly. i tried to research on Google but i couldn't find an answer. Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo $site_name; ?> - <?php echo $site_title; ?></title>
<link href="style/<?php echo "$site_style"; ?>/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, div {font-family:Verdana;font-size:14px}
.b {width:100%;text-align:center}
.l {height:100px;overflow:auto}
.l_l {width:150px;float:left}
.l_r {width:650px;float:right}
.p {border:1px solid black;overflow:auto}
.p_l {width:150px;float:left}
.p_r {width:650px;float:right}
.f {height:30px}
.s {height:10px}
.l, .p, .f {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
border:1px solid black
}
</style>
</head>
<body>
<div class="b">
<div class="l">
<div class="l_l">left</div>
<div class="l_r">right</div>
</div>
<div class="s"></div>
<div class="p">
<div class="p_l">left</div>
<div class="p_r">right</div>
</div>
<div class="s"></div>
<div class="f">foot</div>
</div>
</body>
</html>
please help. 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;
}
I've got a form that I'm trying to lay out. I've prepared examples. http://www.dollardns.net/devshed/example1.html This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents. http://www.dollardns.net/devshed/example2.html But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results. http://www.dollardns.net/devshed/example3.html I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements. Any recommendations? I've been toying with a CSS Layout for a new site with a faux-columns (ALA style) two-column with clearing footer design. It also calls for a small gradient bar under the header that repeat-x;'s a gradient bitmap accross the bar. I've done things like this before (in fact, in the same document -- the HTML background) but for some reason this isn't working. I've checked the path in the url() for the element's background: tag, but no luck. Can anyone see what I'm missing here? Help is much appreciated. URL for Layout Test: http://www.gravitymusic.com/aiden/CSSTest/front.html URL for CSS Document: http://www.gravitymusic.com/aiden/CSSTest/style.css Thanks! If I have <div class="menu"> <table> <tr> <td>Home page</td> </tr> and in my style sheet td.menu { color:red; } then too bad for me. I have to put class=menu in every <td> tag. There must be a better way. Hi gang, First of all, take a look at this page: http://www.cheeyewear.com.au/news.php I've made a website for a client and they are saying they can't use/interact with the menu on the right. I've tested every browser PC and Mac and they are all working fine. It happened after I added in the new footer code but I can't re-produce the issue at all. She says she sees the issue "Safari and at work Google Chrome". I know she uses a PC at her work. She's finding the same issue with this page: http://www.cheeyewear.com.au/eye_testing.php Can anyone else out there no interact with the right column on these pages?? Thanks!! Ham I thought it might have been carriage returns, but it's not. For some reason, Textwrangler is showing either question marks (for firefox for windows) or little boxes (for IE for windows). The problem isn't happening for Safari or FF for mac. I can't figure out what it is. the site this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
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 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 I must be really dumb or blind here... For some reason i cant seem to get div.show_listing to actually move up. Sorry for my ignorance here in CSS, but i learn as i go. css Code: Original - css Code .container { display: block; margin-top: -32px; margin-left: 3px; width: 780px; overflow: hidden; border: 1px solid #cccccc; } /* Start Mac IE5 filter \*/ div.left_menu, div.show_listing { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } /* End Mac IE5 Filter */ div.left_menu { margin-top: -32px; width: 150px; border-left: 1px solid #cccccc; height: 250px; background: #fbfbfb; border: 1px solid #cccccc; } div.show_listing { margin-top: -32px; margin-left: 155px; width: 620px; border: 1px solid #cccccc; }
html Code: Original - html Code <div class="container"> <div class="left_menu"> <div style="float: left;"> {link_one} </div> </div> <!-- This part is actually on a separate script.. it gets parsed via php --> <div class="show_listing"> <div style="float: left;"> -listing_text- fsdfsadf<br> </div> </div> </div>
<div class="container">
<div class="left_menu">
<div style="float: left;">
{link_one}
</div>
</div>
<!-- This part is actually on a separate script.. it gets parsed via php -->
<div class="show_listing">
<div style="float: left;">
-listing_text-
fsdfsadf<br>
</div>
</div>
</div>
Again sorry for my ignorance. ( just incase its viewable here ) Hi, Im creating a list that shows a photo and personal data of people. It's he http://tiregarfio.byethost17.com/web/frontend_dev.php/miembros username: fer password: m When i load it with IE6 i can see the list, but between the photos there are little space. I FF there isn't any space. Is that the bug of the "doubled margin" of IE6? Regards Javi |
|||||||