|
CSS - Div Margin Not Working
Hi
I am trying to define margins of a div so that the text near it can be displayed with a space, please click here to the see the sample but it is not affecting the text and the text strikes the borders of the div. Code: <div style='float: right; border:solid 1px; padding-left: 5px; padding-top:5px; padding-bottom: 5px; marign-left: 5px;'> Can anyone guide me please how to give some space between the text and the div borders? thanks Similar TutorialsCan someone tell me why margin-top won't work on the administration bar on this page: *** removed *** ? You'll see there's a margin-top of 15px pix on the administration bar, but it butts up against the main nav bar. Thanks! (ps this is a backup, but I'll remove the link shortly anyway). I've checked my site(www.lehsfair.org) in IE8 and FF and it works fine but in IE7/6 the red badge has a background and the bottom picture does not move down. What it supposed to do it does in IE8 and Firefox. In the left column, there should be a cow image and a pumpkin image with about 300px in between and a red star badge with a z-index that lets lay over the two images. Can anyone help me out with the IE7/6 issues?? Here's the code: Code:
body {margin: auto; background: url(../images/bg.png) left top repeat-x; background-color:#808080;}
#container{width: 1000px; margin: auto; border: 2px solid #000000; background-color:#FFFFFF; position:relative;}
#header{width: 1000px; height: 200px; background: url(../images/header.png) left top no-repeat; float: left;}
#content {width: 1000px; background-color: #ffffff; overflow:hidden; margin-bottom: 35px;}
#col1 {width: 480px; float: left; overflow: hidden;}
.ticket-box {width: 460px; background-color: #808080; margin-left: 20px; margin-top: 20px; margin-bottom: 10px; padding-bottom: 2px;}
.ticket-box h1{text-transform: uppercase; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 22px; text-align:center; padding-top: 10px; }
h2 {color: #7f0000; text-align:center; padding: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 18px;}
.box-content{background-color:#FFFFFF; margin: 10px auto; width: 450px; border: solid 1px #000000;}
.box-content p {color: #000000; font-size: 18px; font-family:Arial, Helvetica, sans-serif; padding: 10px 5px; line-height: 22px; }
.location {margin: 5px 20px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #000000; line-height: 22px;}
.bullets {background: url(../images/text-bullets.png) no-repeat; width: 335px; height: 175px; margin: auto; margin-top: 40px; }
#col2 {width: 480px; float: right; overflow: hidden; position:relative;}
#cow-image {background: url(../images/cow.png) no-repeat; width:457px; height: 326px; margin-top: 20px;}
#star-image {background: url(../images/star.png) no-repeat; width:376px; height: 369px; position: absolute; left: 50px; top: 300px; z-index: 1;}
#pumpkin-image {background: url(../images/pumpkins.png) no-repeat; width:457px; height: 345px; margin-top: 300px; position:relative;}
hi there, i'm new to CSS and recently i'm trying to set up a blog on my site http://www.seehearconnect.com/ . the the main column and the side column looks good on firefox and safari, but in IE, the columns stick together. i've looked through the margin and css codes but i dun see where i went wrong... help! the code are as below /*------------------------------- Main Body ----------------------------------*/ #container { width: 800px; margin: 0px auto; background: #578295; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .70em; text-align: left; /* IE hack Part 2 */; border-top: 15px solid #578295; } #topcontentdouble { float: left; width: 540px; height: 27px; background: #578295 url(images/header_whole2.gif) no-repeat right top; margin: 10px 0px 0 0px; display: inline; } #content { float: left; width: 540px; background: #ffffff; margin: 0 20px 0 0px; display: inline; } #bottomcontentdouble { display: inline; float: left; width: 540px; background: #578295 url(images/bottom_whole2.gif) no-repeat; margin: 0 10px 15px 0px; height: 27px; } /* ------------------------------ Sidebars -----------------------------------*/ #sidebar { position: relative; float: right; width: 235px; margin: 0 0px 0 0; text-align: left; /* IE hack Part 2 */ display: inline; font: 1.0em Verdana, Arial, Helvetica, sans-serif; } #sidebar ul { position: relative; border: thin none; } #sidebar ul li { list-style-type: none; list-style-image: none; } #sidebar ul, #sidebar ul li { margin: 0; padding: 0; } #sidebar ul li ul{ background: url(images/sidebar_bottom.gif) no-repeat bottom white; margin: 0 0 20px 0; padding: 10px 5PX 15px 5px; } #sidebar h2 { background: url(images/sidebar_top.gif) no-repeat; width: 235px; margin: 10px 5px 0 0px; padding: 8px 0 1px 20px; color: #476C7E; } /* The following is the fix for 3-pixel-jog bug in IE */ /* Hide from IE5-mac. Only IE-win sees this. \*/ * html #content { /*margin-right: 7px;*/ } * html #sidebar { height: 1%; } /* End hide from IE5/mac */ #sidebar ul li ul li{ margin: 4px 0px 4px 10px; display: block; background: url(images/bullet.gif) no-repeat; padding: 0 0 0 18px; } #sidebar ul li ul li a{ display: block; height:1%; /* IE WIN */ } #sidebar ul li ul li a:hover{ background: #FF9900; text-decoration: none; } #sidebar ul li ul li ul { margin: 0; padding: 0; } #sidebarbottom { background: white; width: 235px; height: 10px; vertical-align: bottom; } Hi, I have the following code, but the div is not appearing in the center despite me using margin 0 auto. Can anyone suggest a way to centralise the div? PHP Code: left: 0px; bottom: 0px; position:fixed; width: 98%; margin: 0 auto; background: url(../images/drop_bg.png); -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 0px 0px 10px; -khtml-border-radius: 0px 0px 10px; border-radius: 0px 0px 10px; z-index: 1000; Thanks On this page - http://www.mts-diesel.com/index.php, it shows as wanted in FF, but in IE9, the main body is left aligned. I tried declaring margin:0 auto but it will take effect. Any help would be appreciated. Tom Hello, I am having trouble with some margins in IE 6 windows. http://designerz-core.com/e/i/ The margin between the left images by the menu, has a 4 pixel or so space in between, which I don't won't. I have applied serveral hacks none of them seem to work for the left margin. By the way I am on a 1024x768 res. Also in ie 6 the buttons don't seem to notice margin statment in css. It's suppose to be 7px for margin-top. Can someone that is good at css help? Hi, I have the following code that all it does is list boxes under each other. Now between each box I set a margin of 10px. However in Firefox the margin (correctly) is 10px, while in IE6 the margin becomes 20px!! Code:
<html>
<head>
<style>
div.box{
float: left;
margin-left: 10px;
margin-bottom:10px;
clear:left;
border: 1px solid black;
width:100px;
}
div.row {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="row">
<div class="box">
Hello One
</div>
<div class="box">
Hello Three
</div>
</div>
<div class="row">
<div class="box">
Hello Two
</div>
</div>
</body>
</html>
Can anyone tell me why this is happing? will I have to resolve to hack to solve this, or I am writing my html incorrectly? regards, sim085 O.k. I'm stumped... I have a gap about 5px at the top of my site in Opera 8.02 which reveals my background graphic and setting the top margin to 0px in both my body and wrapper div does nothing to solve it. It renders fine in FF 1.06 and IE6, and yes, everything validates fine. My Website My css file My gratitude ahead of time. [edit] Did a little deeper search and solved my problem. Opera uses padding as a default, not margins. So setting padding to: Code: body {
padding: 0px /*Opera hack*/
}
Removed the gap issue [/edit] hello i have a div acting as a container for a layout and i'm using the following to center it on the browser window, having a background image and two borders: Code:
#master { position: relative; top: 0;
width: 46em;
margin: 0 auto;
background-image: url(../img/bg/.gif);
border-right: 1px solid #FA933C;
border-left: 1px solid #FA933C;
}
this works great on internet explorer, however, on other browsers it doesn't do so well; on netscape it centers the layer but it doesn't display the background/borders. on firefox it does the same thing. on opera it centers and displays the background, but it leaves a gap between the top margin and the top of the layer, even though the document margins are set to zero. is there a way to fix this? i suppose i could use position: absolute and then figure out a percentage away from the left margin... but this way is a lot better since the browser figures everything out neatly. hope someone can help out. thx in advance! I'm trying to get this div to center on teh page all teh way back to IE5. I'm using the box model, but I still can't get this thing to work. Any ideas on how to get it working? http://www.ira-soup.com http://www.browsercam.com/public.aspx?proj_id=296123 I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px. This is my input field code on my form: Code: <input type="text" class="field" name="title" size="45" maxlength="200"/> On my stylesheets I placed this: Code: input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}
Doesn't work?? I can't figure out why. 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;
}
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! 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 Hello, I am working on my website w w w . pujckyvcr . c z and there is problem with IE. Firefox is ok, in top menu, there is text with same margin from top and bottom. When you look on it in IE, text is 1px upper and text is more to up. Then hover isn't symmetrical from top and bottom in menu. Do you know how to fix thix IE bug? Thanks you, Jiri 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 |
|||||||