|
CSS - Margin In Ie6 Not Working Properly.
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 Similar TutorialsHi 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; } Can 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;}
Ok i have a header and it has a SWF file on it. WHat i want to do is put the links on the same SWF file to the side but to the top of it i.e. using Z-index? but i cant get it to work? CSS Code:
#header {
position:relative;
z-index:-1;
float:left;
width:100%;
clear:both;
}
#links {
border:1px solid black;
position:absolute;
z-index:100;
top:10px;
right:20px;
}
HTML Code:
<div id="header">
<object width="550" height="400">
<param name="movie" value="/resourcebank/images/Final_banner.swf">
<embed src="/resourcebank/images/Final_banner.swf" width="100% height="20%">
</embed>
</object>
<span id="links">
random links
</span>
</div>
This code for my horizontal drop down menu works great in Chrome & Firefox but is shifted to the right in IE. I would like it to line up properly, like it does in Firefox & Chrome. Anyone have any ideas on how to make it IE compatible? Thanks! Here is the test webpage to see it live: artevaggio.com/test/slideshow_sample.html Here is the CSS source: artevaggio.com/test/artevaggio_style.css There also a snippet of CSS when you view the page source code. Thanks! Hi there, I have just made a website using css to pop-out my menus, and they dont seem to work in safari, yet work fine in ie and firefox. The website is overload.net.nz, and the two pop-out tabs are the 'newsletter' tab, and the 'tips' tab. I have used css layers, and is wondering is that is the problem? And I dont have safari to test any changes in, does anyone know of a successful safari pc version yet? 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 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'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line: <style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style> Now sometimes it works and sometimes it doesn't. I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump. Does anyone know why this is possibly happening? Mike Hi, While testing our webpage, we found that in all browsers the CSS menu works fine except in Safari, on browsing the child nodes of the menu. The menu just closes on the second or third select. I would greatly appreciate any help to fix this bug. The CSS code is below. Regards, Sharon. Code : <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> 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 gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block. Here is an example (not my site): http://rmideas.com/menus/menutest/NavToBar.htm The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'. How can I get this to work properly in both FF and IE? and I have overlapping problems, some code overlaps in one browser but looks fine in another. I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top. Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7: http://www.groundedgroup.com/clients/NWR/ Here's the respective CSS: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Any ideas on how to make this work properly when used on the side? Thanks 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. |
|||||||