|
CSS - Odd Problem With Float And Margin-top
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? Similar TutorialsI have a page that has a header, footer, left content box, and right sidebar. I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box. It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer). I have uploaded the page on one of my servers:test page page so you can see it in action. Here's the CSS/HTML code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}
div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}
div#headerbox {
border: solid 1px gray;
width: 741px;
height: 95px;
}
div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}
#middlecontent {
border: solid 1px purple;
margin-right: 210px;
text-align: left;
}
div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}
div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}
</style></head>
<body>
<div id="pageframe">
<div id="headerbox">
<h1>This is the Header.</h1>
</div>
<div id="whiteboxes">
<div id="middlecontent">
<h1>middle content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
</div><!-- end middlecontent -->
<div id="rightside">
<h1>right frame</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
</div>
</div><!-- end whiteboxes -->
<div id="footer">
<p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
</div>
</div><!-- end pageFrame -->
</body></html>
Any help is greatly appreciated. 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;
}
so, i have a form with rounded corners, which i've had no problems with in the past. the problem here is that the background color behind the box with the rounded corners is going to be user-generated and the box itself can change in width. my solution was to float the corners left and right and have the rest filled in the middle. works perfectly in firefox, giving the middle element an automatic width with margins on either side equal to the size of the corner images. however, IE decided to add in extra space between the 3 elements. ive tried giving the elements a display:inline-block property, but it didnt help. Code:
#petition_letter {
width: 330px;
margin: 25px auto 0;
}
.lettertop .left, .lettertop .right {
display: block;
width: 15px;
height: 15px;
background-image: url(lettertop.gif);
background-repeat: no-repeat;
}
.letterbottom .left, .letterbottom .right {
display: block;
width: 15px;
height: 40px;
background-image: url(letterbottom.gif);
background-repeat: no-repeat;
}
.letterbottom .right { width: 40px; }
.lettertop .left { float: left; background-position: top left; }
.lettertop .right { float: right; background-position: top right; }
.letterbottom .left { float: left; background-position: bottom left; }
.letterbottom .right { float: right; background-position: bottom right; }
.lettertop .middle, .letterbottom .middle {
display: block;
height: 15px;
margin: 0 15px;
background: #fff;
}
.letterbottom .middle {
padding-bottom: 25px;
padding-left: 15px;
margin-right: 40px;
}
.lettercontent {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 0px 30px;
font-size: 12px;
}
<div id="petition_letter">
<div class="lettertop">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
<div class="lettercontent textColor">
blah blah
</div>
<div class="letterbottom">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
</div>
I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here. PseudoCSS: Code: #topdiv{
width:960px;
}
#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}
.previous a{
background: url('images/previous.png') no-repeat;
}
.previous a:hover {
background-position:0 -62px;
}
PseudoHTML: Code: <div id="topdiv"><a href="" class="previous">Link</a></div> <div id="bottomdiv">Content</div> When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements? I always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#e5e5e5;
}
#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}
#navigation {
width: 640px;
height: 22px;
background-color:#c9c9c9;
margin-top: 88px;
}
#insidewrapper {
height:auto;
width:99%;
margin: 6px 1px 4px 1px;
}
/* Begin Left Side Info Boxes */
#sidebar {
width:150px;
height:600px;
margin-left:2px;
float:left;
border:1px solid #666666;
border-bottom:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#666666;
background-color:#ffffff;
}
.infobox {
height:123px;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
padding:3px;
border-top:0px;
border-left:0px;
border-right:0px;
}
.infopic {
margin-top:9px;
}
.infobutton {
height:20px;
border-bottom:1px solid #666666;
padding-left:3px;
}
/* Begin Main Content */
#maincontent {
width:465px;
height:593px;
margin-left:158px;
border:1px solid;
border-color:#666666;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
padding:3px;
background-image:url(../images/background_trans2.gif);
background-repeat:no-repeat;
background-position:center;
background-color:#ffffff;
}
/* Main Content for pages with textual content */
#content {
width:97%;
height:auto;
padding:5px;
}
/* Main Content for pages with products */
#productWrapper {
height:auto;
width:100%;
margin-top:10px;
}
#productLeft {
height:auto;
width:115px;
float:left;
}
#productMiddle {
height:auto;
width:200px;
margin-left:1px;
float:left;
}
#productRight {
height:auto;
width:auto;
}
/* Begin Footer */
#footerlinks, #footer {
width:640px;
height:auto;
text-align:center;
float:left;
}
#footerlinks {
border-right: 2px solid gray;
border-bottom: 1px solid gray;
border-left: 2px solid gray;
background-color:#c0c0c0;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
letter-spacing:1px;
color:#555555;
padding-bottom:4px;
}
#footer {
margin-left:0;
margin-top:0;
margin-bottom:15px;
padding-top:8px;
border-top: 0px;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-left: 2px solid gray;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#555555;
background-color:#a9a9a9;
}
/* Begin Rightside Column */
#right {
border: 1px solid orange;
width:195px;
margin-left:650px;
padding-top:111px;
}
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 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! 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 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. 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;
}
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 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 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 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 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. 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 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 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.. 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 |
|||||||