|
CSS - Margin Not Working, Ie6; Windows
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? 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 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 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 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 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 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 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] 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 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 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 In CSS is there a way of changing the colours of a window, such as the title bar or something. Also I've seen the scrollbars with different colours. I was wondering how you do that? I think it's CSS but if I'm wrong can someone tell me. Thanks Sephers I have created my first css site. I got it to work on the mac and pc, firefox and ie. So, naturally I moved on and created the inside pages to the site. I made the first inside page, and it worked as well....I really only copy and pasted the code I knew worked. I am using dreamweaver, so I set up templates and made the other pages. All I've done is copy and paste. But the inside pages get messed up and not in a consistent way. If I never changed a thing to the code, why is this happeneing? Is there any known bug/fix to this? Thanks www.rookscommunications.com/inrs/ Hey guys, sorry if I'm asking something that's been addressed before, but just couldn't find an answer anywhere, and thought one of you genii might be able to help.... Anyway, I'm tackling my first CSS layout, and it's going pretty well so far. Cross-browser testing hasn't gone nearly as bad as I expected. asiabackpacker.com/ai-resource/ But there's one problem I just can't figure out. Here's a screenshot: asiabackpacker.com/ai-resource/images/14015507.jpg In Internet Explorer 6 on Windows XP, my header Div appears one pixel to the left. It looks fine on IE6 on any other OS, and even in IE 7 on Windows XP, but for some reason the IE6 + Windows XP combo is producing this weird result. Is this a known bug that anyone's aware of, and is there any solution? (btw, the forum rules made me strip the http's out of my urls....sorry bout that) |
|||||||