|
CSS - Ie And Negative Margins?
I am having a problem with negative margins in IE7. On my website:
commentsandcapers I am trying to get IE7 to display the right two boxes in the same way that Firefox displays them?? I have tried a few thing including position: relative in a whole bunch of places, none of which works. Do any of you have any idea how to correct this problem? Thanks! Similar TutorialsI'm working on a set of tabs within tabs (or subtabs). My code is something like this: Code: <ul class="tabs"
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab_content">
<ul class="subtabs">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Now, "tab_content" has padding of 10px, because the subtabs won't always be there. But I don't want the padding on the subtabs, so I was giving them a negative margin of -10px. This works in all browsers but IE, which applies everything but the right margin, leaving a white gap. See the image I'm attaching to see what the problem looks like. Anyone know of easy fixes for this? Does anyone know how to get this code to display correctly in Opera?
HTML4STRICT Code: Original - HTML4STRICT Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> p { } .mouse { display: inline-block; padding: 6px; margin: -6px; } .mouse:hover { background: #888; border: 2px solid black; padding: 4px; } </style> </head> <body> <p>A <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span> <span class="mouse">test test test</span></p> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" I has attached some screenshots of my results. When I hover over an element on the right or left edge of the screen, the background and border that results clips because of my negative margins. I am having trouble getting safari to recognize my negative margins. It works in IE6,7 and Firefox. I am trying to center the page but to get the first 327 pixels on the left and last 327 on the right to be a negative margin and my center column to have a 1000px fixed width. Here is my css. Any help would be great! .bkg-tile-left { background-image: url(/images/bkg-tile-left.jpg); background-repeat: repeat-y; width: 327px; text-align: left; float: left; overflow: visible; } #bkg-tile-right { background-image: url(/images/bkg-tile-right.jpg); background-repeat: repeat-y; width: 327px; background-position: right; text-align: right; float: right; clear: both; padding-right: -327px; } #bkg-right { background-attachment: scroll; background-image: url(/images/bkg-img-right.jpg); background-repeat: no-repeat; background-position: left top; height: 100%; } #bkg-left { background-attachment: scroll; background-image: url(/images/bkg-img-left.jpg); background-repeat: no-repeat; background-position: right top; height: 100%; } #box1 { margin-left: -327px; margin-right: -327px; position:relative; } AND HTML <body> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" id="box1"> <tr> <td valign="top" class="bkg-tile-left" height="100%"><div id="bkg-left"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> <td valign="top"><table id="Wrapper" cellpadding="0" cellspacing="0"> <tr> <td id="print_header"><dtml-var standard_print_header ><img src="images/spacer.gif" width="1px" height="1px"></td> </tr> <tr> <td><dtml-var standard_html_header2></td> </tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="BreadCrumb"><dtml-var standard_html_breadCrumb></td> </tr> </table></td> </tr> <tr> <td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <dtml-if standard_html_sidebar> <td valign="top" id="body_content2"><dtml-var body_content2></td> <td valign="top" id="Sidebar2"><dtml-var standard_html_sidebar2></td> <dtml-else> <td valign="top" id="body_content2"><dtml-var body_content2></td> </dtml-if> </tr> </table></td> </tr> <tr> <td id="Footer2" ><dtml-var standard_html_footer2></td> </tr> </table></td> <td valign="top" id="bkg-tile-right"><div id="bkg-right"><IMG SRC="images/spacer.gif" WIDTH=327 HEIGHT=718></div></td> </tr> </table> </div> </body> Hello, I used a negative value for the position of a div on this site: Code: www.godynamic.nl Everything is like it have to be in mozilla browsers but in IE the image is partly beneath the upper layer and hidden. I tried z-index but this will only work with absolute position types. Is there IE hack for this? Thanks for helping. I'm redoing the layout of my site (www.brohawk.com) using floating divs with negative margins to produce a fluid left column and a fixed right column. I followed an article on A List Apart for the basics and got it working fairly nicely. As a matter of fact, the site works beautifull in Mozilla/Firefox and with minmal errors in NS7. I've even got all but the forums working in Opera. I haven't even begun to work on making it IE compliant. Saving the worst for last. Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go. Anybody with Opera should be able to check it out and see what I mean. Anyhow, can anybody tell me why it won't float properly on that one page, but it works on all the others? In Internet Explorer 6, the following HTML and CSS with negative margins causes the first letter of the heading to disappear: Code: <html>
<head>
<style type="text/css" media=screen>
#siteBody {
position: absolute;
top: 100px;
left: 100px;
width: 700px;
margin-left: 2em;
}
h1 {
margin-left: -1em;
}
</style>
</head>
<body>
<div id="siteBody">
<h1>This is the heading</h1>
<p>
This is the content.
</p>
</div>
</body>
</html>
There are ways to get the negative margin to work in IE properly, but at a loss of functionality. For instance, if I remove the width property from the siteBody CSS, and change the position to 'relative', the letter will appear. Also, if I remove the div and just place the 'siteBody' id on the body tag, then the first letter will appear. Any help is greatly appreciated as I've been searching for a solution for a couple of days now. Thanks, ---atomgiant Floating an element left, with negative margins cuts off portions of the element in IE6. Looks fine in FF and IE7. Page he URL Removed by poster XHTML: Code: <div class="miniContainer logos"> <h3>Logos</h3> <div> test </div> </div> CSS: Code: .miniContainer h3 {font: bold 11px Arial,Sans-Serif; color: #000000; background-color: #ffffff; margin: -17px 0 0 -3px; padding: 0 5px; float: left;}
.miniContainer {border: 1px solid #EEEEEE; margin: 0; padding: 10px; float: left;}
.logos {width: 125px;}
.features {width: 100px; margin-left: 10px;}
Is there a workaround for this? I understand why it's happening, but can't figure out a hack for it. apologies if this has been asked and answered already - i did a search of the board but didn't find a clear solution. what i'm trying to do seems simple enough, but isn't turning out that way. lets say i have a page background of some color (e.g., orange). then i have a main container div that is centered with auto margins, and has a white background. i want this main container to start at 100px from the top (so 100px of orange shows above it), and the white background should expand to the bottom of the page - without scrollbars. if i set it's height to 100%, the 100px top margin is added to the 100% height of its parent (body + html), so it acts as if there's 100px of substance beneath the viewport and therefor shows scrollbars. i had assumed a negative bottom margin set for the same amount as the top margin would work, but alas it does not. obviously i don't want to just force-hide scrollbars by overflow:hidden or position:asbolute/fixed - if content in the container forces it to expand, it should do that. otherwise, even if there's very little content - or even none - it should expand to the bottom of the page. i've attached a very basic (non-working) example - any insight would be appreciate. not looking for a hack - i'm looking for the best way to handle this with best-practices. tyia 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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<style type="text/css">
html {
height : 100%;
}
body {
margin : 0;
background : #F90;
height : 100%;
}
div.wrapper {
margin : 100px auto -100px auto;
width : 500px;
background : #FFF;
height : 100%;
}
</style>
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
i am trying to display a form from a website inside an iframe the problem is, this form displays perfectly in IE: but it displays wrong in FF: heres the CSS: Code:
#container{
width: 380px;
height: 288px;
overflow: hidden;
border: 3px solid #4398d4;
}
#container iframe {
width: 800px;
height: 600px;
margin: -305px 0px 0px -40px;
}
heres the HTML: Code: <div id="container"> <iframe src="http://wow.eroticagateway.com/signup/signup.php?step=signup&qualify=1&site=226&nats=NzUxNjg6MzoyMjY" scrolling="no" frameborder="0"></iframe> </div> any idea why this is happening? Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. In FF3 this code behaves correctly but not in IE6. The main content disappears. Any ideas why and how to fix it? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #00FF00;
}
#wrapper {
font-size:0.8em;
font-family:"Arial";
position: relative;
min-width:960px;
}
#container {
margin: 0 auto;
width: 960px;
background-color: #fff;
}
#header {
background-color: #0033FF;
width:960px;
padding-bottom:50px;
height: 152px;
}
#contentWrapper {
margin-left: auto;
margin-right: auto;
width: 85%;
margin-top: -60px;
z-index: 1;
position: relative;
background-color:#FFF;
min-height:500px;
padding-left:20px;
padding-top:20px;
}
#mainContent {
float:left;
width:50%;
}
#services {
padding-left:60px;
float:left;
}
#footer {
clear:both;
background-color: #CC0033;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
<div id="contentWrapper">
<div id="mainContent">
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
<p>
Header: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
<div id="services">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
</div>
<div id="footer">
<p>
Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, eros a iaculis elementum, nisl orci vehicula odio, in sollicitudin libero sapien ac nibh. Etiam quis arcu sit amet felis vestibulum dignissim et sed augue. Maecenas commodo ornare urna non lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent libero dui, egestas id mattis sollicitudin, suscipit eget arcu. Vestibulum aliquet tempus dui, ut laoreet dolor imperdiet at. Vivamus eu porttitor arcu. Fusce sed lorem diam, sit amet condimentum risus. Aliquam commodo mi at orci mollis et mollis tortor varius. Fusce posuere turpis non diam placerat pretium. Vestibulum porttitor tristique molestie. Suspendisse dui libero, lacinia id commodo eget, facilisis vel purus. Aliquam viverra elementum turpis ac vulputate.
</p>
</div>
</div>
</div>
</body>
</html>
Hi. I have a top menu bar which is positioned below an image. The size of the image is stopping the menu bar from being further up, but I cant make the image smaller. Is there a way to put negative padding on the image to make the menu bar sit further up (effectivly on the image). To sum it up, here is an image: http://img40.imageshack.us/i/helpo.jpg/ Here is a link to the website: http://hiq.identityprojects.co.uk Here is the code for the image: Code:
h1#logo a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-size: 250%;
width: 283px;
height: 92px;
padding-bottom:-20px;
background: url(../images/logo.png) no-repeat;
text-indent: -99999px;
}
The red is my stab in the dark to get it to work, which didnt work. Id really appreciate it if someone could enlighten me. im using (stripped most) CSS: Code:
h3 {
margin-top:-10px;
}
in this HTML Code: <h1>Header</h1> <h3>subtitle</h3> i want the <h3> the overlap the <h1> partly, like defined in the CSS. It works fine in every browser, but in IE, the rest of the page is distored because of the negative margin definition. is there any workaround for this Hello everyone, I am working on a website redesign and I just cannot fix one certain bug that I am having in IE7. I have this layout that I made and am using which works great cross browser here mactyler.com/NEWIDF/ Now I am integrating a PHP script into it and am having a hard time to get it to display the sidebar in IE7. iphonedevforums.com/news/index.php I think it might have something to do with the margin-left: -100%; that I am using on the sidebar div to align it vertically. It works and shows up in every browser except IE. If you guys could show me any way to get it working I would greatly appreciate it. Any ideas are welcome, I will try to be as helpfull as possible in answering your questions. I've got an "IE" issue! This CSS code looks perfect in IE7 and Firefox. It is a photo box that offsets 225 pixels to the left of the text box. Code: #inside_offset_image {
width: 319px;
float: left;
margin-left: -225px;
margin-right: 30px;
margin-bottom: 30px;
}
But when I test in IE5.5 and IE6, this photo box runs almost completely off the left side of the browser. The actual test page is located he http://penncomm.com/bean/inside.html Any ideas? Hi. The main gallery image is pushed down from the top of the logo on the page below: http://zombiemod.com/rm/nina2/main.php?g2_itemId=14 I want to move this block on the right up. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div it doesnt move. The is the CSS I tried for the main-image-container div: Code: margin-top: -70px; This is the HTML: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controlsx">
<ul id="control-buttonsx">
<li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
<li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
<li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>
</ul>
</div>
Why didnt my negative top margin work? when i scroll down and up again the background color is gone... i see this happening when some of the div's inside some container get negative margin for some overlapping effect sorry i have not the source immediatly but maybe you know what can cause this behaviour in IE? otherwise i trim the code for display here.... Ok. I have coded loads of sites in CSS but have never come across this problem before, and have hit a big bloody brick wall on it! Any help would be greatly appreciated. So.... i have an outer div with a 1px border and other divs inside of this outer div, one of which i want to give a negative margin to so that it sits under the border of the outer div.... I thought i could just give the div i want to sit under the outer div a negative z-index, and this does actually work on FF, however IE6 and Safari 1.3.2 dont like it and it just appears above the border. does that make sense? here's the code so you can see what i'm waffling on about.... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#outer {
border:1px dashed green;
width:750px;
position:relative;
z-index:1000;
}
#box1, #box2, #box3 {
width:200px;
height:200px;
position:relative;
}
#box1 {
background:red;
}
#box2 {
background:cyan;
margin-left:-10px;
z-index:-1;
}
#box3 {
background:silver;
}
</style>
</head>
<body>
<div id="outer">
<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>
</div>
</body>
</html>
Bear in mind also that this is a simplified version of the page, and there is other stuff below the outer div that flows down as the text size expands.... thanks in advance for any help! graham |
|||||||