CSS - Safari Margin Issue - Not The Float With Negative Margin Bug

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?

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.

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

I cannot see a margin when I test this page in safari from dreamweaver. Basically I am trying for a centered container which will hold all the content and have some space from the top margin and be centered. With the CSS I have the container shows up with a margin when I test it in the firefox browser and even when using live view, but not in Safari. The latest version of Safari.

What do I need to change to get the top margin to show correctly in Safari? Is something overriding something else?

Code

@charset "UTF-8";
/* CSS Document */

body {

color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;

}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;

}

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}

.menu a:hover {
color: #990000;
text-decoration: none;
}

.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */

}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}

so, i have a form with rounded corners, which i've had no problems with in the past. the problem here is that the background color behind the box with the rounded corners is going to be user-generated and the box itself can change in width. my solution was to float the corners left and right and have the rest filled in the middle. works perfectly in firefox, giving the middle element an automatic width with margins on either side equal to the size of the corner images. however, IE decided to add in extra space between the 3 elements. ive tried giving the elements a display:inline-block property, but it didnt help.

Code:

#petition_letter {
	width: 330px;
	margin: 25px auto 0;
}
.lettertop .left, .lettertop .right {
	display: block;
	width: 15px;
	height: 15px;
	background-image: url(lettertop.gif);
	background-repeat: no-repeat;
}
.letterbottom .left, .letterbottom .right {
	display: block;
	width: 15px;
	height: 40px;
	background-image: url(letterbottom.gif);
	background-repeat: no-repeat;
}
.letterbottom .right { width: 40px; }
.lettertop .left {	float: left; background-position: top left; }
.lettertop .right {	float: right; background-position: top right; }
.letterbottom .left {	float: left; background-position: bottom left; }
.letterbottom .right {	float: right; background-position: bottom right; }
.lettertop .middle, .letterbottom .middle {
	display: block;
	height: 15px;
	margin: 0 15px;
	background: #fff;
}
.letterbottom .middle {
	padding-bottom: 25px;
	padding-left: 15px;
	margin-right: 40px;
}
.lettercontent {
	border-bottom: 1px solid #fff;
	background-color: #fff;
	padding: 0px 30px;
	font-size: 12px;
}


<div id="petition_letter">
	<div class="lettertop">
		<span class="left"></span>
		<span class="right"></span>
		<span class="middle"></span>
	</div>
	<div class="lettercontent textColor">
		blah blah
	</div>
	<div class="letterbottom">
		<span class="left"></span>
		<span class="right"></span>
		<span class="middle"></span>
	</div>
</div>

Just when I think I'm starting to get a handle on things, I run into yet another mystery...

Take something like this:

Code:

<div style="background: orange; float: left;">
This is floated.
</div>


<div style="background: blue;  margin-top: 600px; ">
This is not floated.
</div>

In IE6 (don't have 7 on this machine) and Opera, I get what I expect -- an orange element and 600 pixels below that, a blue element. In Firefox both the orange and blue elements are moved 600 down.

Thinking it has something to with clearing, I add:

Code:

<div style="background: orange; float: left;">
This is floated.
</div>


<div style="background: blue;  clear: left; margin-top: 600px; ">
This is not floated.
</div>

IE6, same result. Firefox and Opera, both elements are now at the top of the page. (clear: both same result)

So now I try just adding some other content to the page:

Code:

<p>This is some text.</p>
<div style="background: orange; float: left;">
This is floated.
</div>


<div style="background: blue;  clear: left; margin-top: 600px; ">
This is not floated.
</div>

This mysteriously fixes the issue in Firefox, so now IE and Firefox display the same. Opera still groups the two colored elements together.

I'm sure there's something simple I'm not understanding here...any ideas?

Was hoping someone could help me with a problem I'm having with margins on this site robertehowarddirectory.com/viewcat.php?category=Art

In safari, the margins between each of the "featured" listings is 30px when it should be 8 (4 on the top of each listing, and 4 on the bottom).

This jacks up the layout of the site, pushing the featured listings too low, as you can see.

IN IE 7, 8 and Firefox, I have no problems, and the site displays fine.

Would appreciate any help on this issue, as I've been trying to solve the problem but have not found a solution. Thank you.

I have a page that has a header, footer, left content box, and right sidebar.

I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box.

It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer).

I have uploaded the page on one of my servers:test page page so you can see it in action.

Here's the CSS/HTML code:
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" xml:lang="en"><head><title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}

div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}

div#headerbox {
border: solid 1px gray;
width: 741px; 
height: 95px;
}

div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}

#middlecontent {
border: solid 1px purple;
margin-right: 210px;  
text-align: left;
}

div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}

div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}

</style></head>

<body>
<div id="pageframe">

  <div id="headerbox">
  <h1>This is the Header.</h1>
  </div>

<div id="whiteboxes">
  <div id="middlecontent">
  <h1>middle content</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
	<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
	<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
	<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
  </div><!-- end middlecontent -->


  <div id="rightside">
  <h1>right frame</h1>
  <p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
  </div>

</div><!-- end whiteboxes -->
  
  <div id="footer">
  <p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
  </div>

</div><!-- end pageFrame -->

</body></html>

Any help is greatly appreciated.

I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here.
PseudoCSS:

Code:

#topdiv{
width:960px;
}

#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}

.previous a{
background: url('images/previous.png') no-repeat;
}

.previous a:hover {
background-position:0 -62px;
}

PseudoHTML:
Code:

<div id="topdiv"><a href="" class="previous">Link</a></div>
<div id="bottomdiv">Content</div>

When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements?

So, here's what I've got:

http://www.anthonycarboni.com

The header is supposed to appear 50 pixels high, flush with the top (no margins), with the header text middle aligned inside of it. This is working in IE 6 and 7, but is not working well in FF (mac/pc) or in Safari.

Here is all code that pertains to that section. It is sure to be woefully poor, as I'm just getting into CSS:

Code:

body {
    color: #FFFFFF;
	background-color: #000000;
    font-family: 'ArialMT', 'Arial', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 19px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    opacity: 1.00;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: center;
    text-decoration: none;
    text-indent: 0px;
    text-transform: none;
    min-width: 800px;
}

.main{
		background-color: #202020;
		width: 800px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
}

.header{
		height: 50px;
		background-image: url('images/header.jpg');
		background-repeat: repeat;
}

p.headline {
		font-size: 32px;
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.8em;
		vertical-align: middle;
}

And there you have it. I'm tearing my hair out over what I'm sure is some small thing that anyone with experience would notice immediately. Any help would be greatly appreciated.

Thanks!

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!

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

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space (&nbsp;) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

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