Learn VBA & Macros in 1 Week!

CSS - Ie 6 Div With Negative Margin

Full Excel VBA Course - Beginner to Expert

Ie 6 Div With Negative Margin	View Content

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>

Full Excel VBA Course - Beginner to Expert

Safari Margin Issue - Not The Float With Negative Margin Bug

Similar Tutorials

View Content

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;
}

Negative Margin Issue

Similar Tutorials

View Content

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?

Css Negative Margin Screws In Ie

Similar Tutorials

View Content

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

Negative Margin And Background In Ie

Similar Tutorials

View Content

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....

Help With Negative Margin-left In Ie 7

Similar Tutorials

View Content

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.

Why Doesnt This Negative Margin Do Anything?

Similar Tutorials

View Content

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?

Negative Margin In Floating Div: Problems In Ie6

Similar Tutorials

View Content

Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions.

This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin.

The page and the CSS all validates fine.

<div id="main">
<div id="leftdiv" class="floatleft"> <p class="bold">Do you...
</p></div>
<div id="rightdiv" class="floatright"> <p class="bold right">Would you </p>
</div>
</div>

#main {
position: absolute;
height: 70%;
width: 70%;
left: 5%;
top: 100px;
overflow: auto;
}

#leftdiv {
position:relative;
margin-left: -109px;
top: 50%;
margin-top: -160px;
left: 20%;
width: 198px;
height: 299px;
padding: 10px;
}

#rightdiv {
position:relative;
top: 50%;
margin-top: -160px;
right: 20%;
margin-right: -109px;
width: 198px;
height: 299px;
padding: 10px;
}

.floatleft {float:left;}
.floatright {float:right; }

Mysterious 28px Margin Showing Up At Top Of Page (not A Collapsing Margin Issue?)

Similar Tutorials

View Content

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?

On Paragraphs, Should I Define Bottom Margin Only Or Top Margin Also?

Similar Tutorials

View Content

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!

Space Below Form (have Tried Margin:0 And Bottom-margin:0)

Similar Tutorials

View Content

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">&nbsp;</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

Margin Bug In Ie7: A Kind Of The Double Margin Bug...?

Similar Tutorials

View Content

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

Ie And Negative Margins?

Similar Tutorials

View Content

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!

Negative Padding?

Similar Tutorials

View Content

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.

Negative Margins Ie 6

Similar Tutorials

View Content

I'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?

Negative Margins And Opera 9.5

Similar Tutorials

View Content

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"


 "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>

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.

Divs And Negative Z-index

Similar Tutorials

View Content

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

Safari Negative Margins

Similar Tutorials

View Content

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>

Negative Margins And Rel. Position In Ie

Similar Tutorials

View Content

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.

Changing Color To Red For Negative Numbers

Similar Tutorials

View Content

Hi,

How to change the background color of textbox in css, so that negative numbers can be shown in red color

I have multiple textbox in my asp page, which gets values from database. So there is a negative value shown, I want to highlight that in red color.

How to achieve this?

Thank you

Using Negative Margins (or Something Else?) To Fill Available Height

Similar Tutorials

View Content

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>