CSS - Alignment Performing Differently In Ie7 And Firefox

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

Hi,

I've searched various threads in this forum, even tried re-iterating the question in another similar post to no avail. How is it that in Firefox (1.0) I get overflow occuring on a nested div, yet in IE (6) I do not?

i would like vertical scrollbars ONLY, if content is overflowing and not horizontal scrollbars-using a WC3 valid solution if possible.

Thanks in advance

A snippet of my css...
PHP Code:
/*css document*/
/* container div class*/
.outer{
    width: 336px;
    height: 448px;
    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    float: left;
    margin: 0 0 0 10px;
    background-color: #ffffff;
    /*background:url("../images/pg_curl.gif") top right no-repeat;*/
}
/* inner-content div class*/
.inner
{
    width: 298px;
    height: 388px;
    
    border-color: #000000;
    border-width: 1px;
    
    /*margin: 34px 0 0 19px;*/
    margin: 2px 0px 0px 19px;
    font-size: 12px;
    /*line-height: 15px;*/
    color: #000000;
    clear: both;
    /*scrollbars for content overflow*/
    overflow:auto;
}

/* Example of problem: at the momment, in Firefox inserting this into the .inner classed div is creating horizonal overflow*/

.navigation {
    width: 298px;
}
.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation li {
    border-bottom: 1px solid #ED9F9F;
}
.navigation li a:link, .navigation li a:visited {
    display: block;
    padding: 2px 2px 2px 0.5em;
    border-left: 10px solid #711515;
    border-right: 1px solid #711515;
    background-color: #B51032;
    color: #FFFFFF;
    text-decoration: none;
}
.navigation li a:hover {
    background-color: #711515;
    color: #FFFFFF;
}
.navigation ul ul {
    margin-left: 12px;
}
.navigation ul ul li {
    border-bottom: 1px solid #711515;
    margin:0;
}
.navigation ul ul a:link, .navigation ul ul a:visited {
    background-color: #ED9F9F;

    color: #711515;
}
.navigation ul ul a:hover {
    background-color: #711515;
    color: #FFFFFF;
} 

You'll have to bear with me on the CSS, the file is a mess. I couldn't get it to do what I want, so I had to copy the file from someplace else, so there's alot of code commented out.
The HTML is much cleaner though!



The issue is in the image above is that the 'Contact' and 'Back to Projects' images are too high in Safari. In IE and Firefox they're placed correctly.
All the other images on the rest of the site line up fine, as you can see with the JW logo, Resume link, and even the bar across the screen

All the images are in their own < li > (I think it's weird myself, but it works). And the placement is done in the CSS.

Code:

<li id="ResumeHigh"><a href="resume.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/resume_rollover.gif',1)"><img src="images/resume.gif" name="resume" border="0"  id="about" /></a></li>

<li id="ContactHigh"><a href="contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_rollover.gif',1)"><img src="images/contact.gif" name="contact2" border="0" id="contact2" /></a></li>

<li id="BackHigh"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Back','','images/back_to_proj_rollover.gif',1)"><img src="images/back_to_proj.gif" name="Back" width="141" height="9" border="0" id="Back" /></a></li>

And the CSS Alignment:
Code:

#ResumeHigh {left:550px; top: 62px; width: 141px; height: 11px;}
#ContactHigh {left:550px; top: 78px; width: 141px; height: 11px;}
#BackHigh {left: 550px; top: 101px; width:141px; height:9px;}

Full Pages:
http://www.jerrywatersarchitect.com/sample/contact.asp
http://www.jerrywatersarchitect.com/sample/jw2.css


Any ideas whats causing the 'Contact' and 'Back to Projects' to be a few pixels too high?
I appreciate any help you can provide.

Hi everyone

A bit of a call for help with some niggly issues - all found on the following page and css:

http://www.crashingbydesign.com.au/rsaa/index.html
http://www.crashingbydesign.com.au/rsaa/home.css

1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!!

2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on??

All help appreciated.

Cheers

Bevester

The link to my page is:
crowncontainer.com/dev/activity_test.php

you'll have to post the www. in front, i'm a new user and can't post URL????

I have validated both the CSS and the XHTML.


If you open in IE, the width starts out at 200px, which is what I've defined in CSS. If you open it in Firefox, it is wider and I don't know why?

Also - when you click on the submit button, the program will return data in an AJAX call and the data will load in a div directly underneath the form. When the data is returned in IE, the width of the left nav will increase to the same width that displays in Firefox.

Because of this, I have to believe that there is some buggy code that causes it to 'sort of' work in IE but not in Firefox?

Can someone take a stab at this and help me? I want to keep my left nav width to 200px;

Hello,

I have a question about alignment in firefox.
The menu i have has some space while it needed to reach the top, like it does in IE.

The page you can see on: http://217.115.203.132/dcvtest/

I hope anyone has a solution for me.

Thanks in advance.

Tim

Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness.

I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left.

I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS.

As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here.

The code is below. Please let me know what I'm doing wrong!

Code:

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>

<body>
<div id="container">
    <div id="navbar">
	   	<div class="navspacer">
        	<a href=""></a></div>
        <div class="nav1">
        	<a href="plans.html"></a></div>
        <div class="nav2">
        	<a href="phones.html"></a></div>
        <div class="nav3">
        	<a href="broadband.html"></a></div>
        <div class="nav4">
        	<a href="index.html"></a></div>
		<div class="nav5">
        	<a href="services.html"></a></div>
		<div class="nav6">
        	<a href="accessories.html"></a></div>
   		<div class="nav7">
        	<a href="locations.html"></a></div>
          <div class="display">
          <div class="presentation">
          	<div class="columnzone">
		<div class="column1">
			<div class="columncontent">
				  <?php
         	$a = new Area('Sidebar');
         	$a->display($c);
         	?>
			</div>
            </div>
		<div class="column2">
			<div class="columncontent">
			    <?php
         	$a = new Area('Main');
         	$a->display($c);
         	?>
			</div>
		</div>
		<div class="column3">
			<div class="columncontent">
			    <?php
         	$a = new Area('Column3');
         	$a->display($c);
         	?>
			</div>
		</div>
        </div>
        </div>
	<div id="bottomnav">
        <div class="bnav1">
        	<a href="contactus.html"></a></div>
        <div class="bnav2">
        	<a href="feedback.html"></a></div>
        <div class="bnav3">
        	<a href="employment.html"></a></div>
      	</div>
        </div>
        </div>
</div>
</div>
<div class="footer">
<?php  $this->inc('elements/footer.php'); ?>
</div>
</body>

And the CSS:

Code:

/* CSS Document */

body {
	font:12px Trebuchet MS, Tahoma, Arial;
	color:#000000;
	background:url(/images/bg.jpg) repeat;
				
}

#container {
margin:0 auto;
width:1050px;
bottom:0;
}

/*	NavBar 	*/

#navbar {
	width: 928px;
	height: 90px;
	position:absolute;
	padding-left:50px;
	top:0;
}

#navbar li {
    list-style:none;
    display:inline;
}

.navspacer a {
	display:inline;
	float:left;
	width: 20px;
	height: 90px;
	background:url(/images/nav00.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a {
	display:inline;
	float:left;
	width: 132px;
	height: 90px;
	background:url(/images/nav01.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a:hover { 
	background:url(/images/nav08.png) no-repeat;
}

.nav2 a {
	display:inline;
	float:left;
	width: 127px;
	height: 90px;
	background:url(/images/nav02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav2 a:hover { 
	background:url(/images/nav09.png) no-repeat;
}

.nav3 a {
	display:inline;
	float:left;
	width: 139px;
	height: 90px;
	background:url(/images/nav03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav3 a:hover { 
	background:url(/images/nav10.png) no-repeat;
}

.nav4 a {
	display:inline;
	float:left;
	width: 114px;
	height: 90px;
	background:url(/images/nav04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav4 a:hover { 
	background:url(/images/nav04.png) no-repeat;
}

.nav5 a {
	display:inline;
	float:left;
	width: 126px;
	height: 90px;
	background:url(/images/nav05.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav5 a:hover { 
	background:url(/images/nav12.png) no-repeat;
}

.nav6 a {
	display:inline;
	float:left;
	width: 129px;
	height: 90px;
	background:url(/images/nav06.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav6 a:hover { 
	background:url(/images/nav13.png) no-repeat;
}

.nav7 a {
	display:inline;
	float:left;
	width: 141px;
	height: 90px;
	background:url(/images/nav07.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav7 a:hover { 
	background:url(/images/nav14.png) no-repeat;
}

/*	NavBar End 	*/


/*	Central Display Area 	*/

.display {
	display:block;
	height:475px;
	left: 74Px;
	position: static	;
	width:950px; 
	background:url(/images/display.png) top no-repeat;

}

/*	Central Display Area 	*/


/*	Presentation Area 	*/

.presentation {
	display:block;
	height:466px;
	position: absolute;
	left:71px;
	width:908px;
	top:421px;
	background:url(/images/presentation01.png) top no-repeat;
}


.columnzone {
	margin-top:-35px;
	padding-top:52px;
	position:relative;
	z-index:0;
}

.columncontent {
	padding: 18px 0px 0px 0px;
}

.column1 {
	width:259px;
	float:left;
	padding: 0px 15px 10px 20px;
}

.column2 {
	width:303px;
	float:left;
	padding: 0px 10px 10px 9px;
}

.column3 {
	width:259px;
	float:left;
	padding: 0px 10px 10px 15px;
}

/*	Presentation Area End	*/


/*	Bottom Nav	*/


#bottomnav {
	display:block;
	width: 928px;
	height: 90px;
	position:absolute;
	margin-top:887px;
	margin-left:21px;
}

#bottomnav li {
    list-style:none;
    display:inline;
}

.bnav1 a {
	display:inline;
	float:left;
	width: 326px;
	height: 37px;
	background:url(/images/presentation02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav1 a:hover { 
	background:url(/images/presentation05.png) no-repeat;
}

.bnav2 a {
	display:inline;
	float:left;
	width: 250px;
	height: 37px;
	background:url(/images/presentation03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav2 a:hover { 
	background:url(/images/presentation06.png) no-repeat;
}

.bnav3 a {
	display:inline;
	float:left;
	width: 332px;
	height: 37px;
	background:url(/images/presentation04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav3 a:hover { 
	background:url(/images/presentation07.png) no-repeat;
}


@-moz-document url-prefix() {
  #bottomnav {
   	display: inline-block;
	position:absolute;
	width: 928px;
	height: 90px;
margin-left:0px;
padding:0 0 0 0; 
} 

/*	Bottom Nav End	*/

.footer {
	background:url(/images/footer.png) no-repeat;
	height:60px;
	text-align:center;
	color:#fefaca;
	padding-top:18px;
	margin-top: -500px;
	margin-bottom:20px;
	position:relative;
	z-index:2;
}

ok when you take a look at http://www.mostardesigns.com/razorsedge/ you can clearly see what the alignment problem is.

Here is the code below:
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>Razor's Edge</title>
<style type="text/css">
<!--
@import url("css/general.css");
-->
</style>
</head>
<body>
<center>
	<table width="898" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td colspan="10"><img src="images/banner.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td><img src="images/menu_1.jpg" border="0" alt="" /></td>
		<td><img src="images/menu_home_1.jpg" border="0" alt="Home" /></td>
		<td><img src="images/menu_servers_1.jpg" border="0" alt="Services" /></td>
		<td><img src="images/menu_tournaments_1.jpg" border="0" alt="Tournaments" /></td>
		<td><img src="images/menu_downloads_1.jpg" border="0" alt="Downloads" /></td>
		<td><img src="images/menu_sponsors_1.jpg" border="0" alt="Sponsors" /></td>
		<td><img src="images/menu_proshop_1.jpg" border="0" alt="Proshop" /></td>
		<td><img src="images/menu_forums_1.jpg" border="0" alt="Forums" /></td>
		<td><img src="images/menu_contact_1.jpg" border="0" alt="Contact" /></td>
		<td><img src="images/menu_2.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td colspan="2"><img src="images/menu_3.jpg" border="0" alt="" /></td>
		<td colspan="6" class="border_top"></td>
		<td colspan="2"><img src="images/menu_5.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td class="border_left"><img src="images/border_left_1.jpg" border="0" alt="" /></td>
		<td colspan="8" class="bg_main">
		<table width="832" border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td class="bg_menu"><div class="bg_menu_left">&nbsp;</div></td>
			<td class="bg_center"><img src="images/tournament.jpg" border="0" alt="" /></td>
			<td class="bg_menu"><div class="bg_menu_right">&nbsp;</div></td>
		  </tr>
		</table>
		</td>
		<td class="border_right"><img src="images/border_right_1.jpg" border="0" alt="" /></td>
	  </tr>
	  <tr>
		<td><img src="images/bottom_1.jpg" border="0" alt="" /></td>
		<td colspan="8" class="border_bottom"></td>
		<td><img src="images/bottom_3.jpg" border="0" alt="" /></td>
	  </tr>
	</table>
</center>
</body>
</html>

CSS:
Code:

/* BEGIN GENERAL SETTINGS */
	body	{
		background-color:#B0D2F4;
		background-image:url(../images/body_bg.jpg);
		background-position:top;
		background-repeat:repeat-x;
		margin:0px;
		text-align:center;
		}
	body, td, div	{
		text-align:left;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#333333;
		}
		
/* BEGIN TD SETTINGS */
	td.border_top	{
		background-image:url(../images/menu_4.jpg);
		background-repeat:repeat-x;
		}
	td.border_left	{
		width:30px;
		background-image:url(../images/border_left_2.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		}
	td.border_right	{
		width:30px;
		background-image:url(../images/border_right_2.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		}
	td.border_bottom	{
		height:30px;
		background-image:url(../images/bottom_2.jpg);
		background-repeat:repeat-x;
		}
	td.bg_main	{
		background-color:#EFEFEF;
		padding:3px;
		vertical-align:top;
		}
	td.bg_menu	{
		background-color:#829CB5;
		vertical-align:top;
		padding:0px;
		width:206px;
		}
	td.bg_center	{
		padding-left:2px;
		padding-right:2px;
		padding-top:0px;
		padding-bottom:0px;
		vertical-align:top;
		width:420px;
		}
		
/* BEGIN DIV SETTINGS */
	div.bg_menu_left	{
		background-image:url(../images/menu_left_bg.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		width:200px;
		padding:2px;
		margin:3px;
		}
	div.bg_menu_right	{
		background-image:url(../images/menu_right_bg.jpg);
		background-repeat:repeat-y;
		vertical-align:top;
		width:200px;
		padding:2px;
		margin:3px;
		}

Sounds simple... but I can't find an answer.

I've a simple table row with a css background image.

In the row I've my text links and two images that are links.

While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top..

Any advice?

The page can be seen at addcolour (co uk extension)

CSS in a folder css the file name is addcolour

Many thanks

d

I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV.

Visually, I am attempting this:
PHP Code:
=================================================================
User: John Doe                                Main Menu :: Logout
================================================================= 





To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content.

I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that.

The CSS:
PHP Code:
#loginbar {
 height: 14px;
 font-size: 7pt;
 line-height: 7pt;
 font-weight: bold;
 color: #ffffff;
 background: #285064;
 margin: 0;
 padding: 3px 3px 0px 3px;
}
 
#logout {
 float: right;
 display: inline;
}

.loglink {
 font-size: 7pt;
 line-height: 7pt;
 font-weight: bold;
 color: #ffffff;
} 





And the markup:
Code:

<div id="loginbar" align="left">
User: '.$_SESSION['fullname'].'
<div id="logout" align="right">
<a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a>
</div></div>

This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.)

Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point

Hello everyone. I would like to thank anyone who attempts to solve this in advance.

I have a css page here . If you need me to post the code let me know, but I temporarily have embedded styles so I figured you could view source easily enough. The entire content of the page centers just fine in Firefox2, but unfortunately is aligned to the left in IE7 on PC. Does anyone know why this might be?

Thanks again for your expertise and time,
phpkata.

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web.

The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari.

This is what it looks like in IE7:



This is what it looks like in IE8 and all the other browsers mentioned above:



The page can be seen he http://dev.asbco.com/products/commercialindustrial/

Any help is greatly appreciated!

Thanks!

If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page.

I have no idea why it'd be doing this.

View in IE
View in FF

Here's the CSS used :

Code:

#footer {
	background: #49515C url(img/header_right.gif) no-repeat 100%;
	border-bottom: 5px solid #fff;
	border-top: 10px solid #fff;
	text-align: center;	
	color: #fff;
	font-size: 0.8em;
	padding: 10px;
	line-height: 16px;
	clear: both;
	}

Can anyone see a problem?

Hi,

I have an unordered list displaying contact info for several people. For example:

name1
address1
phone1

name2
address2
phone2

name3
address3
phone3

I'd like there to be a blank line between each person's info (just like it is displayed above). To do this, I added line breaks after each list item's closing tag. Here is the code:

Code:

<ul>
<li>name1<br />address1<br />phone1<br /></li><br />
<li>name2<br />address2<br />phone2<br /></li><br />
<li>name3<br />address3<br />phone3<br /></li><br />
</ul>

In Safari and Firefox (Mac and Win) there is a blank line between each section of contact info (the desired effect). In IE6, there is no blank line. It looks like this:

name1
address1
phone1
name2
address2
phone2
name3
address3
phone3

I'm sure there is a fix out there, I just haven't found it yet. Any help is appreciated.

- Tim