|
CSS - Margin-top Problem
Hi, My site looks fine in Dreamweaver, but when I upload it to my server and view it, there is a big margin at the top.
I am using one of Dreamweaver's templates. All my CSS is currently in the header. the site is here How do I get rid of the spacing above the header? thanks Similar TutorialsHi guys! I basically have a contain div, then, inside I have a logo div along with a 'middle' and footer div. The logo div is closed, and assigned a margin bottom property, the logo div also has a background:#FFFFFF; value. The middle div has a margin bottom value too, exactly like the logo div. All works well. But guess what, IE 6 doesn't seem to want to acknowledge these margins, and seem to want to add that margin to the navigation divs on the top and bottom of the middle div. Link: http://www.lewishamcab.org.uk/index2.php http://www.lewishamcab.org.uk/stylesheet.css Source code accessed from there as I don't know the exact problem. Hope someone can help! Regards, Joseph Man Hi. Can anyone tell me why Internet Explorer doubles the margin width on the left side in this example? http://www.dirtybbq.com/test/ This works fine in FireFox. Thanks for your help. Here is my style sheet... Code:
body {
background-color: #E0E0E0;
text-align: center;
}
p, input, select, th, td, h1, h2, textarea {
font-family: verdana;
font-size: 11px;
}
#container {
border: 1px solid #000000;
background-color: #FFFFFF;
background-image: url('../images/bg.gif');
background-position: right;
background-repeat: repeat-y;
border: 1px solid #666666;
margin-left: auto;
margin-right: auto;
width: 641px;
}
#header {
background-color: #666666;
background-image: url('../images/hd.gif');
background-position: bottom left;
background-repeat: no-repeat;
height: 64px;
width: 641px;
}
#footer {
background-color: #666666;
padding-bottom: 0px;
text-align: left;
width: 641px;
}
#footer p {
color: #FFCC00;
font-size: 10px;
margin: 0px;
padding: 4px;
}
#footer a {
color: #FFCC00;
font-weight: bold;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
#left {
background-color: #FF6600;
float: left;
margin: 10px;
margin-right: 11px;
text-align: left;
width: 400px;
}
#side_bar {
background-color: #FFFF00;
float: right;
text-align: left;
width: 220px;
}
If I have 2 tables in a div, does margin-top position the bottom table in relation to the top of the div or the bottom of the top table? My top table is absolute positioned top 0px, with a margin-bottom of 50px. The bottom table is positioned relative and has a top-margin of 50px, but is positioned relative to top of the div. Should it be positioned relative to the top table or do I need to put both tables in seperate divs to achieve the margin? I have two divs on a page. Neither div has a set height. I want to maintain a 50px vertical gap between them, regardless of the height of the top div. Can I achieve this with margins? I've tried using a bottom margin on the top div and a top margin on the bottom div, but the top margin of the bottom div seems to be positioning relative to the top of the top div, not the bottom of it. Can someone point out where I'm going wrong with this? Thanks Hi guys, i'm having trouble coding this. page is located at www.graffetto.com . The div on the right hand side is being rendered 1px away from the scroll bar (to the left) in IE, but firefox is correctly rendering it directly next to the scrollbar with no gap. I have already set body margins and padding to 0px all around. is there a way to fix this without using a JS detect browser? I can fix this problem through IE by setting the div margin-right: -1px, but this causes firefox to render the image 1px too far to the right, bringing up the horizontal scrollbar. well here is my code, if anyone can help, id greatly appreciate it! CSS: Code: body
{
margin: 0px;
padding: 0px;
background-image: url(http://graffetto.com/bg.gif);
background-repeat: repeat-x;
}
#rightcontent
{
position: absolute;
top: 0px;
right: 0px;
}
#centercontent
{
margin-right: 186px;
}
HTML: Code: <div id="centercontent"> <img src="left.jpg"> </div> <div id="rightcontent"> <img src="right.jpg" /> </div> page link again: www.graffetto.com I have a question about the behavior of the margins for contents of a container div. Basically what I have done is created a container div that has a specified width but no margin, so it should be slammed up against the top, left, and bottom of the page. However, when I put divs inside the container div, their margins seem to be applying to the container as well - at least their top and bottom margins seem to be. I've included the code below, which can easily be copied and pasted. Basically what's happening is that if the first div inside the container has a top margin, that margin is then being applied to the container div, meaning the container div is then pushed down from the top of the page by the amount of top margin specified. The same thing is happening at the bottom of the container div when I've included a bottom margin on the last element inside the container. To my surprise, this problem is only happening in Firefox. It is showing exactly how I want it to in IE6. Here is the code. This is just a very simple page to demonstrate the problem, so I used an embedded style sheet. I am using the transitional doctype (couldn't include it here because it contains a URL). The height of the first div inside the container is so big so that the page must be scrolled down to see the entire thing on any normal screen resolution: <html> <head> <title>box test</title> <style type="text/css"> body {margin: 0; padding: 0;} #bgbox {width: 500px; background-color: #aaaaaa; margin: 0; padding: 0;} #boxone {height: 700px; border: 1px solid #000000; background-color: #ffffff; margin: 20px; padding: 20px; color: #000000;} #boxtwo {border: 1px solid #000000; background-color: #ffffff; margin: 20px; padding: 20px; color: #000000;} </style> </head> <body> <div id="bgbox"> <div id="boxone">This is box one</div> <div id="boxtwo">this is box two</div> </div> </body> </html> Any thoughts? Thanks! Hi I am displaying a div and want to give some space on the left side of the div so that text within div is displayed on a little distance from the left side border of the div, I am using following div style with margin but it is not working and the text is sticking very next to the left side broder Code: <div style="background-color: #82BAE8; margin: 10px 50px 30px 5px; font-family: arial; color: #000000; font-size:20; width:500px; border:thin dotted; border-width:2px; border-color: #E4E4D9; text-align: left;" > also the font size doesn't make any difference and the font size is still small. many thanks can anybody share some wise words to fix this please? Hi to all !! check out this little piece of example code: Code: <body bgcolor="#ffffff"> <div style="width: 720px; height: 850px; background-color: gray"> <div id="leftcolumn" style="float: left; width: 500px; height: 780px; text-align: left; background-color: #F4F4F4"> </div> <div id="rightcolumn" style="height: 780px; text-align: left; background-color: red"> </div> </div> </body> In IE, between the left and right columns, there is an empty space of 5 px, that has to me no explanation. In Netscape everything is fine, the left column is next to the right one. Setting the padding and margin to 0 won't correct the problem. You can set the right margin of the left column to "- 5px". This will solve in IE, but will mess everything up in Netscape. Question: is this an IE bug I just have to live with, or am I missing out on something...? Thanks for your help and bye Hi all, I'm not new to CSS in general but quite a novice when it comes to CSS positioning (absolute,relative etc.) I have built one simple web page as follows: http://www.jaysonsgroup.com/ztest/znuvo/z-index.html HTML: Code: <div id='contents'> <div id='main'> <a href='mailto:info@nuvohome.com'>info@nuvohome.com</a><br/><br/><br/><br/> ... *remainder text as you see on the web page**.. </div> <div id='footer'>We are working on that 100% green solution!</div> </div> The CSS as follows: Code: /* CSS global reset for all browsers */
* {
padding: 0;
margin: 0;
}
/******* main *******/
html, body, #contents {
width: 100%;
height: 100%;
}
/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/
html>body, html>body #contents {
height: auto;
}
body, p, td {
font-family: Century Gothic, Verdana, Arial;
font-size:10pt ;
font-weight:normal;
line-height: 17px;
color: #007700;
}
body {
margin: 0;
background: url(../images/body/bg.jpg) repeat-y;
}
a, a:visited {
color: #007700;
font-size: 11pt;
}
#contents {
margin: 0 auto;
width: 500px;
}
#main {
text-align: center;
padding-top: 70px;
margin-top: 15%;
background: url(../images/goinggreen.jpg) no-repeat top center;
}
#footer {
position: absolute;
bottom: 0;
text-align: center;
width: 300px;
background: url(../images/bioh-logo.gif) no-repeat top right;
padding-top: 68px;
padding-right: 160px;
padding-bottom: 68px;
}
This page is done, except in Firefox the text is quite high (because I've set the margin-top: 15%; in the #main div) but in IE6, the main text seems to have a MUCH bigger top margin. Please preview on Firefox and IE to compare - you will notice a considerable margin difference. Just wondering why this is happening? There is an alternate version which I experimented with, using more on CSS positioning, but it still doesn't solve my problem..(and I sort of prefer the other version anyway)... http://www.jaysonsgroup.com/ztest/z...dex-strict.html Any advice on an IE6 hack or something to improve my code? TIA! I have a menu that has no margins and I have a content box with has a margin-left of 79. Each menu item's length is 78 pixel, so I'd gradually guess that margin-left:78 would align the border of the menu item and the content box... Here's my problem. If I make it 78, it aligns in IE but not in Mozilla Firefox. When I make it 79, it aligns in Mozilla but not IE. Thanks in advance. Hey guys, I was wondering if you can help me out with something. On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right? Can you take a look at help me figure out what I need to fix? www.illuminatedmind.net Thanks! i have a weird problem with a stylesheet for printing on one of my pages. Th e page is he http://www.qrglaw.com/judges.php There is some "hidden" info on the page that shows up when a visitor clicks the links in the left-hand margin. The hidden info then pops up on top of th e page to display driving directions to the location selected. the driving directions display 2 html buttons on screen: one to close the "w indow" and the other to print the directions. i have some css so that the "print directions" button "hides" everything on the page except for the directions and the site banner. everything works pre tty well... except that I'm having trouble w/ text at the right margin getting cut off o n some of the pages (Johnstown, in particular). I can't understand this at a ll. i started w/ a "width:auto" , then went to defining left and right margi ns. that works for most of the pages, but not for Johnstown or Uniontown lin ks. I think the text should be able to wrap w/o any explicit margin settings . Just when I think I'm starting to get a handle on things, I run into yet another mystery... Take something like this: Code: <div style="background: orange; float: left;"> This is floated. </div> <div style="background: blue; margin-top: 600px; "> This is not floated. </div> In IE6 (don't have 7 on this machine) and Opera, I get what I expect -- an orange element and 600 pixels below that, a blue element. In Firefox both the orange and blue elements are moved 600 down. Thinking it has something to with clearing, I add: Code: <div style="background: orange; float: left;"> This is floated. </div> <div style="background: blue; clear: left; margin-top: 600px; "> This is not floated. </div> IE6, same result. Firefox and Opera, both elements are now at the top of the page. (clear: both same result) So now I try just adding some other content to the page: Code: <p>This is some text.</p> <div style="background: orange; float: left;"> This is floated. </div> <div style="background: blue; clear: left; margin-top: 600px; "> This is not floated. </div> This mysteriously fixes the issue in Firefox, so now IE and Firefox display the same. Opera still groups the two colored elements together. I'm sure there's something simple I'm not understanding here...any ideas? hi, i'have only very basic idea of CSS i'm making a site. It has horizontal scrollor using jquery and very large gap between scrollor and content "Welcome to prince electronic". Please someone help me to reduce the space between these two. website is princelondon.com thank you very much... I am useing this css code : Code:
a.buttonlike:link, a.buttonlike:visited,
a.buttonlike:hover, a.buttonlike:active {
text-decoration:none;
vertical-align:middle;
background-color:#dddddd;
color:#000000;
height:16px;
padding:3px;
margin: 0px 2px 0px 0px;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
text-align:center;
font-size: 12px;
}
to make the "buttons" on the right side of this page : http://tampabay-online.org/eventdet...erby=firstnames but when I change the margin top (because it doesn't quite fit right from Code: margin: 0px 2px 0px 0px; to Code: margin: anythingpx 2px 0px 0px; it doesn't seem to make a differance, it stays right where it is. and adding a <br /> to the line before it makes the "buttons" too far down. Any ideas? Thanks Hi.. I have a small problem with a site I'm doing right now... I have an exact order on how it's supposed to be done.. So even though it looks like **** :P.. Not my fault.. I'm not allowed to change it.. So **** that.. But.. look at this first: Dansk Auto Montage - Diesel Optimering Here.. look at the page in 1024x768... Then.. change your resolution to something higher (as high as possible).. You will notice, that the higher the resolution, the lower the logo at the bottom will get... another problem.. if you look at this page: Dansk Auto Montage - Profil The text will be kinda weird depending on the resolution... So here is what I want..... The logo should be right underneath the text (like the first page at 1024x768, in IE)... no matter which resolution you use... The text should NEVER go further right than the background line at the top (the grey horizontal thing)... No matter which resolution (still in IE).... I've tried for quite some time.. I can't make it work... Help me Was hoping someone could help me with a problem I'm having with margins on this site robertehowarddirectory.com/viewcat.php?category=Art In safari, the margins between each of the "featured" listings is 30px when it should be 8 (4 on the top of each listing, and 4 on the bottom). This jacks up the layout of the site, pushing the featured listings too low, as you can see. IN IE 7, 8 and Firefox, I have no problems, and the site displays fine. Would appreciate any help on this issue, as I've been trying to solve the problem but have not found a solution. Thank you. Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M i have a style sheet which says form should have no margin/paddings at all.. now the problem is that i have a form and i use: <form style="margin-top:12em; padding-top:12em;" > however if i use a value of anything <12 it doesnt move down one tiny bit, for 12em it will move down a bit (about 2em) and if i set it to 14 then it will move down more (about 5em). the form in question has an image & a hidden field. which have margin:0, padding0 applied to them, but my GUESS is it doesnt matter what they have because i am telling form to move down so all elements within it should move down as well but still be margin:0 etc? or am i reading/thinking it wrong? 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? |
|||||||