CSS - Problem With Header Margin In Firefox/safari

Help! I've been holding my head on this one for a couple days.

I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it.

Any help would be greatly appreciated!

www dot sccustomfacade dot com slash site


Thank you!

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

This main navigation does not display properly in Safari and I was hoping somone might be able to tell me why

http://hometown.tmhdesign.com

Why is the Menu on my site not aligned right like it is in IE. and the image is to the right of the logo in Netscape, where as it is ok in IE.
http://impactinvesting.loadedtechnologies.com
What do i do???

Thanks

Hi,

www.personaldevelopment.ca looks great in firefox and IE, but in konqeror/safari (i test in konq because it uses the same html rendering engine) the top left is stretched a tad further than it should. Anyone have any suggestions to fix this? I am out of ideas.


http://www.uberwald.com/images/pdtop.jpg (Thanks zAlanm)

Thanks.

tdela

Having a weird effect in firefox in that it doesn't seem to respect the right margin correctly.

What I am trying to do is line up text so that it flushes to an image that is to the right, but for some reason it pushes the image off the page.

(floatWrap is a clearing div so <br style="clear: both"> is not needed)

Code:

Code:

<div class="floatWrap">

 <div style="float: right;">
  <img src='imageSrc'>
 </div>

 <div id="txtWrap" style="float; left;">

  <div class="floatWrap">
  
   <div style="float; right;">
    Some text which should be right up on the picture and to the left of the title
   </div>

   <div style="float; left;">
    Title which will never reach the text next to the picture
   </div>

  </div>

  <div>
   Text that will reach the picture but for some reason pushes it out of the way instead of wrapping to the next line.
  </div>

 </div>

</div>

#txtWrap is the div that wraps the entire contents to the left of the image. I want this to flush all the way up to the image but give a buffer of 5px.

I tried setting #txtWrap {width: 100%; margin-right: 5px;} but it pushes the pic off the screen. I am assuming this b/c a scroll bar at the bottom of the browser appears

I tried setting #txtWrap {margin-right: 5px;} but the text within keeps pushing farther to the right than it's supposed to, causing the whole wrap to push the to the next line.

Where can I set the margin-right property so it displays correctly?

Hi,

First post on here!

...I have a problem with the default margin in IE being 1px less than Firefox. I've stripped my CSS down to be as naked as possible!

It's quite frustrating as I'm quite experienced with CSS, I guess the small silly things do things like this when you've not been CSS'n for a few months!

HTML:-

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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

test

</body>
</html>

CSS:-

Code:

* { margin: 0; padding: 0; }

Please look at itsjustmelive.com in both firefox and internet explorer. When you roll over the "service" button in Internet Explorer the entire page moves down. Not in firefox because I specified a height. How do I fix this in IE? Thanks! Bev

Hello,

I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\.

**WARNING**
The site is political in nature.

Links to the code:
h**p://www [.] dncreform [.] com / t / css / main.css
h**p://www [.] dncreform [.] com / t /

Thank You,
William

on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE.

any help would be GREAT thanks

I've built a website using only div's and I am only having problems with one of them...
I have the div with a

margin-left : 48px;

In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the

margin-left : 96px;

it aligns properly in Firefox but is then messed up in IE.

I have an attachment of my code its not very large.
Is there any fix for this problem?

I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them.

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

When I do this, it is centered on Firefox:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#encapsule {
	margin-left: auto;
	margin-right: auto;
	}

#centered
{
text-align: center;
}

#centered table
{
margin: 0 auto;
text-align: auto;
}


#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table> </div>

When I do the following, it centers it on Safari:
Code:

<style type="text/css">
<!--
body {
	background-image: url(background.gif);
	background-repeat: repeat-x;
	background-attachment:fixed;
	background-color: #000000;
}
#toptable {
	position: fixed;
	top: 0;
	height: 140px;
	bottom: auto;
	z-index: 2;
}
#encase {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
#bottable {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	top: 140px;
	z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
  <tr>
    <td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
      <tr>
        <td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
            <tr>
              <td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
              <td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
              <td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
              <td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
              <td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
              <td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
              <td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
            </tr>
            <tr>
              <td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
              <td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks!

EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing

Hey y'all.

I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember.

The site is www (dot) texasarmor (dot) com

I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same.

Please help...

Also, please if you could, any critiques? Suggestions?

Thanks very much.

-michael

I've a menu bar that's a horizontally displayed list (i.e. set up with the following values:

ul{
margin-top:5px;
margin-bottom:5px;
margin-left:0px;
}
li.inline
{
display:inline;
padding-left:5px;
padding-right:5px;
border-left:1px solid #fff;
}

Contained in the following code:

<div id="mainNav">
<UL>
<li class="first"><a href="../about/index.html">About</a></li>
<li class="inline"><a href="../contact/index.html">Contact</a></li>
<li class="inline"><a href="../services/index.html">Services</a></li>
<li class="inline"><a href="index.html">Portfolio</a></li>
</UL>

On IE 6.0 it does as required and there is no padding between the first element (About) and the left hand side of the page. BUT, on Firefox, about 5 characters worth of padding is between the left hand of the page and the first element.

Is there a way to get both Firefox and IE to have no padding?

Thanks
</div>

I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you.

Code:

<html>
<head>
	<title>Untitled</title>

<style type="text/css">  
  <!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
	position:relative;
	padding:0em;
	width: 930px;
	height: 27px;
	margin:0em;
	background-image: url(images/nav/navBg.gif);
	background-repeat: no-repeat;
}
.NavLeftPad {
	position:relative;
	padding:0em;
	width: 87px;
	height: 27px;
	margin:0em;
	float:left;
	background-image: url(images/nav/spacer.gif);
	background-repeat: no-repeat;
}
.NavRightPad {
	position:relative;
	padding:0em;
	width: 87px;
	height: 27px;
	margin:0em;
	float:left;
	background-image: url(images/nav/spacer.gif);
	background-repeat: no-repeat;
}
.Nav2pxPad {
	position:relative;
	padding:0em;
	width: 2px;
	height: 26px;
	margin: 1px,0px,0px,0px;
	float:left;
	background-color:#54636D;
}
.NavLink {
  	font-size:12px;
  	color:#FFFFFF;
  	font-family:arial,helvetica,sans-serif;
  	text-decoration:none;
  	font-weight:normal;
  	line-height: normal;
}
.NavBlock {
	position:relative;
  	padding: 7px,3px,0px,0px;
  	height:26px;
  	margin: 1px,0px,0px,0px;
  	float:left;
  	background-color:#54636D;
	text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
  -->
  </style>	

<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray

var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
  var apoldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = aponfunc;
  } else {
    window.onload = function() {
      apoldonload();
      aponfunc();
    }
  }
}
function NavInit(){
	if (theNavState != '') {
		document.getElementById(theNavState).style.backgroundColor = "#E46804";
	}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
	if (theElement != theNavState) {
		document.getElementById(theElement).style.backgroundColor = "#54636D";
	} else {
		document.getElementById(theElement).style.backgroundColor = "#E46804";
	}
}
</script>
  
</head>
<body>

<div id="NavContainer" class="NavContainer">
	<div id="NavLeftPad" class="NavLeftPad"></div>
	<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
	<div id="NavRightPad" class="NavRightPad"></div>
</div>

</body>
</html>