Learn VBA & Macros in 1 Week!

CSS - Site Fine In Ie6/7 - Breaks In Ff?

Full Excel VBA Course - Beginner to Expert

Site Fine In Ie6/7 - Breaks In Ff?	View Content

Hi everyone,

I am stumped at why I'm having this problem in FF only but I'd appreciate any input as to why it's happening.

Take a look at www.spotabusiness.com in FF and see how there is a huge whitespace above the content regardless of what links you click.

It looks fine in IE6 and 7.

Thanks

Full Excel VBA Course - Beginner to Expert

Menu Fine In Ie, Breaks In Ff & Chrome

Similar Tutorials

View Content

I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom

Ie Breaks Page, That Is Fine In Mozilla

Similar Tutorials

View Content

Site Looks Fine In Ie Not Firefox

Similar Tutorials

View Content

I dont know why it is doing this in firefox here is my css coding then is my html file coding

Code:


#header {
    width: 800px;
    height: 164px;
    margin: 0px;
    padding: 0px;
    background: red url(images/header.jpg);
    }
    
#menubox {
	width: 215px;
	height: 194px;
	margin: 0 0 0;
    padding: 0px;
	background: blue url(images/menu.jpg);
	}

#menu-in {
	width: 73px;
	height: 158px;
	padding: 0px;
	margin-left: 41px;
	margin-top: 16px;
	background: red;
	}

#banner {
	width: 585px;
	height:194px;
	margin-left: 215px;
	margin-top: -194px;
	background: green url(images/banner.jpg);
	}
	
#sidepic {
	width: 165px;
	height: 692px;
	background: green;
	}
	
#sidepic-in {
	width: 127px;
	height: 634px;
	margin-left: 19px;
	margin-top: 29px;
	background: brown url(images/sidepic.jpg);
	}
	
#main {
	width: 413px;
	height: 692px;
	margin-left: 165px;
	margin-top: -692px;
	background: purple;
	}
	
#main-in (
	width: 378px;
	height: 628px;
	margin-left: 18px;
	margin-top: 32px;
	background: red;
	}
	
#pictures {
	width: 222px;
	height:505px;
	margin-left: 578px;
	margin-top: -692px;
	background: blue;
	}
	
#pictures-in (
	width: 171px;
	height:424px;
	margin-left: 22px;
	margin-top: 60px;
	background: red;
	}

#links {
	width: 222px;
	height: 187px;
	margin-left: 578px;
	background: red;
	}

#footer {
	width: 800px;
	height: 50px;
	background: yellow;
	}

{

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

		<div id="header">
		
		</div>
		
		
		
		<div id="menubox">
		
				<div id="menu-in">
				</div>
		
		</div>
		
		
		
		<div id="banner">
		
		</div>
		
		
		
		<div id="sidepic">
		
		
				<div id="sidepic-in">
				</div>
		
		</div>
		
		
		
		<div id="main">
		
				<div id="main-in">
				</div>
		
		</div>
		
		
		
		<div id="pictures">
		
				<div id="pictures-in">
				</div>
		
		</div>
		
		
		<div id="links">
		</div>
		
		
		
		<div id="footer">
		</div>



</body>

</html>

Need Css Expertise, Site Breaks On Mac Explorer

Similar Tutorials

View Content

this is so strange,

http://www.spunlogic.net/GMAAC/index.htm

this site works fine on PC browsers but totally messes up on Mac Explorer.

can anybody help me? this is a probono project.

Site Displays Fine In Firefox But Not In Ie

Similar Tutorials

View Content

I apologize if this is supposed to be in the HTML forum. Since html code can be viewed from the source I thought I will post the css code to cross check since I couldn't figure out what is causing the problem. So thought I would post it in CSS forum.

I have the following site that displays fine in Firefox but is all a mess in IE.

http://www.geocities.com/dhaagey08/DhaageyTab2.html

Following is the CSS code I am using.

======================================

* {
margin: 0;
padding: 0;
}
html {
background: #fff url("images/html1.png") repeat-x left top;
}
body {
font-family: arial, sans-serif;
font-size: 12px;
color: #888888;
background: url("images/body.png") repeat-y left top;
width: 1000px;
margin: 0 auto 30px auto;
position: relative;
}
a img {
border: 1px solid #ccc;
}

a {
color: #f48a88;
text-decoration: none;
}
a:hover {
visibility: visible;
/* IE bug fix */
}
a:hover img {
border: 1px solid #729AD7;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
.page {
background: url("images/page3.jpg") no-repeat left top;
padding: 15px 125px 0px 115px;
width: 760px;
}

.header{
position: relative;
width: 760px;
height: 170px;
left: 5px;
top: 0;
background: url("images/header1a.jpg") no-repeat left top;
}

/************* menu1 ******************/

.bar4285801 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285801 table.tabbar {
position: absolute;
width: auto;
height: auto;
top: 0px;
left: 45px;
}

.bar4285801 div {
height: 35px;
width: 115px;
}

.bar4285801 div.button {
background: url(menu47831178.jpg);
}

/****************** menu2 ***********************/
.bar4285846 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285846 table.tabbar {
position: relative;
width: auto;
height: auto;
top: -35px;
left: 390px;
}

.bar4285846 div {
height: 35px;
width: 115px;
}

.bar4285846 div.button {
background: url(menu30455262.jpg);
}
.main {
width: 706px;
margin: 0 auto;
}
.box1 {
border: 1px solid #ccc;
clear: both;
padding: 0 5px 25px 2px;
width: 690px;
height:350px;
position: relative;

}
.lady {
float: left;
width:220px;
height:350px;
background: url("images/lady2s.jpg");

}

#right {
width: 457px;
float: right;
padding-bottom: 130px;
}

.dhaagey {
font-family: monotype corsiva;
font-size: 30px;
color: #89201d;
}
.contact{
font-family: monotype corsiva;
font-size: 18px;
color: #89201d;
float: right;
margin-top: 55px;
}

.photos {

margin-top: 5px;
padding-bottom: 8px;
}
.photos a {
width: 106px;
height: 140px;
float: left;
background: #C2D3EE;
text-align: center;
color: #A2A3A6;
text-decoration: none;
font-size: 11px;
font-weight: bold;
margin-right: 14px;
}
.photos>a {
min-height: 148px;
height: auto;
}
.photos a.last, .greybox-background .right a.last {
margin-right: 0;
}
.photos a:hover {
color: #f48a88;
}
.photos a span {
display: block;
padding-top: 2px;
}
.photos a>span {
padding-top: 5px;
}
.greybox {
border: 1px solid #ccc;
margin-bottom: 39px;
padding: 5px 0;
}
.greybox-background {
background: url("images/gbback.jpg") repeat-y left top;
width: 100%;
line-height: 170%;
}
.greybox-background .left, .greybox-background .right {
width: 321px;
float: left;
padding: 0 10px;
}
.greybox-background .right {
float: left;
padding: 0 19px 0 20px;
}

.greybox-background .right a {
display: block;
float: left;
margin-right: 11px;
margin-top: 8px;
}
.greybox2 {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 9px 7px;
width: 688px;
}
.greybox2 .preview {
float: left;
margin-right: 40px;
margin-right: 44px;
}
.greybox2 .preview img {
padding: 5px;
}
.greybox2 .right {
float: left;
width: 350px;
}
.greybox2 .right a {
float: left;
margin: 0 14px 7px 0;
}
.footer1 {
text-align: center;
padding: 0 27px 3px 27px;
}
.footer1 a {
color: #872323;
text-decoration: none;
}
.footer1 a:hover {
color: #d87126;
text-decoration: none;
}
.footer2 {
font-size: 0px;
line-height: 0px;
height: 15px;
background: url("images/footer.png") no-repeat left top;
margin-left: 110px;

}
.cleaner {
font-size: 0px;
line-height: 0px;
height: 0px;
clear: both;
}
============================================

Any help is greatly appareciated.

Site Breaks In Firefox Prior To Refresh

Similar Tutorials

View Content

Can anyone fix this problem?

The site looks weird in Firefox but when you refresh the browser, it looks okay. why is this

http://www.spunlogic.net/Gmaac/index.htm

It's totally messed up on Mac IE, but I gave up trying to fix that problem

Page Layout. Fine With Ie Not Fine With Firefox

Similar Tutorials

View Content

http://www.refinethetaste.com/step3.htm

Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help.....

s.o.s

Code:

style>
/*review order*/
#checkoutprocess	{ width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .th	{ float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .color	{ float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .noncolor	{ float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#checkoutprocess .checkoutprocess .intprice	{ font-weight:bold; }

#checkoutprocess .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

</style>

Works Fine With Firefox Not Fine With Ie

Similar Tutorials

View Content

I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/

Css/js Nav Breaks On Mac -- Please Help!

Similar Tutorials

View Content

I've been working on putting a css/js text navigation together which thus far has seemed to work as intended on a PC. This morning when I checked it on a mac, it broke down.

Technically it breaks down gracefully I suppose... All links are present and the nav is displayed fully expanded. The problem is that this nav is going to have hundreds of links, and having it fully expanded just isn't practical.

If anyone could take a minute to look at my css & js to see if there's something simple that I'm missing, it'd be great.

You can look at my example page he
http://www.whitesagemedia.com/cssnav.html

All css & js is included in the ssource - no attachements.

Thank you, thank you, thank you, to anyone who can help me out.

-Chet

I Can't Believe I Am Going To Say This, But Looks Fine Now In Ie, But Not In Ff

Similar Tutorials

View Content

finally got everything lining up correctly in IE, but now the background color in not showing up in FF, but it does in IE

here is my code and the bit in bold is what has the problem with the background color in FF

also, is there a way to make the page end when the content ends?

/* CSS Document */
/* basic elements */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #545838;
background-color: #e9ebdc;
background-image: url(images/bg.jpg);
margin-top: 0px;
}
/* specific divs */

#page {
background-color: #fdfdfb;
width : 750px;
padding : 0;
margin : 0 auto;
text-align : left;
height : auto;
border-left : 1px solid #000000;
border-right : 1px solid #000000;
}

#headerimg {
background-image : url(images/callmefarms.jpg);
margin : 0 auto;
width : 750px;
height : 280px;
padding : 0;
}

#topbar {
background-image : url(images/header1.jpg);
margin : 0 auto;
width : 750px;
height : 85px;
padding : 0;
}
#content {
float : left;
width : 500px;
height : auto;
}

#sidebar {
float : left;
width : 243px;
height : auto;
}
#currentevents {
background: #fdfdfb url(images/currentevents.jpg) no-repeat top left;
margin-top: 0px;
width: 500px;
height: 75px;
}
#publications {
background: #fdfdfb url(images/publications.jpg) no-repeat top left;
margin-top: 0px;
width: 500px;
height: 100px;
}
#footer {
background: #a2a876 url(images/footer.jpg);
width : 750px;
padding : 0;
height: 75px;
}
#innercontent {
float : left;
width : 750px;
height : auto;
padding : 0;
}

#resources {
background: #e9ebdc url(images/resources.jpg) no-repeat top left;
width: 243px;
height: 60px;
text-align: center;
}

/* specific classes */

.clear {
clear:both;
font-size:0;
line-height:0px;
height:0;
}

This Did Look Fine

Similar Tutorials

View Content

I just uploaded this to my server, don't know what happend. It looked fine.

The original question I had was how to fix the "right bar" to line up vertically, correctly with the left menu and center text...(something to do with the positioning).

Either way, can someone help me out here...as you'll see I am not the best at CSS. Thanks.

Code:

<div style="position:absolute; left:207px; top:210px; width:427px; height:850px; z-index:3" id="center">
<div class="rightbar" style="position:absolute; left:649px; top:210px; width:140px; height:850px; z-index:4">

Page Breaks...

Similar Tutorials

View Content

Ok people, I have a page that contains 2 tables, one beneath the other...

The table at the top can vary in height, but the table at the bottom is of fixed height...

What I want to do is put some sort of "page break" in, so that the second table is always printed on a second piece of paper...

Any ideas anyone?

Css Line Breaks?

Similar Tutorials

View Content

Hey there. Is it possible to add a line break so that the following markup...

html Code:
Original - html Code <dl> <dt>Posts:</dt> <dd>33</dd> <dt>Topics:</dt> <dd>4</dd> </dl>

  

<dl>
<dt>Posts:</dt>
<dd>33</dd>
<dt>Topics:</dt>
<dd>4</dd>
</dl>

...looks like this?

Posts: 33
Topics: 4

Basically, I want it to be like display: block, but only to the RIGHT of the text. Does that make sense? Just like adding a <br />, but with different HTML.

Line Breaks And Div's

Similar Tutorials

View Content

There must be a better way to accomplish this... I need a line break between the two headers in the page below. As it stands it works in Firefox and IE with <br> tags but this seems sloppy.....Is this what the clear element is for?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
* {
 margin: 0;
 padding: 0;
 }

body {
margin:0;
padding:0;
background-color:#cccccc;
}

#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 1px solid #808080;
background-color:#ffffff;
} 

#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}

#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}

#01 {
position:relative;
} 
#02 {
position:relative;
margin-top:100px;
}

#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080; 
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}

</style>
<body>
<div id="wrapper">
	<div id="sidebar"></div>
	<div id="content">
		<div id="01">Header 1</div>
		<div id="b1w"></div>
		<div id="b2w"></div>
		<div id="b3w"></div>
		<br><br><br>
		<div id="02">Header 2</div>
	</div>
</div>
</body>
</html>

Page Breaks And Mac Osx

Similar Tutorials

View Content

Hi:

I have a MySQL/PHP generated form letter which gets printed and mailed.

I have extablished a CSS font (class?) with a "page-break after" parameter as shown he
PHP Code:
h4 { font-family: Arial, Sans-serif; font-size: 14px; font-weight: 500;
text-align: left; page-break-after: always;}

This works great on a PC running IE. However, On a Mac, running OSX, the page breaks are entirely ignored and it is printed as a single long page.

I have tried using other Browsers (Opera, Netscape, and Safari) and they all heve the same problem.

Does anyone have a suggestion?

Thanks

Sean

Ie Centers Fine, But Not Ff

Similar Tutorials

View Content

site
css

View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF.

How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?)

Thanks
Enjoy your weekends
Bryan

Stacking Ul's ... Fine In Ie6 & Ff2/3

Similar Tutorials

View Content

The code below works perfect in FF2/FF3 and IE6 ...

In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal)

If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically.

Code:

<title>Untitled Document</title>

<style type="text/css">
	body 
	{
	margin: 0 auto;
	padding: 0 auto;
	}
	#lottoNumbersWrapper
	{
		float: left; 
		width: 700px;
		height: 118px;
		background-image: url(images/structural/lottoNumbersBG2.jpg);
		background-repeat: no-repeat;
		border: 0px solid black;
	}

		.lottoNumbers
		{
			margin: 0;
			margin-right: 20px;
			margin-top: 10px;
			padding: 0;
			border: 0px solid black;
		}
			.lottoNumbers li {
				list-style: none;
				list-style-type: none;
				float: left;
				font-size: 13px;
				height: 40px;
				width: 45px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				margin-left: 0px;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				background-position: center;
				background-repeat: no-repeat;			
				border: 0px solid black;
				cursor: pointer;
			}
				.lottoNumbers li.white
				{
					background-image:url(images/whiteDot.gif);			
				}
				.lottoNumbers li.blue
				{
					background-image:url(images/BlueDot.gif);			
				}
			.lottoNumbers li span {
				display: block;
				margin-top: 12px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				color: #000;
			}
</style>
</head>

<body>
            <div id="lottoNumbersWrapper">
              
 
<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>
<br />

<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>            
            </div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>

Page Looks Fine In Ff But Not In Ie

Similar Tutorials

View Content

See here

The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution.

Any tips ?

Fine In Ie7 But Not Firefox

Similar Tutorials

View Content

i have a thick left hand border that does not show in firefox, the css is...

Code:

#container{
	margin: 0 auto;
  background-color:#ffffff;
  width:465px;
  border-left:335px solid #8FADB4;
  border-right:1px solid #8FADB4;
  border-top:1px solid #8FADB4;
  border-bottom:1px solid #8FADB4;
  background:  url('images/br_logo.jpg') no-repeat bottom right;

}

does anybody know why the left border does not show?

thanks

Little Help With Ie Please.. Firefox Si Fine..

Similar Tutorials

View Content

First off, i'd like to say:

So here's the code i'm screwin' with:

ul.navlinks {
font-weight: bold;
background-color: #d7d7d7;
margin: -5px -10px 0px -10px;
padding: 0px 10px 1px 10px;
border-bottom: 1px solid #2169AD;
}

Looks great in firefox (color fills the whole div) but in IE (i'm using 6.0), there's about 20 pixes to the right that arn't colored.

Any suggestions?

Thanks