CSS - Layers Reacting Differently?

I was playing around with the CSS on my blog to try and get the header alligned correctly.

In Firefox I added both a bottom and top margin to the #logo to make it align correctly. the bottom margin figure was -45px;.

When checking the site in Chrome there was still a large gap under the logo. So after a little trial and error it seemed that Chrome wanted -125px as the bottom margin figure to achieve my desired results.

So I've left it at -125px but then back on Firefox the navmenu is now aligned wrong.

Any ideas?

**EDIT**
I can't link to my site so you can see it as I'm a new user.

Hi there,

I have some CSS tabs, but they are displaying differently in IE7 than FF.



This is my code:
PHP Code:
#nav {
    float:left;
    width:100%;
    background:yellow;
    height: 27px;
    font-size:93%;
    line-height:normal;
    list-style: none;
    margin: 0px;

    }
    
    
    #nav li {
    float:left;
    background:url("images/tab_left.jpg")
      no-repeat left top;
    margin:0;
    padding:0px;
    list-style: none;
    }
  #nav a, #navheader strong, #nav span {
    display:block;
    background:url("images/tab_right.jpg")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    } 





and my html:

PHP Code:
<div id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="current"><a href="#">News</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div> 






Any ideas whats causing these different outcomes?

Hello all,

I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible?

Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this?


Thank you!

http://www.lovemeforme.org/alecia/

I've made it so it works perfect in FF, IE, Netscape.. but in Opera it's messed up. Is there anyway I can specialize a stylesheet for just Opera?

Also, anyone know of any free services that provide screen shots for all common web browsers. I remember I had a link a while ago, but I've since lost it.

Thanks for the help in advance.

Hi,
I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css)

Code:

1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html

2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html

To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on?

I've been working some more on a new layout for one of my websites this weekend. However, I'm having trouble getting the layout to display the same in all browsers. Everything is looking exactly how I hoped in Firefox, but when the same page is viewed in Internet Explorer, some things appear rather differently.

Sample Page: http://www.mybb-emods.com/new/index.htm
CSS File: http://www.mybb-emods.com/new/stylesheet.css

Firstly, the background of the navigation bar at the top of the page should remain grey at all times apart from when a link is hovered, in which case it changes to blue. This is happening in both browsers, but in Internet explorer, only part of the background is changing as opposed to all of it. It's easier to show this than to explain, so I've posted two screenshots below to demonstrate. The first screenshot shows the navigation bar in Firefox, the second shows the same bar in Internet Explorer. I'm assuming this is probably something to do with the padding values I have assigned, but I have been unable to find a working solution for all browsers.

Also, I'm having a problem with the left margin of my main page content. The margins down the left side of the main page should all be 20px from the left hand border, and this shows correctly again in Firefox. However, in Internet Explorer, the left margin of the navigation bar appears correctly, but the content beneath it appears to have a much larger margin and as such the layout appears incorrectly.

If anyone has any idea how to fix these problems then I would very much appreciate the advice.

Thanks.

Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it:
http://www.iqdrop.com/newiq/index.php
Then in IE

You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE.

I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help.

I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome.

IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off.

Any ideas how to fix this issue?

Thanks!

[EDIT]
I meant Safari and Chrome not Safari and FireFox 3.

This problem is in Internet Explorer.

Here's the first page that looks the way it should:
http://www.invistation.com/invite_me/contact.php

And here's the other page, that references the same css file, but rendered differently:
http://www.invistation.com/invite_me/resetpass.php

My CSS File:
http://www.invistation.com/invite_me/css/index2.css

What gives? It doesn't make any sense why the form on the resetpass page is shifted more to the right than the form on the contact page. I'm using the same div for the two forms.

I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly.

I've checked that the files are exactly the same, so I do really don't know what the problem is.

Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html

And what it looks like locally: http://www.forma3.com/fs/jmf/local.png

Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code:

Code:

<div style='padding: 15px; text-align: left;'>
	<div style='float: left;'>
		<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
			<tr>
				<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
			</tr>
			<tr>
				<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
			</tr>
			<tr>
				<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
			</tr>
			<tr>
				<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
			</tr>
			<tr>
				<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
			</tr>
		</table>
	</div>
	<div style='float: right;'>
		<div style='margin-bottom:5px;'>Element Titles:</div>
			<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
			<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
			<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
			<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right;	margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
		</div>
	</div>
</div>

Code:

<?xml version="1.0" encoding="UTF-16"?>
<!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>
    <title>Tableless structure</title>
    <style type="text/css">
    <!--
        * {
        font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
        width: 800px;
        height: 500px;
	margin-left: auto;
	margin-right: auto;
	}
	body {
	margin: 0px;
	padding: 0px;
	margin-top: 40px;
	}
	#head {
	background: LightGreen;
	width: 100%;
	height: 15%;
	}
	#menu {
	background: Pink;
	float: left;
	width: 20%;
	height: 80%;
	}
	#body {
	background: LightBlue;
	float: right;
	width: 80%;
	height: 80%;
	}
	#foot {
	background: Silver;
	clear: both;
	width: 100%;
	height: 5%;
	}
     -->
     </style>
  </head>
  <body>
    <div id="head">Header</div>
    <div id="menu">Menu</div>
    <div id="body">Body</div>
    <div id="foot">Footer</div>
  </body>
</html>

This code works fine on Firefox by centering horitzontally the page but in IE7 stays left aligned.

Can you help?

Thank you!

Running here

i have a two div tags but the upermost tag sits outside the boundary of the one below

and the page seems to be over stretched in IE7

the page address is www.ftpimage.com

does anyone have any suggestions my css is as follows

Code:

body {
	margin: 0px;
	background: url(../img/top_bg.gif);
	background-repeat: repeat-x;
	font-family: Verdana, Arial, sans-serif;
    font-size: "15";
}

p {
	line-height: 50px;
	margin: 11px 0 10px 0;
	padding: 0px;
}

h2 {
	color: #9f9f9f;
	margin:0px;
	padding:0px;
	font-size: 15px;
}

ul {
	font-size: 10px;
	margin:0;
	padding:0;
	list-style-image: url(../img/bullet.gif);
}

a {
	color: #93B300;
}

a:hover {
	text-decoration: none;
}

blockquote{
	background: #F7FDE3;
	color: #606060;
	padding: 0px;
}


/**** Main Container ***/


#wrap {
       margin-left: 10px;
       margin-right: auto;
       width: 640px;
}


/**** Top ***/


#top {
	width: 155%;
	height:85px;
	color: #fff;
	background: #000 url(../img/top_bg.gif);
	overflow:hidden;
}

#top h2
{
    color: #87CEFA;
    letter-spacing: 3px;
    font-size: 2.4em;
    font-weight: normal;
    position: relative;
    margin: 0px;
    top: 33px;
    display: block;
    float: left;
    background: url(../img/bg_t.gif) no-repeat;
    padding-left: 8px;
}

#top h2 a {
	color: white;
	text-decoration: none;
}

#top h2 a:hover {
        color: #93B300;
}

#page
{
    margin-right: 20px;
    max-width: 10px
    
    
   
   
}


/**** Main Menu ***/


#menu {
	display: block;
	float:right;
}

#menu ul {
	margin: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	white-space: nowrap;
}

#menu li a {
	display: block;
	padding: 20px 10px 12px 20px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

* html #menu a {width:1%;}

#menu li a:hover {
	background: url(../img/bg_menu.gif);
}

#menu li a.current {
	letter-spacing: 1px;
	color: gray;
	background: url(../img/bg_menu.gif);
}

#menu li a.current:hover {
	color: #fff;
}


/**** Content Container ***/


#content {
	width: 65%;
	margin-top:30px; 
	border: solid 2px black;
	 
	
}

#content h2 {
	margin: 0;
	padding: 10px 0 10px 0;
}


/**** Content ***/


#left ul {
	padding: 15px 0 15px 35px;
	margin:0;
}

#left li {
	margin-bottom:5px;
}

#left .box {
	width: 390px;
	float:left;
	display: block;
       margin-left: 20px;
	display: inline;
}


/**** Sidebar ***/


#right {
	width: 315px; 
	float: right;
	display:block;
	margin-top: 10px;
}

#right .box {
	width: 20em;/*280px*/
	background: #87CEFA;
	border: 1px solid #E1E1E1;
	padding:10px 10px 55px 10px; 
	float: right;
	
}

#right .box h2 {
	font-size: 3.1em;
	margin: 0px 0 0px 0;
	padding:0px 0 5px 0;
}

#right .box a {
	margin: 10px 0 10px 0;
	color: #93B300;
	font-size: 20px;
}

#right .box p {
	margin: 5px 0 10px 0;
	line-height: 15px;
}

#right .box ul {
	padding: 0 0 0px 20px;
	margin:10px 0 10px 0;
}

#right .box li {
	margin-top:5px;
}

html>body .box
{
width: auto;
min-width: 20em;
}

#nav{ list-style: none; margin: 2.0em 0; width: 25em; float: right;}
#nav li{ padding: 0; margin: 0; }
#nav a{
	display: block;
	height: 2.0em;
	padding: 0.3em 0.3em 0.3em 0.8em;
	border:solid;
	border-width:medium;
	border-bottom: 2px; /*solid #1a1a1a*/
	border-top: 2px; /*solid #1a1a1a*/
	border-color:Black; 
	color: black;
	background-color: #87CEFA;
	font-weight: bold;
	text-decoration: none;
	font-size:medium 

	}

#nav a:hover{
	color: #1a1a1a;
	background: url(../img/bg_t.gif) no-repeat;
	background-color: #fff;
	font-weight: bold;
	}	

/**** Clear Div ***/


#clear {
	display: block;
	clear: both;
	width: 100%;
	height:1px;
	overflow:hidden;
}


/**** Footer ***/


#footer {
        margin: 40px auto 0 auto;
	text-align: center;
	border-top: dotted 1px gray;
	padding: 20px 0 20px 0;
	width: 70%;
}

#footer p {
	margin: 0px;
	padding: 0;
 

one line of text isn't in the position that i want it to be for ff and ie. Chrome is able to read the css code:
chrome:
Code:

p1 {
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
display: block;
-webkit-margin-befo  5.4em;
-webkit-margin-after: 1em;
-webkit-margin-start: 220px;
-webkit-margin-end: 0px;
}

ff,ie:
p1{
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
}
I want the " learning from questions" at the bottom right of the logo. Thanks for helping!
site link: http://www.nyitforums.com/

Hi,

I have an issue with Vertical menu contained in Re-sizable DIV. This menu appears differently in IE vs Firefox (Please refer attached Image)

http://img402.imageshack.us/img402/7830/resize.png

URL

Attached Image

Following is the Code for the Style class mentioned in the image

Code:

.cwc_navMenuLabel {
line-height:14px;
vertical-align:top;
white-space:nowrap;
}

.AccButton{
	float: right;
	align:right;
	text-align: right;
	position: relative;
	top: -1px;
	z-index: 10;
	width: 16px;
	margin:0 5px 0 0;	
}

/*USE THIS FOR IE*/

.AccLiIE {
	display: inline;
	background-color: #A2C2E4;
	background-image: url(../../images/acordion_backgr.png);
	background-repeat: repeat-x;
	border-top: 1px solid #7591AC;
	height: 19px;
	white-space: nowrap;	
}


/*USE THIS FOR NON-IE BROWSER*/

.AccLi {
	background-color: #A2C2E4;
	background-image: url(../../images/acordion_backgr.png);
	background-repeat: repeat-x;
	border-top: 1px solid #7591AC;
	white-space: nowrap;
}

Please let me know the change that i have to do in CSS to make the menu appear in IE the way it looks in Firefox.

Thanks and appreciate your help