CSS - Ie Breaks Page, That Is Fine In Mozilla

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>

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?

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

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 ?

This is my first css html design and its been quite a struggle.

I've been reading about bugs and hacks for ie 6 but recognising them and implementing the changes I'm stumbling on.

The pages that look the worst are : efficient-heat net / form and efficient-heat net / services. They have been decimated by ie 6.

I've taken out the javascript navigation for validation reasons.



I know about conditional comments so if I can I would like to make adjustments to the code rather than finding hacks.


What's going on with these pages. Can you give me some suggestions of what I need to do.

I appreciate any help, Thanks.

Hello! When the content of my website expands to include scroll bars, a 1px bar of white becomes visible on the right side of my content. I'm aware that the white is from my bg, but I don't know why everything gets off-set.

Also, in IE7 there is a strange spacing issue between my header and the navigation, although it is not evident in other browsers.

This is currently visible: http://www.caseit.org/test

My content:
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=UTF-8" />

<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="header">
	<img src="header.jpg" width="1000" height="140" />
</div>

<div id="navigation">
    <ul id="qm0" class="qmmc">
        <li><a href="javascript:void(0)">Home</a></li>
        <li><a class="qmparent" href="javascript:void(0)">About CaseIT</a>
            <ul>
            <li><a href="javascript:void(0)">Overview</a></li>
            <li><a href="javascript:void(0)">History</a></li>
            <li><a href="javascript:void(0);">Previous Competitors</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">About SFU Business</a></li>
        <li><a href="javascript:void(0)">Why Compete?</a></li>
        <li><a class="qmparent" href="javascript:void(0);">CaseIT 2010</a>
            <ul>
            <li><a href="javascript:void(0);">Organizing Committee</a></li>
            <li><a href="javascript:void(0);">Timeline</a></li>
            <li><a href="javascript:void(0);">Competition Information</a></li>
            <li><a href="javascript:void(0);">Venues</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0);">Sponsors</a></li>
        <li><a href="javascript:void(0);">Media</a></li>
        <li><a href="javascript:void(0);">Contact Us</a></li>
        <li class="qmclear">&nbsp;</li>
    </ul>
</div>

<div id="image">
	<img src="image1.jpg" width="900" height="233" />
</div>

<div id="container">
    <div id="content">
    hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br />
    </div>
    
    <div id="sidebar">
    we
    </div>
    
    <div id="sponsors">
    </div>

</div>

</body>
</html>

My CSS (only the relevant stuff):
Code:

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

body
{
	background-color: #EEEEEE;
	background-image:url(bg.jpg);
	background-position: top center;
	background-repeat:repeat-y;
}

#header
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#navigation
{
	width: 1000px;
	height: 35px;
	background-image:url(linkbg.jpg);
	margin-left: auto;
	margin-right: auto;
}

#image
{
	width: 900px;
	height: 233px;
	margin-left: auto;
	margin-right: auto;
}

#container
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	background-color:#33FF33;
	height: 100%;
}

#content
{
	float: left;
	width: 645px;
}

#sidebar
{
	background-image: url(sidebarbg.jpg);
	background-repeat: no-repeat;
	background-color: #999999;
	float: left;
	width: 255px;
}

#sponsors
{
	float: left;
	width: 900px;
	height: 200px;
}

Additional notes: I use the Meyer reset unedited from his website.

Thank you!

Hello,

I have a page with a large table. The problem is that when you print the page, the browser will add a page break in the middle of a row. I would like to force no-page-breaks for each row, so when you print, it will never print half a row on one page and the other half on the next page. I am assuming css can do this, but I have no idea where to start. I can look up the specifics, can someone just point me in the right direction?

It is possible (although support seems sketchy) to prevent tables from breaking:
Quote:
table {page-break-inside: avoid;}



BUT... the css definitions don't seem to apply to non-block-elements (such as tr and th). Although the CSS validator does not seem to complain, most browsers don't seem to support it. This feature seems to important to have been neglected by WC3, so what am I missing?

My final option (and I shutter to think about it) is to place a non-breaking table inside each row. That seems (to me) very silly, but perhaps it is a way around the problem. It has an additional problem that the td breaks won't line up. The table won't lok much like a table anymore. I am looking for a much happier solution.

Thanks

Hi People...

Not sure if the is in the right forum!?

Basically i have a page that is only ever going to be displayed in IE (using the webbrowser control within a programme). On this page i would like to use 'page-break-after: avoid' but as this is not implemented i am try to go about it differently.

Is it possible to do something along the lines of this...

Quote:
<div style="page-break-after: expression(are we in the bottom eigth of the page?'always':'auto')">


Can this work, oh and i also need help with the bit in bold and italics.

Many Thanks!

Hi, I'm having some problems printing a html document.
I have a print.css file that formats my page. I've set up a class for inserting page breaks where I need them. But for some reason it doesn't work. Also it's doing a strange page break at the beginning of my html document when it's printed.

For some reason I can't add a link to my posts, so here's the url minus the www's and the dot.

jfmackie.com/About_Us/our_team_Sales_copy.html

Please help!

Thanks
sskully

(The relevant subset of my) website is he
http://www.smoli.com

(URL address blocked: See forum rules)

It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...).

Everything works fine in:
- Preview from within FP.
- IE8 and IE9
- Latest version of Chrome.

But not with Firefox (latest version).

Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place".

I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules)

Any idea what is causing the incompatibility?

Many thanks.

Hi all,

I'm fairly new to CSS and this is one of my first attempts at a somewhat complicated layout. The page looks OK in FF, IE 7, Safari, and Opera, but if I zoom in or out while in FF or IE, it breaks the layout by increasing the width between some of the cube divs. Is there any way to fix this?

Link:
http://universalcorner.com/testsite/

Stylesheet:
Code:

body {
	font-family: Arial, "MS Trebuchet", sans-serif;
}

#maincontainer {
	width: 966px;
	height: 748px;
	border: 12px solid #000027;
	margin: 0 auto;
	padding: 0;
}

#header {
	border-bottom: 12px solid #000027;
	height: 140px;
	z-index: 100;
}

#logo {
	background: #fff;
	width: 480px;
	height: 100%;
	border-right: 12px solid #000027;
	display: inline;
	float: left;
	vertical-align: top;
}

#logo p { /* functions as image container */
	position: relative;
	top: 20px;
}

#slogan {
	position: relative;
	background: #78C0FF;
	width: 292px;
	height: 100%;
	border-right: 12px solid #000027;
	display: inline;
	float: left;
	vertical-align: top;
	padding: 0 10px 10px 10px;
	z-index: -100;
	zoom: 1;
}

#consultants {
	position: relative;
	background: red;
	left: 6px;
	width: 150px;
	/* width: 150px; */
	height: 100%;
	display: inline;
	float: left;
	text-align: center;
	margin: 0;
	padding: 0;
	z-index: -100;
}

ul.nav { /* navigation bar */ 
	position: relative;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1em;
	width: 126px;
	height: 586px;
	background: #4486C4;
	padding: 0 10px 10px 20px;
	margin: 0 0 10px 0;
	border: solid #000027;
	border-width: 0 12px 0 0;
	list-style: none;
}

ul.nav a {
	text-decoration:none;
	color:#000;
}

ul.nav a:hover {
	color:#fff;
}

ul.nav li { /* all list items */
	padding: 16px 0 0 0;
	list-style: none;
}

ul.squares {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.squares li {
	position: none;
	background: #000;
	width: 150px;
	height:140px;
	padding: 0;
	margin: 0;
	border: solid #000027;
	border-width: 0 12px 12px 0;
	display: inline;
	float: left;
}

ul.squares li.end {
	border-right-width: 0;
}

ul.squares li.bottom {
	border-bottom-width: 0;
}

#textbox {
	width: 636px;
	height: 292px;
	float: left;
	display: block;
	border: solid #000027;
	border-width: 0 12px 12px 0;
	background: #C1BDFF;
	margin: 0;
	padding: 0;
}

#textbox p {
	margin: 10px;
}

div.cube {
	width: 150px;
	height: 140px;
	border: solid #000027;
	margin: 0;
	padding: 0;
}

#consultation {
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	position: relative;
	display: inline;
	float: left;
	width: 302px;
	height: 130px;
	border: solid #000027;
	border-width: 0 12px 0 0;
	background: #001E8A;
	padding: 10px 0 0 10px;
	margin: 0;
}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Company Name, Inc.</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="maincontainer">
	
<div id="header">
	<div id="logo">
		<p align="center"><img src="images/logo.gif" alt="Company Name, Inc."></p>
	</div>
	<div id="slogan">
		<p><span style="font-size:.85em">Company Name, Inc.<br>
		Anytown, US<br>
		<a href="mailto:info@companyname.com">info@companyname.com</a><br>
		555-555-5555</span><br>
		<span style="font-size: 1.1em; font-weight:bold">Tagline Goes Here</span></p>
	</div>
	<div class="cube" style="float: left; border-width: 0 0 0 0">
		<p align="center"><img src="images/image.gif" alt="Placeholder Image"></p>
	</div>
</div>

<ul class="nav">
	<li><a href="index.php">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Plans & Pricing</a></li>
	<li><a href="#">Our Clients</a></li>
	<li><a href="#">Press Room</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

	<div style="background: #001E8A; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="background: #002455; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div>
	<div style="background: #4486C4; display:inline; float: left; border-width: 0 0 12px 0" class="cube"></div>
	
	<div id="textbox">
		<div style="background: #002455; position: relative; float: right; top: 130px; border-width: 12px 0 0 12px; margin-top: 10px; margin-left: 10px" class="cube"></div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p></div>
	
	<div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: right; border-width: 0 0 12px 0" class="cube"></div>
	<div style="position: relative; top: 0; left: 0; display: block; float: right; border-width: 0 0 12px 0" class="cube"></div>
		<div style="position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div>
		<div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div>
		<div id="consultation">Click here to get your FREE ONSITE CONSULTATION from Company Name</div>
		<div style="background: #78C0FF; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 0 0 0" class="cube"></div>

</div>

</body>
</html>

Any suggestions would be much appreciated.

I have several pages on a website I am developing that will not print correctly in IE7. They print fine in FF 2 & 3, Opera, and Safari. In IE7 the page prints the Header, the menu, and the end content on the second printed page, the main content on does not print on printed page 1. If I comment out enough of either the middle or the end of the html page to make it a single printed page document it prints fine. I have tried building the end of the body content using tables but with the same result: only part of the page prints.

Any ideas on what may be causing this behavior or directions in which I should look?

Any help will be greatly appreciated as I have run out of ideas.

Thanks,

John White

I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code:

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=UTF-8">
<title>Quest Sports Medicine</title>
<link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
.center-wrap p {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000;
	font-size: 30px;
	line-height: 35px;
	padding: 0px;
	float: left;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.center-wrap h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 66px;
	font-weight: bold;
	color: #942610;
	text-align: center;
	line-height: 64px;
	margin-top: 83px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.center-wrap img {
	margin-top: 47px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 248px;
}

}
-->
</style>
</head>

<body>

<div class="all-wrap">

<div class="center-wrap">  
  <h2>NEW WEBSITE<br />
  COMING SOON</br></h2>
  <p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br />
  or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p>
  <img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" />
  </img></div> 


</div>
</body>
</html>

Any thoughts on what I need to change? Thank you.

if you take a look at http://www.cherrysociety.com/mag/art/

you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong?

the css is at http://www.cherrysociety.com/mag/style.css

thanks guys, i appreciate it a lot.

Hi all

I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page.

This probaly isn't possiable but you never know. Any Ideas would be helpfull

Nick Carlevaris